LuminaOS Devlog #9 — File Manager

This update is where LuminaOS actually started to feel like a real OS, not just a bunch of draggable windows.

I built a proper File Manager, and along with that, a virtual filesystem using localStorage. Now files and folders actually persist — you can refresh and everything is still there, which already makes a big difference.

File Manager

The File Manager is pretty complete for a first version. It includes:

• Sidebar with quick access (Home, Documents, Desktop, Downloads, etc.)
• Breadcrumb navigation so you always know where you are
• File & folder grid with icons + basic metadata (size, item count)
• Double-click to open files and folders
• “Go Up” navigation to move back easily

It’s simple, but it already feels natural to use.

File Interaction

Files aren’t just for show anymore. I added a built-in text editor:

• Open text files directly
• Edit and save them
• Changes persist in the filesystem

This was a big step — apps are finally interacting with actual data.

Context Menu + Creation

I also added right-click menus, which makes everything feel way more like a real desktop:

• Open
• Rename
• Delete

And you can now:

• Create new folders
• Create new files

So the system is fully user-driven now, not just pre-defined content.

Taskbar Behavior

The File Manager behaves like a proper app:

• Has its own taskbar icon
• Shows active state
• Restores instantly when clicked
• Keeps its state when minimized

You can leave something mid-way and come back to it exactly how it was.

Under the Hood

I introduced a proper app system:

WindowManager.registerApp(id, config)

LuminaOS Devlog #8 — Fixing Window Chaos & Building Real Behavior

This update was mostly about fixing things that felt wrong — and making the system behave more like an actual OS.

First, I tackled a really frustrating window bug.
If you minimized an app and clicked it again too fast, only the title bar would maximize while the content stayed hidden. And if you did the reverse (maximized → minimized quickly), sometimes only the tab bar minimized and the content just disappeared entirely.

The root issue was state desynchronization — the window container and its content weren’t updating together. So visually it looked like something happened, but internally it was broken.

I fixed it by tightening the window state logic:
making sure minimize/maximize actions always update both the frame and content together, and preventing rapid interactions from breaking that flow.

Now it’s consistent no matter how fast you click around.

Then I added a Calculator app 🧮

It’s a simple one, but it fits the OS:

Supports basic operations (+, -, *, /)
Handles decimal inputs properly
Clean UI that matches the overall system

It’s small, but it makes the OS feel more “usable” instead of just interactive.

The biggest upgrade in this devlog is the taskbar system.

Before, apps were just floating windows. Now there’s actual lifecycle behavior:

When you minimize an app → it moves to the taskbar
When an app is open → it occupies a slot in the taskbar
It stays there until you fully close it
Clicking the taskbar item restores the app instantly
And importantly — the app keeps its state

So if you minimize something mid-use, it comes back exactly how you left it.

From the last build Voters asked me these features most. A UI switch upgrade and a custom time support . So,

🌗 Theme System
Added full UI theme switching:

Dark Sky (original deep space vibe 🌌)
Day Sky (bright blue gradient ☀️)
Theme toggles instantly using a .theme-day class
All colors dynamically flip with clean CSS

Honestly, seeing the rocket still look good in daylight was super satisfying.

⏱ Custom Timer Settings

This was a big one:

Added a Settings menu
Users can input custom minutes + seconds
Saved using chrome.storage.local
Sent a message to background script to reset instantly

So now:

Timer adapts to user preference
No more fixed 25-minute lock
Feels way more like a real productivity tool

In the next time I will add more features like sounds, more Ui themes, and more options, animations. what do you want next time?

LuminaOS Devlog #7— Hacking Together a Fake Terminal 👩‍💻

Alright, empty windows are officially gone — we’ve got our first real app.
Since it’s an OS, the only correct first choice was a Terminal.

I went back into script.js and refactored the createWindow() function so it’s no longer just spawning generic content. Instead, it now injects custom HTML based on the app’s id. This basically turns the WindowManager into a mini app loader.

For app-terminal, I built a proper terminal UI from scratch. Dark, semi-transparent background to contrast the glassy desktop, and I switched the font to JetBrains Mono with that classic hacker-green text. Instantly feels legit.

