dvyOS
By
@dvydvine
- 4 Devlogs
- 9 Total hours
A Divine themed portfolio website that will hopefully be able to fit the many hobbies and interests I have.
Ship #1
Here is dvyOS! A fake operating system I made in native HTML, CSS, and JS, with multiple apps that act as a portfolio for me and my many hobbies. It includes such features as:
- a MacOS-like menu bar with the time
- moveable and closable windows
- a taskbar with links to open apps
- a desktop with a gradient background and app icons
- a basic notepad app with preloaded files that can be edited
- a Steam-themed games app with games that I’ve made and buttons to open them in an external window, avoiding Cross-Origin Isolation
Making this was very fun, and taught me some new things about div’s and styling I didn’t think was possible. Please enjoy this website, and maybe check out some of my stuff!
It is finished.
After a lot of work and working on other things as well, I finally finished my Web OS! Since my last update, I added two apps, condensed a lot of code into functions, fixed bugs with the Mac bar and taskbar interfering with dragging windows, and many more things. From here, I’m going to send this guy off to review, work on another project for a while, and then add even more to this Web OS. Goodbye for now!
A proper looking (fake) operating system
I’ve finished the third part of the tutorial series and I’ve heavily leaned into this cartoony MacOS / GNOME Linux rice aesthetic. The window is now fully movable through the toolbar and can also be closed with the button in the corner. I also added a taskbar to the bottom of the screen with the app names which I plan to replace with proper designed app icons by me. Alongside that, I want to
- Refactor the JavaScript code, as I believe that some of the repetition can be solved by making classes, and..
- Add the ability to pin and unpin apps on the taskbar.
Other than that, suggestions are appreciated as always!
Nvm, I like the style now.
I have just now finished the second part of the tutorial for my web OS portfolio thingamajig, and I’m starting to like the style more. I decided to try and go off of MacOS and some Linux rices that I’ve seen recently, and that led me to the style below. More work needs to be done before it’s perfect, but it’s starting to get there. Up next, I’m making the window movable and adding more apps.
Is this on??
Um… hi! I am Divine and I’m new to this whole Hack Club thing so I thought I’d do something that gives me stardust to start with, so I can move into the hardware stuff later. I’ve started a website OS which I hopefully will be able to make my digital portfolio, as I do a lot of creative things online. This isn’t my first time in web development, but all my previous things have been basic websites with somewhat flashy animations so this might push me out of my comfort zone. I’ve decided to do one devlog per part of the tutorial and this is my website so far after the first part. I’m not totally in love with the style so far, mostly because there is a specific font that I can’t remember the name of that I want to use instead, but I think that this one will do for now. If there are any suggestions for what I can do next, please tell me!
