Here I will take the sketches, and transform them on Figma and then I will talk about each design, and show the final coded version.
This is the home screen realised, I had the idea of making the brain 3D and spin. And so I did that, It took a lot of time and coding to do, I originally wanted the brain to follow the mouse cursor and I tried using three.js but Nothing worked, so I just thought it would be better if it spun, I also discovered you could drag it and rotate it, which is a happy accident! I used the brain render from my initial portfolio project and changed the colour to be white to better suit the design.
Screen Recording 2025-10-15 at 19.04.33.mov
I was inspired by A.Chen’s about page, it just looked so clean and presented the information properly, When I coded it, I decided to change the location to based in Belfast, open to anywhere so It isn’t limiting to employers anywhere. I also made the font bigger to make it
This has probably gone through the most change, I decided it was a better idea to have XP as a square rather than a rectangle, but then it left the empty space above the text, recently in my notion blogs, I’ve had these swirls as my heading blocks on notion, so I stole a shader online and used some css to create a heading.
Screen Recording 2025-10-15 at 19.20.27.mov
The idea here was to scroll the images while the text stays in place, which I was worried would be a bit tricky, but it was actually pretty straightforward, I think it turned out great! I did this for the other case studies and it was quite simple as I made it a template.
Screen Recording 2025-10-15 at 20.04.35.mov
This did not go as well as I wanted to go, If I made this site with framer or webflow, I probably would’ve gotten away with it, but I tried the horizontal scroll and for the life of me I could not get rid of the bar, and even when I tried to scroll with my mouse it wouldn’t work, so I made it vertical, it works but it kind of sucks how it didn’t get realised.
Screen Recording 2025-10-15 at 20.15.06.mov
A huge part of the portfolio for me was the accessibility and responsiveness of it, I wanted all screen sizes to view it and I think I have done that well, there were some sacrifices that had to be made, I had to remove the dot of the social as it was clipping under the social which was annoying. The nav bar was causing several issues, it would just clip below itself like on the image, I had to go through the code and find the error, eventually it was just a clipping issue as the get in touch was too big, so I made the text a bit smaller.
But I can proudly say the website is full responsive, as shown in this video below.
There is the occasional issue but for a website that I made in 4-5 days, it works well and it does the job of telling my potential employer who I am, the work I’ve done and how to contact me.