🌐 Project Story: AsnanP Portfolio – An Adaptive, Immersive Showcase for AI & ML 💡 What Inspired Me
Being an AI/ML developer and designer in UX, I was frustrated with the disconnect between almost everything that portfolios show and what they actually mean. Most developer sites are antiquated static resumes, elegant yet disengaged; others are obnoxiously overloaded with fancy effects that break on mobile or are incompatible with accessibility.
I asked myself:
What if my portfolio were more than just a gallery—an intelligent, responsive system encapsulating the very principles I stand for: adaptive intelligence, human-centered design, performance-first engineering?
That vision birthed into this site: a living manifestation of my philosophy—where every scroll, hover, and device interaction is treated with utmost intent.
🧠 What I Learned
Building this pushed me far beyond basic web dev:
Adaptive Rendering: I learned how to detect device capabilities (through navigator.hardwareConcurrency, deviceMemory, connection.effectiveType) and then serve three tiers of experience: full 3D for the high-end, streamlined models for the mid-range, and static fallbacks for low-end or slow networks.
Performance as UX: I implemented network-aware loading, lazy streaming of 3D models, and reduced-motion compliance to show that performance is not merely speed, but a respect for the user.
Immersive Accessibility: Making Three.js scenes keyboard-navigable and screen-reader-friendly taught me that true UX includes everyone—even in 3D spaces.
Progressive Enhancement: I started with semantic HTML, then layered in WebGL, tilt effects, and custom cursors only when allowed by the browser and user context; guaranteed universal access without sacrificing wow.
🛠️ How I Built It
Building everything from scratch using vanilla tech for maximum control:
Core Language: HTML5, CSS3 (with clamp(), custom properties), and the modern ES6+ JavaScript.
3D & Interactivity:
Three.js for GPU-3D modeling (.glb format), with dynamic lighting, floating animations, and OrbitControls.
Vanilla Tilt.js for subtle card hover effects in response to cursor position.
Intelligent Loading:
A device profiler checks for memory, CPU cores, and network speed at runtime.
On mobile or slow-2g, the site disables particles, reduces model quality, and skips heavy animations.
Fallback to static SVGs if WebGL fails.
Custom UX Systems:
A performance-aware cursor with a magnetic hover, particle bursts, and haptic-like audio feedback (using Web Audio API).
Scroll-triggered animations via Intersection Observer—never on initial load.
Dark mode that respects prefers-color-scheme, and reduced motion that honors prefers-reduced-motion.
PWA & SEO:
Service worker for offline access.
Structured JSON-LD, semantic HTML, and dynamic meta tags for rich search results.
⚠️ Challenges I Faced
Performance vs. Polish: The initial builds were crashing mid-tier phones, so I solved this problem by developing an on-the-fly device classifier that can scale visual fidelity dynamically–no more “works on my machine” excuse.
3D on Mobile: iOS required that I provide shader fallbacks in its WebGL implementation along with the adjustment of texture compression. Now, detecting iOS, I serve lightweight assets.
Accessibility in 3D: Since my Three.js scenes weren't recognized by screen readers, I created off-screen ARIA live regions and keyboard-controllable focus zones.
Jank in Custom Cursor: The Custom Cursor was thrashing, and I addressed the issue with transform: translate3d() + will-change, plus blocking in on touch devices.
Bundle Blight: Slow was Three.js + models, loading LCP. I applied code splitting, lazy loading the models, and critical inline CSS—on 3G even less than 2-second load.
🌟 The Outcome
This isn't just a portfolio—it’s a proof of concept for the future of developer websites:
It's fast on a $100 Android phone
It's glorious on M2 Ultra MacBook Pro
It's considerate of user preferences (motion, color, data)
It's installable as PWA with offline support
Working through each line of code represents my dual persona—an AI engineer care for human experience and designer respect for machine constraints.
And importantly, this is 100% me.
Log in or sign up for Devpost to join the conversation.