Tools
Tools: I missed class to build this immersive portfolio!!
2026-02-02
0 views
admin
About Me ## Portfolio ## 🏎️ CLICK HERE TO VIEW FULL SITE (DESKTOP RECOMMENDED) ## How I Built It ## Tech Stack ## Design Decisions: "AeroFlow" & "Liquid Glass" ## Google AI Integration ## What I'm Most Proud Of ## This portfolio is me: Stay Hungry, Stay Foolish! New Year, New You Portfolio Challenge Submission This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI 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. I wanted to push the browser's rendering engine to its limits using physics-based animations and custom WebGL-style effects without the overhead. This project was Turbo-Charged by Google Antigravity.
It wasn't just a code generator; it was my pair programmer for complex physics math: 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 Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - made for desktop (wide screens) and mobile (narrow screens) - 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) - 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.
- 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. - 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. - Refining Physics: I used Gemini to fine-tune the damping and stiffness coefficients in the Framer Motion springs for the "Mobile Card Stack".
- 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.
- 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.
how-totutorialguidedev.toaisysadminroutingnginxdocker