第45期 | 项目3：个人AI作品集网站——你的求职门面

第45期 | 项目3个人AI作品集网站——你的求职门面 今天你将学会设计一个能打动面试官的个人作品集网站首屏设计3 秒内传递你是谁、你能做什么项目展示模块把课程中的 3 个项目包装成面试素材AI 互动功能让访客通过 AI 了解你的经历 核心知识作品集网站是求职的第一印象。面试官在给你发面试邀请前90% 会先看你的个人网站/GitHub。这个项目是前 4 个模块所有技能的综合运用——HTML/CSS 布局、React 组件化、AI 交互、部署上线全部用上。一、产品定义1.1 目标维度说明网站地址https://你的名字.vercel.app核心目标面试官打开 30 秒内想给你发面试邀请目标访客HR、技术面试官、潜在合作者差异化不只是静态展示有 AI 互动功能1.2 页面结构┌─────────────────────────────────────────────┐ │ 导航栏固定顶部 │ ├─────────────────────────────────────────────┤ │ │ │ Hero 首屏全屏 │ │ 姓名 / 一句话定位 / CTA 按钮 │ │ │ ├─────────────────────────────────────────────┤ │ 关于我简短自我介绍 技术栈 │ ├─────────────────────────────────────────────┤ │ 项目展示3 个核心项目卡片 │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │TechAssist│ │FlowAI│ │作品集│ │ │ └─────┘ └─────┘ └─────┘ │ ├─────────────────────────────────────────────┤ │ AI 对话问问 AI 关于我的经历 │ ├─────────────────────────────────────────────┤ │ 博客3 篇精选技术文章 │ ├─────────────────────────────────────────────┤ │ 联系方式 Footer │ └─────────────────────────────────────────────┘二、Hero 首屏3 秒定胜负首屏是面试官看到的第一眼。3 秒内要传递你是谁、你做什么、怎么联系你。// src/components/Hero.tsx import { useEffect, useState } from react const roles [ AI 前端工程师, React 专家, AI 应用开发者, 开源贡献者, ] export default function Hero() { const [currentRole, setCurrentRole] useState(0) const [displayText, setDisplayText] useState() const [isDeleting, setIsDeleting] useState(false) // 打字机效果 useEffect(() { const role roles[currentRole] const speed isDeleting ? 50 : 100 const timer setTimeout(() { if (!isDeleting) { setDisplayText(role.slice(0, displayText.length 1)) if (displayText.length 1 role.length) { setTimeout(() setIsDeleting(true), 1500) } } else { setDisplayText(role.slice(0, displayText.length - 1)) if (displayText.length 0) { setIsDeleting(false) setCurrentRole((prev) (prev 1) % roles.length) } } }, speed) return () clearTimeout(timer) }, [displayText, isDeleting, currentRole]) return ( section classNamerelative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 {/* 背景粒子效果 */} div classNameabsolute inset-0 {Array.from({ length: 50 }).map((_, i) ( div key{i} classNameabsolute rounded-full bg-white/10 style{{ width: ${Math.random() * 4 1}px, height: ${Math.random() * 4 1}px, left: ${Math.random() * 100}%, top: ${Math.random() * 100}%, animation: float ${Math.random() * 10 5}s linear infinite, animationDelay: ${Math.random() * 5}s, }} / ))} /div {/* 内容 */} div classNamerelative z-10 text-center px-6 {/* 头像 */} div classNamemb-8 inline-block div classNamew-32 h-32 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 p-1 div classNamew-full h-full rounded-full bg-slate-800 flex items-center justify-center text-5xl ‍ /div /div /div {/* 姓名 */} h1 classNametext-5xl md:text-7xl font-bold text-white mb-4 张三 /h1 {/* 打字机效果 */} div classNametext-2xl md:text-3xl text-purple-300 font-mono h-12 mb-8 span classNameborder-r-2 border-purple-400 animate-pulse {displayText} /span /div {/* CTA 按钮 */} div classNameflex gap-4 justify-center flex-wrap a href#projects classNamepx-8 py-3 bg-purple-500 text-white rounded-full font-medium hover:bg-purple-600 transition-colors 查看项目 /a a href#contact classNamepx-8 py-3 border border-white/30 text-white rounded-full font-medium hover:bg-white/10 transition-colors 联系我 /a /div /div {/* 向下滚动提示 */} div classNameabsolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce svg classNamew-6 h-6 text-white/50 fillnone viewBox0 0 24 24 strokecurrentColor path strokeLinecapround strokeLinejoinround strokeWidth{2} dM19 14l-7 7m0 0l-7-7m7 7V3 / /svg /div /section ) }/* src/styles/hero.css */keyframesfloat{0%{transform:translateY(0)translateX(0);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-100vh)translateX(20px);opacity:0;}}三、项目展示模块面试官最关注的是项目。每个项目要展示问题是什么 → 你做了什么 → 技术亮点 → 成果。// src/components/Projects.tsx import { useState } from react interface Project { id: string title: string tagline: string description: string tech: string[] highlights: string[] links: { demo?: string github?: string } gradient: string icon: string } const projects: Project[] [ { id: tech-assist, title: TechAssist, tagline: AI 知识库助手, description: 基于 RAG 的 AI 知识库平台支持文档上传、智能问答和知识管理。, tech: [React, TypeScript, OpenAI, Supabase, Vercel], highlights: [ RAG 检索增强生成回答准确率 85%, 流式响应 Markdown 渲染体验流畅, 产品级安全API Key 服务端代理 Zod 验证, ], links: { demo: https://tech-assist.vercel.app, github: https://github.com/你的名字/tech-assist, }, gradient: from-blue-500 to-cyan-500, icon: , }, { id: flow-ai, title: FlowAI, tagline: AI 工作流编排工具, description: 可视化 AI 工作流编辑器拖拽节点构建 AI 执行流程。, tech: [React, React Flow, Zustand, TypeScript], highlights: [ DAG 拓扑排序执行引擎支持条件分支, 自定义节点 撤销/重做 拖拽复制, 执行状态实时可视化, ], links: { demo: https://flow-ai.vercel.app, github: https://github.com/你的名字/flow-ai, }, gradient: from-purple-500 to-pink-500, icon: , }, { id: portfolio, title: AI 作品集, tagline: 个人网站本项目, description: 集项目展示、博客、AI 互动于一体的个人网站。, tech: [React, Tailwind CSS, Vite, AI Chat], highlights: [ AI 对话功能访客可向 AI 询问我的经历, Lighthouse 性能评分 95, 响应式设计 暗色模式, ], links: { demo: https://你的名字.vercel.app, github: https://github.com/你的名字/portfolio, }, gradient: from-amber-500 to-orange-500, icon: , }, ] export default function Projects() { const [activeProject, setActiveProject] useStatestring | null(null) return ( section idprojects classNamepy-20 bg-white div classNamemax-w-6xl mx-auto px-6 h2 classNametext-4xl font-bold text-center mb-4项目作品/h2 p classNametext-center text-gray-500 mb-12 3 个完整项目从 AI 知识库到工作流编排 /p div classNamegrid md:grid-cols-3 gap-6 {projects.map((project) ( div key{project.id} classNamegroup relative rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 cursor-pointer onMouseEnter{() setActiveProject(project.id)} onMouseLeave{() setActiveProject(null)} {/* 顶部渐变区 */} div className{h-32 bg-gradient-to-br ${project.gradient} flex items-center justify-center} span classNametext-6xl{project.icon}/span /div {/* 内容区 */} div classNamep-6 h3 classNametext-xl font-bold mb-1{project.title}/h3 p classNametext-sm text-gray-500 mb-3{project.tagline}/p p classNametext-sm text-gray-700 mb-4 line-clamp-2 {project.description} /p {/* 技术栈 */} div classNameflex flex-wrap gap-2 mb-4 {project.tech.map((t) ( span key{t} classNamepx-2 py-1 text-xs bg-gray-100 rounded-md text-gray-600 {t} /span ))} /div {/* 亮点hover 展开 */} div className{overflow-hidden transition-all duration-300 ${ activeProject project.id ? max-h-48 : max-h-0 }} ul classNamespace-y-1 mb-4 {project.highlights.map((h, i) ( li key{i} classNametext-xs text-gray-600 flex items-start gap-1 span classNametext-green-500 mt-0.5✓/span {h} /li ))} /ul /div {/* 链接 */} div classNameflex gap-3 pt-4 border-t {project.links.demo ( a href{project.links.demo} target_blank relnoopener noreferrer classNametext-sm text-purple-600 hover:text-purple-700 font-medium 在线 Demo /a )} {project.links.github ( a href{project.links.github} target_blank relnoopener noreferrer classNametext-sm text-gray-600 hover:text-gray-800 font-medium GitHub /a )} /div /div /div ))} /div /div /section ) }四、AI 互动功能这是作品集的差异化亮点——访客可以通过 AI 对话了解你的经历而不是翻看枯燥的文字。4.1 AI 对话组件// src/components/AIChat.tsx import { useState, useRef, useEffect } from react interface Message { role: user | assistant content: string } const systemPrompt 你是一个 AI 助手负责回答关于网站主人张三的问题。 张三的个人信息 - 身份AI 前端工程师1 年前端经验 - 技术栈React, TypeScript, Next.js, Node.js, Tailwind CSS - AI 技能OpenAI API 集成, RAG 实现, AI Agent 开发, Prompt Engineering - 项目经历 1. TechAssist - AI 知识库助手RAG 对话 2. FlowAI - AI 工作流编排工具可视化编辑器 3. 个人作品集网站本项目 - 教育背景XX 大学计算机科学 - 联系方式邮箱 zhangsanexample.com 回答规则 1. 简洁友好像朋友聊天 2. 只回答关于张三的问题不回答无关问题 3. 如果信息不足建议访客直接联系张三 4. 回答控制在 100 字以内 const suggestedQuestions [ 张三会用什么 AI 工具, 他做过哪些项目, 技术栈是什么, 怎么联系他, ] export default function AIChat() { const [messages, setMessages] useStateMessage[]([ { role: assistant, content: 你好我是张三的 AI 助手。你可以问我关于他的技术栈、项目经历或联系方式 , }, ]) const [input, setInput] useState() const [isLoading, setIsLoading] useState(false) const messagesEndRef useRefHTMLDivElement(null) const scrollToBottom () { messagesEndRef.current?.scrollIntoView({ behavior: smooth }) } useEffect(() { scrollToBottom() }, [messages]) const handleSend async (text?: string) { const content text || input.trim() if (!content || isLoading) return const userMessage: Message { role: user, content } setMessages((prev) [...prev, userMessage]) setInput() setIsLoading(true) try { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: [ { role: system, content: systemPrompt }, ...messages.map((m) ({ role: m.role, content: m.content })), { role: user, content }, ], }), }) if (!response.ok) throw new Error(API error) // 读取流式响应 const reader response.body?.getReader() const decoder new TextDecoder() let assistantContent setMessages((prev) [ ...prev, { role: assistant, content: }, ]) while (reader) { const { done, value } await reader.read() if (done) break const chunk decoder.decode(value) const lines chunk.split(\n) for (const line of lines) { if (line.startsWith(data: ) line ! data: [DONE]) { const data JSON.parse(line.slice(6)) assistantContent data.content setMessages((prev) { const newMessages [...prev] newMessages[newMessages.length - 1] { role: assistant, content: assistantContent, } return newMessages }) } } } } catch (error) { setMessages((prev) [ ...prev, { role: assistant, content: 抱歉我暂时无法回答。请直接联系张三zhangsanexample.com, }, ]) } finally { setIsLoading(false) } } return ( section idai-chat classNamepy-20 bg-gradient-to-br from-purple-50 to-pink-50 div classNamemax-w-2xl mx-auto px-6 h2 classNametext-4xl font-bold text-center mb-4问问 AI 关于我/h2 p classNametext-center text-gray-500 mb-8 有问题直接问我的 AI 助手 /p div classNamebg-white rounded-2xl shadow-xl overflow-hidden {/* 消息列表 */} div classNameh-96 overflow-y-auto p-4 space-y-3 {messages.map((msg, i) ( div key{i} className{flex ${msg.role user ? justify-end : justify-start}} div className{max-w-[80%] px-4 py-2 rounded-2xl ${ msg.role user ? bg-purple-500 text-white : bg-gray-100 text-gray-800 }} {msg.content} /div /div ))} {isLoading ( div classNameflex justify-start div classNamebg-gray-100 px-4 py-2 rounded-2xl span classNameanimate-pulse思考中.../span /div /div )} div ref{messagesEndRef} / /div {/* 推荐问题 */} {messages.length 1 ( div classNamepx-4 pb-2 flex flex-wrap gap-2 {suggestedQuestions.map((q) ( button key{q} onClick{() handleSend(q)} classNamepx-3 py-1.5 text-sm bg-purple-50 text-purple-600 rounded-full hover:bg-purple-100 transition-colors {q} /button ))} /div )} {/* 输入框 */} div classNameborder-t p-4 flex gap-2 input typetext value{input} onChange{(e) setInput(e.target.value)} onKeyDown{(e) e.key Enter handleSend()} placeholder输入你的问题... classNameflex-1 px-4 py-2 border rounded-full text-sm focus:outline-none focus:border-purple-400 / button onClick{() handleSend()} disabled{isLoading} classNamepx-4 py-2 bg-purple-500 text-white rounded-full text-sm hover:bg-purple-600 disabled:opacity-50 发送 /button /div /div /div /section ) }4.2 后端 API Route// api/chat.ts — 作品集 AI 对话后端import{OpenAI}fromopenaiimporttype{VercelRequest,VercelResponse}fromvercel/nodeconstopenainewOpenAI({apiKey:process.env.OPENAI_API_KEY})exportdefaultasyncfunctionhandler(req:VercelRequest,res:VercelResponse){if(req.method!POST){returnres.status(405).json({error:Method not allowed})}const{messages}req.body// 简单限流每个 IP 每分钟 10 次constipreq.headers[x-forwarded-for]||unknown// 实际项目应用 Redis 做限流这里简化try{conststreamawaitopenai.chat.completions.create({model:gpt-4o-mini,messages,stream:true,max_tokens:200,// 限制回复长度})res.setHeader(Content-Type,text/event-stream)res.setHeader(Cache-Control,no-cache)forawait(constchunkofstream){constcontentchunk.choices[0]?.delta?.contentif(content){res.write(data:${JSON.stringify({content})}\n\n)}}res.write(data: [DONE]\n\n)res.end()}catch(error){res.status(500).json({error:Chat failed})}}五、技术栈展示// src/components/Skills.tsx const skills [ { category: 前端核心, items: [React, TypeScript, Tailwind CSS, Vite] }, { category: AI 开发, items: [OpenAI API, RAG, Prompt Engineering, MCP] }, { category: 工程化, items: [Git, ESLint, Vitest, Vercel] }, { category: 其他, items: [Node.js, Supabase, React Flow, Zustand] }, ] export default function Skills() { return ( section idskills classNamepy-20 bg-slate-50 div classNamemax-w-4xl mx-auto px-6 h2 classNametext-4xl font-bold text-center mb-12技术栈/h2 div classNamegrid md:grid-cols-2 gap-8 {skills.map((group) ( div key{group.category} h3 classNametext-lg font-semibold mb-4 text-purple-600 {group.category} /h3 div classNameflex flex-wrap gap-3 {group.items.map((skill) ( span key{skill} classNamepx-4 py-2 bg-white rounded-lg shadow-sm border border-gray-100 text-sm font-medium text-gray-700 hover:border-purple-300 hover:shadow-md transition-all {skill} /span ))} /div /div ))} /div /div /section ) }六、博客预览// src/components/Blog.tsx const posts [ { title: 用 RAG 构建企业级 AI 知识库的完整指南, excerpt: 从文档分片到向量检索手把手实现一个生产级 RAG 系统..., date: 2026-06-15, tag: AI, url: #, }, { title: React Flow 实战构建可视化工作流编辑器, excerpt: 深入 React Flow 的自定义节点、边和交互系统..., date: 2026-06-10, tag: React, url: #, }, { title: 前端工程师如何拥抱 AI 时代, excerpt: AI 不是替代前端而是赋能前端。谈谈工具链和思维转变..., date: 2026-06-01, tag: 思考, url: #, }, ] export default function Blog() { return ( section idblog classNamepy-20 bg-white div classNamemax-w-4xl mx-auto px-6 h2 classNametext-4xl font-bold text-center mb-12技术博客/h2 div classNamespace-y-6 {posts.map((post) ( a key{post.title} href{post.url} classNameblock p-6 rounded-xl border border-gray-100 hover:border-purple-200 hover:shadow-md transition-all group div classNameflex items-center gap-2 mb-2 span classNamepx-2 py-0.5 text-xs bg-purple-100 text-purple-600 rounded {post.tag} /span span classNametext-xs text-gray-400{post.date}/span /div h3 classNametext-xl font-bold mb-2 group-hover:text-purple-600 transition-colors {post.title} /h3 p classNametext-gray-600 text-sm line-clamp-2{post.excerpt}/p /a ))} /div /div /section ) }七、联系方式// src/components/Contact.tsx export default function Contact() { return ( section idcontact classNamepy-20 bg-slate-900 text-white div classNamemax-w-2xl mx-auto px-6 text-center h2 classNametext-4xl font-bold mb-4联系我/h2 p classNametext-gray-400 mb-8 有项目合作或工作机会随时联系我 /p div classNameflex justify-center gap-6 flex-wrap a hrefmailto:zhangsanexample.com classNameflex items-center gap-2 px-6 py-3 bg-white/10 rounded-full hover:bg-white/20 transition-colors Email /a a hrefhttps://github.com/你的名字 target_blank relnoopener noreferrer classNameflex items-center gap-2 px-6 py-3 bg-white/10 rounded-full hover:bg-white/20 transition-colors GitHub /a a hrefhttps://linkedin.com/in/你的名字 target_blank relnoopener noreferrer classNameflex items-center gap-2 px-6 py-3 bg-white/10 rounded-full hover:bg-white/20 transition-colors LinkedIn /a /div /div /section ) } AI协作实战场景用 AI 设计和开发作品集第一步让 AI 帮我做设计调研Prompt: 我要做一个个人作品集网站目标是 AI 前端工程师求职。 请帮我调研 1. 2025 年优秀开发者作品集的 5 个共同特点 2. 面试官最想看到什么内容排序 3. 首屏设计 3 种风格推荐 4. 我的差异化应该是什么AI 前端方向AI 输出了详细的调研报告关键洞察面试官最想看项目代码 在线 Demo 技术博客 技能列表差异化大多数作品集是静态的加 AI 互动功能能让人印象深刻首屏3 秒内传达你是谁你能做什么不要用通用模板第二步让 AI 生成组件代码Prompt: 基于以下设计稿用 React Tailwind CSS 实现项目展示卡片组件。 设计要点 1. 顶部渐变色块不同项目不同颜色 2. hover 时展开技术亮点 3. 底部有 Demo 和 GitHub 链接 4. 卡片有阴影和 hover 动效 项目数据结构 { title, tagline, description, tech[], highlights[], links{} }第三步AI 优化简历内容Prompt: 帮我优化以下项目描述让它更有吸引力适合放在作品集网站 原文 TechAssist 是一个 AI 知识库用 RAG 技术。用户可以上传文档然后问问题AI 会基于文档回答。用 React 和 OpenAI 做的。 要求 1. 突出技术亮点和成果 2. 有数据支撑如果可能 3. 控制在 50 字以内 4. 让面试官想点进去看AI 优化后“基于 RAG 的 AI 知识库平台支持文档上传与智能问答。流式响应、85% 回答准确率产品级安全架构。”审查和修改AI 生成的 Hero 组件用了animate-pulse让边框光标闪烁——但效果过于强烈我改用了更柔和的border-r-2animate-pulseAI 推荐的粒子效果用了 50 个 DOM 元素性能一般——可接受但如果要做更多粒子应该用 CanvasAI Chat 的 system prompt 中放了很多个人信息——确保这些信息是你愿意公开的学到了什么AI 做设计调研效率极高——5 分钟就给出了行业最佳实践和差异化建议AI 生成UI 组件代码时Tailwind 类名经常写得很长——需要审查是否真的需要这么多简历文案AI 优化效果显著——把平淡的描述变得有吸引力和数据感作品集的 AI 互动功能是最好的AI 能力展示——面试官在用你的网站时就能亲身体验 动手练习练习1搭建基础结构简单创建 Hero Projects Skills Contact 四个区块响应式适配手机端部署到 Vercel练习2AI 对话功能中等实现作品集 AI 对话功能准备你的个人信息 system prompt添加推荐问题引导访客处理流式响应和错误情况练习3暗色模式挑战实现 Light/Dark 主题切换用 CSS 变量管理颜色记住用户偏好localStorage默认跟随系统设置 本期要点首屏 3 秒法则姓名 定位 CTA面试官 3 秒内决定是否继续看项目展示用 STAR 格式问题→方案→技术→成果hover 展开亮点是好的交互方式AI 互动功能是作品集的差异化——访客通过对话了解你既展示 AI 开发能力又提升体验system prompt中放个人信息要谨慎——只放你愿意公开的内容部署上线后用手机打开——很多面试官是在手机上看作品的移动端体验必须过关 下期预告第46期简历与作品集包装。你的 3 个项目做完了但简历上怎么写才能让 HR 筛选通过我们来讲前端简历的写法、项目描述技巧和 GitHub 美化。