portfolio-fm使用Chakra UI、Framer Motion和Create React App的作品集
黑白简洁风格的页面结构，加上Chakra UI和Framer Motion的组合，整个视觉和交互都挺舒服的。用Create React App起手，还套了@chakra-ui/typescript模板，配置直接一步到位，少踩坑。
首页、项目页、关于我和联系页都搭好了，响应也快，动画也流畅。你能看到不少细节：像下拉菜单的蹦跶动画、页面切换时的淡入淡出、图片轮播时的滑动效果，嗯，做得挺用心的。
项目卡片的动画挺加分，比如鼠标悬停的时候图片微缩，按钮弹出，有点小动效但不浮夸。布局上用了挺多Framer Motion的布局变换，像从列表到详情页，过渡顺滑。
另外，图像、链接、按钮这些交互也没落下。比如按钮点击后有反馈，图片用了数组渲染，hover 有动画，细节还挺齐活。技术栈部分也做了圆形按钮、栈标签啥的，样式统一。
关于页和联系页风格一致，个人简介、联系链接都放在显眼的位置。配图也得不错，居中、圆角、带阴影，视觉比较协调。如果你也想搞个React的作品集，这套代码可以直接拉下来参考。
小提醒一下，如果你还不熟Chakra UI，建议先看看它的文档，尤其是Flex、Box这些组件，组合起来强大。如果想加点个性化动画，可以再深入玩下Framer Motion的AnimatePresence。
...
文件大小：1.96MB
评论区