DEV Community

Cover image for Why I Turned My Portfolio into an Operating System
Jevi
Jevi

Posted on

Why I Turned My Portfolio into an Operating System

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

They say a portfolio has to be clean and direct. I decided to make mine an experience.

I'm Jesús Vílchez (aka Jevi), a developer based in Spain. A while ago, I realized that my PDF CV didn't quite capture who I am. It listed what I know, but not how passionately I do it.

So I asked myself: What if my portfolio was my own computer?

That's how Jevi OS was born. I didn't want another static landing page. I wanted a living space—a place where my projects aren't just links, but folders you open, explore, and touch. A place where you can send me an email from a "real" app or lose time hunting for easter eggs on the desktop.

Portfolio

Welcome to Jevi OS, my personal web operating system.

UX Note: While the site is fully responsive, I highly recommend visiting from a desktop device to experience the full window management system as I imagined it.

How I Built It

This project was a collaboration between my creative vision and Google's AI tools.

The AI Workflow

  1. Ideation with Gemini: I started by using Gemini to brainstorm the project structure and define the core concepts of a "web-based OS". It helped me outline the architecture before writing a single line of code.
  2. Building with Antigravity: This is where the magic happened. I built the project using Antigravity as my pair programmer. I guided the AI, describing exactly how I wanted each window to behave and each menu to look. We worked together to build the features, and I focused on polishing the details—from the fluidity of the animations to the sound of every click.

Tech Stack

  • Framework: Next.js (React) for the core structure.
  • State Management: React Context API. This was the biggest technical challenge—orchestrating a global "Window Manager" that handles opening, minimizing, closing, and z-indexing apps dynamically.
  • Styling: Tailwind CSS for the design system.
  • Infrastructure: Google Cloud Run (Dockerized) for scalable, serverless deployment.
  • Security: Cloudflare Turnstile for the contact form.

What I'm Most Proud Of

  • The "Feel" (User Experience): It's not just a website that looks like an OS; it feels like one. The system allows you to drag, resize, and interact with apps seamlessly.
  • Functional Apps: The "Mail" app isn't a mockup—it actually works. It sends emails using a secure API I built, running in the Cloud Run container.
  • The Details (Creativity): I put a lot of love into the small things. Try to find the "Blue Screen of Death" error hidden somewhere in the system! 😉

I hope you enjoy exploring Jevi OS as much as I enjoyed building it! 🚀

If you have any questions about the project, the custom Cloud Run setup, or where to find the Easter eggs, feel free to drop a comment below! 👇

Jevi-OS login

Jevi-OS desktop

Top comments (0)