Personal Portfolio
Modern Digital Identity with Interactive Physics & Scroll Jacking
Overview & Problem Statement
A portfolio shouldn't just be a static list of projects; it should be a testament to a developer's engineering capabilities. The objective was to build a highly immersive, performant, and memorable digital identity that showcases advanced frontend skills without sacrificing accessibility or SEO.
Solution Architecture
The site relies entirely on highly optimized Vanilla JavaScript, HTML5, and modern CSS3 rather than heavy frontend frameworks. This ensures lightning-fast load times while maintaining complex interactivity like custom cursor physics and horizontal scroll-jacking.
Key Features
- Interactive Terminal: A custom-built JS terminal interface simulating a command-line environment for exploring hidden details.
- Scroll-Jacking Mechanics: Smooth, custom-built horizontal scrolling for the About and Gallery sections.
- Canvas Effects: A custom scratch-card effect built using the HTML5 Canvas API on the homepage hero image.
- Glassmorphism UI: A cohesive dark-mode aesthetic utilizing CSS backdrop filters and custom CSS variables.
Technology Stack
Challenges Overcome
Implementing smooth horizontal scroll-jacking that works perfectly across different screen sizes and input devices (mouse wheels vs trackpads) was highly complex. By capturing delta scroll events and animating the translation of wrapper elements, I managed to create a fluid, hardware-accelerated scroll experience without relying on bulky third-party libraries.