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