Multi-Function Personal Webpage

Updated the README file

The leave a message section now WORKS!!!, it will allow you to send 1 message per 5 minutes, and messages will be synced to my email!

Added a leave a message section on the website! Now it allows you to leave a message on the website! (WIP, NOT IN RELEASE BRANCH)

Added a toast banner that will appear at the bottom right of the screen when the user stays on the home screen for a while to prompt the user to look at my projects.

I’ve added the about page for the website! More content TODO

Refactored the code so the API fetching is less frequent, later I will cache the API responses so its even less frequent

Added a new card on the homepage to count total unique visitors. This is done through using the COUNT(UNIQUE ip_hashed) SQL statement to find the number of unique visitors to my website!

BTW, I am now using git commit message conventions! (So it looks professional lol)

I added a backend program that stores the hashed ID in a SQL database. This will be used to calculate the number of unique visitors and to determine which project is the most popular later on (via click tracking), thereby recommending it for higher placement.

Added Google Analytics to the website to count the unique number of visitors, Ima check if there are any GDPR issues around this later…

Changed the generation logic of the pages, they are now only dependent on one md file, a js script will automatically generate a card in the Projects page, and have it point to a blob when correctly shows the HTML page containing the markdown post.

Added the page to display all my projects! They are all arranged into cards.
Added templates for displaying articles for my projects, which are written in Markdown and turned into HTML using an external script.

Finished making the basic style of the cards on the component page, each card is a custom component which accepts the title, paragraph, and src of the image as attributes.

I added a mobile navbar to my website; it features a smooth animation, which is achieved through transitions in CSS.

Added a graph to display my Hackatime stats (Top Right). This is achieved through the use of a flex-box container, which allows child elements within to be set a percentage width (relative to the whole width of the container) via a value, which is the “percent” value provided by the Hackatime API.

Fixed the Hackatime API! Now I am going to draw some fancy graphs :3

Added a card on the homepage to show the latest devlog for this project from flavourtown. Later, I’ll implement a feature to let users navigate to my project page. which will show the full series of devlogs!

Manage to setup the backend to fetch the devlogs for this project, but still fail to do so for Hackatine, no response in Slack channel either :3

Added a button to toggle the snow effect (which is stored in local storage) and routing for different pages

The header and footer of the webpage are now packed into custom HTML elements using the costumeElements.define function, which allows me to define an element that, in this case inherites the HTMLElement class, and expresses the HTML content packed within.

I added the backend for the hackatime logs (so I can safely fetch from the API without exposing the API Key. Currently ,I ran into issues with API authorization. I’ve asked for help in Slack already :3

Added A place for Hackatime logs, current iframe approach looks ugly tbh, I will be calling the hackatime API next so I can make it look better, but that requires a backend to prevent API key leaks… oof

Added the home page and a single card, also added the header, and the navbar & title within it. The website is responsive, e.g the PFP moved up to the header on phone view, but in the card component on a landscape (computer view)