🌟 Portfolio Website - Kenji Akira

📋 Table of Contents / Mục lục / 目次

English 🇺🇸
Tiếng Việt 🇻🇳
日本語 🇯🇵

🇺🇸 English

🚀 About This Project

A modern, responsive portfolio website built with Next.js 15, React 19, and TypeScript. Features a beautiful UI with smooth animations, dark/light theme support, and multilingual capabilities (Vietnamese, English, Japanese).

✨ Features

🎨 Modern Design: Clean, professional interface with smooth animations
🌙 Dark/Light Theme: Automatic theme switching with system preference detection
🌍 Multilingual: Full support for Vietnamese, English, and Japanese
📱 Responsive: Optimized for all devices and screen sizes
⚡ Performance: Built with Next.js 15 for optimal performance
🎭 Animations: Smooth transitions powered by Framer Motion
🎯 SEO Optimized: Meta tags, structured data, and performance optimization
🔧 TypeScript: Full type safety and better development experience

🛠️ Tech Stack

Framework: Next.js 15.2.4
UI Library: React 19.1.1
Language: TypeScript 5.0
Styling: Tailwind CSS 3.4.17
Animations: Framer Motion
UI Components: Radix UI
Icons: Lucide React
Forms: React Hook Form + Zod
3D Graphics: Three.js
Theme: Next Themes

🚀 Getting Started

Prerequisites

Node.js 18+
npm, yarn, or pnpm

Installation

# Clone the repository
git clone https://github.com/kenjiakira/portfolio.git
cd portfolio

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 to view the website.

Build for Production

npm run build
npm start

📁 Project Structure

portfolio/
├── app/                    # Next.js 13+ app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── atoms/            # Atomic components
│   ├── molecules/        # Molecular components  
│   ├── organisms/        # Organism components
│   ├── templates/        # Page templates
│   ├── ui/               # UI components (shadcn/ui)
│   └── theme-provider.tsx # Theme context
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
│   ├── translations/     # Multilingual content
│   └── utils.ts          # Helper functions
├── public/               # Static assets
│   └── assets/           # Images, SVGs, etc.
└── styles/               # Additional styles

🌍 Language Support

The website supports three languages:

Vietnamese (vi) - Default language
English (en) - International version
Japanese (ja) - Japanese version

Translation files are located in lib/translations/ and can be easily extended.

🎨 Customization

Adding New Languages

Create a new translation file in lib/translations/
Add the language to the language selector
Update the translation context

Styling

The project uses Tailwind CSS with custom design tokens. Modify tailwind.config.ts for theme customization.

Content

Update content in the translation files or modify components directly.

📱 Responsive Design

The website is fully responsive with breakpoints:

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

🚀 Deployment

Vercel (Recommended)

npm install -g vercel
vercel

Other Platforms

The project can be deployed to any platform that supports Next.js:

Netlify
Railway
DigitalOcean App Platform
AWS Amplify

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact

Developer: Kenji Akira (Hoàng Ngọc Từ)
Email: kenjiakira2006@gmail.com
Location: Hanoi, Vietnam
Portfolio: hnt.io.vn

🇻🇳 Tiếng Việt

🚀 Về Dự Án Này

Website portfolio hiện đại, responsive được xây dựng với Next.js 15, React 19 và TypeScript. Có giao diện đẹp với animation mượt mà, hỗ trợ theme sáng/tối và khả năng đa ngôn ngữ (Tiếng Việt, Tiếng Anh, Tiếng Nhật).

✨ Tính Năng

🎨 Thiết Kế Hiện Đại: Giao diện sạch sẽ, chuyên nghiệp với animation mượt mà
🌙 Theme Sáng/Tối: Chuyển đổi theme tự động với phát hiện tùy chọn hệ thống
🌍 Đa Ngôn Ngữ: Hỗ trợ đầy đủ Tiếng Việt, Tiếng Anh và Tiếng Nhật
📱 Responsive: Tối ưu cho mọi thiết bị và kích thước màn hình
⚡ Hiệu Suất: Xây dựng với Next.js 15 để có hiệu suất tối ưu
🎭 Animation: Chuyển đổi mượt mà với Framer Motion
🎯 SEO Tối Ưu: Meta tags, structured data và tối ưu hiệu suất
🔧 TypeScript: An toàn kiểu dữ liệu đầy đủ và trải nghiệm phát triển tốt hơn

🛠️ Công Nghệ Sử Dụng

Framework: Next.js 15.2.4
UI Library: React 19.1.1
Ngôn Ngữ: TypeScript 5.0
Styling: Tailwind CSS 3.4.17
Animation: Framer Motion
UI Components: Radix UI
Icons: Lucide React
Forms: React Hook Form + Zod
3D Graphics: Three.js
Theme: Next Themes

