Cybersecurity WebOS

CyberOS V1 — Release Devlog

Hey everyone! We’ve officially finished V1 of CyberOS!

To focus on quality over quantity, I decided to scope down from 7 apps to a tight set of 5 core applications:

Included Applications

• Terminal : CLI with basic commands you know
• Cyber Explorer: Uses a pre-loaded JSON of web links for fast queries without fetching external pages on the fly.

• Cryptography Lab (Featured App) — An interactive lab built to demonstrate core crypto concepts: Caesar Cipher, RSA Encryption & Decryption, RSA Key Generation, and Brute-Force Attack Simulation.

• Dashboard — Visualizer showing live PC component stats.

• Calculator — Handy tool for quick calculations.

💬 Feedback & Thoughts

Would love to hear your thoughts or suggestions for future updates! Drop a comment below. 👇
PS:
I used AI for better formatting of the devlog, not for the actual text

Website live at: https://voidrubik.github.io/CyberOS/

We are back again with a new DevLog. I made some big changes. First I restructured the apps. Now we have 7 apps: - a terminal - an explorer - a calculator - a dashboard - a crypto lab - a password analyzer - a network analyzer All of these are pretty cool but we only have, for now, the calculator and the terminal working. I’m still working on researching encryption algorithms for the apps and the other things I’ve talked about in the other DevLogs. We also have a task bar. We have a popup menu and we have these types of bubble apps connected with thin lines. I also have this screenshot of the code for the terminal, which you can type in help and it will pop up a manual. The terminal was pretty easy to make. It basically uses and prints constants and arrays when you type in commands. It was pretty fun to research how to do this terminal and again I use Claude Code to help me debug my code and implement everything into the website smoothly.

Okay so we’re back with some pretty good news, I think. I implemented the animations I described in the previous Devlog. The text animations will also have this new pop-up window that introduces the webOS to the user, which is basically a reflective pop-up window that requests camera permission of course. It then displays the live camera and a blurry wavy version of yourself. It grabs each of the pixels with a JavaScript library and, using a math function and playing with the pixels and the value of the pixels, you make this wavy and blurry effect.

I also animated the background with a UI component that I found. It uses a JavaScript library again and some randomizer functions to actually grab each group of pixels and color them and you have the oldest pixels and the newest pixels. The oldest pixels have this fading away effect. The library takes charge of the overall orchestration of all the pixels together.

Next up I’ll be working on publishing the demo link and I am working also on the cryptography and decryption apps and the cyber explorer, which is the biggest one

Today I just started putting my foundation for the WebOS. I made a list of two to-do things and I developed the five apps that I want:

Cyber Explorer, which is going to be like Google Chrome but only for the cybersecurity-related topics.

The cryptography app, which is used for encryption.

The decryption app, which is used for decryption.

The notes app, which is just like notes.

I’m going to be writing the encryption and decryption programs manually in the future because I really enjoy it. I think I’m going to do some Caesar’s cipher and other things.

For the background I want to have a radar kind of animation but for now I just used a gradient. The main things I researched or did today were the overall HTML structure. The apps don’t actually work right now, which are just div placeholders for all the windows and apps. I will worry less about them functioning later.

Now for the big part, the visual style, I thought of an animation for each of the texts. When text appears I want to have this animation that grabs an array, which is just the text, and stores it in memory in the program in a variable. It then checks for the length and the used letters and moves the letters that are already used from the scrambling letters.

In the example that I use, hello, we can’t use the letters H, E, L, N, O, or scrambling. We make some frames for the animation, printing each character by character. For example for hello we use H, then H, then H, then E, then L, and then H, E, L, and H, E, L, L. We are using the React library in JavaScript.

For the second part of the animation we just make five frames with a bunch of scrambling gibberish without the letters that were overused and we just implement them one by one. Each of the characters is replacing each of the frames of the scrambling. That way we have an animation. I haven’t implemented it yet but I hope to implement it in a future devlog. There is a picture showing the logic of the animation. I thought it was better than to show the code.

I also investigated some cool loading animations for the start of WebOS and I made a loaded screen with this animation, which is just a library with particle animations. I made the overall first HTML and I included some calendar and timer.

For development, I used Claude Code mainly to help fix bugs, clean up typos, and integrate some of the JavaScript components, especially the loading screen. I wrote the initial HTML structure myself, but once everything was in place, Claude Code helped me resolve integration issues and speed up the debugging process.Overall, today was mostly about building the foundation of the project. The desktop is still very early, but I now have the basic structure, a clear plan for the applications, and several UI ideas that I’ll continue implementing in future devlogs.

I’m genuinely excited because I spent so much time in the animation that I haven’t even implemented yet :(