This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
Most portfolios say "attention to detail" somewhere in the copy but then you view source and find inline styles and console errors.
I'm a Data Engineer in Toronto and I wanted a portfolio that proved the claims instead of making them. So I built something that either works flawlessly or exposes me as a fraud. High stakes. Good motivation.
Portfolio
NOTE: Debate Lab and Yield cannot run inside an embedded iframe.
Cross-frame rendering is intentionally disabled to mitigate clickjacking and other UI-redress attacks.
For the full, secure experience, visit dineshd.dev.
How I Built It
The site is a desktop operating system running in the browser. Boot sequence, window management, dock, terminal. Every page is an app that opens in a draggable, resizable window.
Tech Stack:
- Next.js 16, React 19, TypeScript in strict mode
- Tailwind CSS v4, Framer Motion, Zustand
- Vitest for testing
- Google Cloud Run
Architecture
I separated concerns the way actual operating systems do. The os layer handles windows, the dock, the desktop. The apps layer contains applications. Apps never import from OS internals. This keeps things clean. I can add new apps without touching window management. I can refactor the dock without breaking the terminal.
Infrastructure:
Six CI workflows run on every PR. Build, test, security audit, link checking, bundle size monitoring. Nothing merges without passing all of them.
Lighthouse scores sit above 90 across the board. On a site with drag physics, iframe embeds, and boot animations. It took effort.
How Gemini Fit Into the Process
I used Gemini throughout for planning and structure. Not to write code. To think.
"Window management" sounds like one feature until you start listing edge cases. Drag boundaries. Resize constraints. Z-index stacking. Focus transfer on close. Minimize and restore state. It sprawls fast.
I'd describe a feature area to Gemini and ask it to break things down into epics. Here's a trimmed version of the prompt I used:
You are a Senior Product Manager with technical fluency
in modern web applications (Next.js / React).
Convert identified feature areas into well-scoped PM epics
suitable for an engineering backlog.
For each epic:
- Title and goal
- Scope boundaries
- Stories with acceptance criteria
- Implementation order with rationale
Gemini returned structured epics with stories, acceptance criteria, and sequencing. Ready to drop into Notion.
Same approach for testing plans. Describe a component, get back coverage for happy paths, edge cases, failure modes. Review, adjust, execute.
The real value was upstream. Articulating a feature clearly enough for Gemini to understand it forced me to actually understand it. Half the bugs I avoided were caught in the prompting phase.
What I'm Most Proud Of
The terminal works. Not a fake CLI that prints strings. Real command parsing. ls, pwd, whoami, help. Easter eggs I won't spoil here.
Projects run inside the portfolio. My other apps open as windows. Visitors don't leave the site to see my work. They use it in context.
The invisible stuff: Keyboard navigation. Screen reader support. Reduced motion respected. Accessibility was a constraint from the start, not a box I checked later.
The over engineering was the point. Anyone can claim production ready code. Showing a GitHub repo with CI pipelines, test coverage, and passing accessibility audits is harder to fake.
Open some windows. Drag them around. Try the terminal.
If it breaks, that's on me.
Top comments (8)
Turning a portfolio into an operating system is such a creative approach. Shows how much thought you put into structure and user experience. This is an interesting take on what a portfolio can be, the attention to detail and engineering mindset really shows. Over engineered in the best possible way.
Thank you 🫶🏽
Could you please share the github repository?
Here's the Repo . Have fun exploring :) I'd love some feedback on the design as well if you have some
This is a really cool project! Looks well documented and it helped me further understand how to implement LLMs like Gemini into web dev projects. I'll definitely follow along for future updates.
This is amazing, I love the concept and it’s so well executed. The animations are top tier and the backend well speaks for itself. Love this!
Doesn't work on my browser.
which browser are you using?
If you have issues visit the website directly here