Why have a flat Resume when you can have an OS? šŸš€ Dive into BDK-OS

Published: (January 31, 2026 at 02:06 AM EST)
4 min read
Source: Dev.to

Source: Dev.to

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 am a passionate Full Stack Developer with over 2 + years of industrial experience and a deep‑seated love for building high‑performance, creative web applications. My journey in tech is driven by the challenge of transforming complex problems into elegant, interactive digital experiences.

My Portfolio Expression

With this portfolio, BDK‑OS, I wanted to showcase more than just a list of skills. By reimagining my professional profile as a fully functional, browser‑based operating system, I demonstrate:

  • Technical Versatility – Managing complex global states, terminal logic, and game engines.
  • Design Sensibility – A commitment to high‑end aesthetics like glassmorphism and neon‑retro UI.
  • User‑Centric Innovation – Turning a ā€œRead‑onlyā€ resume into an ā€œInteractiveā€ experience where visitors can explore my bio, run my code, and even play a game.

I am always looking for new challenges and opportunities to contribute to cutting‑edge projects. Let’s build something amazing together!

Portfolio

(The portfolio itself is the BDK‑OS interactive site.)

How I Built It

Building BDK‑OS was an exercise in merging retro computing aesthetics with ultra‑modern web performance. My goal was to create a portfolio that felt like a ā€œlivingā€ workspace rather than a static page.

The Tech Stack

  • Framework – Next.js 16.1 (App Router) for high‑performance server‑side rendering and static generation.
  • UI/Styling – Tailwind CSS for a utility‑first, highly customizable design system.
  • Animations – Framer Motion to power fluid window transitions, dragging mechanics, and the ā€œProgressbar95ā€ game engine.
  • Icons – Lucide React for a consistent, minimalist icon language.
  • Deployment – Docker with a multi‑stage build, optimized for production using Next.js standalone output.

Design Decisions

  • The ā€œOSā€ Concept – A windowed desktop interface (BDK‑OS) lets visitors interact with projects, bio, and a terminal as if exploring my digital brain.
  • Glassmorphism & Neon – Heavy backdrop blurs (backdrop-blur-md), semi‑transparent blacks (bg-black/80), and neon blue accents create a high‑end, premium feel.
  • Interactive Terminal – Features a simulated file system (bio.txt, projects.md), command‑history navigation (arrow keys), and integration with the window manager to launch apps like the game.

Development Process

I followed a component‑first architecture, building a custom WindowManagerContext to handle the state of all open, minimized, and maximized windows globally. This enabled features such as focus tracking (bringing the last‑clicked window to the front) and one‑click maximizing.

Google AI Tools Used

The project was built with assistance from Google Antigravity (powered by Gemini models). AI helped with:

  • Architecture Design – Global state management for the windowing system and terminal logic.
  • Complex Logic – Collision detection and spawning algorithms for the ā€œProgressbar95ā€ terminal game.
  • Creative Assets – Generating the custom BDK‑OS favicon using Gemini’s image generation.
  • DevOps Optimization – Crafting a production‑ready Dockerfile and configuring Next.js standalone output for seamless deployment.
  • SEO & Metadata – Automating OpenGraph tags and professional descriptions to improve discoverability.

What I’m Most Proud Of

Breathing New Life into a Classic

The Progressbar95 game integration is the feature I’m most excited about.

  • Technical Achievement – Built a real‑time game engine inside a React component, using Framer Motion for high‑performance animations, falling segments, and collision detection between the ā€œcatcherā€ and dropping bars.
  • Easter Egg Feel – Serves as a tribute to classic OS design while demonstrating my ability to create fun, engaging user experiences.

The Custom Window Management System

Instead of a standard layout library, I built a custom Window Manager from the ground up.

  • Depth and Focus – Dynamic Z‑index system that tracks the active window and automatically brings it to the front, mimicking a real OS.
  • Desktop Workflow – Drag‑and‑drop mechanics, window minimizing to a taskbar, and full‑screen maximize toggle, all powered by WindowManagerContext.

The Command Line Soul

The terminal is more than a static text box; it integrates with my data.

  • Simulated file system reads from actual project data (projects.ts) and biography.
  • Command history (up/down arrows) and unique commands (e.g., game to launch other UI parts) create a cohesive experience for developer‑minded visitors.
Back to Blog

Related posts

Read more Ā»

IDE styled with scrapbook preview

!Cover image for IDE styled with scrapbook previewhttps://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev...