Portfolio v1: The One That Started It All

This was 2021. I had about two years of professional experience, mostly React and GSAP work at Cabin4. I wanted a portfolio that didn't look like every other developer's site. Not a template, not a Gatsby starter with swapped colors. Something that felt like walking into a room I designed.

I wanted two distinct moods. A dark, cinematic intro for first-time visitors that felt like an invitation, and then a clean, light experience once you're inside. Like a theater lobby and the stage. First-timers get the show. Return visitors skip straight to the content.

Next.js 10 with the Pages Router, Material-UI v4 for layout scaffolding, and SCSS modules for everything visual. GSAP handled all animation choreography through a centralized import file that registered plugins once to avoid tree-shaking issues.

• Centralized GSAP setup (Imports.js) with CSSRulePlugin registration to avoid duplicate plugin errors across components
• Marked.js for rendering Markdown strings in work experience descriptions, so job blurbs could use bold and lists without raw HTML
• React Context for three concerns: audio state, page transitions, and contact panel visibility
• NProgress route-change bar with a patched fetch wrapper for perceived loading feedback
• Custom Avenir font stack loaded from /public/fonts with @font-face declarations in the global SCSS

Light theme for the main experience with a teal (#00bfa6) accent throughout. Typography is all Avenir (Book, Roman, Black weights). The landing is dark (#212121) with a glowing, animated container that rotates and pulses. The contrast between the two is intentional.

• Hover-driven icon row on the banner that swaps copy blocks: Contact, Work Story, Hobbies, Medium. Each icon changes what the hero says about me
• Batman graphic in the contact overlay because a "Contact Me" form felt generic. Wanted personality
• Embedded live site iframes in the Work section with a fallback message when X-Frame-Options blocks the embed
• Bottom navigation links duplicated across pages rather than abstracted into a shared component. Cost: maintenance. Benefit: zero coupling

The original v1 is still running at v1.mhdyousuf.me. You can poke around and see the landing, the banner animations, and the work section with embedded sites.

• Animation is a design tool, not decoration. Every GSAP timeline in this site serves a purpose: guiding attention, creating rhythm, or signaling transitions. The moment animation exists for its own sake, it becomes noise
• Personality matters more than polish. The Batman contact panel and background music are objectively "unnecessary" but they're what people remember. The pixel-perfect spacing? Nobody mentions it
• First portfolios are honest. Looking back, the code has rough edges: duplicated Link components, a broken next.config.js plugin chain, dangerouslySetInnerHTML for trusted strings. But it shipped, it worked, and it got me my next job in Dubai
• The best portfolio is the one that exists. I spent weeks debating frameworks before starting. Could have shipped in half the time if I'd just picked one and committed earlier