🚀 Bắt Đầu

Yêu Cầu

Node.js 18+
npm, yarn, hoặc pnpm

Cài Đặt

# Clone repository
git clone https://github.com/kenjiakira/portfolio.git
cd portfolio

# Cài đặt dependencies
npm install
# hoặc
yarn install
# hoặc
pnpm install

# Chạy development server
npm run dev
# hoặc
yarn dev
# hoặc
pnpm dev

Mở http://localhost:3000 để xem website.

Build Cho Production

npm run build
npm start

📁 Cấu Trúc Dự Án

portfolio/
├── app/                    # Next.js 13+ app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── atoms/            # Atomic components
│   ├── molecules/        # Molecular components  
│   ├── organisms/        # Organism components
│   ├── templates/        # Page templates
│   ├── ui/               # UI components (shadcn/ui)
│   └── theme-provider.tsx # Theme context
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
│   ├── translations/     # Multilingual content
│   └── utils.ts          # Helper functions
├── public/               # Static assets
│   └── assets/           # Images, SVGs, etc.
└── styles/               # Additional styles

🌍 Hỗ Trợ Ngôn Ngữ

Website hỗ trợ ba ngôn ngữ:

Tiếng Việt (vi) - Ngôn ngữ mặc định
Tiếng Anh (en) - Phiên bản quốc tế
Tiếng Nhật (ja) - Phiên bản tiếng Nhật

File dịch thuật nằm trong lib/translations/ và có thể dễ dàng mở rộng.

🎨 Tùy Chỉnh

Thêm Ngôn Ngữ Mới

Tạo file dịch thuật mới trong lib/translations/
Thêm ngôn ngữ vào bộ chọn ngôn ngữ
Cập nhật translation context

Styling

Dự án sử dụng Tailwind CSS với custom design tokens. Chỉnh sửa tailwind.config.ts để tùy chỉnh theme.

Nội Dung

Cập nhật nội dung trong file dịch thuật hoặc chỉnh sửa components trực tiếp.

📱 Thiết Kế Responsive

Website hoàn toàn responsive với breakpoints:

Mobile: < 768px
Tablet: 768px - 1024px
Desktop: > 1024px

🚀 Triển Khai

Vercel (Khuyến Nghị)

npm install -g vercel
vercel

Nền Tảng Khác

Dự án có thể triển khai trên bất kỳ nền tảng nào hỗ trợ Next.js:

Netlify
Railway
DigitalOcean App Platform
AWS Amplify

🤝 Đóng Góp

Fork repository
Tạo feature branch (git checkout -b feature/amazing-feature)
Commit thay đổi (git commit -m 'Add amazing feature')
Push lên branch (git push origin feature/amazing-feature)
Mở Pull Request

📄 Giấy Phép

Dự án này được cấp phép theo MIT License - xem file LICENSE để biết chi tiết.

📞 Liên Hệ

Developer: Kenji Akira (Hoàng Ngọc Từ)
Email: kenjiakira2006@gmail.com
Địa Chỉ: Hà Nội, Việt Nam
Portfolio: hnt.io.vn

🇯🇵 日本語

🚀 このプロジェクトについて

Next.js 15、React 19、TypeScriptで構築されたモダンでレスポンシブなポートフォリオウェブサイト。美しいUI、スムーズなアニメーション、ダーク/ライトテーマサポート、多言語対応（ベトナム語、英語、日本語）を特徴としています。

✨ 機能

🎨 モダンデザイン: スムーズなアニメーションを備えたクリーンでプロフェッショナルなインターフェース
🌙 ダーク/ライトテーマ: システム設定検出による自動テーマ切り替え
🌍 多言語対応: ベトナム語、英語、日本語の完全サポート
📱 レスポンシブ: すべてのデバイスと画面サイズに最適化
⚡ パフォーマンス: 最適なパフォーマンスのためにNext.js 15で構築
🎭 アニメーション: Framer Motionによるスムーズなトランジション
🎯 SEO最適化: メタタグ、構造化データ、パフォーマンス最適化
🔧 TypeScript: 完全な型安全性とより良い開発体験

🛠️ 技術スタック

フレームワーク: Next.js 15.2.4
UIライブラリ: React 19.1.1
言語: TypeScript 5.0
スタイリング: Tailwind CSS 3.4.17
アニメーション: Framer Motion
UIコンポーネント: Radix UI
アイコン: Lucide React
フォーム: React Hook Form + Zod
3Dグラフィックス: Three.js
テーマ: Next Themes

🚀 はじめに

前提条件

Node.js 18+
npm、yarn、またはpnpm

インストール

