Skip to content

My objective

After evolving my personal brand and design system, I needed to bring my shared component library into alignment with the new visual and content architecture.

This component library powers both my portfolio website and supporting projects. By centralizing UI logic into reusable components, a single enhancement can propagate across the entire ecosystem with minimal implementation effort.

The broader strategic goal was to strengthen the narrative structure of my portfolio so recruiters and decision-makers can quickly understand my career trajectory through an organization-first storytelling model.

To reduce risk and maintain a stable production environment, I divided the refactor into a series of incremental challenges. Each challenge was independently designed, implemented, validated in Storybook, and deployed to production as soon as complete.

Challenge #1: Making Media Components Fully Accessible and Content-Aware

The Problem

The component responsible for rendering images and videos no longer reflected the structure of my Contentful content model.

Several issues had emerged:

  • Alternative text was not consistently mapped to media assets.

  • Videos lacked accessible labels.

  • Captions and descriptions were not rendered reliably.

  • WCAG requirements were only partially implemented.

As a result, the media experience was not fully accessible to users relying on assistive technologies such as screen readers.

The Solution

I refactored the media component to establish a clear contract between Contentful asset fields and semantic HTML attributes.

The updated implementation now:

  • Maps asset metadata to alt, aria-label, and <figcaption> elements.

  • Supports both image and video assets.

  • Renders captions and extended descriptions consistently.

  • Complies with WCAG 2.1 AA accessibility requirements.

  • Preserves a single, reusable API across all consuming applications.

This enhancement transformed the media component into a robust, accessibility-first abstraction.

Before the refactor, images and videos were missing critical accessibility attributes such as alt text and aria-label, and captions were not rendered consistently. After the update, all media assets are fully accessible and correctly display captions and descriptions sourced from Contentful.

Refactoring the Media Component for WCAG-Compliant Accessibility

Challenge #2: Redesigning Case Study Cards to Match the New Visual System

The Problem

The Case Study card component had been originally designed around a prominent image.

As part of the portfolio redesign, I removed images from the Contentful payload to create a more editorial and content-focused layout.

This introduced several UI issues:

  • Large empty areas where images had previously rendered.

  • Poor visual balance.

  • Outdated styling inconsistent with the new design language.

Because the card component was distributed through the shared component library, updating it centrally would automatically propagate to all consuming applications.

The Solution

I redesigned the Case Study card to support a text-first presentation model.

Key improvements included:

  • Removing image-dependent layout logic.

  • Introducing a more structured content hierarchy.

  • Refining typography, spacing, and visual rhythm.

  • Adding organization metadata as a pill-shaped reference.

  • Improving hover states and interactive affordances.

The result was a cleaner, more professional card design that better emphasized the content itself.

Design prototypes also recommended removing text truncation from titles and summaries. This introduced variable card heights, which will be addressed in the next phase by implementing a masonry grid layout.

This video shows the evolution of the Case Study card: the original layout with large empty gaps after image removal, the updated design prototypes, the component library refactor, and the final production-ready result rendered on the live website.

Transforming Legacy Case Study Cards into a Modern Editorial Layout

Challenge #3: Introducing a featured Case Study on the hero

The Problem

The current hero section is not recruiters-friendly enough. I've recently introduced introductory videos for all my case studies to help decision-makers quickly identify with case studies before deciding to read the whole content. I now need one of my video enabled case studies to be displayed on the header.

The Solution

I've implemented a solution in several steps:

  1. I brainstorm, create a design prototype, and I iterate on my design using chatGPT's improvement suggestions.

  2. I reorganize specific content models on ContentFul to fit the new design

  3. I use GitHub Copilot to create a brand new library component, using GraphQL objects to inform its params, structure, and logic

  4. I export the component to the portfolio codebase and hook it up to the API

[video title: ???]

[video description: the full creation process of the hero video component, from design prototype, component library creation, portfolio implementation and deployment.]

How GitHub Copilot Assisted Me

GitHub Copilot streamlined repetitive engineering tasks, significantly reducing implementation effort by:

  • Updating component props and TypeScript interfaces.

  • Refactoring rendering logic.

  • Revising Storybook stories.

  • Accelerating component validation.

  • Packaging and publishing the component library.

  • Updating application dependencies.

  • Deploying the website to production.

This allowed me to focus on architectural decisions, design trade-offs, and prompt engineering rather than repetitive code edits.

Next steps

There are more component feature to be implemented.