Scaling Personal Portfolios: Implementing Multi-Language Support

Translating Experiences

Maintaining a personal portfolio often means serving a global audience. Recently, I tackled a common hurdle in the Darwinhamiltonc/my-portfolio project: how to cleanly integrate multi-language support into a React-based experience section without turning components into a mess of conditional logic.

Adding translations isn't just about changing text; it's about preserving the structure and professional tone of your history while making the site accessible to more visitors.

The Implementation Strategy

Rather than hardcoding strings, I moved towards a configuration-driven approach. By isolating localized content into separate files, the React components remain lightweight and focused solely on layout and presentation.

interface ExperienceEntry {
  title: string;
  company: string;
  description: string;
}

const experienceData: Record<string, ExperienceEntry[]> = {
  en: [{ title: "Lead Dev", company: "TechCorp", description: "Built systems." }],
  es: [{ title: "Desarrollador Líder", company: "TechCorp", description: "Construí sistemas." }]
};

export const Experience = ({ lang }: { lang: string }) => {
  const data = experienceData[lang] || experienceData.en;
  return (
    <div>{data.map(item => <p key={item.title}>{item.title} at {item.company}</p>)}</div>
  );
};

This pattern allows the application to dynamically fetch content based on a selected locale, effectively separating the content concerns from the UI layer.

Key Takeaways

1. Decouple Content: Always store translations in external JSON or TypeScript objects. Never hardcode strings in your UI components.
2. Default Fallbacks: Always provide a default language (e.g., English) to ensure the site remains functional if a translation key is missing.
3. Maintainability: By mapping keys like en or es to data structures, adding new languages becomes as simple as adding a new key-value pair to your config file.

Conclusion

By centralizing translations within the my-portfolio project, the codebase is now much easier to manage. Scaling a site's reach shouldn't double your maintenance burden—it should be a seamless extension of your existing data patterns.

Generated with Gitvlg.com