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.
Platform Decisions
Launching an updated portfolio is a chance to present the design and product challenges I’ve worked through and how I’ve solved them. I also wanted to challenge my engineering abilities and develop the site using Astro as it seemed like a performant framework to combine the benefits of HTML, CSS, and Javascript while still allowing for lots of the benefits to building functioning sites with frameworks (such as routing, reusable components, and additional functionality). I also liked that Astro allowed me to use various JavaScript frameworks for the interactive components (or vanilla JS as well) meaning I could easily flex my abilities with React, Svelte, Solid, and Vanilla JS as I continue developing my engineering abilities.
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.
Content Decisions
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.
Lessons Learned
Front-end development has come a long way from when I first learned HTML and CSS in order to edit my MySpace page with custom background images, a custom scrollbar, and other neat tricks. Its incredibly exciting to see many previous workarounds to present media and information get implemented into HTML, CSS, and requiring less Javascript development in how information is displayed. I’ve especially liked learning about all of the new features being added to Chrome and shortly available in other browsers, and thinking about how to implement the component styles I want with them, including scoped styles, new animation techniques, using trigonometric functions and container queries. Thinking through how I might use these in development helps me also to think about what is possible easily for developers so that I have an accurate understanding around how to difficult various interaction and motion patterns are to implement.
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.
Technical Experimentation
One of the aspects of building this site that I loved the most was in taking more time to get to understand Javascript on a more intimate level (huge thanks to several O’Reilly books for this) and to get to understand how valuable Typescript can be in reducing ambiguity and therefore minimizing errors down the road.