Quick Start
Clone the repo, configure your environment, and have a running portfolio in minutes.
Project Structure
Understand how components, data files, and API routes are organized.
Customization
Update your personal info, skills, projects, and theme to make it yours.
AI Chatbot
Configure the Groq-powered assistant that answers questions about your portfolio.
What is JPN Web Design?
JPN Web Design is a full-featured personal portfolio template with a distinct Japanese wabi-sabi aesthetic. Built on Next.js 16 with the App Router, it combines traditional Japanese visual patterns with a modern development stack.Japanese Aesthetic
Traditional patterns — seigaiha waves, uroko scales, kumo clouds — rendered in CSS for authentic visual identity.
AI Assistant
An interactive chatbot powered by Groq’s Llama 3.1 model streams answers about your skills, projects, and experience.
Data-Driven
All portfolio content lives in TypeScript data files — update one file and changes propagate throughout the entire site.
Tech stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router + React Compiler) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 |
| AI | Groq SDK — Llama 3.1 8B Instant |
| UI Components | Radix UI + shadcn/ui |
| Icons | Lucide React |
| Linting | Biome |
| Fonts | Noto Sans JP + Noto Serif JP |
Portfolio sections
The portfolio ships with five fully-built sections:- Hero — Profile image, name, title, and social links
- Works — Project showcase grid with tags, GitHub links, and live demo URLs
- Skills — Technology grid organized by category with Japanese labels
- Experience — Timeline of professional experience and education
- AI Drawer — Floating chat widget powered by Groq
Get started
Update your content
Edit the files in
data/ to replace the placeholder content with your own information.Start here: Quickstart guide
Follow the step-by-step guide to get your portfolio live in under 10 minutes.