Tze Foong's Portfolio

A modern, interactive portfolio website built with Next.js 15, featuring animated components and dynamic visual effects.

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• Animation: Motion (Framer Motion v12)
• Icons: Lucide React, Tabler Icons
• Fonts: Geist Sans & Geist Mono

Getting Started

Install dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Build for production:

npm run build

Start production server:

npm start

Sections

• Hero - Dynamic introduction with pixelated canvas and flip word animations
• About - Personal information and social links
• Experience - Professional work history timeline
• Education - Academic background and achievements
• Projects - Featured projects with tech stack and live demos
• Contact - Contact form and information

Features

• Dark/Light theme toggle with animated transitions
• Interactive pixelated canvas with mouse distortion effects
• Responsive design optimized for mobile and desktop
• Smooth scroll animations with blur fade effects
• Dynamic content loading from JSON data files
• Email contact form integration