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