Fade timeline connector from one job's colour to the next

claude · claude · commit dd1015388ee7 · 2026-05-11T15:33:24.000Z
The gap connector now uses a vertical gradient from the current job's accent to the next job's accent, with the blend centred in the gap between the cards. https://claude.ai/code/session_01DUbsS9TjUPnaAbLQTnyczE
diff --git a/dist/assets/index-17767092.js b/dist/assets/index-17767092.js
diff --git a/dist/assets/index-c9b8e487.css b/dist/assets/index-c9b8e487.css
diff --git a/dist/index.html b/dist/index.html
@@ -17,8 +17,8 @@
     <link rel="manifest" href="data:application/json;base64,ewogICJzaG9ydF9uYW1lIjogIkFzZVdoeSIsCiAgIm5hbWUiOiAiQXNlV2h5L0FzdGVjb20iLAogICJpY29ucyI6IFsKICAgIHsKICAgICAgInNyYyI6ICJmYXZpY29uLmljbyIsCiAgICAgICJzaXplcyI6ICI2NHg2NCAzMngzMiAyNHgyNCAxNngxNiIsCiAgICAgICJ0eXBlIjogImltYWdlL3gtaWNvbiIKICAgIH0sCiAgICB7CiAgICAgICJzcmMiOiAibG9nbzE5Mi5wbmciLAogICAgICAidHlwZSI6ICJpbWFnZS9wbmciLAogICAgICAic2l6ZXMiOiAiMTkyeDE5MiIKICAgIH0sCiAgICB7CiAgICAgICJzcmMiOiAibG9nbzUxMi5wbmciLAogICAgICAidHlwZSI6ICJpbWFnZS9wbmciLAogICAgICAic2l6ZXMiOiAiNTEyeDUxMiIKICAgIH0KICBdLAogICJzdGFydF91cmwiOiAiLiIsCiAgImRpc3BsYXkiOiAic3RhbmRhbG9uZSIsCiAgInRoZW1lX2NvbG9yIjogIiMwYjBkMTIiLAogICJiYWNrZ3JvdW5kX2NvbG9yIjogIiMwYjBkMTIiCn0K" />
 
     <title>AseWhy/Astecom</title>
-    <script type="module" crossorigin src="/assets/index-d7c8747b.js"></script>
-    <link rel="stylesheet" href="/assets/index-575788e2.css">
+    <script type="module" crossorigin src="/assets/index-17767092.js"></script>
+    <link rel="stylesheet" href="/assets/index-c9b8e487.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/components/content/work/WorkContent.tsx b/src/components/content/work/WorkContent.tsx
@@ -1,4 +1,4 @@
-import { WorkPlace } from "./WorkPlace";
+import { WorkPlace, type IWorkPlaceProps } from "./WorkPlace";
 import { Experiance } from "./data";
 import { formatDuration, intervalToDuration } from "date-fns";
 import { ru } from "date-fns/locale";
@@ -33,6 +33,7 @@ export function WorkContent() {
                     {...e}
                     key={e.name}
                     last={i === Experiance.length - 1}
+                    nextColor={(Experiance[i + 1] as IWorkPlaceProps | undefined)?.color}
                 />)
             }
         </div>
diff --git a/src/components/content/work/WorkPlace.module.scss b/src/components/content/work/WorkPlace.module.scss
@@ -82,15 +82,22 @@
         font-weight: 600;
         font-size: var(--fs-small);
 
-        // connector that bridges the gap to the next card so the timeline is unbroken
+        // connector that bridges the gap to the next card, fading this job's
+        // colour into the next one around the centre of the gap
         &::after {
             content: '';
             position: absolute;
             right: -3px;
             top: 100%;
             width: 3px;
-            height: calc(var(--space-6) * 3 + var(--space-5));
-            background: var(--job-accent);
+            height: calc(var(--space-6) * 3 + var(--space-2));
+            background: linear-gradient(
+                to bottom,
+                var(--job-accent) 0%,
+                var(--job-accent) 30%,
+                var(--job-accent-next, var(--job-accent)) 70%,
+                var(--job-accent-next, var(--job-accent)) 100%
+            );
         }
 
         span {
diff --git a/src/components/content/work/WorkPlace.tsx b/src/components/content/work/WorkPlace.tsx
@@ -13,6 +13,7 @@ export interface IWorkPlaceProps {
     sphere: string,
     site: string,
     color?: string;
+    nextColor?: string;
     last?: boolean;
     logo: any,
     dateStart: Date,
@@ -34,20 +35,22 @@ export function WorkPlace({
     dateEnd,
     site,
     color = 'red',
+    nextColor,
     last = false,
     sphere,
     location,
     project,
     responsibilities
 }: IWorkPlaceProps) {
     const accent = ACCENT_BY_COLOR[color] ?? color;
+    const nextAccent = nextColor ? (ACCENT_BY_COLOR[nextColor] ?? nextColor) : accent;
 
     return <Parallax
         opacity={ [ 0.25, 2 ] }
     >
         <div
             className={WorkPlaceModule.WorkPlace}
-            style={{ ['--job-accent' as any]: accent }}
+            style={{ ['--job-accent' as any]: accent, ['--job-accent-next' as any]: nextAccent }}
             data-last={last}
         >
             <div
