Portfolio Website Template

Next.js 14 (App Router) and Tailwind CSS portfolio starter. Placeholder content uses Usagi (うさぎ) as a nod to Chiikawa (ちいかわ) by Nagano — not an official tie-in. Fictional labels (e.g. Carrot Valley Institute) are intentional so you can fork without exposing real details.

Demo

Live: https://portfolio-template-usagi.vercel.app/

Scope

The project structure aligns with common beginner portfolio tutorials (e.g. this walkthrough). That material covers a minimal multi-section page. This repository extends that baseline with a distinct visual system, structured data files, server routes, and interactive features listed below.

Capabilities

• 🎨 UI — Solarized-inspired light/dark theme, refined layout and typography, custom cursor assets (public/usagi_cursor/, src/styles/cursor.css).
• 🐰 Hero — Interactive GLB character via React Three Fiber / Drei (mouse-driven motion, optional hover audio).
• 📌 Experience — Vertical timeline with expandable entries (src/data/timelineItems.js).
• 🪟 Draggable panels — Hobby-style windows using react-draggable; reusable for galleries or other floating content.
• 🎵 Music — NetEase-backed player (/api/netease/*): playlists, playback URLs, lyrics, quality handling, artwork; state persists across client-side navigation.
• 🐙 GitHub — About-page card (GitHubStats): public profile, summed stars on your public repos, contribution heatmap (via ghchart.rshah.org); optional PAT for higher API limits and a yearly contribution total.
• 👀 Visitors — Unique-visit counter on About (SiteVisitorStats) with Upstash Redis; VisitorTracker in the root layout posts once per session path. Configure REST URL + token in .env.local (see Template setup).
• 💬 Blog engagement — Per-post likes and comments on /posts/... via the same Upstash Redis (PostEngagement, /api/post-engagement/*).
• ✉️ Contact — Form with Google reCAPTCHA v2; email delivery documented for EmailJS or a server route.
• 📝 Blog — Optional Tina CMS Markdown blog (/posts, /admin, content/post/). Narrative docs: Blog docs index → links to docs/ and in-repo guides under content/post/guides/.
• 📚 Content — Data-driven education, projects, certifications/awards, and related sections (see customization list).
• 🛠️ Tooling — Dynamic imports for heavier sections, optional webpack bundle analyzer (ANALYZE=true).

📖 Documentation: Template setup · Blog (index) · Architecture · 3D model · Music player.

What to customize first

1. src/app/layout.js — title and description metadata.
2. src/components/home/hero/HeroTextContent.jsx — Name, rotating titles, resume link.
3. src/components/about/AboutSection.jsx — Bio and profile image under /public/images/....
4. src/components/layout/Navbar.jsx — Social URLs.
5. src/components/layout/Logo.jsx — Logo asset in /public/images/.
6. src/data/timelineItems.js — Work timeline.
7. src/data/educationData.js — Degrees, courses, teaching (if used).
8. src/data/projectData.js — Projects and links.
9. src/data/tabData.js — Certifications and awards (if used).
10. src/data/siteMeta.js — Launch date and optional visitor-count display offset (About visitor stats card).
11. .env.local — NEXT_PUBLIC_GITHUB_USERNAME, optional GITHUB_TOKEN; UPSTASH_REDIS_REST_URL + UPSTASH_REDIS_REST_TOKEN for the visitor counter; optional Tina keys for the blog (Blog docs index, Template setup).
12. content/post/ — Blog posts; see Blog docs index for routes, tina/, and links to the setup guides.

Placeholder SVGs: public/images/ (avatar-placeholder.svg, logo-template.svg, school-placeholder.svg, experience/placeholder-company.svg).

Development

npm install
npm run dev

http://localhost:3000

Production

npm run build
npm start

Bundle analyzer

ANALYZE=true npm run build

Output: .next/analyze/client.html.

Before publishing

• Replace placeholder strings (your-username, your-profile, example.edu, etc.).
• Store secrets in .env.local only; verify .gitignore excludes .env*.
• For GitHub and Upstash, set production env vars on your host and rotate any token that was ever committed or pasted in public chat.

Credits

Layout patterns derive from common Next.js portfolio tutorials. LICENSE retains copyright notice from an earlier fork in that lineage.

References

Video

• Portfolio / Next.js walkthrough — introductory scaffold; this repo adds the capabilities above.

Documentation (this repository)

• Template setup — Contact (reCAPTCHA, EmailJS, /api/email/send), NetEase player, GitHub stats, Upstash visitor counter, Tina blog (short section), environment variables, copyright.
• Blog (index) — Pointers to content/post/guides/tina-blog.md, setup-hub.md, and on-site URLs under /posts/guides/….
• Architecture — Routes, API map, Mermaid diagrams.
• 3D model — GLB workflow, scene setup, performance.
• Music player — UI-oriented notes (NetEase operations covered in template setup).

Core technologies

• Next.js · Tailwind CSS
• React Three Fiber · @react-three/drei · three.js
• Framer Motion
• NeteaseCloudMusicApi (npm NeteaseCloudMusicApi) — subject to NetEase terms and applicable law.

Service consoles (configuration)

• Google reCAPTCHA · EmailJS
• Upstash (Redis REST URL + token for visitor counts and blog likes/comments)
• GitHub tokens (optional fine-grained or classic PAT for /api/github/stats)

Theme and IP

• Chiikawa / Usagi theming is non-commercial placeholder only. For a public site, replace assets and copy with your own branding and ensure you have rights to any third-party IP you retain.