Portfolio Website

Contents

• Key Points
• Features
• The Tech
  • Site
  • Resume

Key Points

• This was a rebuild of my 2019 website, introducing a fresh design and adding more features. I even leverage it to generate my resume to match the site's look and feel.
• Built using Next.js and its ability to render Markdown alongside React code. The site also uses p5.js for the face animations, and Framer Motion for the interactive timeline.

Features

• An interactive timeline that showcases my project and work history.
• A collection of articles that highlight my favorite projects.
• My resume that's dynamically generated as part of the website.

The Tech

Site

• It's a standard Next.js site but utilises the MDX features to blend React and Markdown. This allowed me to retain almost all content from the old site.
• I employed P5.js for the head animation, and Framer Motion for interactive elements. The timeline, in particular, uses Framer Motion to smoothly expand and collapse content.
• I use ContentLayer to manage my project articles. It lets me validate meta data (called 'frontmatter') with Typescript for each article, enabling me to safely run scripts against my articles - e.g. to generate article tags.

Resume

• One of the coolest features of the new site is the ability to generate my resume using Next.js/React/CSS. I've always found designing my resume in other programs to be frustrating, and thought that using web technologies might be a fun solution. So far I'm happy with the results.
• Using the same tech stack lets me reuse elements (like the generated face), fonts, colours, and more. It also encourages me to keep the site updated whenever I tweak my resume, and vice versa.
• Moreover, coding my resume allows me to customize content for specific companies. I can display custom text and images (like the company logo), and generate unique links that display the same content on the website when they visit.