A 3D portfolio website inspired by Tokyo night markets and alleyways, built with React, TypeScript, and Three.js. This portfolio showcases my work, creativity, and personality as an engineer through an immersive 3D experience.
This portfolio is heavily inspired by Tokyo alleyways and night life, featuring a Toyota AE86 Trueno Sprinter (one of my favorite cars) as the centerpiece. I wanted to create something different from typical engineering portfolios - something that showcases my personality and provides visitors with a unique experience.
The site uses Three.js for 3D graphics and animations, creating an immersive environment that reflects my love for Japanese car culture and urban aesthetics.
- 3D Environment: Interactive 3D scene with animated camera movements
- Tokyo Night Market Theme: Neon lighting, urban atmosphere, and Japanese car culture
- Project Showcase: Interactive cards displaying my work and experience
- Audio Integration: Background music and sound effects for immersion
- Responsive Design: Works on both desktop and mobile devices
- Frontend: React 19, TypeScript, Next.js 15
- 3D Graphics: Three.js, React Three Fiber, Drei
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Node.js (version 18 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/ddang175/portfolioWIP.git
cd portfolioWIP- Install dependencies:
npm install- Set up environment variables:
- Copy
env.exampleto.env.local - Add your email address:
- Copy
NEXT_PUBLIC_CONTACT_EMAIL=your.email@example.com- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
Music from #Uppbeat (free for Creators!): https://uppbeat.io/t/walz/yen License code: 8XKYNR0MZXPUNE2V
Car model: https://sketchfab.com/3d-models/initialdcarmesh-a8b3d9d2cf7346f2b33dad02b5c0053e