57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import {
|
|
Code2,
|
|
GraduationCap,
|
|
Palette,
|
|
PanelsTopLeft,
|
|
Rocket,
|
|
} from 'lucide-react';
|
|
import { DeferredAboutRiverScene } from './scenes/DeferredAboutRiverScene';
|
|
import type { PortfolioProps } from '@/server/content';
|
|
import styles from './RiverJourney.module.css';
|
|
|
|
const stepIcons = [Palette, PanelsTopLeft, GraduationCap, Code2, Rocket];
|
|
|
|
export const RiverJourney = ({ portfolio }: PortfolioProps) => {
|
|
const copy = portfolio.messages.about;
|
|
|
|
return (
|
|
<section id="about" className={styles.journeySection} aria-labelledby="about-title">
|
|
<DeferredAboutRiverScene />
|
|
{/* Intro Header & Description on the Left */}
|
|
<div className={styles.introBlock} data-reveal="scale">
|
|
<span className={styles.eyebrow}>{copy.eyebrow}</span>
|
|
<h2
|
|
id="about-title"
|
|
className={`${styles.heading} ${portfolio.direction === 'rtl' ? 'font-display' : ''}`}
|
|
>
|
|
{copy.title}
|
|
</h2>
|
|
<div className={styles.underlineBar} />
|
|
<p className={styles.description}>{copy.description}</p>
|
|
</div>
|
|
|
|
<ol
|
|
className={styles.stepsList}
|
|
aria-label={copy.journeyLabel}
|
|
data-reveal-group
|
|
>
|
|
{copy.steps.map((step, index) => {
|
|
const StepIcon = stepIcons[index % stepIcons.length];
|
|
|
|
return (
|
|
<li key={step.title} className={styles.stepCard} data-reveal="soft">
|
|
<span className={styles.stepIcon} aria-hidden="true">
|
|
<StepIcon size={20} strokeWidth={1.9} />
|
|
</span>
|
|
<div className={styles.stepContent}>
|
|
<h3 className={styles.stepTitle}>{step.title}</h3>
|
|
<p className={styles.stepDesc}>{step.description}</p>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</section>
|
|
);
|
|
};
|