feat: render locale-aware portfolio routes

src/components/RiverJourney.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import React from 'react';
 import {
   Code2,
   GraduationCap,
@@ -9,43 +8,40 @@ import {
   Rocket,
 } from 'lucide-react';
 import { AboutRiverScene } from './scenes/AboutRiverScene';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './RiverJourney.module.css';
 
-const steps = [
-  { number: '01', icon: Palette, title: 'Digital Artist', description: 'Explored visual design, illustration and storytelling.' },
-  { number: '02', icon: PanelsTopLeft, title: 'UI/UX Designer', description: 'Designed intuitive interfaces and user-centered experiences.' },
-  { number: '03', icon: GraduationCap, title: 'Computer Science', description: 'Built strong foundations in algorithms and systems thinking.' },
-  { number: '04', icon: Code2, title: 'Software Engineer', description: 'Engineered scalable applications and delivered real-world solutions.' },
-  { number: '05', icon: Rocket, title: 'Product Engineer', description: 'Merging product strategy with engineering to ship impactful products.' },
-];
+const stepIcons = [Palette, PanelsTopLeft, GraduationCap, Code2, Rocket];
+
+export const RiverJourney = ({ locale }: { locale: Locale }) => {
+  const copy = messagesByLocale[locale].about;
 
-export const RiverJourney: React.FC = () => {
   return (
     <section id="about" className={styles.journeySection} aria-labelledby="about-title">
       <AboutRiverScene />
       {/* Intro Header & Description on the Left */}
       <div className={styles.introBlock} data-reveal="scale">
-        <span className={styles.eyebrow}>ABOUT ME</span>
-        <h2 id="about-title" className={styles.heading}>From Pixel to Product</h2>
+        <span className={styles.eyebrow}>{copy.eyebrow}</span>
+        <h2
+          id="about-title"
+          className={`${styles.heading} ${locale === 'fa' ? 'font-display' : ''}`}
+        >
+          {copy.title}
+        </h2>
         <div className={styles.underlineBar} />
-        <p className={styles.description}>
-          I began as a digital artist, designing visual stories. Curiosity turned
-          into code, and code into systems that solve real problems. Today, I
-          build products end-to-end using agentic workflows that blend creativity,
-          engineering, and product thinking.
-        </p>
+        <p className={styles.description}>{copy.description}</p>
       </div>
 
       <ol
         className={styles.stepsList}
-        aria-label="Career journey"
+        aria-label={copy.journeyLabel}
         data-reveal-group
       >
-        {steps.map((step) => {
-          const StepIcon = step.icon;
+        {copy.steps.map((step, index) => {
+          const StepIcon = stepIcons[index];
 
           return (
-            <li key={step.number} className={styles.stepCard} data-reveal="soft">
+            <li key={step.title} className={styles.stepCard} data-reveal="soft">
               <span className={styles.stepIcon} aria-hidden="true">
                 <StepIcon size={20} strokeWidth={1.9} />
               </span>