This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Hi, I'm Narendra Singh Chandrawat, a Senior Full Stack Developer with over 3 years of experience building scalable web applications.
With this portfolio, I wanted to solve a specific problem in the hiring process: The disconnect between Recruiters and Engineers. Recruiters often need high-level, business-oriented summaries, while Engineering Managers want to see the stack, the complexity, and the code.
My portfolio expresses this duality by offering two distinct "viewing protocols": a clean, professional Recruiter Mode and a gamified, terminal-inspired Developer Mode.
Portfolio
How I Built It
Frontend: React, Framer Motion (for complex animations), Tailwind CSS.
Data: GitHub API (for fetching real-time project stats).
AI: Google Gemini API (@google/genai SDK).
System Instructions: I configured the model to adopt a specific persona—a CLI-based system administrator. It creates an immersive experience where the AI verifies the visitor's "ID" and "Archetype" before answering questions about my background.
Streaming: I utilized the sendMessageStream API to give the chat a retro, teletype feel as the tokens are generated.
Design Decisions
Instead of a simple "Dark Mode" toggle, I implemented a Content Variant System.
Recruiter Mode (HR): Displays concise bullet points, professional serif fonts, and standard card layouts.
Developer Mode (DEV): Displays the same data but written in "tech-speak" (e.g., "Experience" becomes "CAREER_LOG"), uses monospaced fonts, and renders circuit board visualizations using SVG.
What I'm Most Proud Of
I am most proud of the Dual-Persona Content Engine.
It’s not just a CSS theme switch. When you toggle between modes, the actual text content changes to suit the audience.
HR Mode sees: "Architected and deployed scalable frontend solutions."
Dev Mode sees: "Refactored legacy codebases to modern React hooks and Context API."
This ensures that I am always speaking the right language to the right person, powered by a seamless, animated transition that makes the site feel alive.
Top comments (0)