Website Setup Complete!

After tweaking some stuff and also adding responsiveness to the achievements, I can now host the website! This took surprisingly long since I had to figure out how to use certain files to make sure everything ended up on the hosted website, but in the end everything worked out :D

Finished

I’ve finished my README and I’m finally done! Now if I make any changes it’s related to hosting

Devlog 8 | Finalization

Welcome to my eighth devlog! This update, I’ve mostly focused on polishing things and making each page feel different (but not too different) from one another. I think I’m basically done at this point! 🎉

✨ Visuals

🔍 Many Small Changes

I’ve done a very large number of margin changes and padding changes so that everything looks nice and polished

🃏 Improved Responsiveness

Some things kind of broke when shrunk still, and all of those situations (to my knowledge) are fixed!

🌗 Consistent Theme Styling

Adjusted shadows and transitions so everything looks consistent in both light and dark mode

🔨 Polishing

💻 Improved Terminal Experience

Made the terminal feel less boring by adding more interactability and polishing it further

🍱 Bento Box Layout

Made a new bento box layout to replace the previous layout, making the page look nicer, and it’s responsive too! It collapses into a column on mobile.

🐞 Fixes

🧹 Even More CSS Cleanup

At this point my CSS is completely cleaned up and the main change is that I’ve put 1 line of space between every single selector

➡️ Fixed Bento Box Disappearing

Bento box stuff was disappearing when transitioning between mobile and desktop so I had to fix that by repainting the page

🥇 Fixed Achievements Mispositioning

Achievements were centering themselves, in their boxes, which made them not line up, fixed it by removing the self-centering

🤔 What’s Left?

📚 README

I actually have not touched the README since my first devlog, so I need to finish that up now

🔧 Host The Website

This is my first time hosting a website, and it’s actually the only thing left other than the README

Thanks for checking out my final major update! It doesn’t look like much, but some of these bugs such as the bento box bug ended up taking almost an hour. I now just need to test it, and put it up on Github Pages or something. For now, be ready for anything :P

Devlog 7 | Interaction Improvement

Welcome to my seventh devlog! This update, I have made the website feel more interactive by adding achievements, and I’ve also added more personal details on the website

✨ Visuals

🃏 Improved Responsiveness

As usual I’ve made some more tweaks and fixes to how the page’s responsiveness works, the timeline no longer clips through everything when resized vertically

👥 Shadow Consistency

Previously I had a different shadow for light mode and dark mode, now they share the same type of shadow

🥇 Achievement Styling

Using both CSS and JavaScript, uncompleted achievements are greyed out, while completed achievements are nice and opaque. Hovering shows a little description of the achievement as well

💯 Final Transition Changes

Now everything has smooth transitions and I’m unlikely to change how it works now!

🔨 Features

🥇 Achievements

Achievements are my newest addition to the site, each contain an image, and a short description, and now all I have to do is add more!

👨‍💻 Stylish Terminal

Now there’s a stylish terminal where you can get a cool achievement :O

📁 More Statistics Usage

By using pre-existing statistics I can make more achievements

🐞 Fixes

🧹 CSS Cleanup

Had some repeated values that were cluttering the CSS that I’ve now removed

➡️ Fixed Timeline

Made timeline not clip stuff when in vertical mode

Thanks for checking out this update! This was a little more relaxed of an update. And as usual, there’s still more to improve, so be ready for the next devlog! 🚀

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! (I hope)

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