Tontae Portfolio

A modern, high-performance portfolio website for Tontae, a Game Developer & Software Engineer specializing in Unity, Roblox, and full-stack development.

🚀 Features

• Next.js 16 with App Router and Turbopack
• React 19 with modern hooks and patterns
• TypeScript for type safety
• Tailwind CSS v4 for styling
• Framer Motion for smooth animations
• Three.js integration (optional 3D components)
• Responsive Design with mobile-first approach
• SEO Optimized with proper meta tags
• Performance Focused with image optimization and lazy loading
• Accessibility compliant components

🛠️ Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• 3D Graphics: Three.js (React Three Fiber)
• Smooth Scrolling: Lenis
• Deployment: Vercel

📦 Installation

1. Clone the repository:

git clone https://github.com/yourusername/tontae-portfolio.git
cd tontae-portfolio

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

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

🚀 Build & Deployment

Build for Production

npm run build

Start Production Server

npm start

Lint Code

npm run lint

🎯 Performance Optimizations

This project includes several performance optimizations:

• Image Optimization: Automatic WebP/AVIF conversion
• Bundle Splitting: Code splitting with dynamic imports
• Lazy Loading: Images and components load on demand
• Compression: Gzip compression enabled
• Minification: SWC minifier for faster builds
• Preloading: Critical resources preloaded
• Caching: Optimized caching headers

📁 Project Structure

src/
├── app/
│   ├── layout.tsx      # Root layout with metadata
│   ├── page.tsx        # Homepage
│   └── globals.css     # Global styles
├── components/
│   ├── CustomCursor.tsx    # Custom cursor component
│   ├── FloatingSymbols.tsx # Animated background symbols
│   ├── Reveal.tsx         # Animation reveal component
│   ├── SmoothScroll.tsx   # Smooth scrolling wrapper
│   └── YouTubeEmbed.tsx   # YouTube video embed
└── data/
    └── portfolioData.tsx  # Portfolio content data

🎨 Customization

Colors

The design uses a neumorphic style with these key colors:

• Primary: #d43e35 (Red)
• Background: #f8f9fa (Light Gray)
• Text: #222222 (Dark Gray)
• Accent: #00A2FF (Blue)

Content

Update portfolio data in src/data/portfolioData.tsx:

• Projects with images, descriptions, and links
• Skills and technologies
• Contact information

📱 Responsive Design

The website is fully responsive with breakpoints:

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

🔍 SEO & Social Media

• Open Graph meta tags for social sharing
• Twitter Card support
• Structured data for search engines
• Sitemap generation

🚀 Deployment

Vercel (Recommended)

1. Push to GitHub
2. Connect to Vercel
3. Deploy automatically

Other Platforms

The app can be deployed to any platform supporting Node.js:

• Netlify
• Railway
• DigitalOcean App Platform

📈 Performance Metrics

• Lighthouse Score: 95+ (Performance, Accessibility, SEO)
• Bundle Size: Optimized with tree shaking
• Load Time: < 2 seconds on fast connections
• Core Web Vitals: All metrics pass

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Tontae (Dullayathit Phittayapanjarat)

• Portfolio: tontae-developer-portfolio.vercel.app
• Email: dullayathit@gmail.com
• GitHub: @Tontae

---

Built with ❤️ in Chiang Mai, Thailand