But just looking like a terminal wasn’t enough — it had to behave like one too.

So I wrote an initTerminal() method.
Here’s the core idea:

When the terminal spawns, it auto-focuses an invisible placed next to a static
guest@lumina:~$ prompt
You type a command, hit Enter, and the script grabs the input value
It echoes the command into the output area (so it looks like a real terminal log)
Then it runs the command through a big if/else logic tree

Right now it supports a few commands:

help → shows available commands
whoami / skills / projects → outputs my actual portfolio info
clear → wipes the terminal output completely

I also added auto-scroll behavior so every new command smoothly pushes the view to the bottom — just like a real terminal session.

And honestly… it feels way better than expected.

You can open the terminal, drag it around, maximize it, and interact with it like a mini text-based portfolio. It’s not just UI anymore — it actually does something.

At this point, LuminaOS is starting to feel like a real environment instead of a concept.

Next step: build something more visual to balance it out.

I’m thinking… Calculator 🧮

LuminaOS Devlog #6 — Z-Index Focus & Window Controls 🎛️

Alright, things just got way more OS-like in this update.

After getting dragging working perfectly, a really annoying issue showed up immediately — window stacking. If you opened multiple windows, they’d just sit on top of each other, and clicking a window in the back did… nothing. No focus, no movement. Super unnatural.

So I fixed that by adding a proper focus system.

I created a focusWindow(win) method inside the WindowManager and introduced a global highestZIndex starting at 100. Now, whenever you click on any .os-window, it increments that value and assigns it to the clicked window.

Result? Instant bring-to-front behavior — exactly like a real OS. Click it, and it pops to the top. Simple, but makes a massive difference in how everything feels.

Next up: the window controls finally got their moment.

Previously, only the red button (close) actually worked. The yellow and green ones were just sitting there looking pretty. Not anymore.

I added two new methods:

WindowManager.toggleMax() (Green — Maximize)
This toggles a .window-maximized class that makes the window fill the screen using 100vw and calc(100vh - 80px).
That -80px is crucial — it keeps the taskbar visible instead of covering it.

WindowManager.toggleMin() (Yellow — Minimize)
This adds a .window-minimized class that shrinks the window down to just the header (40px height) and hides the content by setting opacity to 0.
It gives that classic “rolled up” window effect, which actually feels really clean.

Also added a small but important safeguard:
If a window is maximized, dragging is completely disabled. You have to restore it first — no breaking the layout or doing cursed UI moves.

Now windows don’t just move… they behave properly. They stack, focus, minimize, and maximize like a real desktop environment.

At this point, LuminaOS finally feels interactive instead of just visual.
Next step: time to stop spawning empty windows… and build a real app.

We’re making the Terminal 👀

LuminaOS Devlog #5 — The Window Dragging Engine 🚀

Alright, so windows could open… but they were stuck in one place, which kinda killed the whole experience. So this update was all about making them draggable.

I added a new method in my WindowManager called makeDraggable(). It attaches to the window’s header so you can grab it like a real app window.

Here’s how it works (simple version):

When you press the mouse (mousedown) on the header, it stores your mouse position and the window’s current position
It sets a flag to start dragging and changes the cursor to “grabbing”
Then on mousemove, it calculates how far your mouse moved and updates the window’s position in real time

So basically, the window follows your mouse smoothly across the screen.

Also, since I already had user-select: none, there’s no annoying text highlighting while dragging — which makes it feel super clean.

Now you can open the Terminal, grab the window, and move it anywhere on the desktop. Honestly, just dragging it around already feels really satisfying.

Next step: making those top control buttons actually do more than just close 👀

LuminaOS Devlog #4 — Spawning Windows like a Real OS 🖥️

Alright, now things are starting to feel real.

Having a desktop and taskbar was nice, but without apps it didn’t really feel like an OS. So this time I worked on the core system — the window manager.

Instead of hardcoding windows in HTML, I made a global WindowManager in JavaScript with a createWindow(title, id) function. This function builds the entire window from scratch and adds it to the DOM dynamically.

