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!

Finished the readme so much styling stuff I had to do! Added some fixes and features to the game like following suns and resetting cam positions properly. Then I uploaded the polished version to itch io to ship. Made video tutorial and fixed the layout of the terminal so judges won’t be confused.

Ready to SHIP my project! In this last hour of my work, I have finished the local settings panel that displays the selected body tab, I have made the physics more REALISTIC, and I have polished the simulation up a bit! Now I’m just going to make a README, upload to itch.io, and make a video tutorial to hopefully maximize the stardust I gain from my first ever project on Stardance! Thank you everyone for this opportunity that was given to me!

Ok, this is the SHORTEST logged time in a devlog I have ever made for this project so far, but an important feature has been finally added. What is the most important part of the simulation? Well a simulation RECORDS… think about that for a minute. Would it be best to have gravity/velocity arrows, the three body spheres, or the TRAILS. Well, it would be the trails, wouldn’t it? Because they are the HISTORY of the simulation. I have failed at making the 3D trails work 2 TIMES already (some sort of problem with the rendering), because after hours of debugging they just WOULD NOT work. But finally I took a simpler approach (after procrastinating them till like the end of the project almost) and they finally work! Basically it just records data points of the star positions then renders them. Let me know if any of you have feedback!

Just working on getting the global settings panel to finally work with JS after styling it with CSS. Here is this beautiful screenshot of the panel with an interesting image in the viewport XD One thing I have to say, I got dropdowns, off and ons, and number inputs but some of the global settings are unnecessary so I’m gonna get rid of those, fine tune the others, and fix reset/restart terminal commands, then I will finish local settings panel and ship this project.

So close to finishing the terminal! Here is a brief explanation on the difference between the two setting types: the terminal RUNS the simulation and the panels specify HOW the simulation will run, the two panels also play two different roles, one of them is the global settings, the other is the individual LOCAL settings for each body in the simulation. I hope this gives some understanding on how I plan to finish the settings before I go over on what I have been doing recently with the terminal which means ONE step closer to shipping this project! So: most of the work being done so far has been with the terminal right now. I polished up the look so it gets a nice default terminal style. Then I fixed some problems with the text line heights and the input/output contrast. I also made a script to sense certain key words in the terminal to color them so that you know that the word EXISTS and you typed it in correctly. I then added a help cmd function so that it will list all of the cmds. I narrowed down the list of cmds to: run, restart, reset, pause, resume, and debug. I’ve been working on getting them all integrated and am almost done. Next is the panels after the terminal is done.

Added the skeleton of the UI!!! It looks nice right now I think, and you can select which sun you want to edit now. Finished ARROWS with contrast yet cohesion because they are velocity and gravity for each star, so same color and stuff, but different lengths, like clock hands. Worked for so LOOOOOOONG on trails but they just wouldn’t show no matter the debugging I tried so I’m giving up on trails (which I didn’t really need anyways). Just need to make the settings and then we can SHIP this project! YASSSSSSS HOORAY!!!

FINISHED THE 3-BODY PHYSICS!!! Awesome! Then I worked on making all of the simulation settings (already made & newly added) as some neat vars clustered together in the top of the code. After that I started working on the UI, my vision right now is a terminal on the bottom, a banner on the top, and two panels on top of each other on the left, the top one will be the global sim settings and the bottom one will be the selected sun settings. I finished the terminal UI but I need to make it where you can type into it and stuff. Finally, I posted the current version of the unfinished demo onto itch.io! Next I will finish the UI and work on trails + velocity and pull arrows.(Btw, that blue building icon in the screenshot isn’t part of the project, this was made on my school Chromebook so that’s an annoying thing on my screen!)

I was adding three unique yet COHESIVE suns together in a solar system (for our THREE bodies), adding a cluster system to the new procedural background star generation function I replaced the texture with and a color tint (looks more NATURAL), adding coronas to the three suns and removed their textures, working on orbit and zoom (especially the START position and min/max zoom), removed sphere for background since we don’t use a texture for that ANYMORE, cleaned up the code and polished some stuff. Now I can start working on the physics and then the UI after that.

I started by joining Stardance, connecting my project to Hackatime, creating a GitHub codespace, and a repository with it. I began working on the sun, orbit controls with camera, glow through bloom effect, rotation animations, and background. (It’s all 3D)

In fact, I made my first sun sphere (so first body) and then put it INSIDE of a sphere with the looping PNG to achieve a HDRI effect.

Next I will set parameters for the zoom, make three suns, and work on trails + physics. (Which isn’t to be taken lightly cause the physics is going to be CRAZY)

Thank you Stardance for letting me join!
-dkh