Portfolio Website

The more knowledge you have, the more freedom you have to create what you want.

I am deeply driven by the above sentence. And setting goals are key to driving my learning and growth. For this redesign and build, I focused on two main objectives:

1. 1.) Expand my skills and deepen my understanding of web applications.
2. 2.) Explore typography and learn how classic typography principles translate to web design.

1.) Technical Challenge:

In my previous role, I primarily developed emails, which, as any developer knows, is far from modern web development. For this project, I aimed to push myself by working with modern frameworks and build tools.

I chose Next.js as my framework to refresh my React knowledge and explore server components, which I hadn’t worked with before. I also revisited my CSS skills, writing all the styles from scratch using CSS modules.

Additionally, I gained new experience deploying the Next.js app on Vercel and integrating a headless CMS into the site. While the CMS integration is still in progress, I’m excited to expand on this feature in the future.

2.) Design Challenge:

I aimed to showcase my varied skills and projects cohesively, with an open and sophisticated feel that also highlighted the artistic process. To achieve this, I incorporated hand-drawn text and art elements inside refined page layouts.

I started with a site map and wireframes to plan the site’s functionality. This project was also an opportunity to deepen my understanding of web typography, so I researched type systems, baseline grids, spacing, and type scales. Along the way, I discovered a new tool to set the type scale, which I now love and will be using in future projects.

Web Accessibility

I have a strong interest in web accessibility from both design and development perspectives. To ensure an inclusive experience, I used tools like Colour Contrast Analyser to verify sufficient color contrast in the design. I also incorporated appropriate alt text for images and aria-labels where necessary to improve usability for assistive technologies.