46 lines
2.1 KiB
TypeScript
46 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React from '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.' },
|
|
];
|
|
|
|
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}>
|
|
<span className={styles.eyebrow}>ABOUT ME</span>
|
|
<h2 id="about-title" className={styles.heading}>From Pixel to Product</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>
|
|
</div>
|
|
|
|
<ol className={styles.stepsList} aria-label="Career journey">
|
|
{steps.map((step) => (
|
|
<li key={step.number} className={`${styles.stepCard} ${styles[`step${step.number}`]}`}>
|
|
<span className={styles.stepNumber}>{step.number}</span>
|
|
<div>
|
|
<h3 className={styles.stepTitle}>{step.title}</h3>
|
|
<p className={styles.stepDesc}>{step.description}</p>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
);
|
|
};
|