portfolio-template (ViryaZheng) — Next.js 作品集模板

SHA-256: 8cd7fcbdc57ed9ff817f15d581f28a7b1cb273c8bd23c60627360bb16731a222

2026-10-14T22:31:06.038Z

# Portfolio Template

A clean, animated personal-portfolio template built with **Next.js + Tailwind + GSAP**. It exports to
static HTML and deploys **free on GitHub Pages** — no server, no database, no API keys.

It's designed to be filled in by an **AI coding agent** (Codex, Claude Code, Cursor, …): hand the
project to your agent and it follows [`AGENTS.md`](./AGENTS.md) to swap in your content and deploy.

**▶ [Live demo](https://viryazheng.github.io/portfolio-template/)** — this repo, deployed as-is
with its placeholder content. That's what you get before you change a word.

## Features

- ⚡️ Next.js 16 (App Router, React 19, TypeScript) — static export, fast and SEO-friendly
- 🎬 GSAP scroll animations, magnetic buttons, 3D card tilt
- 📱 Responsive dark theme; all colors + font are CSS variables (easy to rebrand)
- 🧩 Home, Projects (+ detail pages), Blog (+ detail pages), Tools, Experience, Endorsements, Contact
- 📄 A print-first **`/cv` résumé page** — renders as an A4 sheet, prints to a clean PDF, and can be
  cloned into several versions (another language, or one aimed at a different kind of role)
- 🤖 Agent-ready: your content lives in five clearly-marked files, with no hidden overrides
- 🚀 One-click-ish deploy to GitHub Pages via the included GitHub Actions workflow

## Quick start

```bash
npm install
npm run dev        # http://localhost:3000
```

Then edit your content:

- **`src/config/site.config.ts`** — your name, role, location, SEO, contact + social links
- **`src/components/portfolio/data.ts`** — your projects and blog posts
- **`src/components/portfolio/cv.data.ts`** — the `/cv` résumé page (to drop it, delete `src/app/cv/`, this file, and the CV item in `Nav`)
- Smaller copy (hero, FAQ, toolkit, work) lives in `src/components/portfolio/i18n.tsx` and `site.tsx`

Replace the placeholder images in `public/images/` and `public/og.jpg`, and the favicon `src/app/icon.png`.

> 💡 **Using an AI agent?** Just tell it: *"Read AGENTS.md and set up this portfolio with my info."*
> It knows where everything goes.

## Deploy to GitHub Pages

1. Set `url` in `src/config/site.config.ts` to your real deploy URL.
   (`.env.local` is gitignored and never reaches the GitHub Actions build — it's a local override only.)
2. Create a GitHub repo and push to `main`. Name it `<your-username>.github.io` for the cleanest
   URL, or anything you like — the workflow detects which case you're in and sets the deploy
   path accordingly, so images work either way.
3. In the repo: **Settings → Pages → Source → "GitHub Actions"**.
4. Push — the included workflow builds and publishes. Done.

See [`AGENTS.md`](./AGENTS.md) for repo-naming options, custom domains, and the full guide.

## Build commands

```bash
npm run dev          # local dev server
npm run build        # static export → ./out
npm run serve        # preview the built ./out
npm run typecheck    # tsc --noEmit
npm run check        # lint + typecheck + build
```

## License

MIT — the scaffold derives from the MIT-licensed
[ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template); see [LICENSE](./LICENSE).
Your content is yours.