What I Did

Navigation Bar

• I finished the title and button, now I needed the navigation bar.

• What is a navigation bar? It’s like that bar at the top of websites that says “Home” or “About” and it takes you to the different pages.

• I started by making a rectangle the same color as the background but with a glassmorphic effect with a grey 1px border.

• I then used the popular icon library “Lucide”, importing it with <script src="https://unpkg.com/lucide@latest"></script> in my html.

• I loaded them with

<li><a href="#hero"><i data-lucide="home"></i><span>Home</span></a></li>

<li><a href="#portfolio"><i data-lucide="gamepad-2"></i><span>Games</span></a></li>

<li><a href="#about"><i data-lucide="info"></i><span>About</span></a></li>

<li><a href="#contact"><i data-lucide="mail"></i><span>Contact</span></a></li>

• After doing that, I added the logo “AKARI” which would go on the left with the navigation stuff on the right, and I stuck it all into a container.

• Now it was time to add the CSS and check if the navigation bar worked with different screen widths.

• My two biggest problems: making the navigation bar look nice, and making everything properly adjust to different screen widths.

• Now I had my navigation bar foundation ready to test and refine.

• After lots of tinkering, I switched the logo to AK GAMES and I put it on the far left of the bar with the icons and their links on the right.

• I also didn’t like my idea of using the title font for the link and logo text, so I chose to use the “Bungee” font I used for the subtitle instead as it seemed more fitting.

• With this all done, I tested the project in split screen and it was super broken, so I took a break to think.

• During my break, my brother suggested I use two different navigation bars for mobile and desktop, and to use @media which is a CSS thing I had previously not known.

• Back at the computer, I got to work fixing this scaling problem. I managed to make the mobile with just the icons, and the desktop version with both! Meaning the problem was fixed!

• With this done, I realized why I still didn’t like the navigation bar. It looked awful being the same color as the background and with that tiny grey border.

• I changed the border to white and the background of the bar to a darker blue, it still didn’t feel right.

• Eventually I inverted it, I made the navigation bar background white, and all the text and icons in it the color of the website background.

• Being inverted I had to find a color that would look nice for the icons to be when selected and moved up, I decided on an itch.io red and it turned out nice.

Title

• I had finished the navigation bar! But the final thing that looked wrong? The title, subtitle, and button were too small, there was sooo much empty space near it.

• So I decided to make them bigger, and that was when I realized that I now needed to make them scale with the screen width also!

• It took a while but I got them to scale correctly together after encountering many frustrating problems with making them scale perfectly with no trouble.

• For example, one of the problems I was faced with, was finding that agreeable size of all three elements at different screen widths while keeping them visually pleasing.

• Anyways, I kept on tinkering a bit with the CSS after that and I realized the glow was just too strong, and the font didn’t really look professional or connected to the logo I showed in devlog 1.

• I found a nice font called “Sora” and tested it out as a replacement for the title, along with reducing the max glow for the glow fade animation.

• It worked wonderfully! I then adjusted its size and stuff to fit with the subtitle and the button like the font before.

Conclusion

• Next I am going to start working on the actual pages and the form that pops up when you click the button.