feat: render locale-aware portfolio routes

src/components/MilestonesSection.tsx

@@ -1,20 +1,24 @@
 'use client';
 
-import React from 'react';
 import Image from 'next/image';
 import { ExternalLink } from 'lucide-react';
-import { milestones } from '@/data/milestones';
+import { getMilestones } from '@/data/milestones';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './MilestonesSection.module.css';
 
-export const MilestonesSection: React.FC = () => {
+export const MilestonesSection = ({ locale }: { locale: Locale }) => {
+  const isRtl = locale === 'fa';
+  const milestones = getMilestones(locale);
+  const copy = messagesByLocale[locale].milestones;
+
   return (
     <section id="milestones" className={styles.milestonesSection}>
       <div className="content-container">
         {/* Section Header */}
         <div className="section-header" data-reveal="soft">
-          <span className="section-eyebrow">AWARDS & ACHIEVEMENTS</span>
+          <span className="section-eyebrow">{copy.eyebrow}</span>
           <div className="section-title-wrap">
-            <h2 className="section-title">Milestones Along the Way</h2>
+            <h2 className="section-title">{copy.title}</h2>
             <div className="section-underline" />
           </div>
         </div>
@@ -54,10 +58,15 @@ export const MilestonesSection: React.FC = () => {
                       className={styles.viewCertLink}
                       target="_blank"
                       rel="noopener noreferrer"
-                      aria-label={`View ${item.title} certificate`}
+                      aria-label={copy.viewCertificateLabel(item.title)}
                     >
-                      <span>View certificate</span>
-                      <ExternalLink size={20} strokeWidth={2.25} aria-hidden="true" />
+                      {isRtl && (
+                        <ExternalLink size={20} strokeWidth={2.25} aria-hidden="true" />
+                      )}
+                      <span>{copy.viewCertificate}</span>
+                      {!isRtl && (
+                        <ExternalLink size={20} strokeWidth={2.25} aria-hidden="true" />
+                      )}
                     </a>
                   </div>
                 )}