Bart Luttels - Portfolio

A stunning, modern portfolio website built with React, Three.js, and Framer Motion.

Features

• 🎨 3D Particle Field - Interactive Three.js background
• ✨ Custom Cursor - Smooth, animated cursor with glow effect
• 🌊 Smooth Animations - Framer Motion powered transitions
• 📱 Fully Responsive - Works on all devices
• 🎭 Dark Cyber Theme - Modern, professional design
• 🌍 Multilingual - Dutch and English support
• 🐳 Docker Ready - Deploy anywhere with Docker Compose

Tech Stack

• Framework: React 18 + TypeScript
• Build Tool: Vite
• 3D Graphics: Three.js + React Three Fiber
• Animations: Framer Motion + GSAP
• Styling: Tailwind CSS
• Deployment: Docker + Nginx

Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Deploy with Docker

# Build and run
docker-compose up -d

# Access at http://localhost:3000

Deploy on Coolify

1. Push this repo to GitHub
2. In Coolify, create new resource → Docker Compose
3. Connect your GitHub repository
4. Deploy!

Structure

src/
├── components/
│   ├── Hero.tsx           # 3D animated hero section
│   ├── About.tsx          # About me with stats
│   ├── Experience.tsx     # Timeline of experience
│   ├── Skills.tsx         # Skills visualization
│   ├── Connect.tsx        # Social links & availability
│   ├── Navigation.tsx     # Animated navigation with language switch
│   ├── ParticleField.tsx  # Three.js particles
│   └── CustomCursor.tsx   # Custom animated cursor
├── i18n/
│   └── LanguageContext.tsx # Multilingual support (NL/EN)
├── App.tsx
├── main.tsx
└── index.css

Customization

Edit the data in each component to personalize:

• Experience.tsx - Your work history
• Skills.tsx - Your skills and levels
• Connect.tsx - Your social links
• i18n/LanguageContext.tsx - All translations (NL/EN)

---

Built with 💜 by Bart Luttels