Recently, I updated my portfolio website with new tools, as an opportunity to learn to integrate my skills on new platforms and to launch a performant, customizable site that can be extended to meet the needs of presenting my work and sharing my thoughts.
As I’ve launched previous versions of my portfolio website and developed websites at Clover, Cana, and on freelance projects, I made some decisions on the design of the site, the technology to use, and the platform to launch on.
Modern, content-focused architecture
I was a big fan of the MPA approach of tools like Astro while still trying to bridge the benefits of SPAs in the current website ecosystem. I also liked the idea that you could use Markdown or MDX files to organize content that could follow a template per page, making writing the content easier while still being flexible. Having used Wordpress as well as Headless CMSes in previous work (Contentful and Sanity), it was great to strip that complexity back when it came to launching a personal portfolio that I planned to update simply through static files and thinking around how to integrate some aspects of content-authoring while keeping the site architecture minimal so as to focus on the content rather than features of a multi-author CMS.
Extending the message with nonverbal communication
We shape our tools, and thereafter, our tools shape us.—Marshall McLuhan
I implemented libraries that would allow me the flexibility to display images, video, and additional content as I wanted while also allowing customization and a low overhead. Although I ran into bugs and implementation issues when trying to get various components to work as expected (Slideshows, Lightbox, Videos, and iFrames) I thoroughly enjoyed working directly in the code because it helps build empathy with how to best communicate with engineers and helps sharpen my skills to feel confident in designing, delivering, and developing the interaction components necessary.
Some of these interaction patterns were only necessary to allow me to have the freedom of expression while authoring the content so that the website responded as I expected and I didn’t feel held back in how I presented the content.
I tried to focus as much as I could on developing this website so the content could always be present and load quickly, while making sure that the layout could be dynamic. It was important for me to figure out how to quickly and easily be able to write content and then organize the display easily by wrapping it in divs with easy flex settings or setting up text components that allowed for columns and ensuring that the overall layout corresponded with my 12 column grid.
Additional useful tools that are helpful are in configuring your IDE and your build and git commit process so that some of the automatic functionalities of CMSes can now be done locally.