Stop Reading Resumes, Start Doomscrolling - a TikTok-style Portfolio with an AI Architect

#devchallenge #googleaichallenge #portfolio #gemini

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

I'm Hoang Manh Cam, a Senior Product Engineer who believes resumes should be an experience, not a document. In a world of infinite feeds and 3-second attention spans, why force recruiters to read a PDF?

My goal: Hijack the dopamine loop. I built a portfolio that feels less like a hiring portal and more like a high-end streaming service.

Portfolio

(Note: The projects featured in the video feed are **Technical Concepts* and MVP Showcases designed to demonstrate specific engineering challenges and solutions.)*

You can visit this url for full experience:
https://devreels-app-1039223934546.us-central1.run.app

How I Built It

I engineered DevReels to mimic the "native app" fluidity of modern social platforms, but with the robustness of a production-grade web app.

Core Engine: Next.js 14 (App Router) & TypeScript driving a highly optimized, client-side heavy interface.
Visuals: TailwindCSS v4 for that sleek, "Void" aesthetic—using deep blacks (#0A0A0A) and subtle gradients instead of flat greys to create depth.
Performance Physics: Powered by Framer Motion. I manually calculated snap points and scroll velocities to ensure that "satisfying" mechanical feel.
The "Architect" (Google AI): Integrated Gemini 1.5 Flash to create a context-aware AI agents. It doesn't just chat; it sees what you're seeing. It knows the specific tech stack of the project on screen and answers questions like a Senior Engineer during a code review.

What I'm Most Proud Of

1. The "Cinematic" UX & Performance 🎞️

I ditched the standard "Infinite Scroll" for a more deliberate, Cinematic Feed.

Smart Pre-loading: Videos rely on a custom isVisible heuristic. Only the active reel and its neighbors are rendered, preserving GPU resources while ensuring instant playback.
"System" Aesthetics: Instead of generic loading spinners, I built technical, data-driven placeholders that make even the waiting feel like part of the interface.

2. "Ask The Architect" - Contextual AI 🧠

Most portfolios have a generic chatbot. Mine has a Project-Aware Architect.

Server-Side Security: All context data is validated server-side.
Rate Limiting: Custom-built, in-memory rate limiting shields the Gemini API from abuse.
It turns a static "About" section into a dynamic, 2-way technical interview. You can grill the AI about my code choices!

3. Obsessive Micro-Interactions ✨

The difference between "good" and "premium" is in the pixels.

Responsive Drawers: On mobile, the UI morphs into touch-friendly Overlays. On desktop, it expands into a persistent Command Center.
Glow Effects: Status indicators (like "Deployed • 2024") pulse with a radioactive green glow.
Custom Cursors: The entire app uses custom cursor states to guide the user's interaction model subconsciously.