English version

Awesome Portfolio Template

모두를 위한 올인원 포트폴리오 템플릿

라이브 데모 보러가기

하이라이트

• 경력 상세 페이지 — /career에서 프로젝트별 배경, 역할, 성과, 교훈을 상세 서술
• 다국어 기본 내장 — next-intl 기반 URL 라우팅(/ko, /en) 완전 분리, 언어 추가 용이
• 설정 파일 하나로 끝 — site.ts + 데이터 파일 7개만 수정. 컴포넌트 코드 수정 불필요
• 완성도 높은 디자인 — Framer Motion 애니메이션, 그라데이션 오브, 스크롤 인디케이터 포함

주요 기능

섹션 구성

🤖 AI 에이전트로 설치하기

Claude Code, Cursor, Windsurf, ChatGPT 등 AI 코딩 에이전트를 사용하고 계신가요?

아래 명령어의 결과를 에이전트에게 전달하면, 클론 → 포트폴리오 입력 → 커스터마이징 → 빌드 → 배포까지 자동으로 수행합니다.
코드를 한 줄도 직접 작성할 필요가 없습니다.

curl -s https://raw.githubusercontent.com/zer0-kr/awesome-portfolio-template/main/docs/guide/installation.md

🧑 사람이 설치하기

git clone https://github.com/zer0-kr/awesome-portfolio-template.git my-portfolio
cd my-portfolio
npm install
npm run dev

http://localhost:3000 에서 샘플 포트폴리오를 확인한 뒤, 아래 파일들을 수정합니다.

설정

export const siteConfig = {
  url: "https://your-name.vercel.app",
  author: {
    name: { ko: "홍길동", en: "John Doe" },
    title: { ko: "소프트웨어 엔지니어", en: "Software Engineer" },
    email: "hello@example.com",
  },
  social: {
    github: "https://github.com/your-username",
    linkedin: "https://linkedin.com/in/your-username",
    blog: "https://blog.example.com",
  },
  nav: ["about", "experience", "career-highlights", "projects", "contact"] as const,
  sections: {
    hero: true,
    about: true,
    experience: true,
    careerHighlights: true,
    speaking: false,       // 필요 없는 섹션은 false
    certified: true,
    projects: true,
    contact: true,
  },
  seo: {
    titleTemplate: "%s | John Doe",
    defaultTitle: "John Doe | Software Engineer",
    description: "...",
    keywords: ["portfolio", "engineer"],
  },
  googleVerification: "",
};

배포

Vercel (권장)

Netlify

환경 변수 (선택)

NEXT_PUBLIC_BASE_URL=https://your-portfolio.vercel.app

커스터마이징

@theme {
  --color-accent: #0ea5e9;           /* 기본 강조색 */
  --color-accent-secondary: #10b981;  /* 보조 강조색 */
  --color-background: #fafafa;        /* 배경색 */
}

nav: ["about", "experience", "career-highlights", "projects", "contact"],

sections: {
  speaking: false,    // 발표 섹션 숨김
  certified: false,   // 자격증 섹션 숨김
},

프로젝트 구조

src/
├── config/
│   └── site.ts              # 사이트 설정 (이 파일을 수정하세요!)
├── data/                     # 콘텐츠 데이터 (7개 파일)
│   ├── profile.ts            # 개인 정보
│   ├── experience.ts         # 경력 사항
│   ├── career-summary.ts     # 포트폴리오 하이라이트
│   ├── career-detail.ts      # 프로젝트 상세 서술
│   ├── credentials.ts        # 자격증 & 수상
│   ├── speaking.ts           # 발표 & 커뮤니티
│   └── projects.ts           # 사이드 프로젝트
├── messages/                 # 다국어 UI 텍스트
│   ├── ko.json
│   └── en.json
├── components/
│   ├── sections/             # 페이지 섹션 컴포넌트
│   ├── layout/               # Header, Footer
│   └── ui/                   # 재사용 UI 컴포넌트
└── app/
    └── [locale]/
        ├── page.tsx           # 메인 페이지
        └── career/page.tsx    # 경력 상세 페이지

기술 스택

기여하기

기여를 환영합니다! CONTRIBUTING.md를 참고하세요.

라이선스

MIT — 개인 및 상업 프로젝트에 자유롭게 사용 가능합니다.