Portfolio V4
The fourth iteration of my personal portfolio, representing a complete redesign focused on visual impact and technical innovation. Built with Next.js 14 and TypeScript, this portfolio showcases my work through an immersive experience featuring custom GSAP animations, interactive image effects, geometric design patterns, and optimized performance.
The Challenge
Design and build a portfolio that stands out from typical developer portfolios while maintaining excellent performance, accessibility, and showcasing technical creativity. The site needed to demonstrate both design sensibility and engineering skill, serving as a living example of my capabilities.
The Solution
Created a unique geometric design language with custom clip-path shapes and angular elements throughout. Implemented advanced GSAP scroll-triggered animations for smooth page transitions. Developed a custom ripple animation system for the profile image with canvas-based masking. Optimized all animations for 60fps performance and implemented progressive loading strategies.
Tech Stack
Key Metrics
Details
- Category
- web
- Year
- 2026
- Status
- completed
- Role
- Designer & Developer
Key Features
Geometric Design System
Custom clip-path shapes, angular cuts, and geometric patterns create a distinctive visual identity across all pages.
GSAP Scroll Animations
Sophisticated scroll-triggered animations with staggered word reveals, blur-to-focus transitions, and smooth element entrances.
Interactive Profile Image
Custom ripple animation on click that transitions between images using canvas-based masking and clip-path effects.
Hover Reveal Effect
Mouse-tracking canvas mask that reveals an alternate image layer on hover, creating an interactive paint-brush effect.
Custom Loading Experience
Pixelated-to-clear image transition on initial load, providing visual interest during content loading.
Project Showcase
Filterable and sortable project gallery with category filtering, tag-based search, and detailed project case studies.
Responsive Typography
Fluid typography scaling and custom font stack using Stack for headings and Quicksand for body text.
Contact Integration
Functional contact form with validation and API route integration for seamless communication.
Project Gallery
Technical Details
Implementation
Built with Next.js 14 App Router and TypeScript for type safety. GSAP powers all scroll-triggered animations with optimized RAF loops. The interactive profile image uses HTML5 Canvas for mask generation and clip-path for the ripple effect. Custom hooks manage animation states and prevent memory leaks. Tailwind CSS with custom configuration handles responsive layouts. Images are optimized with Next.js Image component for automatic format selection and lazy loading.
Lessons Learned
This project deepened my understanding of performance optimization in animation-heavy applications. I learned to balance visual appeal with technical constraints, discovering that sometimes the most impressive effects are achieved through clever combinations of simple techniques rather than complex implementations. The canvas-based masking system taught me valuable lessons about coordinate systems and handling different viewport sizes. Most importantly, I learned that a portfolio should be a demonstration of capabilities, not just a showcase of past work.
Design Handbook
Color Palette
Typography
Stack
Weight: 700Quicksand
Weight: 300-600Patterns & Textures
Angular clip-paths for geometric aesthetic
Triangle SVG patterns in header and footer
Asymmetric layouts with angular cuts
Geometric shape overlays on images
Design Principles
Performance first - All animations optimized for 60fps
Progressive enhancement - Core content works without JavaScript
Accessibility - WCAG AA compliant color contrast and keyboard navigation
Motion design - Purposeful animations that enhance rather than distract
Other Projects
Diploma Uitreiking 2026
The live graduation-ceremony platform for my school, where families enter the code on their invitation to watch the livestream, built in dependency-free PHP with hand-written passkey login and intrusion detection.
Subli Studio
A full-stack custom clothing print shop where customers configure a garment, pick print locations, upload their own design, and pay online, with a complete admin back office behind it.
MultyLeak
A free data breach checker that lets users instantly find out if their email or password has been exposed in known data leaks, powered by the HIBP API.