This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
I'm Midul Jacob, a Senior Software Engineer specializing in high-performance distributed systems. With this portfolio, I wanted to create more than just a resume—I wanted an immersive "dual-world" experience that bridges the gap between the rigid logic of engineering and the organic chaos of real life. It’s designed to reflect my technical rigor while expressing the personality behind the code.
Portfolio
How I Built It
The portfolio is a study in Narrative UX. I built it using:
- Core Stack: Next.js 14 (App Router), TypeScript, Tailwind CSS, and Framer Motion.
- Architectural Design: A "Dual Layout" system. The "Work" world is a high-contrast terminal aesthetic (Zinc/Midnight), while the "Life" world is a warm, vintage "Kraft Paper" theme with serif typography and organic layouts.
-
Google AI & Tooling:
- Gemini 3 Pro & Gemini Flash: Acted as my multi-model ensemble for pair programming and architecture. I leveraged the deep reasoning of Gemini 3 Pro for complex state management (like the Work/Life transition logic) and the speed of Gemini Flash for rapid prototyping and refining UI components.
- Google AI Studio: I used AI Studio to prototype and systematically tune the prompts used for generating and refining the UI/UX components, ensuring the "Midnight" and "Kraft Paper" themes felt cohesive and intentional across the entire application.
- Google Cloud Run: Used for seamless, containerized deployment, ensuring a fast, globally accessible experience on a serverless infrastructure.
- Transitions: I implemented a custom "CRT Power Down" transition using Framer Motion to create a physical sense of "switching off" the work machine and stepping into real life.
What I'm Most Proud Of
I'm most proud of the "Life" Page Aesthetics. Transforming a standard web page into a vintage scrapbook—complete with hand-drawn "Language Stickers," a "Kraft Paper" texture, and a Polaroid gallery with real-world memories—was a rewarding design challenge.
Beyond the core layout, I added several Easter Eggs to reward exploration:
- "Wrong Context": In the terminal-themed hero, one of the auto-typing lines breaks the professional sequence with a self-aware joke about my time in France, complete with a "wavy" strike-through effect.
- The Rabbit Hole: Hidden in the footer of the "Work" world is a subtle link that triggers the "CRT Shutdown" override, pulling the user from the digital terminal into the analogue "Life" gallery.
- Analogue Interaction: The Polaroid gallery and Language Stickers respond to hover with physical rotations, mimicking the feeling of sorting through physical items on a desk.
Technically, I’m excited about the Engineering Rigor baked into the project: from the clean, modular component architecture to the MDX-driven content layer that keeps the technical blog posts and library stack structured and performant.
Top comments (0)