Jacob

I basically got the other part of my time below added so basically see the dev log below:

I basically added a bunch of features. Due to a bug in my hackatime, most of my time wasn’t recorded but basically I added various different tabs on the app home page, added support for DMing and just basically edited a bunch of stuff. I added my own custom command called ?ask-ai which will forward context, the main question and threaded replies to ai to get a response. I even added a double request checker in the bot!

I also added a bunch of features inside of the main dashboard for helpers. Sadly the AI feature and most of the main dashboard stuff is BLOCKED FOR NORMAL USERS - PLEASE USE OTHER TICKETS FOR REFERENCE!

In this session, I finalised the website, adding the logo, reformatting it, a small introduction to the site and more.

Now the site has a better gradient. You have the main gradient but as you scroll down, the yellow becomes more present. This was a bit hard to code, but I did get it done.

I also created a dark mode, as most websites do this. I did snuggle with making all the text etc fit with the dark mode and the gradient of the yellow still work, however, it does look very good and I am very happy. I hope to make this a toggle in the future, however, I am unsure on how to do this and so I will wait.

I also replaced the text in the top right of the main website with the actual logo and with much effort to adjust the sizing, I got is practically perfect. Along with this, I adjusted the width of the card on the page as they looked very cramped and were getting weird when set in a mobile type window size. I fixed this and it looks a lot better now.

I also made an entrance screen. When you load the site, it shows the main logo, pretty big on the yellow gradient background for around 1.5 seconds. I have used this on a couple of my sites before and I think it worked really well this time and actually looked really good once complete.

Not only this, I added the ability to link websites to creators. So basically, in members.js, you can now type a link which will automatically open when you select that user. At the moment, this only works for me (Jacob N) and links to my personal website.

I also added a feature so the members come forward when you hover your mouse cursor over them.

I also added a basic footer containing credit to me and a couple emojis.

I also added glow behind the names on the main text of the page. While it isn’t really obvious it is good and subtle enough not to be overwhelming but distinguish between the different people!

In the end, this website was practically finished, with automatic gradients, adapting to new members and editions and various features to make this feel to be one of my best websites ever.

Below are some pictures with what the site looks like in the various modes.

My initial design!

So basically, I took the main site and split the pages into main sections and began to add all the different parts of site, like users and then (using a bit of AI) created the JS files and some of the logic for all the members. I copied some of the design from previous websites of mine and started on the design for the logo etc etc. I also hid all of my friends names and the schools name for safety reasons. Sadly, I won’t be able to actually post the magazine until the school approves it for digital use.

I also worked on how the layout will work, changing up the animations and specifically how I would lead the users through the site. I also considered using different html files for different pages, but I though for something as small as this, it may be useful to not use something as big.

Not only this, I added the button logic to move around and some of the download logic, but it is a bit buggy.

I need to also work on the spacing when you actually click on an edition as it looks really weird, and I need to completely rework it. I am also conciderign adding banners to editions, although I haven’t decided on this yet!

I hosted the site on vercel, and began writing my README. I have created plans for the future of the site, including an actually functioning search menu and a footer to credit me, but also to give the search bar space when there are no results.

While the site looks pretty good, I needs more refining and work to make it run smoother and also to just look generally better, in preparation for the end of Flavortown and the release of the second edition soon (hopefully next week??)

I basically added a bunch of features. Due to a bug in my hackatime, most of my time wasn’t recorded but basically I added various different tabs on the app home page, added support for DMing and just basically edited a bunch of stuff. I added my own custom command called ?ask-ai which will forward context, the main question and threaded replies to ai to get a response. I even added a double request checker in the bot!

In this session, I contacted Tristan, and created drafts and started the planning and designing for the website. It came together very quickly with a navigation bar and key sections with examples of his work. I came across many issues with images not appearing and VS Code not working correctly, but still produced an amazing product.

2 Commits total.

I created the main HTML and CSS including the loading screen, the main screen and all of the information that you would require! Doesn’t work yet, still in testing!

https://hackclub.slack.com/archives/C01504DCLVD/p1775145292660719

Fixed some UI stuff and now I am ready to publish!

Scrapbook Link: https://scrapbook.hackclub.com/Jacob%20Navaratne/

I now finally fixed my CSS and JS file. The logic now works perfectly after I refinied it as much as possible. The CSS also make the site looks pretty modern and slick.

It took me quite a while to fix my CSS as I was struggling to get all the spacing right. I also struggled quite a lot with refining the logic of the app, making sure that everything worked correctly and in a nice way. I will be shipping this project as soon as Flavortown’s voting returns!

Added some cool CSS stuff (required some CoPilot for this…) and added the HTML and also designed what my apps should look like!

I used GitHub Codespaces to create a reward tracker app. It basically tracks how many rewards you have (in my school; that is commendations) and you can then see how many you are waiting for, how many you have received and your estimated total. It uses some nice colours (my favourites actually) and saves everything locally to make it easy. There is a .json upload and download as a backup to saving, so I reccomend not clearing cache for this website / using –app mode when opening it! AI was used to help me create my CSS/JS files and debug parts of them. I hope you enjoy / use my app! (The theming broke a bit, sorry…)

Just added over 100 puns, added a shake animation that runs every 5 to 15 seconds, you can now move the magnet and see how long until the magnet refreshes! (SHHHHH: You can press M to force reload the magnet!). I did use AI for most of the puns…

I created the base html and css with a fridge colour with a script that give you a pun every day! I used AI to help me debug my script and help me a bit with my CSS and JS!

This is my final version. I added some placeholders for images and fixed some centering issues. AI was used for basic debugging.

There are no images for obvious privacy reasons!

I spent a while working hard to get the main messages and text on the html site. Then, I attempted to create some CSS but needed to get the help of GitHub’s Codespaces to fix my CSS. Tomorrow, I need to fix my CSS, add some images and polish off the site.

Some background info: I created this website on the 20/2/2026 in about an hour. You can see this on my GitHub, however, I did not initiate Hackatime therefore my time was not tracked. So I continued to improve my website, now with Hackatime working correctly.

What I changed: So I added a font from Google and added an accent colour. I was also able to implement my Hackatime stats (ironic; to be honest) and also my GitHub heatmap. Then I had the idea to add scrolling text at the top of my site.

I did have to use AI to debug small bits of my code, but it was only really used in my Scrolling Text bit as it wasn’t being displayed properly.

This would have NOT been possible without Google and lots of YouTube Videos…. The AI that I used was the AI inbuilt into GitHub Codespaces.