Each window uses the same glass style as before and includes:

A header with the app title
Three control buttons (red, yellow, green — inspired by macOS)

I also made the close button actually work, so clicking it removes the window from the screen.

Then I added a Terminal icon on the desktop. When you click it, it calls the function and instantly creates a new window. I even added a small random offset so new windows don’t stack exactly on top of each other.

Only issue right now — the window is stuck in place. You can open and close it, but you can’t move it yet.

That’s the next step: making windows draggable.

LuminaOS Devlog #3 — The Desktop & Live Clock 🕰️

Alright, so the login screen looked nice… but going into an empty screen after clicking “Enter Workspace” felt kinda boring. So this update was all about building a real desktop.

First, I made the taskbar.

Instead of a flat bar, I used a floating .glass-panel with blur and rounded corners. It sits slightly above the bottom and looks like it’s hovering over the background — way cleaner.

Then I split it into three parts using flexbox:

Start button on the left with a custom icon and a small hover pop effect
App area in the middle (empty for now, for future windows)
Status tray on the right with some icons and a clock

The live clock was the fun part.

I made an initClock() function using JavaScript. It gets the current time, converts it to 12-hour format, and shows it on the screen. Then I used setInterval() to update it every minute so it always stays correct.

I also fixed the transition.

Now when you click “Enter Workspace”, the login screen fades out and the taskbar fades in smoothly. It feels way more like a real OS now.

Next up: apps and draggable windows 👀

WebOS Devlog #2 — Lock Screen Energy 🔒✨

Alright, so after getting the boot sequence done, it felt kinda wrong just dropping straight into the OS. Like… no real system does that. So yeah this time its all about the login screen, and honestly it already makes everything feel way more legit.

First thing I did was add a whole new overlay for the login screen right after the boot screen in the HTML. Just a simple #login-screen container, but this is basically the “gate” to the OS now. I also hooked in this avatar API (ui-avatars), so it pulls in a clean profile icon automatically. Small detail, but it instantly makes it feel more personal.

Then I went hard on the glassmorphism look — and this part came out really nice.

I built a proper .glass-panel style with backdrop blur, soft borders, and that low-opacity background. When you place it over the animated blobs from earlier, the colors just kinda flow through it. It’s got that frosted glass vibe, like modern UI done right. This is what holds the login form, so it’s basically the centerpiece of the whole screen.

After that, I jumped into JavaScript and rewired the boot flow. Before, it just faded out into nothing… which felt unfinished. Now, once the loading hits 100%, the boot screen fades away and the login screen smoothly appears right after. It’s a small change, but the transition feels super clean — like an actual OS handoff.

I also spent some time on the button, because I didn’t want a boring one.

Made a .primary-btn with that royal blue theme, then added a hover effect where it lifts slightly and casts a soft shadow. It’s subtle, but when you move your cursor over it, it actually feels clickable — like it has some physical depth. Way more satisfying than a flat button.

Next step is making that “Enter Workspace” button takes to the proper desktop + taskbar. That’s where things go from “cool UI demo” to something that actually feels like a working OS.

LuminaOS Devlog #1 — From Nothing to Booting 🚀

Okay so I finally started building LuminaOS, and honestly… it already feels kinda sick.

First, I set up the basic files — just the classic index.html, style.css, and script.js. Nothing crazy, but this is like the “turning on the lights” moment. I also plugged in Outfit for the UI and JetBrains Mono for anything terminal-related, so it already has that clean modern + hacker vibe.

Then I went all in on the background. I didn’t want something boring, so I made this deep space gradient and added these floating blurry blobs that just drift around forever. Since everything later is gonna have that glass blur effect, these blobs basically act like moving light behind the whole OS. It looks super alive even though nothing’s clickable yet.

After that, I built the boot screen — and this part is actually my favorite.

There’s a full-screen overlay with the LuminaOS logo, a loading bar, and some fake “system logs”. I added this animation where the logo slowly pulses (like breathing or something), so it doesn’t feel static.

The loading bar isn’t just a boring smooth fill either. I made a JS function that updates it every 400ms with random jumps, so it feels like the system is actually doing stuff. And as it loads, it throws out messages like:

