Devlog 6 | Design Overhaul

Welcome to my sixth devlog! I’ve focused on improving the overall structure of the homepage and made navigation on the website feel more natural.

---

✨ Visuals

🃏 Cards

Now the main text is contained within cards at the top of each page

🎨 Background Blobs Recolor

While I liked the multi-colored background blobs, it didn’t have any main color so I’ve shifted to a green-blue-purple palette

📃 Menu Redesign

The old menu was kind of janky and old looking, I now have a more personalized, modern menu

🏠 Homepage Upgrade

Before, my homepage was simply just a small introduction, now I’ve made it more intuitive and understandable

📱 Responsive Adjustments

Made more adjustments to page resizing to ensure stability on different size screens

⚖️ Two-Sided Navbar

The navbar is now split between two halves, I prefer it like this since it adds a little bit more of my own personal flair :D

---

🔨 Features

📁 Better Page Organization

Each page now has a distinct purpose and doesn’t contain duplicate content from other pages

🗺️ Navigation Improvements

Added large navigation buttons on the homepage to encourage visitors to explore different sections of the site

---

🐞 Fixes

🧹 General Cleanup

Had some weird structuring in the HTML that I fixed and made the CSS more concise

🔘 Fixed Button Alignment

Originally the button alignment broke when shrunk in certain ways, now it doesn’t break anymore

📌 File Organization

My CSS was overly modularized and specific, so I reorganized and reduced the CSS so that there’s roughly half as many files

---

Thanks for checking out this update! This was the biggest design overhaul I’ve done so far, and I’m really happy with how the website is coming together. As always, there’s still more to improve, so stay tuned for the next devlog! 🚀

Devlog 5 | Almost done!

Welcome to my fifth devlog! I’ve now fixed many of the major bugs that were present in my code, modularized the CSS, and I’ve also started to make the site more pretty :D

---

🛠️ Features

Who doesn’t like more features?

📊 Stats

Now you can finally know how many times you toggled dark mode, or how much time you’ve spent on my website!

🕸️ CSS restructuring

Now my files are nice and clean, all of them have been separated into modules and work flawlessly (for now) with each other!

---

✨ Visuals

Here are the new visual updates!

💥 Fixed unstyled content flash

Though it isn’t exactly a loading screen, it hides the flash of unstyled content!

🌊 Added a more subtle transition to visuals

Now most things transition with a 0.25 second delay, it feels really smooth!

🎨 Added the colorful blob background to all pages

I realized that it felt a little awkward with the extras page being the only page with a good looking background

---

🤔 What’s Left?

Approaching the finish line!

🎉 Make the page look more entertaining

Time for me to overhaul the entire styling of my project :D

👤 Add my own personal stuff!

I still haven’t put my own details on the pages (there’s still placeholders)

---

I really hope you enjoy my project :D

Devlog 4 | Mobile Support

Welcome to my fourth devlog on my portfolio! This update has been focused on mobile support, and I’ve also made several changes to how the site adapts to different screen sizes

---

🛠️ Features

All the cool new features!

📖 Timeline Text

At first I wanted to make it so that when you click on the timeline, it would show each section, but I opted to show the section the user is currently hovering over. It makes the site feel more interactive!

🕸️ Restructured File System

Before, I had literally just one JavaScript file and the same code copy pasted across every page, now I’ve modularized it into multiple files (still many bugs to fix though)

---

✨ Visuals

Here are the new visual updates excluding mobile resizing

🌓 Dark Mode Transition

Gradual color transitions make switching between dark mode and light mode easier on the eyes

🔽 Simplistic Footer

I also added a footer that says Made by Cyrus • 2026, it makes the site feel more professional

---

📱 Mobile Resizing

Now my app is compatible with mobile!

😋 Hamburger Menu

When the screen width is low, the menu collapses into a hamburger (the 3-line icon), and when clicked on, it shows a dropdown menu of the links

🟡 Timeline Text

I implemented a mobile-friendly update to my timeline that transforms the page into a vertical layout when the page is shrunk

---

What I’ve Learned

• 🔎 Media queries for adjustments based on screen size
• 🧱 Modularizing code so that maintenance and readability are improved
• 🍔 Awesome hamburger menu
• 💪 Using CSS flex for more complex use cases than centering

---

🤔 What’s Left?

Surprisingly I’m almost done…

🐛 Fix all the bugs

After modularizing the code, a lot of new bugs have been introduced that I need to fix

🎉 Make the page look more entertaining

I’ve mostly worked on JavaScript animations and mobile support, I now need to make the styling itself look better

Add my own personal stuff!

I still haven’t put my own details on the pages (there’s still placeholders)

---

Thanks for reading my devlog! The first image is the hamburger menu, and the second image shows the new modularized file system.

Animations Update!

I have added more animations as it makes the website more entertaining! All the changes are in the demo for those of you who want to see it in action :D

⌨️ Typing Animation

I added a script to make the title look as though it is being typed out!

📏 Navigation Bar Size Limit

Now the navbar doesn’t take up the entire screen width in the scenario the screen is big as it made it a little difficult to use

🌌 Background Text Visibility Fix

I had an issue with the background on the extras page blocking visibility, I’ve fixed this by adding a translucent background on the page and I’m quite proud of it!

⭐ Button/Link Glow

Awesome glow effect on links and buttons

Timeline Transition

Timeline dots appear smoothly after one another

Spinning Dark Mode Button

By using JavaScript and CSS animations I was able to create a cool spin effect when clicking the dark mode button

Thanks for reading my devlog, feedback is appreciated!

Devlog 2 | Dark Mode

Hey everyone! This is my second devlog, and this time I’ve added my biggest feature, dark mode. It saves your preference of light/dark mode using localStorage so you don’t have to keep switching back to your preference every time you go to a different section. I’ve also added a lava lamp-like background to the new page “Extras”. If you haven’t read my first devlog, I’ve made a portfolio website with HTML, CSS, and JavaScript! It’s a website to showcase my skills and background.

Other than that I’ve fixed the navbar not being flush with the corners of the page. Overall I’m content with my progress!

Please give me any suggestions I’d greatly appreciate it ❤️

My Own Portfolio

Welcome to my first devlog! This project is a personal portfolio website that I’m currently building to introduce myself and showcase my development skills. So far, I’ve implemented an animated timeline, JavaScript particle effects, page transitions, and other interactive features. I’ve had a lot of fun building it, and I really hope you enjoy checking out this project!

Features

• 🏠 Multi-page website with navigation
• ✨ Page loading transition
• 🎲 Random welcome messages with repetition prevention using session storage
• 🎉 Click particle effects created with JavaScript
• 📅 Interactive timeline with hover animations
• 🎨 Custom styling using CSS animations and transitions

Built with

• HTML
• CSS
• JavaScript
• Vite

What I Learned

• Structuring a multi-page website
• Using sessionStorage
• Creating animations using requestAnimationFrame
• Making loading screens to hide flashes of unstyled content

What’s Left?

• Remove placeholder text from pages
• Improve animations and transitions
• Make the site more interactive
• Make the portfolio more personal to me

Hope you like it :D