Skip to main content

​
Prerequisites

Before you start, make sure you have:
RequirementVersionNotes
Node.js18+LTS recommended
pnpm8+npm install -g pnpm
GitAnyFor cloning the repo
Groq API key—Free at console.groq.com
The portfolio works without a Groq API key, but the AI chatbot will fail to respond. You can add the key later.

​
Setup

1

Clone the repository

git clone https://github.com/RogerCiv/japanese-portfolio.git
cd japanese-portfolio
2

Install dependencies

pnpm install
Use pnpm — not npm or yarn. The project uses a pnpm-lock.yaml lockfile and pnpm workspace overrides for React 19 types.
3

Get a Groq API key

The AI chatbot uses Groq to run Llama 3.1. Groq offers a free tier with generous limits.
  1. Go to console.groq.com
  2. Create an account or sign in
  3. Navigate to API Keys in the sidebar
  4. Click Create API Key and copy it
The free tier is more than sufficient for a personal portfolio chatbot.
4

Create .env.local

Create a .env.local file in the project root:
.env.local
# Required for the AI chatbot
GROQ_API_KEY=gsk_your_actual_key_here
Never commit .env.local to Git. It is already listed in .gitignore.
5

Start the development server

pnpm dev
Open http://localhost:3000 — you should see your portfolio with the Japanese aesthetic.The AI chatbot floating button appears in the bottom-right corner. Click it and ask a question to verify the Groq integration is working.

​
Available scripts

pnpm dev

​
First customization

Once your portfolio is running locally, replace the placeholder content with your own:
1

Update your experience and education

Edit data/experience.ts — update the experiences[] and educations[] arrays with your own background.
data/experience.ts
export const experiences: TimelineItem[] = [
  {
    title: "Your Job Title",
    sub_title: "Company Name",
    years: "2023 - Present",
    details: "What you did there...",
    japanese: "エンジニア",  // optional Japanese label
  },
];
2

Add your projects

Edit data/projects.ts — replace the entries with your own projects.
data/projects.ts
export const projects: Project[] = [
  {
    title: "My Project",
    japanese: "プロジェクト",
    description: "A short description of what this project does.",
    image: myProjectImage,  // Next.js static import
    tags: ["Next.js", "TypeScript"],
    github: "https://github.com/yourname/project",
    demo: "https://project.vercel.app",
  },
];
3

Update your skills

Edit data/skills.ts — customize the skill categories and technologies.
data/skills.ts
import { CodeXml } from "lucide-react";

export const skills: Skill[] = [
  {
    icon: CodeXml,
    title: "Frontend",
    japanese: "フロントエンド",
    techs: ["React", "TypeScript", "Next.js"],
  },
];
4

Update your social links

Edit data/socials.ts with your GitHub, LinkedIn, and other profiles.
5

Update the AI chatbot context

Edit data/portfolio-context.ts — this file generates the system prompt for the AI assistant. It automatically reads your updated data files, so you mainly need to update the static intro text to reflect your name and background.

​
Project structure reference

japanese-portfolio/
├── app/
│   ├── layout.tsx           # Root layout, fonts, ThemeProvider
│   ├── page.tsx             # Home page (Hero + Works + Skills + Experience)
│   ├── globals.css          # CSS variables, Japanese pattern classes
│   └── api/chat/route.ts    # AI chatbot API endpoint
├── components/              # React components (one per section)
├── data/                    # TypeScript data files — edit these!
├── public/images/           # Static images (profile, projects, patterns)
└── types/index.ts           # TypeScript interfaces

​
Next steps

Project Structure

Learn how the codebase is organized.

Customization

Deep-dive into customizing content and theming.

AI Chatbot

Configure the Groq-powered assistant.

Deploy to Vercel

Go live in a few clicks.

Build docs developers (and LLMs) love

Get started for freeTalk to us