UPDATE – Simple Responsive Portfolio – Fit and Finish

Category: | Posted on:July 27, 2023
portfolio update

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.


  • 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.

Related Logs

  • UPDATE – Revised Web Cave Code Styles

    February 12, 2024

    I updated the style for <code> elements in the Web Cave Theme so that they pop a bit more. Enhanced Readability It was too hard to distinguish code blocks from regular text before. They were just white text on black like the rest of the post content. Now they have the strawberry color scheme that […]

    Continue Reading
  • UPDATE – Web Cave Theme ADA and Style

    February 7, 2024

    I decided to run through the Web Cave theme files and spruce a few things up. ADA Compliance Improvements I realized the images in the project posts and grid loop were missing alt text. They’re using WordPress’s the_post_thumbnail() function to render, which should cover the programmatic end. I just hadn’t added any alt text to […]

    Continue Reading
  • THEME UPDATE – Web Cave 1.1.0

    May 21, 2022

    New year, new WordPress theme: introducing Web Cave 1.1.0. Readability The problem with having an ironic web theme that’s intentionally bad is that.. it’s bad. The original custom WordPress theme for this site sucks and I’m tired of looking at it. Web Cave 1.1.0 is a readability revision that maintains the “3edgy haxor” feel of […]

    Continue Reading