What is JPN Web Design?
JPN Web Design is a modern personal portfolio template inspired by traditional Japanese aesthetics — rooted in the wabi-sabi philosophy of simplicity, balance, and purpose. It is built on Next.js 16 with the App Router, TypeScript, and Tailwind CSS 4, and ships with an AI-powered chatbot assistant that can answer questions about your skills, projects, and experience. The template is designed to work as a single-page portfolio where visitors scroll through distinct sections — Hero, Works, Skills, Experience — with a persistent Contact form and AI Drawer available from the navigation at all times.The AI chatbot requires a Groq API key. Groq offers a generous free tier that is sufficient for personal portfolios and development use.
Key Features
Japanese Design
Traditional Japanese visual elements including wabi-sabi patterns (seigaiha waves, uroko scales, kumo clouds) and Noto Sans JP / Noto Serif JP typography.
AI Assistant Chatbot
Interactive drawer-based chatbot powered by the Groq API (Llama 3.1 8B Instant) with real-time streaming responses and conversation history.
Responsive & Mobile-First
Fully responsive layout that works across all screen sizes, built with Tailwind CSS 4 and a mobile-first approach.
High Performance
Next.js 16 with App Router, React Server Components, and the React Compiler enabled for automatic render optimizations.
SEO Optimized
Meta tags, Open Graph metadata, semantic HTML structure, and a web app manifest included out of the box.
Optimized Images
Next.js Image component configured for AVIF format with remote pattern support for Unsplash images.
Dark / Light Theme
System-aware theme switching via
next-themes, defaulting to the user’s OS preference.Vercel Analytics
@vercel/analytics integrated in the root layout for zero-config traffic insights when deployed on Vercel.Tech Stack
| Layer | Technology | Version |
|---|---|---|
| Framework | Next.js | 16.1.6 |
| Language | TypeScript | ^5 |
| Styling | Tailwind CSS | ^4 |
| UI Primitives | Radix UI | ^1.4.3 |
| Component Variants | class-variance-authority | ^0.7.1 |
| AI SDK | @ai-sdk/groq + ai | ^3 / ^6 |
| AI Model | Groq — Llama 3.1 8B Instant | — |
| Icons | Lucide React | ^0.554.0 |
| Fonts | Noto Sans JP, Noto Serif JP | Google Fonts |
| Linting & Formatting | Biome | 2.2.0 |
| Analytics | @vercel/analytics | ^1.6.1 |
| Validation | Zod | ^4.3.6 |
| Package Manager | pnpm | — |
The React Compiler (
babel-plugin-react-compiler) is enabled in next.config.ts via reactCompiler: true, providing automatic memoization without manual useMemo / useCallback calls.Portfolio Sections
The single-page portfolio is composed of the following sections, rendered in order fromapp/page.tsx:
Hero
The opening section introduces the portfolio owner. It renders fromcomponents/Hero.tsx and displays the profile image (via components/Shared/ProfileImage.tsx), headline, and primary call-to-action links.
Works
A project showcase grid rendered fromcomponents/Works.tsx. Project data is loaded from data/projects.ts, where each entry includes a title, Japanese subtitle, description, technology tags, GitHub link, and live demo URL.
Skills
A grid of skill categories rendered fromcomponents/Skills.tsx. Skill data lives in data/skills.ts and is organized into six groups: Frontend, Backend, Database, Design, DevOps, and Tools — each with a Lucide icon and a list of specific technologies.
Experience
A timeline of professional experience and education entries rendered fromcomponents/Experience.tsx using the reusable components/TimelineSection.tsx. Data is sourced from data/experience.ts and split into experiences and educations arrays, each item containing a title, subtitle, year range, description, and Japanese label.
Contact
A contact form rendered incomponents/Contact.tsx, included globally in the root layout so it is accessible from any section via the navigation.
AI Chatbot Drawer
An AI assistant rendered incomponents/AIDrawerLazy.tsx (lazy-loaded). The chatbot is contextualized by data/portfolio-context.ts, which dynamically assembles a system prompt from the portfolio’s skills, experience, education, projects, and social links. The AI endpoint lives at app/api/chat/route.ts.
Prerequisites
Before getting started, ensure you have the following:| Requirement | Minimum Version | Notes |
|---|---|---|
| Node.js | 18+ | Required by Next.js 16 |
| pnpm | Latest | The project uses pnpm workspaces |
| Groq API Key | — | Free tier available at console.groq.com |