Date Published: 02/08/2025
Topics: Programming
A deep dive into the recent updates I made to my portfolio website. going from improving the design and color scheme to adding new skills, certifications, and accessibility features. as well as new styling and sections to existing pages.
After starting to get into a workflow of completing projects, reaching important milestones, or learning and then posting about them on LinkedIn to start making myself visible, I always come back to this website — my portfolio. I made it for one of my assignments at college this year for the website development unit. I think because of that, I didn’t get the time I wanted to really make it styled in the way I had wanted.
So I made a checklist to define what I wanted to add to this website and what improvements to make. I defined these as the things I wanted to include: better colour palettes for the dark and light mode (because the colours seemed too bright on dark mode to me and to others I’d asked for feedback); new sections for the About page, which I wanted to do originally; a favicon; and a lot more interactivity and consistency.
When I needed to test the changes, I would send the links to my friends for real feedback and thoughts on what I could do to make the website better. As a side ramble: I don’t like to give testers any guidance for things like websites. This is because I find it mimics what a real person visiting a website would do. I think this approach gives better feedback, because it lets them explore on their own and form their own opinions without needing to check off a list I send them on Discord or WhatsApp.
The About page got the biggest transformation. I started by removing the blurb that said, “here are my top skills” to make room for the soft and hard skills sub-headings to go into their own columns. I then added more skills to reflect new things I’ve learned from my course and from my own studies into ethical hacking and cyber security.
I then decided I wanted a timeline for my important milestones on the website, which I had to unfortunately leave out before. I tried to find tutorials on how to use Bootstrap to do this, but I couldn’t find any that weren’t bloated with endless paragraphs. This is where I asked ChatGPT to generate an example that I could style and add to easily. I’m not going to go into my AI work ethics and rules here — but long story short, I like using it because it can explain new concepts to me in a way that I understand, especially because of my autism.
I also made a certification section to show off my badges and list the courses I’ve completed that have certificates. For example, my AWS Educate badges and OpenLearn cyber security course. I made a list for the certs that don’t have badges, and a row of badges for the courses that do.
I felt like including these would make the About page work better not just as a CV dump (which most of them are, if I’m being honest from what I have seen), but also as a timeline that I can easily update to highlight special moments in my professional journey.
To create the colour schemes, I took the root colour variables I already had for light and dark modes and gave them to ChatGPT. I asked it to suggest new colours that still used some of the ones I already had. After some prompting, I got colours that complemented dark and light mode better and looked good in practice. The feedback definitely agreed.
I added a dark/light mode toggle to the navigation bar. This was included so users could choose for themselves, without their system mode dictating what the website should use. I wrote a new JavaScript function that switches between the two modes and saves the selection using the local storage API. This was because the website kept defaulting to the original selection whenever I switched pages.
As the last addition, I designed and created a custom favicon for the whole website. I made it in Canva, and my inspiration for the icon was an HTML tag. This helps give the site a bit more personality.
Before this update, my AWS Educate badges and a singlur badge from a free open university course were only on my LinkedIn. I needed to show them on my portfolio too so that it would better represent my skill set and my acheivements and certifications.
I embedded them on the website, both on the About page in a new certifications sections and on a dedicated page within the Projects page.
This refresh wasn’t just a design update, but a way to make the site more relevant to where I’m at right now. Now that my course is over, I’m finally able to work on it the way I want.
So, the plan is to keep adding new projects, skills, and more things so it grows alongside me — and doesn’t get left in the dirt.