“Initializing kernel…”
“Validating graphics drivers…”
“Mounting system partitions…”

Super fake, but also… super cool.

When it hits 100%, it waits a bit, then fades out the whole overlay. Right now it just reveals the empty background, but next up is the login screen — which is where things start to feel like a real OS.

#🚀 Astrodoro Devlog

🧱 Where I Started
Okay so at first, Astrodoro was super basic:

Just a popup that said “Astrodoro Timer”
Start + reset buttons only
Timer didn’t save anything
Plain black & white, no space vibe 😅

It worked… but felt super boring.

✨ What I Made

Fast forward to the final version — now it’s basically a mini space mission in your browser:

Full space/glass theme with gradients + stars ✨
Rocket that can float, rumble, or launch 🚀
Exhaust/fire effects + twinkling star background
Buttons look fancy with hover + click effects
Status text so it actually feels alive
⏱ Timer Upgrade

Before: start + reset, no pause, no persistence
Now:

Pause / Resume
Timer saves in Chrome storage
Keeps running even if popup closes
Restores correctly on startup
🔔 Cool Features
Chrome alarms = accurate timing
Notifications when mission ends
Background + popup synced properly
Permissions expanded for real extension stuff
🚀 Favorite Part

When the timer ends → rocket launches and even animates in the active tab 👀
This part was SO fun to build lol

🧠 Big Takeaways
State-driven UI > just showing numbers
Popup + background actually talk to each other
Feels like a real app now, not just a timer

⚡ Final Thoughts

Went from “meh timer” → full interactive space mission 🚀
Rushed near deadline, but honestly one of the most fun projects I’ve done so far.

Next up: maybe stats, sounds, and more missions 👀

Wow, that was the hardest hour yet. It turns out Chrome puts extensions to sleep to save RAM. If you want a countdown timer to survive closing the popup window, you have to use a Service Worker background script and the chrome.alarms API.

I totally ripped out the setInterval in my popup.js and moved the logic to background.js. Now the popup just asks the background script “Hey, what time is it?” and updates the UI. It’s a lot more code, but it’s bulletproof. Next, I want to make an actual reward when the timer hits zero!

I finally added popup.js to make the timer work! I added “Ignition” and “Abort” buttons.
I used setInterval which basically runs a chunk of code every 1000 milliseconds (1 second), subtracting 1 from the total seconds left.

BUT I noticed a massive bug… When I start the countdown, close the popup, and open it again, the timer resets! 😭 Chrome extensions basically die the moment you close the popup box. I’ll need to figure out “Background Scripts” for the next hour to fix this.

Okay, the plain text timer was sad. I spent this 30minutes learning how CSS @keyframes work!(of course AI helped me !).
I added a div for the rocket emoji and made a custom animation called float that just moves the rocket up and down slightly so it looks like it’s hovering in space. I also added a radial gradient to the background to make it look like deep space.

Who knew CSS could do so much without any JavaScript? Next up: making the numbers actually tick down.

White backgrounds are boring. I spent this time linking up a style.css file and bringing in the “Space Grotesk” font from Google Fonts to make it feel futuristic.

I also added the basic HTML structure (<div class="container">, header, etc.) so it doesn’t look terrible. Right now, the timer just says “25:00” in plain text, but the dark navy blue background definitely makes it feel a tiny bit more premium!

so I just got this idea for the Hack Club Challenger sidequest! I don’t have much time left before the deadline, and I wanted to build something that covers both the space theme project and a Chrome extension …so I came up with this.

I’m making a simple Chrome extension called Astrodoro, a space-themed productivity tool. Pretty cool idea, right?

So far I’ve literally just set up the manifest.json so Chrome recognizes it, and created a super basic popup.html that just says “Astrodoro Timer.” Nothing fancy yet I’m forcing myself to learn extension architecture from scratch, no frameworks, just raw files.

Next up, I’m going to make it actually look like space instead of plain black text on white. I’m working on it right now and racing against the clock to finish before the timeline ends. I’ll post it as soon as I can—gotta hurry and code this thing! 🚀