A modern, interactive portfolio website built with React 19, TypeScript, Three.js, and Odin, featuring stunning 3D animations and multi-language support.

• 🎨 Modern Design: Clean and professional portfolio interface with responsive layout
• 🌐 Multi-language Support: English, Japanese, French, German, Chinese, Korean, and Italian with automatic language detection
• 🎭 3D Graphics: Interactive 3D elements powered by Three.js and Odin
• ✨ Smooth Animations: Beautiful transitions using Anime.js
• 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices
• ⚡ React 19 Compiler: Built with latest React features for optimized performance
• 🚀 Vite: Lightning-fast development and production builds
• 🔍 Type-Safe: Full TypeScript support for robust code

• Frontend: React 19 with TypeScript (73.6%)
• Styling: CSS (11.9%), Odin (14.5%)
• Build Tool: Bun
• Backend Framework: Hono
• 3D Graphics: Three.js
• Animations: Anime.js
• Internationalization: i18next + react-i18next
• Linting: ESLint

{
  "react": "^19.2.6",
  "react-dom": "^19.2.6",
  "hono": "^4.12.27",
  "three": "^0.184.0",
  "animejs": "^4.4.1",
  "i18next": "^26.3.1",
  "react-i18next": "^17.0.8",
  "odin": "^2.0.0"
}

{
  "bun": "^1.3.14",
  "typescript": "~6.0.2",
  "eslint": "^10.3.0"
}

• Bun (v1.3.14-canary.1 or higher)

# Start dev server
bun run dev

# Build for production
bun run build

TatsuyaM-portfolio/
├── README.md
├── apps
│   └── api
│       ├── README.md
│       ├── package.json
│       ├── public
│       │   └── static
│       │       └── style.css
│       ├── src
│       │   ├── index.tsx
│       │   └── renderer.tsx
│       ├── tsconfig.json
│       ├── vite.config.ts
│       └── wrangler.jsonc
├── build.ts
├── bun.lock
├── core
│   └── main.odin
├── eslint.config.js
├── functions
│   └── api
│       └── [[path]].ts
├── index.ts
├── package.json
├── postcss.config.js
├── public
│   ├── ScreenShot.png
│   ├── _headers
│   ├── _redirects
│   ├── dist
│   │   ├── main.css
│   │   └── main.js
│   ├── favicon.png
│   ├── icon.png
│   ├── index.html
│   └── main.wasm
├── server
│   └── index.ts
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   ├── components
│   │   ├── Background.tsx
│   │   ├── NowPlaying.tsx
│   │   ├── TerminalWindow.tsx
│   │   └── Typewriter.tsx
│   ├── hooks
│   │   └── useLanguage.tsx
│   ├── i18n.ts
│   ├── index.css
│   ├── locales
│   │   ├── de.json
│   │   ├── en.json
│   │   ├── fr.json
│   │   ├── it.json
│   │   ├── ja.json
│   │   ├── ko.json
│   │   └── zh.json
│   ├── main.tsx
│   ├── pages
│   │   ├── Contact.tsx
│   │   ├── Experience.tsx
│   │   ├── Home.tsx
│   │   ├── Projects.tsx
│   │   ├── Research.tsx
│   │   └── Skills.tsx
│   └── types
│       └── portfolio.ts
└── tsconfig.json

The portfolio automatically detects your browser language:

• 🇬🇧 English - Default fallback language
• 🇯🇵 日本語 - Japanese support
• 🇫🇷 Français - French support
• 🇩🇪 Deutsch - Germany support
• 🇨🇳 简体中文 - Chinese support
• 🇰🇷 한국어 - Korian support
• 🇮🇹 Italiano - Itarian support

Language detection powered by i18next-browser-languagedetector.

Leverages React 19's new compiler features for:

• Automatic component optimization
• Reduced re-renders
• Better performance

Three.js integration provides:

• Interactive 3D elements
• Smooth camera animations
• Custom shaders

Creates fluid, professional animations for:

• Page transitions
• Element reveals
• Interactive feedback

bun run dev      # Start development server
bun run build    # Build for production

Edit content files in src/locales/ for multi-language updates.

Modify CSS files in src/styles/ to customize colors, fonts, and layout.

Add portfolio projects in the projects component located in src/components/.

Fine-tune Anime.js animations in animation configuration files.

Update Three.js scene setup in the appropriate component files.

• GitHub Repository: TatsuyaM-portfolio
• Author: @TatsuyaM2667

This project is open source. See the LICENSE file for details.

We welcome contributions! To contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/YourFeature)
3. Commit changes (git commit -m 'Add YourFeature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a Pull Request

This portfolio is optimized for:

• Fast load times with Vite
• Smooth 60fps animations
• Efficient 3D rendering with Three.js
• Small bundle size through tree-shaking

Last Updated: July 2026
Built with ❤️ by Tatsuya M