引言
大家好👋
这是我第一次认真尝试使用 React 和 Tailwind CSS 从零开始构建一个网站。学习这些工具如何协同工作，既有趣又充满挑战。
任务是什么？重新设计一个Figma设计，并将其转化为一个真实可用的作品集网站。与之前只需要编辑一些现有HTML和CSS的任务相比，这次的任务完全不同——我必须从零开始设置一切，构建组件，使用Tailwind进行样式设计，并确保网站看起来与设计完全一致。
难点是什么？Figma文件中有 多个 布局和设计——这让我一开始就感到困惑：“我该从哪里开始？”
项目启动：React设置并不总是那么简单
我首先设置了一个新的React项目——但它并不像我预期的那样即插即用。我原以为只需运行一个快速安装命令就可以直接开始编写代码，但我很快意识到选择一个 构建工具 是这个过程的重要部分。
有几个流行的选择——Create React App (CRA)、Vite、Next.js 等。我进行了一些研究（也有一点恐慌）后选择了 Vite，因为它快速、现代，并且被推荐用于新的React项目。
要开始，我运行了以下命令：
npm create vite@latest
然后我选择了 React 并选择了 JavaScript 而不是TypeScript。这部分感觉还算容易——但我很快意识到我还没有完成。
我还需要设置 Tailwind CSS 来进行样式设计。这意味着安装Tailwind，更新配置文件，并确保样式实际显示在屏幕上（这…并不总是第一次就能成功😅）。
以下是我安装Tailwind的步骤：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
然后我更新了 tailwind.config.js 文件，以包含我的文件路径：
content: [
"./index.html",
"./src/**/*.{js,jsx}",
]
最后，我将Tailwind的基础样式导入到我的主CSS文件中：
@tailwind base;
@tailwind components;
@tailwind utilities;
起初，什么也没有渲染出来。原来我在配置文件中打错了路径😅——学到的教训是：一定要仔细检查你的设置。另外，早点阅读官方文档可能会让我免去几个小时的困惑。
处理Figma设计而不崩溃
项目设置完成后，我转向了Figma文件。是的——它内容很多。多个部分、布局、排版、按钮、交互…很容易感到不知所措。
所以我把它分解了。
我首先确定了 主要布局 部分：导航栏、英雄部分、关于、项目、联系表单和页脚。然后我寻找了模式和可重用的部分——按钮、卡片、标题等。
以下是我处理一些组件的方法：
导航栏
在首页上，导航栏有两种不同的行为。首先，它是透明的，位于英雄部分的上方。但当你滚动时，它会变成一个粘性导航栏，浮动在页面顶部。
我使用了 React钩子 来跟踪滚动位置，并基于此更新导航栏的样式。经过一些尝试和错误，最终我让它工作了。
在联系页面上，导航栏要简单得多——只是一个普通的粘性导航栏，没有任何花哨的滚动行为。
跑马灯图片滑块
这个部分让我最头疼：在“作品”部分有一个水平滚动的图片滑块。
静态布局很容易——只需使用 flex 和一些间距。但动画呢？就没那么简单了。起初，它看起来不流畅，并且会以一种破坏循环的方式重置。
最终，
