feat: render portfolio routes from live localized database content

src/components/RiverJourney.tsx

@@ -6,13 +6,13 @@ import {
   Rocket,
 } from 'lucide-react';
 import { DeferredAboutRiverScene } from './scenes/DeferredAboutRiverScene';
-import { messagesByLocale, type Locale } from '@/i18n/content';
+import type { PortfolioProps } from '@/server/content';
 import styles from './RiverJourney.module.css';
 
 const stepIcons = [Palette, PanelsTopLeft, GraduationCap, Code2, Rocket];
 
-export const RiverJourney = ({ locale }: { locale: Locale }) => {
-  const copy = messagesByLocale[locale].about;
+export const RiverJourney = ({ portfolio }: PortfolioProps) => {
+  const copy = portfolio.messages.about;
 
   return (
     <section id="about" className={styles.journeySection} aria-labelledby="about-title">
@@ -22,7 +22,7 @@ export const RiverJourney = ({ locale }: { locale: Locale }) => {
         <span className={styles.eyebrow}>{copy.eyebrow}</span>
         <h2
           id="about-title"
-          className={`${styles.heading} ${locale === 'fa' ? 'font-display' : ''}`}
+          className={`${styles.heading} ${portfolio.direction === 'rtl' ? 'font-display' : ''}`}
         >
           {copy.title}
         </h2>
@@ -36,7 +36,7 @@ export const RiverJourney = ({ locale }: { locale: Locale }) => {
         data-reveal-group
       >
         {copy.steps.map((step, index) => {
-          const StepIcon = stepIcons[index];
+          const StepIcon = stepIcons[index % stepIcons.length];
 
           return (
             <li key={step.title} className={styles.stepCard} data-reveal="soft">