chore: create initial project snapshot

Capture the portfolio source, design references, and production assets with repository-specific ignore rules.

src/components/RiverJourney.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import styles from './RiverJourney.module.css';
+
+export const RiverJourney: React.FC = () => {
+  return (
+    <section id="about" className={styles.journeySection}>
+      {/* Intro Header & Description on the Left */}
+      <div className={styles.introBlock}>
+        <span className={styles.eyebrow}>ABOUT ME</span>
+        <h2 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>
+
+      {/* 5 Freely Positioned Milestones along the River */}
+
+      {/* Step 05: Product Engineer */}
+      <div className={styles.step05Graphic}>
+        <Image
+          src="/assets/step-05-product-engineer.png"
+          alt="Product Engineer Milestone"
+          width={180}
+          height={240}
+          className={styles.islandImage}
+        />
+      </div>
+      <div className={styles.step05Text}>
+        <div className={styles.stepNumber}>05</div>
+        <h3 className={styles.stepTitle}>Product Engineer</h3>
+        <p className={styles.stepDesc}>
+          Merging product strategy with engineering to ship impactful products.
+        </p>
+      </div>
+
+      {/* Step 04: Software Engineer */}
+      <div className={styles.step04Text}>
+        <div className={styles.stepNumber}>04</div>
+        <h3 className={styles.stepTitle}>Software Engineer</h3>
+        <p className={styles.stepDesc}>
+          Engineered scalable applications and delivered real-world solutions.
+        </p>
+      </div>
+      <div className={styles.step04Graphic}>
+        <Image
+          src="/assets/step-04-software-engineer.png"
+          alt="Software Engineer Milestone"
+          width={250}
+          height={220}
+          className={styles.islandImage}
+        />
+      </div>
+
+      {/* Step 03: Computer Science */}
+      <div className={styles.step03Text}>
+        <div className={styles.stepNumber}>03</div>
+        <h3 className={styles.stepTitle}>Computer Science</h3>
+        <p className={styles.stepDesc}>
+          Built strong foundations in algorithms and systems thinking.
+        </p>
+      </div>
+      <div className={styles.step03Graphic}>
+        <Image
+          src="/assets/step-02-computer-science.png"
+          alt="Computer Science Milestone"
+          width={240}
+          height={220}
+          className={styles.islandImage}
+        />
+      </div>
+
+      {/* Step 02: UI/UX Designer */}
+      <div className={styles.step02Text}>
+        <div className={styles.stepNumber}>02</div>
+        <h3 className={styles.stepTitle}>UI/UX Designer</h3>
+        <p className={styles.stepDesc}>
+          Designed Intuitive interfaces and user-centered experiences.
+        </p>
+      </div>
+      <div className={styles.step02Graphic}>
+        <Image
+          src="/assets/step-03-ui-ux-designer.png"
+          alt="UI/UX Designer Milestone"
+          width={210}
+          height={200}
+          className={styles.islandImage}
+        />
+      </div>
+
+      {/* Step 01: Digital Artist */}
+      <div className={styles.step01Text}>
+        <div className={styles.stepNumber}>01</div>
+        <h3 className={styles.stepTitle}>Digital Artist</h3>
+        <p className={styles.stepDesc}>
+          Explored visual design, illustration and storytelling.
+        </p>
+      </div>
+      <div className={styles.step01Graphic}>
+        <Image
+          src="/assets/step-01-digital-artist.png"
+          alt="Digital Artist Milestone"
+          width={230}
+          height={200}
+          className={styles.islandImage}
+        />
+      </div>
+    </section>
+  );
+};