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.

Context

• This is my second devlog.

• For any of you wondering, you can do enter by pressing enter + shift in stardance devlogs.

• This one will be short sorry.

What I Did

Title

• I spent like 30 minutes trying to figure out the animation for the title it went to flicker to fade to faster flicker to slower less incremental fade and so on.

• I also was trying to decide between font Fredoka and Modak, Modak is like all filled in bubbly letters, Fredoka is just like bubbly letters.

• In the end I chose Fredoka because it has nicer looking and readable letters lol.

• Also, I settled on a slow fade for the title.

Subtitle

• I decided to add a subtitle under “Akari” which is “Entertainment” so Akari Entertainment, get it?

• After lots of brainstorming, I decided to use “Bungee” font for the subtitle. That was basically it for the subtitle, I position it right under the title.

Button

• I made a button underneath the subtitle which is underneath the title lol. The button is square and simple, with the same font as the subtitle.

• Inactive, the button looks hollow ish, with a white outline.

• Active, the button looks filled and the text is inverted in color. There is also a glow behind the button.

• I decided to name the button “join the team”.

Conclusion

• That’s basically it for now! Next I have to make it where you can scroll down to see stuff about the team, like what games we’ve made, and I have to make a navigation bar.

Context

• This is my first devlog for this project.

• From now on, I will try to use stardance markdown and stuff to make the devlogs look nice!

What I Did

Setup

• Okay, so I lost all my Github Codespace credits, so I thought it was over for me since my laptop’s broken and I’m stuck using a school chromebook.

• What saved me? Hack Club Spaces! What a wonderful website, basically Codespaces but free and for people part of Hackclub!

• With this in mind, I began to brainstorm what my project would be! I decided to make a website/portfolio for Team Akari, an indie game development team I’m part of!

Here is my setup process basically:

1. Make the workspace.
2. Connect GitHub.
3. Attach Hackatime with Wakatime.
4. Get vite so I can preview the website as I code.

• It took a while for me to do those three setup tasks as I am very new to Hackatime, VS Code and Codespaces, and GitHub.

Background

• Okay, so I made a logo for the team in Canva, and I’m still working on it. But I made an interesting midnight blue sort of color for the background, and then I put a glowy figure, mostly transparent static, and the team name “Akari” over it.

• I wanted to kind of use these colors as branding, like the blue background, the glowing character, the white text, and the sort of dots in the background from the static effect.

• So I made a background, simple as that. Tried to get it similar color. #0f1722

• Then I made a mortal mistake. I decided to add glowy particles vfx in the background. LOL

Next few hours…

• I’m a perfectionist, so I basically spent a looong time tinkering with the particles, are they going to be glowy yellow? Or white? Are they going to be big or small? How should they move? Should they follow the scrolling or stay in their place?

• Anyways, you can get an idea of how much time I wasted trying to make something as insignificant as background particles.

• In the end, I decided to make them small little white dots, with random brightness and speeds, that move with turbulence physics!

Tab

• I decided that maybe I should add a favicon and tab title, so I made a tiny version of the logo for the favicon using the letters AK for Akari.

• Then I did a simple “Akari Entertainment” for the title!

Title

• The final thing I wanted to accomplish was making the title, I wanted to make it like the one from the logo, but as I experimented with more and more fonts and font characteristics like font weights, I started to realize how filled in bubbly sort of letters might look cool.

• So for now, I will try “Fredoka” google font and see how it works out.

• Final thing for the font, was adding the neon sort of glow, that was easy, I just made a text shadow with a white glow.

Conclusion

• Okay, so that was what I did in these 3h 41m of working on my project.

Note

• This is actually the most exhausting devlogs I’ve ever made not gonna lie, I hope the extra effort will make the judges like this project better,

What To Do Next

• So basically, I have to design some more stuff before I start implementing like the navigation bar and the user interface. But I feel like I’ve accomplished a good foundation, I can’t wait to see where this project takes me!