LuminaOS

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.