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/public/images/flags/LICENSE
+++ b/public/images/flags/LICENSE
@@ -0,0 +1,393 @@
+Attribution 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+	wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More_considerations
+     for the public: 
+	wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution 4.0 International Public License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution 4.0 International Public License ("Public License"). To the
+extent this Public License may be interpreted as a contract, You are
+granted the Licensed Rights in consideration of Your acceptance of
+these terms and conditions, and the Licensor grants You such rights in
+consideration of benefits the Licensor receives from making the
+Licensed Material available under these terms and conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  d. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  e. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  f. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  g. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  h. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  i. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  j. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  k. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part; and
+
+            b. produce, reproduce, and Share Adapted Material.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+       4. If You Share Adapted Material You produce, the Adapter's
+          License You apply must not prevent recipients of the Adapted
+          Material from complying with this Public License.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material; and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public licenses.
+Notwithstanding, Creative Commons may elect to apply one of its public
+licenses to material it publishes and in those instances will be
+considered the "Licensor." Except for the limited purpose of indicating
+that material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the public
+licenses.
+
+Creative Commons may be contacted at creativecommons.org.
--- a/public/images/flags/english.svg
+++ b/public/images/flags/english.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#00247D" d="M0 9.059V13h5.628zM4.664 31H13v-5.837zM23 25.164V31h8.335zM0 23v3.941L5.63 23zM31.337 5H23v5.837zM36 26.942V23h-5.631zM36 13V9.059L30.371 13zM13 5H4.664L13 10.837z"/><path fill="#CF1B2B" d="M25.14 23l9.712 6.801c.471-.479.808-1.082.99-1.749L28.627 23H25.14zM13 23h-2.141l-9.711 6.8c.521.53 1.189.909 1.938 1.085L13 23.943V23zm10-10h2.141l9.711-6.8c-.521-.53-1.188-.909-1.937-1.085L23 12.057V13zm-12.141 0L1.148 6.2C.677 6.68.34 7.282.157 7.949L7.372 13h3.487z"/><path fill="#EEE" d="M36 21H21v10h2v-5.836L31.335 31H32c1.117 0 2.126-.461 2.852-1.199L25.14 23h3.487l7.215 5.052c.093-.337.158-.686.158-1.052v-.058L30.369 23H36v-2zM0 21v2h5.63L0 26.941V27c0 1.091.439 2.078 1.148 2.8l9.711-6.8H13v.943l-9.914 6.941c.294.07.598.116.914.116h.664L13 25.163V31h2V21H0zM36 9c0-1.091-.439-2.078-1.148-2.8L25.141 13H23v-.943l9.915-6.942C32.62 5.046 32.316 5 32 5h-.663L23 10.837V5h-2v10h15v-2h-5.629L36 9.059V9zM13 5v5.837L4.664 5H4c-1.118 0-2.126.461-2.852 1.2l9.711 6.8H7.372L.157 7.949C.065 8.286 0 8.634 0 9v.059L5.628 13H0v2h15V5h-2z"/><path fill="#CF1B2B" d="M21 15V5h-6v10H0v6h15v10h6V21h15v-6z"/></svg>
--- a/public/images/flags/persian.svg
+++ b/public/images/flags/persian.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#DA0001" d="M0 27c0 2.209 1.791 4 4 4h28c2.209 0 4-1.791 4-4v-4H0v4z"/><path fill="#EEE" d="M0 13h36v10H0z"/><path fill="#239F40" d="M36 13V9c0-2.209-1.791-4-4-4H4C1.791 5 0 6.791 0 9v4h36z"/><path fill="#E96667" d="M0 23h36v1H0z"/><g fill="#BE1931"><path d="M19.465 14.969c.957.49 3.038 2.953.798 5.731 1.391-.308 3.162-4.408-.798-5.731zm-2.937 0c-3.959 1.323-2.189 5.423-.798 5.731-2.24-2.778-.159-5.241.798-5.731zm1.453-.143c.04.197 1.101.436.974-.573-.168.408-.654.396-.968.207-.432.241-.835.182-.988-.227-.148.754.587.975.982.593z"/><path d="M20.538 17.904c-.015-1.248-.677-2.352-1.329-2.799.43.527 1.752 3.436-.785 5.351l.047-5.097-.475-.418-.475.398.08 5.146-.018-.015c-2.563-1.914-1.233-4.837-.802-5.365-.652.447-1.315 1.551-1.329 2.799-.013 1.071.477 2.243 1.834 3.205-.558.149-1.162.208-1.678.201.464.253 1.34.192 2.007.131l.001.068.398.437.4-.455v-.052c.672.062 1.567.129 2.039-.128-.532.008-1.159-.053-1.732-.213 1.344-.961 1.83-2.127 1.817-3.194z"/></g><path fill="#7BC58C" d="M0 12h36v1H0z"/></svg>
--- a/src/app/(en)/layout.tsx
+++ b/src/app/(en)/layout.tsx
@@ -0,0 +1,12 @@
+import type { Metadata } from 'next';
+import { SiteRoot } from '@/app/SiteRoot';
+import { messagesByLocale } from '@/i18n/content';
+import '@/styles/globals.css';
+
+export const metadata: Metadata = messagesByLocale.en.metadata;
+
+export default function EnglishLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return <SiteRoot locale="en">{children}</SiteRoot>;
+}
--- a/src/app/(en)/page.tsx
+++ b/src/app/(en)/page.tsx
@@ -0,0 +1,5 @@
+import { PortfolioPage } from '@/app/PortfolioPage';
+
+export default function Home() {
+  return <PortfolioPage locale="en" />;
+}
--- a/src/app/(fa)/fa/layout.tsx
+++ b/src/app/(fa)/fa/layout.tsx
@@ -0,0 +1,12 @@
+import type { Metadata } from 'next';
+import { SiteRoot } from '@/app/SiteRoot';
+import { messagesByLocale } from '@/i18n/content';
+import '@/styles/globals.css';
+
+export const metadata: Metadata = messagesByLocale.fa.metadata;
+
+export default function PersianLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return <SiteRoot locale="fa">{children}</SiteRoot>;
+}
--- a/src/app/(fa)/fa/page.tsx
+++ b/src/app/(fa)/fa/page.tsx
@@ -0,0 +1,5 @@
+import { PortfolioPage } from '@/app/PortfolioPage';
+
+export default function PersianHome() {
+  return <PortfolioPage locale="fa" />;
+}
--- a/src/app/PortfolioPage.tsx
+++ b/src/app/PortfolioPage.tsx
@@ -8,33 +8,20 @@ import { MilestonesSection } from '@/components/MilestonesSection';
 import { FooterSection } from '@/components/FooterSection';
 import { MotionController } from '@/components/MotionController';
 import { SiteLoader } from '@/components/SiteLoader';
