Colophon

This website is designed and coded by me. This is the story of how I built it and where I draw my inspiration.

tl;dr

I built this site after extensively conducting my own research on UX portfolios. The font is Inter and uses the CSS framework Tachyons. I use Sketch Figma to design updates, and code them in Atom or BBEdit, and attempt to maintain updates using a private github repository. I use ImageOptim to compress images and the JavaScript library FancyBox to make them fancy. The backgrounds are from HeroPatterns.com and SVGBackgrounds.com.

Analysis & Documentation

Research is where this all began...

Research

In 2019, I began redesigning my portfolio. Like many designers, I quickly grew frustrated because I could not find the practical answers I needed. To overcome that, I audited over 85 portfolio websites.

My findings helped me make informed choices in the redesign of my own portfolio, from the title of each page to the choice of images. I continue to iterate and optimize my website based on those findings and feedback from trusted sources.

A high-level write-up of my portfolio research can be found on my blog: 2019 Audit of UX Portfolios.

Documentation

Additional blog posts documenting my process can be found under the tag “portfolio” — but here are a few interesting posts:

  • Nov 4, 2019: How I used problem solving principles from mathematician George Pólya to break down my portfolio problems into subproblems, strategies, and actions.
  • Sept 17, 2019: A collection of portfolio resources, organized into sites (guides, essays, collections), tools, and people.
  • March 11, 2021: A review of design updates that were centered on the theme of unification. The updates focused on main images, featured projects, personal branding, image ratios, colors, language and tone, and mobile enhancements.

Design

My design inspiration for this site draws from Swiss poster designs, as well as the following:

Inter: A Font Built for Screens

Inter is a variable font family carefully crafted & designed for computer screens.

Inter features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate “0” from “o”, tabular numbers, etc.

The Inter project is led by Rasmus Andersson, a Swedish maker–of–software living in San Francisco. To find out more about Inter, visit rsms.me/inter/ or find it on Google Fonts. Contribute at github.com/rsms/inter.

Tachyons: Functional CSS Built for Humans

Tachyons is functional CSS for humans. It is fast loading, highly readable, and 100% responsive.

Tachyons is built with six principles:

  • Responsive
  • Readable
  • Modular
  • Accessible
  • Performant
  • Reusable

It features a mobile-first CSS architecture, a single purpose class structure, a nestable responsive grid system, careful documentation, and a lightweight library.

Read the docs, download the CSS, and learn more at tachyons.io.

A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. The word comes from the Greek: ταχύς or tachys, meaning “swift, quick, fast, rapid”

Site Optimizations

In 2019, I completed the Mobile Web Specialist Nanodegree program from the Google Developer Program and Udacity after applying for and receiving a scholarship for US students. The course focused on responsive design, accessibility, and mobile web optimization. While I found the course incredibly challenging, it helped me grow a greater appreciation for web optimization and performance.

I have been able to incorporate some the optimizations I learned about for my own site. This site consistently returns audit scores of 90-100 on Lighthouse, including a score of 95 on Accessibility and 100 on SEO. I frequently make tweaks when possible to further optimize site performance.

Get in Touch to Work With Me!

I can apply the same research, logic and design to help you solve your user experience needs. Or feel free to let me know you enjoyed reading this. Reach out via LinkedIn or send an email. I look forward to your message.