My very own WebOS - Stardance

Ship #1 Changes requested

@aayat_zafar on My very own WebOS · 18 days ago

I made AayatOS, a desktop-inspired personal website built with HTML, CSS, and JavaScript. It includes an interactive quote generator featuring quotes from some of my favorite authors and anime characters, a desktop-style layout, navigation, and draggable Notes and System Status windows.

The most challenging parts were getting the draggable windows to work without breaking the layout and deploying the project to GitHub Pages. I ran into several issues with the windows overlapping each other and debugging the JavaScript, but after a lot of trial and error I was able to get everything working.

I’m most proud of the quote generator and the overall layout. The quote generator was surprisingly fun to build, and I really enjoyed designing the interface to feel like a personalized operating system instead of a typical portfolio website.

When testing the project, make sure to click the Next Quote button to cycle through the quotes and try dragging the Notes and System Status windows around the desktop. The website is designed to feel like a small interactive operating system rather than a standard webpage.Lastly, I would recommend opening my project on laptop or a monitor as the draggable windows cant be dragged on a mobile phone.

3 devlogs
7h
WebOS 1

Try project → See source code →

Open comments for this post

@aayat_zafar on My very own WebOS · 18 days ago

1h 22m 12s logged

AayatOS is finally complete! 🎉 Seeing everything come together after building it piece by piece has been really satisfying. The project now has a desktop-inspired interface with interactive sections, a working quote generator featuring some of my favorite authors and anime characters, draggable Notes and System Status windows, navigation, and a clean glassmorphism design.
The most challenging part of the project was implementing the draggable windows. At first, all of the windows started overlapping and the layout completely broke. I spent quite a bit of time debugging the HTML, CSS, and JavaScript before realizing the issue was caused by applying the draggable code to the wrong elements. After fixing the class names and limiting the draggable feature to the Notes and System Status windows, everything finally worked as intended.
This project was my first experience building a complete website from scratch, and I learned a lot about structuring pages with HTML, styling them with CSS, and adding interactivity through JavaScript. I’m really happy with how AayatOS turned out, and it was rewarding to watch it grow from a simple webpage into a desktop-inspired personal portfolio. I am excited to make more projects now!

Open comments for this post

@aayat_zafar on My very own WebOS · 19 days ago

22m logged

CSS and JavaScript: After completing the HTML structure, I focused on styling AayatOS with CSS and adding interactivity using JavaScript. I chose a soft pastel colour palette and added hover effects, smooth scrolling, and subtle animations to create a clean and modern interface. For the quote generator, I included a collection of inspirational quotes from Haikyuu!!, Demon Slayer, and two of my favourite authors, Franz Kafka and Fyodor Dostoevsky, making the project feel more personal.
This stage also involved a lot of debugging. I encountered CSS properties that didn’t apply correctly, JavaScript syntax errors, and a few GitHub Pages deployment issues while publishing the website. Solving these challenges helped me better understand front-end development and how Git and GitHub work together for version control and deployment.

Open comments for this post

@aayat_zafar on My very own WebOS · 20 days ago

4h 57m 40s logged

HTML Stage:
The first stage of AayatOS was creating the website’s structure using HTML. Since this was my first time working with HTML, I found it surprisingly easy because the syntax is simple and straightforward. I built the navigation bar, hero section, quote generator, About the Project section, and About the Creator section.

To make the website more organized and visually appealing, I divided the content into different sections and added emojis to the headings. This gave the website a cleaner presentation and made it more engaging for users.