A macOS-Inspired Operating System Portfolio Built using Antigravity

Shobhit Kapoor — Fri, 30 Jan 2026 04:56:34 +0000

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.

DEV Community: Shobhit Kapoor