Japanese Portfolio Site Developer

Expert in developing and maintaining React-based Japanese portfolio websites with automated GitHub Pages deployment.

Overview

This skill enables AI agents to work effectively with modern Japanese portfolio sites built using React 18, TypeScript, Tailwind CSS, and Vite. It covers the full development lifecycle including content management, deployment automation, and troubleshooting.

Repository Context

When working with this type of codebase, expect:

Project Structure

```

src/

├── components/ # Shared components (Layout with nav/footer/banners)

├── pages/ # Page components (Home, About, Skills, Projects, Contact)

├── data/ # Data files (projects.ts with TypeScript interfaces)

├── index.css # Tailwind CSS configuration

└── App.tsx # Main app with routing

docs/

├── specifications/ # Requirements and specs

└── resume.md # Japanese resume (gitignored)

```

Development Workflow

1. Setup and Installation

```bash

npm install # Install dependencies

npm run dev # Start dev server (localhost:5173)

```

2. Content Management

**Adding/Editing Projects:**

**Updating Personal Information:**

**Managing Skills:**

3. Building and Testing

```bash

npm run build # TypeScript compile + production build

npm run preview # Preview build locally

```

**Pre-deployment Checklist:**

1. Run `npm run build` to verify no TypeScript errors

2. Test locally with `npm run preview`

3. Verify responsive design (PC/mobile)

4. Check all navigation links

5. Validate Japanese text rendering

4. Deployment

**Automatic Deployment:**

1. Push to `master` branch

2. GitHub Actions workflow (`.github/workflows/deploy-to-root.yml`) executes automatically

3. Build artifacts deployed to master branch root

4. GitHub Pages auto-updates

5. Site live at `https://letsspeak.github.io`

**Manual Deployment (if needed):**

```bash

npm run deploy # Manual GitHub Pages deployment

```

5. Prototype to Production Transition

**Removing Prototype Warning:**

1. Open `src/components/Layout.tsx`

2. Remove or comment out the yellow warning banner component

3. Commit and push changes

**Updating to Real Data:**

1. Replace sample data in `src/data/projects.ts`

2. Update personal info in all page components

3. Update skills and experience levels

4. Test thoroughly before deploying

Troubleshooting Guide

Build Errors

**TypeScript Errors:**

```bash

npm run build # Check for compilation errors

```

**Dependency Issues:**

```bash

rm -rf node_modules package-lock.json

npm install # Clean reinstall

```

Deployment Failures

**Check GitHub Actions Logs:**

```bash

gh run list # List recent workflow runs

gh run view [RUN_ID] --log # View detailed logs

```

**Common Issues:**

**Force Push (if conflicts):**

```bash

git push origin master --force # Use carefully

```

Runtime Issues

**Routing Problems:**

**Styling Issues:**

Key Conventions

Japanese Content

Component Structure

Data Management

Deployment

Important Constraints

1. **Prototype State**: Sites may include prototype warning banners - remove before production

2. **Japanese Language**: All content must be in Japanese unless specified otherwise

3. **GitHub Pages**: Deployment constrained to master branch root directory

4. **MIME Types**: Build artifacts must be properly structured to avoid MIME type issues

5. **Responsive Design**: Must support both desktop and mobile viewports

Examples

Adding a New Project

```typescript

// In src/data/projects.ts

export const projects: Project[] = [

{

id: "new-project",

title: "新しいプロジェクト",

description: "プロジェクトの簡単な説明",

longDescription: "詳細な説明文...",

technologies: ["React", "TypeScript", "AWS"],

imageUrl: "/images/project.jpg",

githubUrl: "https://github.com/...",

demoUrl: "https://demo.example.com",

startDate: "2024-01",

endDate: "2024-12"

}

];

```

Updating Skills Section

```typescript

// In src/pages/Skills.tsx

const skills = [

{

category: "機械学習",

items: [

{ name: "PyTorch", level: 90, years: 3 },

{ name: "TensorFlow", level: 85, years: 2 }

]

}

];

```

Quality Checks

Before considering work complete:

1. ✅ All TypeScript compiles without errors

2. ✅ Responsive design tested on multiple screen sizes

3. ✅ All navigation links work correctly

4. ✅ Japanese text displays properly

5. ✅ Build succeeds locally

6. ✅ GitHub Actions workflow passes

7. ✅ Site accessible at GitHub Pages URL

8. ✅ No console errors in browser

Notes