For my main navbar I decided to use a fixed position so that the options are always available to the user.

On the left I have added colour scheme choice buttons, these work by adding a class of light or dark to the html element, each class contains the css variables to effect the theme change. I have utilised local storage to save the prefered theme between site visits, also on the first visit the theme is selected based on the users prefered theme settings, defaulting to dark if they have no preference.

The scroll behavior of the Projects and Contact links is dependant on the users <Prefers Reduced Motion> flag, I have tried to respect the reduced motion flag with every animation, please let me know if you think I missed anything.

I have used a grid to display my skills, I have used a grid-template-columns repeat(auto-fit,minmax(80px, 1fr)) to ensure this displays responsively. In fact I have not used an media queries to achieve the responsiveness of my website.

I decided to include React and Typescript but clarify that I am still in the process of learning them. I apply a blur filter to the img child of the comingsoon class, and use a pseudo after element to add the coming soon text which has a text-shadow to increase its legibility. I have also used a greyscale filter to dull down the comingsoon logos.

For my Resumé page I decided to recreate my resumé in html and make it look as though it is on two sheets of paper on a wooden desk. The animation I added was one of the most straight forward aspects of the entire site proportionally to its impact. I decided to add the phone, coffee stain and polaroids to enhance the 'desk' effect, notice that the time on the phone is correct (±1min) and if you move it around the wifi and mobile signal change. If you are viewing my resumé on a phone it will take up the entire screen width but you may catch a glimpse of a polaroid between the pages, hopefully encouraging you to view it as it was designed to be seen, on a desktop.

I wanted to implement a page transition when navigating to my resumé page, I have used SWUP to achieve this. Implementing SWUP lead me to refactor several aspects and was more effort than I feel it was worth but something I am glad to have done as I learned a lot in the process. It also lead me to preload the background (another AI generated seamless texture) to improve the user experience.

I used the semantic address element for marking up my contact details, my phone number is a tel link and email address is a mailto link. Personally I prefer not to use mailto links so I also added a button to copy the email address to clipboard using the JS clipboard API, for feedback I toggle the visibility of the tick path on the clipboard icon svg.

The contact form sends its contents to a PHP script that uses the PHPMailer library to send the email. I added some CSS transitions to the labels which are positioned absolutely so they appear inside the input fields.

This section has a slanted background, I created this effect by adding an absolutely positioned after pseudo element to the section element, I gave it an inset of 0 so that it is the same size and position but then used a skewY transform to get the slanted effect.

I created these trophies using DALL·E 2 for the original designs (except the mystery trophy which is 100% my own work), which I then vectorised using Inkscape and animated by adding relevant CSS directly to the code. The animation only plays if the user does not have the <prefers reduced motion> flag set. The Programmer trophy was the most complicated due to all of the keys, I was also unable to use a mesh gradient as these aren't yet supported by browsers so I came up with a work around of using 4 linear gradients.

I setup various event listeners to monitor for the relevant event, scrolling was straight forward, Programmer and Networker both look for pointerDown on the respective links, it would be a breach of privacy to confirm that the user has visited the link. I specifically made it so that even right clicking is considered acceptable to gain the achievement (incase someone right clicks and selects open in new tab/window). The Recruiter achievement requires two actions: visiting my Resumé page and some sort of email interaction (using the copy email address button is enough). The Collector achievement is awarded for collecting the 5 preceeding achievements. Which includes the Gamer achievement which currently cannot be achieved as I haven't created a games page yet (check back soon for this). The Inspector achievement is awarded when the browsers inspection window is opened (for at least 2 seconds), I implemented this using Sindre Sorhus' code from GitHub. The final achievement remains a mystery, although anyone who inspects the code can easily achieve this if they work out how.

If you hover over each trophy the title text will tell you how many people have achieved this. I wrote a PHP script to store the count for each achievement in a file on the server, this is updated using AJAX when someone achieves a new trophy. I could have used a database but felt that would have been overkill.

I added a notification and feedback events when each achievement is awarded, I use fireworks.js and party.js, and randomly choose one of 3 effects for each achievement. Each time an achievement is awarded I reset the timer and update the notification to include the awards that are currently being celebrated, ensuring the last comma is replaced with an '&'. How many can you get at once?