DEV Community

Cover image for I missed class to build this immersive portfolio!!
Amaan Syed
Amaan Syed

Posted on

I missed class to build this immersive portfolio!!

New Year, New You Portfolio Challenge Submission

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi, I'm Amaan Syed. I'm not just a Full Stack Developer; I'm an architect of speed. In a world of loading spinners and jittery frames, I believe web experiences should feel like driving an F1 car: precise, fluid, and aggressively fast.

My portfolio is a direct reflection of this philosophy. It meshes strict engineering (Type-Safety, Dockerization) with a visual style that lives at the intersection of Formula 1 aerodynamics and Sci-Fi futurism. I wanted a site that didn't just list my skills but performed like valid race telemetry—precise, fluid, and dynamic.

Portfolio

  • made for desktop (wide screens) and mobile (narrow screens)

🏎️ CLICK HERE TO VIEW FULL SITE (DESKTOP RECOMMENDED)

How I Built It

I wanted to push the browser's rendering engine to its limits using physics-based animations and custom WebGL-style effects without the overhead.

Tech Stack

  • Framework: React + Vite (for lightning-fast builds)
  • Animation: Framer Motion (complex physics-based transitions)
  • Styling: Custom CSS (Glassmorphism + Neo-Brutalism)
  • Deployment: Google Cloud Run (Dockerized Nginx container)

Design Decisions: "AeroFlow" & "Liquid Glass"

  • AeroFlow: The background isn't a static image. It's a living component that renders "Scuderia Red" flow lines using chaotic Bezier curves. They dash and pulse across the screen, mimicking wind tunnel telemetry data.
  • Liquid Glass: The UI elements use a "Frosted Glass" effect combined with high-contrast neo-brutalism, creating a look that feels like a futuristic heads-up display.
  • Immersive Micro-Worlds: instead of a grid, I built:
    • Web: A 3D "Splatter" layout where browser windows float in Z-space.
    • Mobile: A vertical "tear-off" card deck that feels tactile.
    • AI: A "Blast Door" terminal interface with holographic particles.

Google AI Integration

This project was Turbo-Charged by Google Antigravity.
It wasn't just a code generator; it was my pair programmer for complex physics math:

  1. Refining Physics: I used Gemini to fine-tune the damping and stiffness coefficients in the Framer Motion springs for the "Mobile Card Stack".
  2. DevOps-in-a-Box: I'm a frontend guy, not a sysadmin. Antigravity wrote my Dockerfile and nginx.conf for Cloud Run, handling the tricky SPA routing logic instantly.
  3. Visual Polish: The AI suggested using conic-gradient masks for the "Silver Flow Button" to create a perfect metallic sheen without looking like a generic asset.

What I'm Most Proud Of

I am incredibly proud of the Blast Door Terminal in the AI section. It’s pure CSS/JS theatre—scanlines, holographic particles, and a mechanical door opening sequence that syncs perfectly with the user's journey. It turns a boring "Skills" list into a narrative event.
Most importantly the overall aesthetic of the site which I want to theme around my interest like F1, Star Wars, color science and typography

This portfolio is me: Stay Hungry, Stay Foolish!

Top comments (2)

Collapse
 
konark_13 profile image
Konark Sharma

Pretty cool work. I liked the F1 car animation. It really got me addicted to scroll back and forth and really loved the rotating tyre animation. Good job keep it up.

Collapse
 
amaan_syed_1276acb9dcc917 profile image
Amaan Syed

Thanks a lot for the appreciation ❤️