+import type { Locale } from '@/i18n/content';

-export default function Home() {
+export function PortfolioPage({ locale }: { locale: Locale }) {
  return (
-    <main className="desktop-canvas">
-      <SiteLoader />
+    <main className="desktop-canvas" data-locale={locale}>
+      <SiteLoader locale={locale} />
      <MotionController />
-
-      {/* 1. Hero & About Me River Journey (Seamless Scenic Background) */}
-      <ScenicHeroJourney />
-
-      {/* 2. Projects Carousel Section */}
-      <ProjectsSection />
-
-      {/* 3. Work Experience Timeline Section */}
-      <ExperienceSection />
-
-      {/* 4. Skills & Tools Matrix Section */}
-      <SkillsSection />
-
-      {/* 5. Education Foundation Section */}
-      <EducationSection />
-
-      {/* 6. Milestones & Awards Section */}
-      <MilestonesSection />
-
-      {/* 7. Footer CTA & Social Section */}
-      <FooterSection />
+      <ScenicHeroJourney locale={locale} />
+      <ProjectsSection locale={locale} />
+      <ExperienceSection locale={locale} />
+      <SkillsSection locale={locale} />
+      <EducationSection locale={locale} />
+      <MilestonesSection locale={locale} />
+      <FooterSection locale={locale} />
    </main>
  );
 }
--- a/src/app/SiteRoot.tsx
+++ b/src/app/SiteRoot.tsx
@@ -1,19 +1,6 @@
-import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
 import { ThemeProvider } from '@/context/ThemeContext';
-import '@/styles/globals.css';
-
-export const metadata: Metadata = {
-  title: "Amirhossein Khalili | Dedicated Product Engineer",
-  description:
-    "Personal portfolio of Amirhossein Khalili, Product Engineer & Software Developer based in Iran.",
-  keywords: [
-    'Amirhossein Khalili',
-    'Product Engineer',
-    'Software Engineer',
-    'Full Stack Developer',
-    'Portfolio',
-  ],
-};
+import type { Locale } from '@/i18n/content';

 const themeScript = `
  document.documentElement.dataset.siteLoading = 'true';
@@ -23,13 +10,19 @@ const themeScript = `
  } catch {}
 `;

-export default function RootLayout({
+export function SiteRoot({
  children,
+  locale,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
+  locale: Locale;
 }) {
  return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang={locale}
+      dir={locale === 'fa' ? 'rtl' : 'ltr'}
+      suppressHydrationWarning
+    >
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
      </head>
--- 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>
            );
          })}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#00247D" d="M0 9.059V13h5.628zM4.664 31H13v-5.837zM23 25.164V31h8.335zM0 23v3.941L5.63 23zM31.337 5H23v5.837zM36 26.942V23h-5.631zM36 13V9.059L30.371 13zM13 5H4.664L13 10.837z"/><path fill="#CF1B2B" d="M25.14 23l9.712 6.801c.471-.479.808-1.082.99-1.749L28.627 23H25.14zM13 23h-2.141l-9.711 6.8c.521.53 1.189.909 1.938 1.085L13 23.943V23zm10-10h2.141l9.711-6.8c-.521-.53-1.188-.909-1.937-1.085L23 12.057V13zm-12.141 0L1.148 6.2C.677 6.68.34 7.282.157 7.949L7.372 13h3.487z"/><path fill="#EEE" d="M36 21H21v10h2v-5.836L31.335 31H32c1.117 0 2.126-.461 2.852-1.199L25.14 23h3.487l7.215 5.052c.093-.337.158-.686.158-1.052v-.058L30.369 23H36v-2zM0 21v2h5.63L0 26.941V27c0 1.091.439 2.078 1.148 2.8l9.711-6.8H13v.943l-9.914 6.941c.294.07.598.116.914.116h.664L13 25.163V31h2V21H0zM36 9c0-1.091-.439-2.078-1.148-2.8L25.141 13H23v-.943l9.915-6.942C32.62 5.046 32.316 5 32 5h-.663L23 10.837V5h-2v10h15v-2h-5.629L36 9.059V9zM13 5v5.837L4.664 5H4c-1.118 0-2.126.461-2.852 1.2l9.711 6.8H7.372L.157 7.949C.065 8.286 0 8.634 0 9v.059L5.628 13H0v2h15V5h-2z"/><path fill="#CF1B2B" d="M21 15V5h-6v10H0v6h15v10h6V21h15v-6z"/></svg>