This portfolio itself is a good example of my work. The technical goals in making this site were to maximize performance, accessibility, and user experience.

Considering the simplicity of the site, I chose not to reach for a framework. This decision decreased bundle size and increased performance. Instead, I used Pug templates and Sass to keep the code clean, reusable, and scalable. These assets were bundled using Parcel.

The site design is also very flexible. Reused code is handled with components using pug mixins. All Sass variables are abstracted e.g. background-color-primary. This results in the ability to quickly swap out styles while maintaining the semantic naming of the variables. This also allowed for the creation of themes. The default theme is determined by the user's operating system theme settings.

Accessibility was built into the foundation of the design and code. The site meets Web Content Accessibility Guidelines (WCAG). This includes contrast rations, semantic markup, aria attributes, keyboard navigation, focus states, responsiveness, scalable font, and much much more.

  • HTML
  • CSS
  • Sass
  • Javascript
  • Bootstrap
  • Pug
  • Parcel
Portfolio