This repo contains the code for my personal portfolio website, currently under construction.
I'll be updating the README as soon as I make significant changes.
Designed and prototyped in Figma.
Built with:
- Astro
- React
- Javascript
- Sass
Deployed on Cloudflare.
-
Content
-
Assets
-
Mobile styling
-
Desktop styling
-
Tablet styling
- Styling 404 page
Needless to say, in the near future, I'll be adding:
-
projects, and
-
an "About" section.
In addition, I plan to implement the following enhancements:
-
Dark mode: all colours and assets have already been chosen/designed/exported, they’re just waiting to be implemented.
-
Theme toggle: add required functionality to the theme toggle to be able to switch between light and dark mode.
Here are the lighthouse scores for the website, as of 23 June 2023:
Gotta love seeing those fireworks! (Or is it confetti? 🎉) Anyway, when it comes to the performance side of things, it's all thanks to Astro 🚀.
There's always room for improvement, as there are more factors to consider when it comes to sustainable web design / development, but I'm pretty happy with these scores.
During the design phase, I paid close attention to colour contrast by using tools like WebAIM's Contrast Checker, and, lately my favourite, WhoCanUse. This allowed me to ensure that the colour combinations used in the design met accessibility standards and provide optimal readability for all users.
Additionally, I made specific content design decisions to enhance readability and ease-of-use, considering factors such as font size, spacing, and layout.
As I do in all my projects, I prioritised the use of semantic HTML elements. Whenever possible, I chose appropriate tags for the content. For example, using the <address>
tag for social media links, rather than <nav>
as it conveys the purpose accurately without implying navigation.
Added ARIA labels to elements, ensuring that non-textual content, interactive elements, and more complex components are properly labeled. This enables screen readers to provide meaningful and contextual information to users.
Made sure all interactive elements, including buttons and navigation, are easily accessible using a keyboard alone, and receive focus and behave intuitively.
To prevent unnecessary distractions for screen reader users, I took care to exclude decorative elements from the accessibility tree. This ensures that users receive relevant and meaningful information without being overwhelmed by excessive detail.
To enhance the accessibility evaluation process, I use browser extensions and accessibility testing tools like Chrome DevTools' CSS Overview, and axe DevTools, amongst others.