# リポジトリをクローン
git clone https://github.com/kenjiakira/portfolio.git
cd portfolio

# 依存関係をインストール
npm install
# または
yarn install
# または
pnpm install

# 開発サーバーを実行
npm run dev
# または
yarn dev
# または
pnpm dev

http://localhost:3000を開いてウェブサイトを表示します。

本番用ビルド

npm run build
npm start

📁 プロジェクト構造

portfolio/
├── app/                    # Next.js 13+ app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── atoms/            # Atomic components
│   ├── molecules/        # Molecular components  
│   ├── organisms/        # Organism components
│   ├── templates/        # Page templates
│   ├── ui/               # UI components (shadcn/ui)
│   └── theme-provider.tsx # Theme context
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions
│   ├── translations/     # Multilingual content
│   └── utils.ts          # Helper functions
├── public/               # Static assets
│   └── assets/           # Images, SVGs, etc.
└── styles/               # Additional styles

🌍 言語サポート

ウェブサイトは3つの言語をサポートしています：

ベトナム語 (vi) - デフォルト言語
英語 (en) - 国際版
日本語 (ja) - 日本語版

翻訳ファイルはlib/translations/にあり、簡単に拡張できます。

🎨 カスタマイズ

新しい言語の追加

lib/translations/に新しい翻訳ファイルを作成
言語セレクターに言語を追加
翻訳コンテキストを更新

スタイリング

プロジェクトはカスタムデザイントークンを使用したTailwind CSSを使用しています。テーマカスタマイズのためにtailwind.config.tsを修正してください。

コンテンツ

翻訳ファイルのコンテンツを更新するか、コンポーネントを直接修正してください。

📱 レスポンシブデザイン

ウェブサイトは完全にレスポンシブで、ブレークポイントは以下の通りです：

モバイル: < 768px
タブレット: 768px - 1024px
デスクトップ: > 1024px

🚀 デプロイ

Vercel（推奨）

npm install -g vercel
vercel

その他のプラットフォーム

プロジェクトはNext.jsをサポートする任意のプラットフォームにデプロイできます：

Netlify
Railway
DigitalOcean App Platform
AWS Amplify

🤝 貢献

リポジトリをフォーク
機能ブランチを作成（git checkout -b feature/amazing-feature）
変更をコミット（git commit -m 'Add amazing feature'）
ブランチにプッシュ（git push origin feature/amazing-feature）
プルリクエストを開く

📄 ライセンス

このプロジェクトはMITライセンスの下でライセンスされています - 詳細についてはLICENSEファイルを参照してください。

📞 連絡先

開発者: Kenji Akira (Hoàng Ngọc Từ)
メール: kenjiakira2006@gmail.com
所在地: ハノイ、ベトナム
ポートフォリオ: hnt.io.vn

📊 Project Statistics

Made with ❤️ by Kenji Akira

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
app		app
components		components
hooks		hooks
lib		lib
public		public
styles		styles
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
env.example		env.example
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

License

kenjiakira/portfolio

Folders and files

Latest commit

History

Repository files navigation

🌟 Portfolio Website - Kenji Akira

📋 Table of Contents / Mục lục / 目次

🇺🇸 English

🚀 About This Project

✨ Features

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

Installation

Build for Production

📁 Project Structure

🌍 Language Support

🎨 Customization

Adding New Languages

Styling

Content

📱 Responsive Design

🚀 Deployment

Vercel (Recommended)

Other Platforms

🤝 Contributing

📄 License

📞 Contact

🇻🇳 Tiếng Việt

🚀 Về Dự Án Này

✨ Tính Năng

🛠️ Công Nghệ Sử Dụng

🚀 Bắt Đầu

Yêu Cầu

Cài Đặt

Build Cho Production

📁 Cấu Trúc Dự Án

🌍 Hỗ Trợ Ngôn Ngữ

🎨 Tùy Chỉnh

Thêm Ngôn Ngữ Mới

Styling

Nội Dung

📱 Thiết Kế Responsive

🚀 Triển Khai

Vercel (Khuyến Nghị)

Nền Tảng Khác

🤝 Đóng Góp

📄 Giấy Phép

📞 Liên Hệ

🇯🇵 日本語

🚀 このプロジェクトについて

✨ 機能

🛠️ 技術スタック

🚀 はじめに

前提条件

インストール

本番用ビルド

📁 プロジェクト構造

🌍 言語サポート

🎨 カスタマイズ

新しい言語の追加

スタイリング

コンテンツ

📱 レスポンシブデザイン

🚀 デプロイ

Vercel（推奨）

その他のプラットフォーム

🤝 貢献

📄 ライセンス

📞 連絡先

📊 Project Statistics

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Packages