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 Shobhit a developer who treats software as a system, not a surface.
I don’t believe portfolios should explain skills. They should demonstrate thinking.
Instead of building another scrolling webpage with sections and cards, I built an environment that behaves like a real operating system. Real products are systems, not pages, and this portfolio reflects how I design, structure, and reason about software.
This is not a website. It’s an operating system.
Portfolio
Note on Presentation
While the portfolio is fully deployed on Google Cloud Run, embedding it directly inside the DEV post significantly degrades the experience due to iframe constraints, limited viewport size, and disabled full-screen interactions.
This project is a desktop operating system, not a scroll-based webpage.
To preserve the intended experience, I’ve included a short video walkthrough below and provided a direct link to explore the portfolio normally in a full browser window.
🎥 Video Walkthrough
This video demonstrates:
- Boot and login flow
- Desktop environment
- Window management
- Dock, Spotlight, and Control Center
- Application interactions
🖥️ Live Portfolio (Recommended)
For the full experience, please visit the portfolio directly:
🔗 https://nextjs-app-709587781727.us-central1.run.app/
This allows proper screen dimensions, keyboard interactions, smooth window behavior, and accurate OS-level performance.
---Built a macOS-Inspired Operating System as My Developer Portfolio
The portfolio begins with a login screen, inspired by real desktop operating systems.
There is no required username or password.
you can type anything into the input field and press Enter to log in.
--labels dev-tutorial=devnewyear2026
This portfolio recreates a macOS-style operating system inside the browser, including:
- Boot and login screens
- Desktop environment
- Window manager
- Dock and menubar
- Spotlight search
- Control Center
- Launchpad
- Sleep and shutdown states
Every application inside the OS represents a different aspect of my profile, projects, or technical abilities.
You don’t browse this portfolio. You operate it.
How I Built It
This project was engineered as a system, not assembled as a UI.
Tech Stack
- Next.js and React
- TypeScript
- Tailwind CSS
- Radix UI / shadcn UI
- Custom OS-level state management
- Deployed on Google Cloud Run
System Architecture
At the core of the application is desktop.tsx, which functions as the operating system kernel. It manages:
- Open window registry
- Active window focus and z-index
- Overlay visibility (Spotlight, Control Center, Launchpad)
- Theme propagation and screen brightness
- System state persistence
Windows are rendered dynamically through a controlled component mapping system, allowing new applications to be added without modifying the window manager itself. This mirrors how real operating systems are designed.
How I Used Gemini
Gemini was used as a design and reasoning engine rather than a simple code generator.
Using Google AI Studio, I worked with Gemini to:
- Design the window management architecture
- Model OS-level behaviors such as focus shifting and maximize/restore logic
- Validate state management decisions
- Anticipate edge cases and performance bottlenecks
- Refine component responsibilities before implementation
Gemini helped me reason about the system at an architectural level, allowing me to design first and implement with clarity.
How I Used Antigravity IDE
Antigravity accelerated development by enabling system-wide thinking rather than file-by-file coding.
It allowed me to:
- Rapidly scaffold and iterate complex components
- Explore alternative architectural approaches safely
- Refactor deeply nested UI logic without breaking system behavior
- Maintain consistency across the entire codebase
Antigravity transformed the workflow from writing components to designing a platform.
What I'm Most Proud Of
Window Management System
A complete window manager with:
- Click-and-drag movement
- Eight-point resizing
- Minimize, maximize, and close controls
- Z-index correction for active windows
- State persistence across interactions
This required precise DOM control and event handling without sacrificing performance.
OS-Level Thinking
This project behaves like an operating system rather than a website:
- The Dock reflects running applications
- Spotlight supports keyboard-first navigation
- Control Center overlays system state
- Mobile layouts adapt OS behavior instead of removing it
Application Ecosystem
Each app demonstrates a different technical capability:
- Finder: UI layout systems and navigation
- Notes: Markdown rendering and content architecture
- Terminal: CLI simulation logic
- Weather: Canvas-based animation system
- GitHub: Embedded profile and project viewer
- Safari: Web container interface
- Snake: Game loop and state logic
This portfolio doesn’t list skills — it demonstrates them.
Performance Discipline
- Conditional rendering to minimize overhead
- DOM refs for drag and resize operations
- Controlled CSS transitions
- No unnecessary re-renders or animation bloat
The OS remains responsive even with multiple windows open.
Final Thought
I didn’t build this portfolio to look impressive.
I built it to reflect how I think about software.
This is not a website.
It is a system.
And systems are what I love building.
Top comments (2)
great work !! I specially liked the dome gallery component in the photos app
okay this is cool