King Tin Beau Kuok - Portfolio Website

A modern, interactive portfolio website showcasing my work as a Full-Stack Engineer. Built with React, TypeScript, and Three.js, featuring smooth animations, 3D elements.

🚀 Features

• Interactive Landing Page - Animated hero section with smooth scrolling
• About Section - Professional background and skills overview
• Work Showcase - Horizontal scrolling gallery of featured projects
• Career Timeline - Professional experience and achievements
• Tech Stack - Visual display of technologies and tools
• Contact Section - Easy ways to get in touch
• Responsive Design - Optimized for desktop, tablet, and mobile devices
• Smooth Animations - Powered by GSAP and Lenis smooth scroll
• 3D Elements - Three.js integration for enhanced visuals

🛠️ Tech Stack

Core

• React 18 - UI library
• TypeScript - Type-safe JavaScript
• Vite - Build tool and dev server
• React Router - Client-side routing

Animation & 3D

• GSAP - Advanced animations
• Lenis - Smooth scrolling
• Three.js - 3D graphics
• @react-three/fiber - React renderer for Three.js
• @react-three/drei - Useful helpers for react-three-fiber

Styling

• CSS3 - Custom styling with animations
• React Icons - Icon library

Other Libraries

• chess.js - Chess game logic
• stockfish.js - Chess engine
• @vercel/analytics - Analytics integration

📦 Installation

1. Clone the repository:

git clone <repository-url>
cd portfolio

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The site will be available at http://localhost:5173 (or the port shown in terminal).

🎯 Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint

⚙️ Configuration

All portfolio content is managed in src/config.ts. Update the following sections:

• Developer Info - Name, title, description
• Social Links - GitHub, LinkedIn, email, phone
• About Section - Personal description
• Experiences - Work history and roles
• Projects - Portfolio projects with images/videos
• Skills - Technical skills and tools
• Contact - Contact information

Adding a Project

Add a new project object to config.projects:

{
    id: 7,
    title: "Project Name",
    category: "Category",
    technologies: "Tech Stack",
    image: "/images/project.png",
    video: "/videos/project.mp4", // Optional
    description: "Project description"
}

Adding a Video Instead of Image

Set the video property in the project config:

{
    id: 1,
    title: "Guestboard",
    video: "/videos/guestboard.mp4",
    image: "/images/guestboard.png", // Used as poster
    // ...
}

🎨 Customization

Colors & Styling

• Modify CSS files in src/components/styles/
• Global styles can be added to src/index.css or src/App.css

Animations

• GSAP animations are configured in individual components
• Lenis smooth scroll settings are in Navbar.tsx

3D Elements

• Three.js scenes can be added in components using @react-three/fiber

🚀 Deployment

Build for Production

npm run build

The dist/ folder will contain the production-ready files.

Deploy to Vercel

1. Push your code to GitHub
2. Import the repository in Vercel
3. Vercel will automatically detect Vite and configure the build

The site is configured for Vercel deployment with analytics integration.

📝 License

This project is private and proprietary.

👤 Author

King Tin Beau Kuok

• Email: beau.kuok.dev@gmail.com
• GitHub: @light89219
• LinkedIn: King Tin Beau Kuok
• Location: United Kingdom

🙏 Acknowledgments

• Built with modern web technologies
• Inspired by contemporary portfolio designs
• Uses open-source libraries and frameworks