Awesome Portfolio Template

Awesome Portfolio Template is a Next.js 16 portfolio boilerplate that ships with bilingual routing, dark mode, a career detail page, and Framer Motion animations, customizable entirely from one config file and seven data files.

What is Awesome Portfolio Template?

Awesome Portfolio Template is an open-source portfolio boilerplate built on Next.js 16 (App Router), TypeScript, and Tailwind CSS v4. It takes your personal content — name, job title, work history, projects, credentials, and social links — as input through a single site config plus seven TypeScript data files, and outputs a fully rendered personal portfolio site with separate Korean and English URLs. It is published by zer0-kr under the MIT license and deploys to Vercel or Netlify, with a live demo hosted on Vercel.

Key Features

• Bilingual routing with next-intl — Korean and English are built in, with fully separated URL paths (/ko, /en); adding another language follows the same message-file pattern.
• Career detail page at /career — describes each project's background, role, results, and lessons learned, aimed at senior-position applications.
• Single config surface — you edit src/config/site.ts plus seven data files (profile, experience, career-summary, career-detail, credentials, speaking, projects); no component code changes are required.
• Dark / light mode — via next-themes, with automatic system detection and a manual toggle.
• Framer Motion animation — card entrance effects, floating gradient orbs, and a scroll indicator, using LazyMotion to reduce bundle size.
• SEO setup included — JSON-LD, auto-generated Open Graph images, sitemap, and robots.txt.
• Accessibility — ARIA labels, keyboard navigation, and focus management.
• Section toggles — any section (for example speaking or certified) can be hidden from both the page and the nav array in site.ts.

What can you do with Awesome Portfolio Template?

• Senior engineers building a job-search portfolio: fill the seven data files with company-by-company experience and publish /career deep dives on project background and outcomes alongside a résumé-style timeline.
• Developers who want a bilingual site: reuse the built-in /ko and /en routes so one content set serves both Korean and English visitors without a second site.
• AI coding agents as installers: the repo publishes an installation guide via a raw GitHub URL, so agents such as Claude Code, Cursor, Windsurf, or ChatGPT can clone, fill in the data, build, and deploy the site.
• Open-source contributors: MIT license permits free personal and commercial use, and the repository accepts contributions per its CONTRIBUTING.md.

How does Awesome Portfolio Template work?

Clone the repository (or click "Use this template" on GitHub), run npm install and npm run dev, then open localhost:3000 to see the sample portfolio. Edit site.ts for identity, social links, navigation order, SEO, and section toggles; edit the data files for content; edit src/messages/ko.json and en.json for UI text; and replace public/profile.png with a square photo at least 400x400px. Theme colors are CSS variables in src/app/globals.css. An optional NEXT_PUBLIC_BASE_URL environment variable overrides the base URL, falling back to the value in site.ts.

Who is it for?

• Senior software engineers applying for roles that expect described project outcomes, who need the /career detail pages the template centers on.
• Developers new to Next.js App Router who want a working example of locale-split routing, theming, and animation without writing component code.
• Korean/English-speaking job seekers who need a bilingual personal site from one content set.

Pricing

Free and open source under the MIT license, with no paid tiers mentioned.