Refactoring for Scale: Streamlining Portfolio Component Architecture

The Problem

As our portfolio project grew, our component structure became increasingly tangled. We were managing static content within primary layout files, making it difficult to maintain and hindering our ability to implement internationalization (i18n) effectively. The lack of a modular approach was slowing down updates.

The Approach

We initiated a refactor to decouple logic from the view and introduce a cleaner directory structure for our React components.

Phase 1: Decoupling Components

We moved away from monolithic files by extracting reusable UI elements. This allows us to maintain the styling with Tailwind CSS independently of the data logic:

// Before: Monolithic Component
const Portfolio = () => <div>...large blocks of html...</div>;

// After: Atomic Component
const ProjectCard = ({ title, description }) => (
  <div className="p-4 bg-white shadow-md rounded-lg">
    <h3 className="text-xl">{title}</h3>
    <p>{description}</p>
  </div>
);

By splitting the UI into smaller, functional pieces, we significantly improved our codebase readability and testability.

Phase 2: Implementing Language Support

To support multiple languages, we moved hardcoded strings into configuration files, allowing our components to fetch content dynamically:

// i18n/config.js
export const content = {
  en: { header: "My Projects" },
  ja: { header: "プロジェクト" }
};

This separation ensures that adding a new language doesn't require touching the presentation layer, keeping our React components clean and purely focused on rendering.

Key Insight

Refactoring is not just about cleaning up code; it is about creating a flexible foundation. By extracting UI components and separating content configuration, we have reduced the friction required to scale the portfolio to new languages and feature sets.

Generated with Gitvlg.com