My Personal Webpage banner

My Personal Webpage

20 devlogs
28h 58m 2s

The title explains it all! I am making a personal website to show my projects / what I am working on, and a section about myself!

Loading README...

Nathan

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)

Attachment
0
Nathan

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.

Attachment
2

Comments

dhruvil_patel
dhruvil_patel 23 days ago

Your website is amazing

Nathan
Nathan 18 days ago

^ Thanks! dhruvil_patel

Nathan

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

Attachment
0
Nathan

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

Attachment
0
Nathan

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)

Attachment
2

Comments

Silas
Silas 27 days ago

cool!

yefoi
yefoi 27 days ago

i will help you test the feature out by hopping on

Nathan

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.

Attachment
0
Nathan

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

Attachment
0
Nathan

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.

Attachment
0
Nathan

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.

Attachment
Attachment
0
Nathan

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.

Attachment
0
Nathan

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

Attachment
0
Nathan

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.

Attachment
0
Nathan

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

Attachment
1

Comments

Jan Lukasiak
Jan Lukasiak 29 days ago

well done

Nathan

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!

Attachment
0
Nathan

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

Attachment
0
Nathan

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

Attachment
Attachment
0
Nathan

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.

Attachment
Attachment
0
Nathan

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

Attachment
0
Nathan

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

Attachment
Attachment
0
Nathan

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)

Attachment
0