使用NextJS尾风CSS和Framer Motion建立现代投资组合

使用Next.js、Tailwind CSS和Framer Motion构建现代投资组合网站的核心步骤如下：

一、技术栈配置

Next.js 13 App Router：采用文件系统路由，支持TypeScript类型安全，通过app/目录结构管理路由和布局。
Tailwind CSS：通过npm install -D tailwindcss postcss autoprefixer安装，在tailwind.config.js中配置内容路径（如./app//*.{ts,tsx}），实现全局样式覆盖和响应式设计。
Framer Motion：安装framer-motion库，利用其motion组件和动画API（如animate、transition）实现平滑过渡效果。
Geist字体：通过CDN引入或使用@geist-ui/core的字体配置，确保排版一致性。

二、核心功能实现

主题切换：
使用next-themes库管理主题状态，通过useTheme钩子检测系统偏好（system模式）或允许用户手动选择（light/dark）。
在Tailwind配置中扩展主题颜色（如extend: { colors: { ... } }），并通过className="dark:bg-gray-900"实现动态样式切换。
添加过渡动画：用Framer Motion的motion.div包裹主题切换按钮，设置transition={{ duration: 0.3 }}。
响应式设计：
利用Tailwind的响应式类（如md:px-8、lg:flex）适配不同屏幕尺寸。
移动端优化：隐藏非核心元素（如hidden md:block），调整字体大小和间距（如text-sm md:text-base）。
社交媒体集成：
嵌入GitHub、LinkedIn、LeetCode的图标链接（使用<a>标签+SVG图标或react-icons库）。
动态显示LeetCode统计：通过API获取数据并渲染（需处理CORS问题或使用后端代理）。
高性能优化：
图片优化：使用Next.js的Image组件（自动懒加载、WebP格式）。
代码分割：利用App Router的自动代码拆分。
SEO：在<Head>中设置元标签（如title、description），生成静态页面（generateStaticParams）。

三、动画与交互设计

Framer Motion动画：
页面过渡：在布局组件中使用<AnimatePresence>和motion.div实现进入/退出动画（如initial={{ opacity: 0 }} animate={{ opacity: 1 }}）。
悬停效果：为按钮或卡片添加whileHover={{ scale: 1.05 }}。
滚动动画：通过useInView钩子触发元素入场动画（如opacity: [0, 1]）。
极简界面设计：
限制色彩使用（主色+中性色），通过Tailwind的spacing和sizing工具控制布局。
使用card类（如bg-white/10 dark:bg-gray-800/10 rounded-lg shadow-sm）创建统一组件。

四、挑战与解决方案

暗模式过渡：
问题：主题切换时样式闪烁。
解决：在_document.tsx中注入全局CSS过渡（如* { transition: colors 0.3s; }），并确保Tailwind的darkMode: 'class'配置正确。
移动端响应式：
问题：布局错乱或交互困难。
解决：使用Chrome DevTools的设备模拟工具测试，调整断点（如@media (max-width: 768px)）。
动画性能：
问题：复杂动画导致卡顿。
解决：减少同时动画的元素数量，使用will-change: transform优化，优先使用CSS过渡而非JS动画。

五、未来扩展方向

六、参考资源

通过以上步骤，可构建一个兼具性能、美观和交互性的投资组合网站，同时利用现代技术栈提升开发效率与用户体验。

热门标签