Screenshot of the portfolio website
Overview
A personal portfolio website built from scratch using modern web technologies. Features an interactive WebGL smoke background, smooth theme transitions, and a minimal noir design aesthetic. The site showcases projects, technical skills, and professional experience while maintaining excellent performance and privacy standards.
Technical Implementation
Built with Next.js 16 and React, utilizing server-side rendering for optimal SEO and performance. The WebGL background uses Three.js with custom GLSL shaders implementing Fractional Brownian Motion (FBM) for realistic smoke effects. Mouse interactions create dynamic distortions through smooth interpolation. Theme switching persists via localStorage and smoothly transitions between dark and light modes without recreating the WebGL context.
Key Features
- Interactive WebGL smoke background with mouse tracking
- Smooth dark/light theme switching with localStorage persistence
- Responsive design optimized for all screen sizes
- Privacy-first analytics with Plausible (no cookies)
- GDPR-compliant with proper Datenschutzerklärung and Impressum
- Self-hosted fonts (Google Fonts via Next.js)
- Minimal, elegant noir aesthetic with careful typography
- Project pagination system for scalable portfolio growth
Technologies Used
- Frontend: Next.js 16, React, TypeScript
- Styling: Tailwind CSS v3 with custom dark mode configuration
- Graphics: Three.js (@react-three/fiber), GLSL shaders
- Icons: Simple Icons (tech stack), Font Awesome (social links)
- Analytics: Plausible Analytics (privacy-friendly)
- Hosting: Configured for Hetzner deployment
Development Highlights
The project emphasized performance optimization and user experience. WebGL uniforms use React useRef to prevent shader recreation on theme changes, ensuring smooth transitions. The smoke effect underwent multiple iterations to achieve the desired "noir" aesthetic with fine, flowing lines rather than dense clouds. All external resources are self-hosted to maintain privacy and reduce external dependencies.
Special attention was paid to GDPR compliance, implementing a comprehensive privacy policy and ensuring no tracking occurs without user awareness. The site uses localStorage only for theme preferences and Plausible Analytics for aggregated, anonymous statistics without cookies.