70 - 个人项目作品集网站教程

适用人群：所有开发者

难度：低-中

预计学习时间：8-12小时

为什么需要作品集？

• 面试时展示你的代码能力和项目经验
• 建立个人品牌和技术影响力
• 比简历更有说服力
• 持续更新，是你的技术成长记录

技术方案选择

Next.js 作品集模板

// app/page.tsx - 首页
export default function Home() {
  return (
    <main className="min-h-screen">
      {/* Hero区 */}
      <section className="py-20 px-4">
        <h1 className="text-4xl font-bold">Hi, I'm [你的名字]</h1>
        <p className="text-xl text-gray-600 mt-4">
          Full-stack Developer | Open Source Enthusiast
        </p>
        <div className="flex gap-4 mt-6">
          <a href="https://github.com/yourname" className="btn-primary">GitHub</a>
          <a href="/blog" className="btn-outline">Blog</a>
        </div>
      </section>

      {/* 项目展示 */}
      <section className="py-16 px-4 bg-gray-50">
        <h2 className="text-2xl font-bold mb-8">Featured Projects</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map(project => (
            <ProjectCard key={project.id} {...project} />
          ))}
        </div>
      </section>

      {/* 技术栈 */}
      <section className="py-16 px-4">
        <h2 className="text-2xl font-bold mb-8">Tech Stack</h2>
        <div className="flex flex-wrap gap-3">
          {skills.map(skill => (
            <span key={skill} className="px-3 py-1 bg-blue-100 text-blue-800 rounded">
              {skill}
            </span>
          ))}
        </div>
      </section>

      {/* 博客文章 */}
      <section className="py-16 px-4 bg-gray-50">
        <h2 className="text-2xl font-bold mb-8">Latest Posts</h2>
        {posts.map(post => (
          <article key={post.slug} className="mb-6">
            <h3><a href={`/blog/${post.slug}`}>{post.title}</a></h3>
            <p className="text-gray-600">{post.excerpt}</p>
          </article>
        ))}
      </section>

      {/* 联系方式 */}
      <section className="py-16 px-4">
        <h2 className="text-2xl font-bold mb-4">Get In Touch</h2>
        <p>Email: your@email.com</p>
      </section>
    </main>
  )
}

const projects = [
  {
    id: 1,
    title: '电商平台',
    description: 'Next.js + Stripe + Supabase 全栈电商',
    image: '/projects/ecommerce.png',
    tags: ['Next.js', 'Supabase', 'Stripe'],
    github: 'https://github.com/...',
    demo: 'https://...'
  },
  {
    id: 2,
    title: 'AI聊天助手',
    description: '基于OpenAI API的智能对话应用',
    image: '/projects/chatbot.png',
    tags: ['React', 'Node.js', 'OpenAI'],
    github: 'https://github.com/...'
  },
  // 更多项目...
]

const skills = [
  'TypeScript', 'React', 'Next.js', 'Vue.js', 'Node.js',
  'Python', 'Go', 'PostgreSQL', 'Redis', 'Docker',
  'AWS', 'Tailwind CSS', 'Git'
]

项目展示最佳实践

1. 选3-5个最好的项目（质量 > 数量）
2. 每个项目包含：
   - 一句话描述
   - 技术栈标签
   - GitHub链接
   - 在线Demo链接
   - 截图或GIF动图
3. 项目要有README：
   - 项目简介
   - 技术选型原因
   - 核心功能
   - 如何运行
   - 部署说明
4. 代码质量：
   - 有TypeScript类型
   - 有测试
   - 有ESLint配置
   - Git提交历史清晰

部署到 Vercel

# 1. 代码推送到GitHub
git add .
git commit -m "portfolio v1"
git push

# 2. 在Vercel中导入项目
# vercel.com → New Project → Import Git Repository

# 3. 配置环境变量（如果有）
# 在Vercel项目设置中添加

# 4. 自动部署
# 每次push到main分支自动部署

# 自定义域名
# 在Vercel项目设置 → Domains 添加你的域名

推荐作品集模板