amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(about): structure the career journey

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 22:04:40 +03:30
parent 74019cba66
commit 568716c976
4 changed files with 86 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/RiverJourney.tsx
View File

@@ -1,15 +1,22 @@
'use client';
import React from 'react';
import {
Code2,
GraduationCap,
Palette,
PanelsTopLeft,
Rocket,
} from 'lucide-react';
import { AboutRiverScene } from './scenes/AboutRiverScene';
import styles from './RiverJourney.module.css';
const steps = [
{ number: '01', title: 'Digital Artist', description: 'Explored visual design, illustration and storytelling.' },
{ number: '02', title: 'UI/UX Designer', description: 'Designed intuitive interfaces and user-centered experiences.' },
{ number: '03', title: 'Computer Science', description: 'Built strong foundations in algorithms and systems thinking.' },
{ number: '04', title: 'Software Engineer', description: 'Engineered scalable applications and delivered real-world solutions.' },
{ number: '05', title: 'Product Engineer', description: 'Merging product strategy with engineering to ship impactful products.' },
{ 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.' },
];
export const RiverJourney: React.FC = () => {
@@ -30,14 +37,21 @@ export const RiverJourney: React.FC = () => {
</div>
<ol className={styles.stepsList} aria-label="Career journey">
{steps.map((step) => (
<li key={step.number} className={`${styles.stepCard} ${styles[`step${step.number}`]}`}>
<div>
<h3 className={styles.stepTitle}>{step.title}</h3>
<p className={styles.stepDesc}>{step.description}</p>
</div>
</li>
))}
{steps.map((step) => {
const StepIcon = step.icon;
return (
<li key={step.number} className={styles.stepCard}>
<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>
);