feat: render locale-aware portfolio routes

2026-09-08 19:21:26 +03:30
parent 3bb6b4396c
commit 3af34dbd92
22 changed files with 797 additions and 186 deletions
--- a/src/components/EducationSection.tsx
+++ b/src/components/EducationSection.tsx
@@ -1,15 +1,18 @@
-import React from 'react';
 import Image from 'next/image';
-import { education } from '@/data/education';
+import { getEducation } from '@/data/education';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './EducationSection.module.css';

-export const EducationSection: React.FC = () => {
+export const EducationSection = ({ locale }: { locale: Locale }) => {
+  const education = getEducation(locale);
+  const copy = messagesByLocale[locale].education;
+
  return (
    <section id="education" className={styles.educationSection}>
      <div className="content-container">
        <div className="section-header" data-reveal="soft">
          <div className="section-title-wrap">
-            <h2 className="section-title">Where I Built the Foundation</h2>
+            <h2 className="section-title">{copy.title}</h2>
            <div className="section-underline" />
          </div>
        </div>
--- a/src/components/ExperienceSection.tsx
+++ b/src/components/ExperienceSection.tsx
@@ -1,15 +1,18 @@
-import React from 'react';
 import Image from 'next/image';
-import { experiences } from '@/data/experience';
+import { getExperiences } from '@/data/experience';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './ExperienceSection.module.css';

-export const ExperienceSection: React.FC = () => {
+export const ExperienceSection = ({ locale }: { locale: Locale }) => {
+  const experiences = getExperiences(locale);
+  const copy = messagesByLocale[locale].experience;
+
  return (
    <section id="experience" className={styles.experienceSection}>
      <div className="content-container">
        <div className="section-header" data-reveal="soft">
          <div className="section-title-wrap">
-            <h2 className="section-title">Where I&apos;ve Made an Impact</h2>
+            <h2 className="section-title">{copy.title}</h2>
            <div className="section-underline" />
          </div>
        </div>
@@ -64,7 +67,7 @@ export const ExperienceSection: React.FC = () => {
                    <div className={styles.logoContainer}>
                      <Image
                        src={item.logo}
-                        alt={`${item.company} logo`}
+                        alt={copy.logoAlt(item.company)}
                        width={72}
                        height={72}
                        className={styles.logoImage}
--- a/src/components/FooterSection.tsx
+++ b/src/components/FooterSection.tsx
@@ -1,13 +1,13 @@
 'use client';

-import React from 'react';
 import IsometricFooter from './IsometricFooter/IsometricFooter';
+import type { Locale } from '@/i18n/content';
 import styles from './FooterSection.module.css';

-export const FooterSection: React.FC = () => {
+export const FooterSection = ({ locale }: { locale: Locale }) => {
  return (
    <footer id="footer" className={styles.footerSection}>
-      <IsometricFooter />
+      <IsometricFooter locale={locale} />
    </footer>
  );
 };
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,13 +1,50 @@
 'use client';

-import React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
-import { BookOpenText, GraduationCap, MessageCircle, Moon, Sun } from 'lucide-react';
+import Link from 'next/link';
+import {
+  BookOpenText,
+  Check,
+  GraduationCap,
+  Languages,
+  MessageCircle,
+  Moon,
+  Sun,
+} from 'lucide-react';
 import { useTheme } from '@/context/ThemeContext';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './HeroSection.module.css';

-export const HeroSection: React.FC = () => {
+export const HeroSection = ({ locale }: { locale: Locale }) => {
  const { theme, toggleTheme } = useTheme();
+  const copy = messagesByLocale[locale].hero;
+  const themeLabel = theme === 'light' ? copy.themeDarkLabel : copy.themeLightLabel;
+  const [isLanguageMenuOpen, setIsLanguageMenuOpen] = useState(false);
+  const languageMenuRef = useRef<HTMLDivElement>(null);
+  const languageButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!isLanguageMenuOpen) return;
+
+    const closeOnOutsideClick = (event: PointerEvent) => {
+      if (!languageMenuRef.current?.contains(event.target as Node)) {
+        setIsLanguageMenuOpen(false);
+      }
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      setIsLanguageMenuOpen(false);
+      languageButtonRef.current?.focus();
+    };
+
+    document.addEventListener('pointerdown', closeOnOutsideClick);
+    document.addEventListener('keydown', closeOnEscape);
+    return () => {
+      document.removeEventListener('pointerdown', closeOnOutsideClick);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [isLanguageMenuOpen]);

  return (
    <div className={styles.heroContentWrapper}>
@@ -17,8 +54,8 @@ export const HeroSection: React.FC = () => {
          type="button"
          onClick={toggleTheme}
          className={styles.iconButton}
-          aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
-          title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+          aria-label={themeLabel}
+          title={themeLabel}
        >
          {theme === 'light' ? (
            <Moon size={28} strokeWidth={1.8} className={styles.themeIcon} />
@@ -26,6 +63,72 @@ export const HeroSection: React.FC = () => {
            <Sun size={28} strokeWidth={1.8} className={styles.controlIcon} />
          )}
        </button>
+
+        <div className={styles.languageMenuWrapper} ref={languageMenuRef}>
+          <button
+            ref={languageButtonRef}
+            type="button"
+            className={`${styles.iconButton} ${styles.languageButton}`}
+            aria-label={copy.languageButtonLabel}
+            title={copy.languageButtonLabel}
+            aria-haspopup="menu"
+            aria-expanded={isLanguageMenuOpen}
+            aria-controls="language-menu"
+            onClick={() => setIsLanguageMenuOpen((isOpen) => !isOpen)}
+            data-language-switch
+          >
+            <Languages size={23} strokeWidth={1.9} aria-hidden="true" />
+          </button>
+
+          <div
+            id="language-menu"
+            className={styles.languageMenu}
+            role="menu"
+            aria-label={copy.languageMenuLabel}
+            data-open={isLanguageMenuOpen}
+          >
+            <Link
+              href="/"
+              hrefLang="en"
+              role="menuitem"
+              aria-current={locale === 'en' ? 'page' : undefined}
+              className={styles.languageOption}
+            >
+              <span className={styles.languageOptionLabel}>
+                <Image
+                  src="/images/flags/english.svg"
+                  alt=""
+                  width={20}
+                  height={20}
+                  className={styles.languageFlag}
+                  aria-hidden="true"
+                />
+                <span>{copy.englishLabel}</span>
+              </span>
+              {locale === 'en' && <Check size={16} aria-hidden="true" />}
+            </Link>
+            <Link
+              href="/fa"
+              hrefLang="fa"
+              role="menuitem"
+              aria-current={locale === 'fa' ? 'page' : undefined}
+              className={styles.languageOption}
+            >
+              {locale === 'fa' && <Check size={16} aria-hidden="true" />}
+              <span className={styles.languageOptionLabel}>
+                <Image
+                  src="/images/flags/persian.svg"
+                  alt=""
+                  width={20}
+                  height={20}
+                  className={styles.languageFlag}
+                  aria-hidden="true"
+                />
+                <span>{copy.persianLabel}</span>
+              </span>
+            </Link>
+          </div>
+        </div>
      </div>

      {/* Hero Central Content */}
@@ -36,7 +139,7 @@ export const HeroSection: React.FC = () => {
            <div className={styles.avatarContainer}>
              <Image
                src="/images/avatar.png"
-                alt="Amirhossein Khalili"
+                alt={copy.avatarAlt}
                width={192}
                height={192}
                className={styles.avatarImg}
@@ -47,46 +150,44 @@ export const HeroSection: React.FC = () => {
        </div>

        {/* Display Typography */}
-        <h1 className={`font-display ${styles.heroTitle}`}>
-          <span className={styles.heroGreeting}>Hi, I&apos;m</span>
-          <span className={styles.heroName}>Amirhossein Khalili</span>
+        <h1 className={`font-display ${styles.heroTitle}`} aria-label={copy.titleLabel}>
+          <span className={styles.heroGreeting}>{copy.greeting}</span>
+          <span className={styles.heroName}>{copy.name}</span>
        </h1>

-        <p className={styles.heroSubtitle}>
-          Product engineer building useful, resilient software.
-        </p>
+        <p className={styles.heroSubtitle}>{copy.subtitle}</p>

        {/* Action Buttons */}
        <div className={styles.actionButtons}>
          <button
            type="button"
            className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`}
-            aria-label="Blog, coming soon"
-            title="Coming soon"
+            aria-label={copy.blogLabel}
+            title={copy.comingSoon}
            disabled
          >
            <BookOpenText size={17} strokeWidth={2} aria-hidden="true" />
-            Blog
+            {copy.blog}
          </button>
          <button
            type="button"
            className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`}
-            aria-label="Courses, coming soon"
-            title="Coming soon"
+            aria-label={copy.coursesLabel}
+            title={copy.comingSoon}
            disabled
          >
            <GraduationCap size={18} strokeWidth={2} aria-hidden="true" />
-            Courses
+            {copy.courses}
          </button>
          <a
            href="https://www.linkedin.com/messaging/compose/?recipient=ACoAAEJsAwMBCv3L9dYcEXWam-l3pLOJ3UspX7w"
            target="_blank"
            rel="noreferrer"
            className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`}
-            aria-label="Get in touch on LinkedIn"
+            aria-label={copy.contactLabel}
          >
            <MessageCircle size={17} strokeWidth={2} aria-hidden="true" />
-            Get in touch
+            {copy.contact}
          </a>
        </div>

--- a/src/components/IsometricFooter/IsoTypes.ts
+++ b/src/components/IsometricFooter/IsoTypes.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';

 export type FooterContactId = 'phone' | 'linkedin' | 'github' | 'telegram';

@@ -72,6 +72,7 @@ export interface IsoSignpostProps {

 export interface IsometricSceneProps {
  activePost: FooterContactId | null;
+  ariaLabel: string;
  onPostHover?: (id: FooterContactId | null) => void;
  onPostClick?: (id: FooterContactId) => void;
 }
--- a/src/components/IsometricFooter/IsometricFooter.tsx
+++ b/src/components/IsometricFooter/IsometricFooter.tsx
@@ -1,6 +1,6 @@
 'use client';

-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { ContactItem, FooterContactId } from './IsoTypes';
 import IsometricScene from './IsometricScene';
 import {
@@ -11,6 +11,7 @@ import {
  TelegramIcon,
 } from './IsoElements';
 import styles from './IsometricFooter.module.css';
+import { messagesByLocale, type Locale } from '@/i18n/content';

 export const contacts: ContactItem[] = [
  {
@@ -43,7 +44,12 @@ export const contacts: ContactItem[] = [
  },
 ];

-export default function IsometricFooter() {
+export default function IsometricFooter({ locale }: { locale: Locale }) {
+  const copy = messagesByLocale[locale].footer;
+  const localizedContacts = contacts.map((contact) => ({
+    ...contact,
+    name: copy[contact.id],
+  }));
  const [activePost, setActivePost] = useState<FooterContactId | null>(null);

  const handlePostClick = (id: FooterContactId) => {
@@ -62,11 +68,11 @@ export default function IsometricFooter() {
      {/* Top Header & Contact Section */}
      <header className={styles.footerHeader}>
        <h2 className={styles.headerTitle}>
-          Let&apos;s build something meaningful.
+          {copy.title}
        </h2>

        <p className={styles.headerSubtitle}>
-          Open to opportunities and interesting projects.
+          {copy.subtitle}
        </p>

        {/* Email Pill Button */}
@@ -74,12 +80,14 @@ export default function IsometricFooter() {
          <a
            href="mailto:amirhosseinkhalili901@gmail.com"
            className={styles.emailPill}
-            aria-label="Send email to amirhosseinkhalili901@gmail.com"
+            aria-label={copy.emailLabel}
          >
            <span className={styles.emailIcon}>
              <MailIcon size={16} color="currentColor" />
            </span>
-            <span className={styles.emailText}>amirhosseinkhalili901@gmail.com</span>
+            <span className={styles.emailText} dir="ltr">
+              amirhosseinkhalili901@gmail.com
+            </span>
          </a>
        </div>
      </header>
@@ -88,15 +96,16 @@ export default function IsometricFooter() {
      <div className={styles.sceneContainer} data-footer-reveal>
        <IsometricScene
          activePost={activePost}
+          ariaLabel={copy.sceneLabel}
          onPostHover={setActivePost}
          onPostClick={handlePostClick}
        />
      </div>

      {/* Responsive Synchronized Contact Cards Section */}
-      <section className={styles.contactCardsSection} aria-label="Social and contact links">
+      <section className={styles.contactCardsSection} aria-label={copy.contactsLabel}>
        <div className={styles.contactCardsGrid}>
-          {contacts.map((contact) => {
+          {localizedContacts.map((contact) => {
            const IconComponent = contact.Icon;
            const isHovered = activePost === contact.id;
            return (
@@ -116,7 +125,9 @@ export default function IsometricFooter() {
                </div>
                <div className={styles.contactCardInfo}>
                  <span className={styles.contactCardName}>{contact.name}</span>
-                  <span className={styles.contactCardLabel}>{contact.label}</span>
+                  <span className={styles.contactCardLabel} dir="ltr">
+                    {contact.label}
+                  </span>
                </div>
              </a>
            );
--- a/src/components/IsometricFooter/IsometricScene.tsx
+++ b/src/components/IsometricFooter/IsometricScene.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import type { IsometricSceneProps } from './IsoTypes';
 import {
  MountainCluster,
@@ -258,6 +257,7 @@ function CircuitConduits({ activePost }: { activePost: string | null }) {
 */
 export default function IsometricScene({
  activePost,
+  ariaLabel,
  onPostHover,
  onPostClick,
 }: IsometricSceneProps) {
@@ -268,7 +268,7 @@ export default function IsometricScene({
      className="isometric-svg"
      preserveAspectRatio="xMidYMax meet"
      role="img"
-      aria-label="Interactive 3D isometric footer scene"
+      aria-label={ariaLabel}
    >
      {/* 1. Solid 3D Architectural Stepped Terraces */}
      <SteppedTerraces />
--- a/src/components/MilestonesSection.tsx
+++ b/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>
                )}
--- a/src/components/ProjectsSection.tsx
+++ b/src/components/ProjectsSection.tsx
@@ -1,21 +1,37 @@
 'use client';

-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ArrowLeft, ArrowRight, ArrowUpRight } from 'lucide-react';
-import { projects } from '@/data/projects';
+import { getProjects } from '@/data/projects';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import { ProjectThumbnail } from './ProjectThumbnail';
 import styles from './ProjectsSection.module.css';

 const MIN_SCROLLBAR_THUMB_PERCENT = 12.5;

-export const ProjectsSection: React.FC = () => {
+const getLogicalScrollLeft = (viewport: HTMLDivElement, isRtl: boolean) =>
+  isRtl ? -viewport.scrollLeft : viewport.scrollLeft;
+
+const setLogicalScrollLeft = (
+  viewport: HTMLDivElement,
+  value: number,
+  isRtl: boolean,
+  behavior: ScrollBehavior = 'auto',
+) => {
+  viewport.scrollTo({ left: isRtl ? -value : value, behavior });
+};
+
+export const ProjectsSection = ({ locale }: { locale: Locale }) => {
+  const isRtl = locale === 'fa';
+  const projects = getProjects(locale);
+  const copy = messagesByLocale[locale].projects;
  const viewportRef = useRef<HTMLDivElement>(null);
  const dragState = useRef({
    active: false,
    moved: false,
    startX: 0,
    startY: 0,
-    startScrollLeft: 0,
+    startLogicalScrollLeft: 0,
    lastX: 0,
    lastTime: 0,
    velocity: 0,
@@ -36,14 +52,15 @@ export const ProjectsSection: React.FC = () => {
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(true);

-  const syncScrollState = () => {
+  const syncScrollState = useCallback(() => {
    const viewport = viewportRef.current;
    if (!viewport) return;

    const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
+    const logicalScroll = getLogicalScrollLeft(viewport, isRtl);

    setScrollProgress(
-      maxScroll > 0 ? Math.max(0, Math.min(viewport.scrollLeft / maxScroll, 1)) : 0,
+      maxScroll > 0 ? Math.max(0, Math.min(logicalScroll / maxScroll, 1)) : 0,
    );
    setScrollbarThumbPercent(
      Math.max(
@@ -51,9 +68,9 @@ export const ProjectsSection: React.FC = () => {
        Math.min((viewport.clientWidth / viewport.scrollWidth) * 100, 100),
      ),
    );
-    setCanScrollPrev(viewport.scrollLeft > 1);
-    setCanScrollNext(viewport.scrollLeft < maxScroll - 1);
-  };
+    setCanScrollPrev(logicalScroll > 1);
+    setCanScrollNext(logicalScroll < maxScroll - 1);
+  }, [isRtl]);

  useEffect(() => {
    syncScrollState();
@@ -63,7 +80,7 @@ export const ProjectsSection: React.FC = () => {
    const resizeObserver = new ResizeObserver(syncScrollState);
    resizeObserver.observe(viewport);
    return () => resizeObserver.disconnect();
-  }, []);
+  }, [syncScrollState]);

  const scrollByCard = (direction: -1 | 1) => {
    const viewport = viewportRef.current;
@@ -72,10 +89,16 @@ export const ProjectsSection: React.FC = () => {
    if (!viewport || !track || !card) return;

    const gap = Number.parseFloat(window.getComputedStyle(track).columnGap) || 0;
-    viewport.scrollBy({
-      left: direction * (card.getBoundingClientRect().width + gap),
-      behavior: 'smooth',
-    });
+    const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
+    const nextScroll = Math.max(
+      0,
+      Math.min(
+        getLogicalScrollLeft(viewport, isRtl) +
+          direction * (card.getBoundingClientRect().width + gap),
+        maxScroll,
+      ),
+    );
+    setLogicalScrollLeft(viewport, nextScroll, isRtl, 'smooth');
  };

  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -89,7 +112,7 @@ export const ProjectsSection: React.FC = () => {
      moved: false,
      startX: event.clientX,
      startY: event.clientY,
-      startScrollLeft: viewport.scrollLeft,
+      startLogicalScrollLeft: getLogicalScrollLeft(viewport, isRtl),
      lastX: event.clientX,
      lastTime: performance.now(),
      velocity: 0,
@@ -135,7 +158,11 @@ export const ProjectsSection: React.FC = () => {
      dragState.current.lastTime = now;

      if (Math.abs(deltaX) > 4) dragState.current.moved = true;
-      viewport.scrollLeft = dragState.current.startScrollLeft - deltaX;
+      setLogicalScrollLeft(
+        viewport,
+        dragState.current.startLogicalScrollLeft - deltaX,
+        isRtl,
+      );
    }
  };

@@ -175,7 +202,7 @@ export const ProjectsSection: React.FC = () => {
    const step = cardWidth + gap;
    if (step <= 0) return;

-    const currentScroll = viewport.scrollLeft;
+    const currentScroll = getLogicalScrollLeft(viewport, isRtl);
    let targetIndex: number;
    if (Math.abs(velocity) > 0.2 || Math.abs(totalDeltaX) > cardWidth * 0.18) {
      if (totalDeltaX < 0 || velocity < -0.2) {
@@ -190,10 +217,7 @@ export const ProjectsSection: React.FC = () => {
    const maxIndex = projects.length - 1;
    targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));

-    viewport.scrollTo({
-      left: targetIndex * step,
-      behavior: 'smooth',
-    });
+    setLogicalScrollLeft(viewport, targetIndex * step, isRtl, 'smooth');
  };

  const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -207,10 +231,10 @@ export const ProjectsSection: React.FC = () => {
  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === 'ArrowLeft') {
      event.preventDefault();
-      scrollByCard(-1);
+      scrollByCard(isRtl ? 1 : -1);
    } else if (event.key === 'ArrowRight') {
      event.preventDefault();
-      scrollByCard(1);
+      scrollByCard(isRtl ? -1 : 1);
    }
  };

@@ -229,13 +253,16 @@ export const ProjectsSection: React.FC = () => {
    const maxScroll = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
    if (availableTrack <= 0 || maxScroll <= 0) return;

-    const thumbLeft = Math.max(
+    const pointerFromOrigin = isRtl
+      ? trackRect.right - clientX
+      : clientX - trackRect.left;
+    const thumbOffset = Math.max(
      0,
-      Math.min(clientX - trackRect.left - grabOffset, availableTrack),
+      Math.min(pointerFromOrigin - grabOffset, availableTrack),
    );
-    const nextProgress = thumbLeft / availableTrack;
+    const nextProgress = thumbOffset / availableTrack;
    setScrollProgress(nextProgress);
-    viewport.scrollLeft = nextProgress * maxScroll;
+    setLogicalScrollLeft(viewport, nextProgress * maxScroll, isRtl);
  };

  const handleScrollbarPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -248,7 +275,9 @@ export const ProjectsSection: React.FC = () => {
    const thumbRect = thumb.getBoundingClientRect();
    const clickedThumb = thumb.contains(event.target as Node);
    const grabOffset = clickedThumb
-      ? event.clientX - thumbRect.left
+      ? isRtl
+        ? thumbRect.right - event.clientX
+        : event.clientX - thumbRect.left
      : thumbRect.width / 2;

    scrollbarDragState.current = {
@@ -289,16 +318,18 @@ export const ProjectsSection: React.FC = () => {

    if (event.key === 'ArrowLeft') {
      event.preventDefault();
-      scrollByCard(-1);
+      scrollByCard(isRtl ? 1 : -1);
    } else if (event.key === 'ArrowRight') {
      event.preventDefault();
-      scrollByCard(1);
+      scrollByCard(isRtl ? -1 : 1);
    } else if (event.key === 'Home' || event.key === 'End') {
      event.preventDefault();
-      viewport.scrollTo({
-        left: event.key === 'Home' ? 0 : viewport.scrollWidth - viewport.clientWidth,
-        behavior: 'smooth',
-      });
+      setLogicalScrollLeft(
+        viewport,
+        event.key === 'Home' ? 0 : viewport.scrollWidth - viewport.clientWidth,
+        isRtl,
+        'smooth',
+      );
    }
  };

@@ -311,10 +342,10 @@ export const ProjectsSection: React.FC = () => {
      <div className="content-container">
        <div className={styles.headerRow} data-reveal="soft">
          <div className="section-header" style={{ marginBottom: 0 }}>
-            <span className="section-eyebrow">PROJECTS</span>
+            <span className="section-eyebrow">{copy.eyebrow}</span>
            <div className="section-title-wrap">
              <h2 id="projects-title" className="section-title">
-                Products I&apos;ve Brought to Life
+                {copy.title}
              </h2>
              <div className="section-underline" />
            </div>
@@ -326,9 +357,13 @@ export const ProjectsSection: React.FC = () => {
              onClick={() => scrollByCard(-1)}
              disabled={!canScrollPrev}
              className={`${styles.navButton} ${styles.navButtonPrevious}`}
-              aria-label="Previous projects"
+              aria-label={copy.previousLabel}
            >
-              <ArrowLeft size={28} strokeWidth={2.4} />
+              {isRtl ? (
+                <ArrowRight size={28} strokeWidth={2.4} />
+              ) : (
+                <ArrowLeft size={28} strokeWidth={2.4} />
+              )}
            </button>

            <button
@@ -336,9 +371,13 @@ export const ProjectsSection: React.FC = () => {
              onClick={() => scrollByCard(1)}
              disabled={!canScrollNext}
              className={`${styles.navButton} ${styles.navButtonNext}`}
-              aria-label="Next projects"
+              aria-label={copy.nextLabel}
            >
-              <ArrowRight size={28} strokeWidth={2.4} />
+              {isRtl ? (
+                <ArrowLeft size={28} strokeWidth={2.4} />
+              ) : (
+                <ArrowRight size={28} strokeWidth={2.4} />
+              )}
            </button>
          </div>
        </div>
@@ -355,8 +394,8 @@ export const ProjectsSection: React.FC = () => {
          onClickCapture={handleClickCapture}
          onKeyDown={handleKeyDown}
          tabIndex={0}
-          aria-label="Scrollable project cards"
-          aria-roledescription="carousel"
+          aria-label={copy.carouselLabel}
+          aria-roledescription={copy.carouselRoleDescription}
        >
          <div className={styles.carouselTrack} data-reveal-group>
            {projects.map((project) => (
@@ -372,8 +411,22 @@ export const ProjectsSection: React.FC = () => {

                  <div className={styles.cardBody} data-reveal="soft">
                    <div className={styles.cardTitleRow}>
-                      <h3 className={styles.cardTitle}>{project.title}</h3>
-                      {project.link && (
+                      {project.link && isRtl && (
+                        <ArrowUpRight
+                          size={19}
+                          strokeWidth={2.5}
+                          className={styles.titleLinkIcon}
+                          aria-hidden="true"
+                        />
+                      )}
+                      <h3
+                        className={`${styles.cardTitle} ${project.id === 'qlockify' ? 'ltr-token' : ''}`}
+                        lang={project.id === 'qlockify' ? 'en' : undefined}
+                        dir={project.id === 'qlockify' ? 'ltr' : undefined}
+                      >
+                        {project.title}
+                      </h3>
+                      {project.link && !isRtl && (
                        <ArrowUpRight
                          size={19}
                          strokeWidth={2.5}
@@ -388,7 +441,12 @@ export const ProjectsSection: React.FC = () => {

                    <div className={styles.tagList}>
                      {project.tags.map((tag) => (
-                        <span key={tag} className={styles.tagBadge}>
+                        <span
+                          key={tag}
+                          className={`${styles.tagBadge} ltr-token`}
+                          lang="en"
+                          dir="ltr"
+                        >
                          {tag}
                        </span>
                      ))}
@@ -396,8 +454,13 @@ export const ProjectsSection: React.FC = () => {

                    <div className={styles.cardFooter}>
                      <a href={project.link || '#'} className={styles.caseStudyLink}>
-                        <span>View case study</span>
-                        <ArrowRight size={18} strokeWidth={2.25} aria-hidden="true" />
+                        {isRtl && (
+                          <ArrowLeft size={18} strokeWidth={2.25} aria-hidden="true" />
+                        )}
+                        <span>{copy.viewCaseStudy}</span>
+                        {!isRtl && (
+                          <ArrowRight size={18} strokeWidth={2.25} aria-hidden="true" />
+                        )}
                      </a>
                    </div>
                  </div>
@@ -411,7 +474,7 @@ export const ProjectsSection: React.FC = () => {
            className={`${styles.scrollbarTrack} ${isScrollbarDragging ? styles.scrollbarDragging : ''}`}
            role="scrollbar"
            tabIndex={0}
-            aria-label="Project carousel position"
+            aria-label={copy.scrollbarLabel}
            aria-controls="projects-carousel"
            aria-orientation="horizontal"
            aria-valuemin={0}
@@ -427,9 +490,9 @@ export const ProjectsSection: React.FC = () => {
              className={styles.scrollbarThumb}
              style={{
                width: `${scrollbarThumbPercent}%`,
-                transform: `translate3d(${scrollbarThumbPercent < 100
+                transform: `translate3d(${(isRtl ? -1 : 1) * (scrollbarThumbPercent < 100
                  ? scrollProgress * ((100 - scrollbarThumbPercent) / scrollbarThumbPercent) * 100
-                  : 0}%, 0, 0)`,
+                  : 0)}%, 0, 0)`,
              }}
            />
          </div>
--- a/src/components/RiverJourney.tsx
+++ b/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>
--- a/src/components/ScenicHeroJourney.tsx
+++ b/src/components/ScenicHeroJourney.tsx
@@ -1,6 +1,5 @@
 'use client';

-import React from 'react';
 import { HeroSection } from './HeroSection';
 import { RiverJourney } from './RiverJourney';
 import {
@@ -10,6 +9,7 @@ import {
  HeroIllustrationMoon,
 } from './HeroIllustrations';
 import styles from './ScenicHeroJourney.module.css';
+import { messagesByLocale, type Locale } from '@/i18n/content';

 function HeroBackdrop() {
  return (
@@ -22,15 +22,17 @@ function HeroBackdrop() {
  );
 }

-export const ScenicHeroJourney: React.FC = () => {
+export const ScenicHeroJourney = ({ locale }: { locale: Locale }) => {
+  const copy = messagesByLocale[locale];
+
  return (
    <div className={styles.scenicContainer}>
-      <section className={styles.heroStage} aria-label="Introduction">
+      <section className={styles.heroStage} aria-label={copy.hero.sectionLabel}>
        <HeroBackdrop />
-        <HeroSection />
+        <HeroSection locale={locale} />
      </section>

-      <RiverJourney />
+      <RiverJourney locale={locale} />
    </div>
  );
 };
--- a/src/components/SiteLoader.tsx
+++ b/src/components/SiteLoader.tsx
@@ -6,6 +6,7 @@ import { experiences } from '@/data/experience';
 import { milestones } from '@/data/milestones';
 import { projects } from '@/data/projects';
 import { skillsByDiscipline } from '@/data/skills';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './SiteLoader.module.css';

 const DARK_PROJECT_IDS = new Set([
@@ -78,7 +79,8 @@ const preloadImage = (src: string, onSettled: () => void) =>

 type LoaderPhase = 'loading' | 'leaving' | 'hidden';

-export function SiteLoader() {
+export function SiteLoader({ locale }: { locale: Locale }) {
+  const copy = messagesByLocale[locale].loader;
  const [progress, setProgress] = useState(0);
  const [phase, setPhase] = useState<LoaderPhase>('loading');

@@ -149,7 +151,7 @@ export function SiteLoader() {
      role="status"
      aria-live="polite"
      aria-busy={phase === 'loading'}
-      aria-label={`Loading portfolio: ${progress}%`}
+      aria-label={copy.ariaLabel(progress)}
    >
      <div className={styles.grid} aria-hidden="true" />

@@ -163,15 +165,15 @@ export function SiteLoader() {
        </div>

        <p className={`font-display ${styles.signature}`}>
-          Amirhossein Khalili
+          {copy.signature}
        </p>
-        <p className={styles.message}>Assembling the experience</p>
+        <p className={styles.message}>{copy.message}</p>

        <div className={styles.progressRow} aria-hidden="true">
          <div className={styles.progressTrack}>
            <span className={styles.progressFill} style={progressStyle} />
          </div>
-          <span className={styles.progressValue}>{progress}%</span>
+          <span className={styles.progressValue}>{copy.progressLabel(progress)}</span>
        </div>
      </div>
    </div>
--- a/src/components/SkillsSection.tsx
+++ b/src/components/SkillsSection.tsx
@@ -1,6 +1,6 @@
 'use client';

-import React, { useState } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import { Code, BarChart2, Wand2 } from 'lucide-react';
 import {
@@ -8,9 +8,11 @@ import {
  filterTabs,
  FilterTab,
 } from '@/data/skills';
+import { messagesByLocale, type Locale } from '@/i18n/content';
 import styles from './SkillsSection.module.css';

-export const SkillsSection: React.FC = () => {
+export const SkillsSection = ({ locale }: { locale: Locale }) => {
+  const copy = messagesByLocale[locale].skills;
  const [activeFilter, setActiveFilter] = useState<FilterTab['id']>('software-engineering');
  const activeDiscipline = skillsByDiscipline[activeFilter];

@@ -30,9 +32,9 @@ export const SkillsSection: React.FC = () => {
      <div className="content-container">
        {/* Section Header */}
        <div className="section-header" data-reveal="soft">
-          <span className="section-eyebrow">SKILLS & TOOLS</span>
+          <span className="section-eyebrow">{copy.eyebrow}</span>
          <div className="section-title-wrap">
-            <h2 className="section-title">The Stack Behind the Work...</h2>
+            <h2 className="section-title">{copy.title}</h2>
            <div className="section-underline" />
          </div>
        </div>
@@ -41,13 +43,15 @@ export const SkillsSection: React.FC = () => {
        <div className={styles.mainCard} aria-live="polite" data-reveal="scale">
          {/* Section: Skills */}
          <div className={styles.skillsBlock}>
-            <span className={styles.cardEyebrow}>SKILLS</span>
+            <span className={styles.cardEyebrow}>{copy.skillsLabel}</span>

            {/* Discipline-specific skill meters */}
            <div className={styles.skillsGrid}>
              {activeDiscipline.skills.map((skill) => (
                <div key={skill.name} className={styles.skillItem}>
-                  <div className={styles.skillName}>{skill.name}</div>
+                  <div className={`${styles.skillName} ltr-token`} lang="en" dir="ltr">
+                    {skill.name}
+                  </div>
                  <div className={styles.meterSegments}>
                    {[1, 2, 3, 4, 5].map((seg) => (
                      <div
@@ -65,7 +69,12 @@ export const SkillsSection: React.FC = () => {
            {/* Keyword Badges */}
            <div className={styles.badgeCloud}>
              {activeDiscipline.keywords.map((badge, index) => (
-                <span key={`${badge}-${index}`} className={styles.badgePill}>
+                <span
+                  key={`${badge}-${index}`}
+                  className={`${styles.badgePill} ltr-token`}
+                  lang="en"
+                  dir="ltr"
+                >
                  {badge}
                </span>
              ))}
@@ -74,7 +83,7 @@ export const SkillsSection: React.FC = () => {

          {/* Section: Tools */}
          <div className={styles.toolsBlock}>
-            <span className={styles.cardEyebrow}>TOOLS</span>
+            <span className={styles.cardEyebrow}>{copy.toolsLabel}</span>

            {/* 8-Column Grid */}
            <div className={styles.toolsGrid}>
@@ -89,7 +98,9 @@ export const SkillsSection: React.FC = () => {
                      className={styles.toolIcon}
                    />
                  </div>
-                  <span className={styles.toolLabel}>{tool.name}</span>
+                  <span className={`${styles.toolLabel} ltr-token`} lang="en" dir="ltr">
+                    {tool.name}
+                  </span>
                </div>
              ))}
            </div>
@@ -99,7 +110,7 @@ export const SkillsSection: React.FC = () => {
        {/* Filter Tabs Under Card */}
        <div
          className={styles.filterTabsRow}
-          aria-label="Choose skill discipline"
+          aria-label={copy.filterLabel}
          data-reveal="soft"
        >
          {filterTabs.map((tab) => {
@@ -115,7 +126,7 @@ export const SkillsSection: React.FC = () => {
                } ${styles.filterButton}`}
              >
                {getFilterIcon(tab.id)}
-                <span>{tab.label}</span>
+                <span>{copy.filterLabels[tab.id]}</span>
              </button>
            );
          })}