This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
MelOS: A Svelte-Powered Desktop Portfolio Experience
MelOS is not just a website but a fully functional, browser-based operating system designed to showcase my journey as a 4th-year IT student and aspiring software engineer. Built with Svelte, Tailwind CSS, and Google Antigravity, MelOS features a window management system, a functional dock, and integrated apps like "Photos" for my academic achievements and "Notes" for my development logs.
Why MelOS?
I wanted to create a portfolio that demonstrates my technical ability to manage complex state (like window layering and drag-and-drop) while reflecting my unique personality.
Key Features:
Window Management: Drag, resize, and minimize "apps" just like a real desktop.
Project Integration: Explore my Cleantee capstone project through the file system.
Interactive Resume: A "Contacts" app that links directly to my GitHub and LinkedIn.
How I build it
First, I came up with a plan to make a MacOS like portfolio that is entirely different from most portfolio website out there. I sketched the design and structure, lay out the features. Then I sent the images to Antigravity and discussing the full technical details of the project. Though I have experience with developing a web app with React and Svelte, 70% of the coding was handled by Gemini 3 Pro, while the rest still need a manual adjustments and changes with my oversight.
Technical Implementation
The project is containerized using Docker and deployed to Google Cloud Run for high availability and seamless scaling.
Framework: Svelte
Styling: Tailwind CSS
IDE: Google Antigravity
Hosting: Google Cloud Run
Deployment
https://melos-dev-1011624196775.asia-southeast1.run.app/
What I'm mostly proud of:
I managed to get this website fully working, I encountered a lot of bugs and issues even AI models can't correctly fix, so I need to review a lot of code base. I implemented window system, dock and drag and drop functionality all with Svelte framework. I started this project month ago after years of iteration what is something I can do that can stand-out and amazing that no many people build this kind of portfolio.
About the Author
I am Mel Garcia, a 4th-year Information Technology student at Rizal Technological University and a scholar in Pasig City.
I specialize in full-stack development and am currently focused on building web applications.
Top comments (1)
I'm having a difficulty making this project since I don't have an internet connection at home and had to bring my laptop at the mall. Though I started this project 2 weeks ago and I tried whatever I can finish during that time.
My entry is entirely different from the rest, I think nobody out here had done this portfolio web design so I made one. Hope you like it guys.
Here are more screenshot to what this web app looks like.