Context

• Devlog 5 I guess.

• One thing first, I noticed that now, people treat websites as trash. Nobody cares about them anymore.

• This kinda crushes my hope to get that 3D printer from this, people are just going to rate my project low now just cause its a website. But I I guess I’ll just try and hope for the best.

• So here is what I have done in the 3.5h of work:

What I Did

Navbar

• I scrapped the entire light mode/dark mode stuff I had added before. Then I decided to rebuild a new dark mode.

• I changed the white navbar to super transparent dark blue, then the text to white.

Button

• I made the button smaller, thinner, and less rounded to make it look better.

Background

• I added a gradient to the background, then found a blueprint design buried in my files, I think its literally the one on the Hackclub website though, whoops! I guess I’ll just use it as a placeholder for now then.

Light Mode

• I made it so the button works again, and thus you can switch to white mode, which looks kinda icy with black text I guess.

Cleanup

• I cleaned up the code A LOT, the CSS, the HTML, and the JS, but just the part for me, like my formatting and mess of code. (Because I’m a messy coder lol)

• Next I need to actually optimize the particles so they don’t cook your phone which is a problem I… not so recently noticed but decided to ignore.

Smooth Scrolling

• I used this thing I found called Lenis <script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script> to make the scrolling smooth.

Conclusion

• That’s all for now, but I think this is finally looking professional, I dunno though.

• Whats next? Well I can’t predict the future but I want to make it easier for phones to run it and I want to add actual pages.

Context

• My… fourth devlog I think?- It’s been quite a while, I took a week long break.

• This one will be short cause I’m kinda tired of these long devlogs…

What I Did

• So I needed somewhere to publish my website, whether to test on mobile, for the final version, or to show to other people for feedback.

• My first Stardance project was a… three body system physics simulation, and I used itch.io for that, now honestly, a website doesn’t fit on itch.io so I had to find something… different.

• I decided I would use GitHub Pages! Cause it’s free and GitHub was already connected to my project and I was already using it for commits, what else could I ask for?

GitHub Pages Setup

1. I basically made it so whenever I run the command npm run deploy in my vs code terminal, it would deploy the latest version of my website to GitHub Pages.

2. I had to put code into my vite config and package json to automate everything upon that command.

3. Then I tested it on GitHub, so after a long time of confusion and testing, it finally worked!

• Even now, I’m very new to using VS Code and GitHub and Hackatime or just programming in general so I did not even know what npm even was before this LOL. This was as you can see one of my biggest struggles.

• Here is the link to it on GitHub Pages: https://dkhdev25.github.io/Team-Akari-Website/

Dark Mode

• There was one other big thing I did, which was dark mode. Or setting the foundation for dark mode.

• I decided to use the very generic symbols for moon and sun for light and dark mode indicators, then I stuck a button in the top left corner of the website.

• The hardest part after that was figuring out how to… invert stuff and switch it to dark mode, cause the website was already high contrast…

• After like an hour or so of work, I had the foundation dark mode completed and a not very good version of dark mode yet.

Conclusion

• This leads to my conclusion! But its a happy/not happy conclusion.

• I got a foundation for dark mode, and now can easily update the public version of my website.

• However… the website just doesn’t look… professional yet, I was scrolling through https://www.darkmodedesign.com/ and these website showcases showed me what style of website I actually want to create.

• So my next move is before even moving onto actually building the other stuff, the WHOLE website is getting a full on uh… makeover is the right word to describe it I think.

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!