UPDATE – Simple Responsive Portfolio – Fit and Finish
It’s been a while since I updated my personal portfolio, so I figured I’d update the project version too. The aim was to get the code cleaner and more maintainable, and to do a fresh round of auditing for google and accessibility. I also made some aesthetic changes to create some variation in the design
Code Changes
I’m using BEM methodology for my styles now, which required an overhaul of the class names in the markup and stylesheets. I also broke up my SCSS into a more granular directory layout and imported the components instead of dumping it all in a single main file. All-in-all looks more organized now.
Accessibility Changes
The site was already in the green for ADA compliance, but I decided to go the extra mile. I’ve started doing a follow-up audit with AccessiBe because it seems to be more thorough than Google Lighthouse. I added a skip link at the top of the site so that visually impaired users can go straight to the main content. I also spruced up the focus outlines for people who need to tab through links on the page. Some of the project links were not quite accessible enough, so I gave them more robust aria-label text. External links have to be very clearly signposted. The highlight effect on my headings was the one casualty of the Accessibility audit. Apparently it got flagged for insufficient color contrast, but the site looks cleaner overall without it so no biggie.
Finishes
- Primary color background sections to break up all the white space
- Left aligned all <h2> elements
- Increased <ul> font-size
- Adjusted spacing of sections on mobile
The next step for this project will be to duplicate it in React.