refactor(about): structure the career journey

src/components/RiverJourney.module.css

@@ -66,15 +66,33 @@
 
 .stepsList {
   position: absolute;
-  inset: 0;
+  top: 5.5rem;
+  right: var(--layout-page-gutter);
   z-index: 3;
+  display: flex;
+  flex-direction: column;
+  width: min(33rem, 46vw);
+  gap: var(--space-3);
+  padding-left: 3.5rem;
   list-style: none;
 }
 
-.stepCard {
+.stepsList::before {
+  content: '';
   position: absolute;
+  top: 1.25rem;
+  bottom: 1.25rem;
+  left: 1.25rem;
+  width: 2px;
+  border-radius: var(--radius-pill);
+  background: var(--border-strong);
+}
+
+.stepCard {
+  position: relative;
   display: flex;
-  width: 15.625rem;
+  width: 100%;
+  min-height: 6.125rem;
   gap: var(--space-3);
   padding: var(--space-4);
   border: 1px solid var(--border-default);
@@ -82,23 +100,28 @@
   background: var(--overlay-contact);
   box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
   backdrop-filter: blur(8px);
-  transition:
-    border-color var(--motion-duration-fast) ease,
-    transform var(--motion-duration-default) var(--motion-ease-out);
+  transition: border-color var(--motion-duration-fast) ease;
 }
 
-.step05 { top: 7.25rem; right: 2.875rem; }
-.step04 { top: 20.875rem; right: 15.625rem; }
-.step03 { top: 31.25rem; left: 48%; }
-.step02 { top: 43.125rem; left: 25%; }
-.step01 { top: 51.625rem; left: 4.375rem; }
-
-.stepNumber {
-  flex: 0 0 auto;
+.stepIcon {
+  position: absolute;
+  top: 1rem;
+  left: -3.5rem;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 50%;
+  background: var(--bg-raised);
   color: var(--accent-default);
-  font-size: 1.25rem;
-  font-weight: 800;
-  line-height: 1.75rem;
+  box-shadow: 0 0.375rem 1rem var(--shadow-color);
+}
+
+.stepContent {
+  min-width: 0;
 }
 
 .stepTitle {
@@ -120,15 +143,11 @@
     top: 5rem;
   }
 
-  .stepCard {
-    width: 14.375rem;
+  .stepsList {
+    top: 4.5rem;
+    right: 2rem;
+    width: min(28rem, 45vw);
   }
-
-  .step05 { top: 5.625rem; right: 2rem; }
-  .step04 { top: 18.75rem; right: 10%; }
-  .step03 { top: 30.625rem; left: 48%; }
-  .step02 { top: 43.125rem; left: 24%; }
-  .step01 { top: 53.125rem; left: 2rem; }
 }
 
 @media (max-width: 760px) {
@@ -167,12 +186,14 @@
 
   .stepsList {
     position: relative;
-    inset: auto;
+    top: auto;
+    right: auto;
     display: flex;
     flex-direction: column;
+    width: 100%;
     gap: var(--space-3);
     margin-top: 13.75rem;
-    padding-left: 1.5rem;
+    padding-left: 3.25rem;
   }
 
   .stepsList::before {
@@ -180,17 +201,12 @@
     position: absolute;
     top: 1.25rem;
     bottom: 1.25rem;
-    left: 0.5rem;
+    left: 1.125rem;
     width: 2px;
     background: var(--border-strong);
   }
 
-  .stepCard,
-  .step05,
-  .step04,
-  .step03,
-  .step02,
-  .step01 {
+  .stepCard {
     position: relative;
     inset: auto;
     width: 100%;
@@ -199,17 +215,9 @@
     backdrop-filter: blur(6px);
   }
 
-  .stepCard::before {
-    content: '';
-    position: absolute;
-    top: 1.375rem;
-    left: -1rem;
-    width: 0.625rem;
-    height: 0.625rem;
-    transform: translateX(-50%);
-    border: 3px solid var(--bg-page);
-    border-radius: 50%;
-    background: var(--accent-default);
+  .stepIcon {
+    top: 0.75rem;
+    left: -3.25rem;
   }
 }
 
@@ -226,10 +234,3 @@
   }
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .stepCard:hover {
-    border-color: var(--accent-default);
-    transform: translateY(-2px);
-  }
-}
-

src/components/RiverJourney.tsx

@@ -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>
   );

src/components/scenes/scenePrimitives.ts

@@ -34,7 +34,7 @@ export const palettes: Record<SceneTheme, ScenePalette> = {
     accentSoft: 0x3d8afa,
     edge: 0x426b9d,
     foliage: 0x3d8afa,
-    ground: 0x07132f,
+    ground: 0x04132d,
     mountain: 0x0b2f5f,
     mountainDark: 0x010d27,
     mountainLight: 0x103f7f,