Expert in building and maintaining modern React-based Japanese portfolio websites with GitHub Pages deployment. Specializes in TypeScript, Tailwind CSS, and automated CI/CD workflows.
Expert in developing and maintaining React-based Japanese portfolio websites with automated GitHub Pages deployment.
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.
When working with this type of codebase, expect:
```
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)
```
```bash
npm install # Install dependencies
npm run dev # Start dev server (localhost:5173)
```
**Adding/Editing Projects:**
**Updating Personal Information:**
**Managing Skills:**
```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
**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
```
**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
**TypeScript Errors:**
```bash
npm run build # Check for compilation errors
```
**Dependency Issues:**
```bash
rm -rf node_modules package-lock.json
npm install # Clean reinstall
```
**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
```
**Routing Problems:**
**Styling Issues:**
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
```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"
}
];
```
```typescript
// In src/pages/Skills.tsx
const skills = [
{
category: "機械学習",
items: [
{ name: "PyTorch", level: 90, years: 3 },
{ name: "TensorFlow", level: 85, years: 2 }
]
}
];
```
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/japanese-portfolio-site-developer/raw