Make the work-experience timeline one continuous line

claude · claude · commit c5e1bdd52cc1 · 2026-05-11T14:49:24.000Z
Each card's date column now extends a connector through the gap to the next card, so the colored timeline runs unbroken through all jobs (colour switches at each job boundary); the last card omits the connector. Desktop only. https://claude.ai/code/session_01DUbsS9TjUPnaAbLQTnyczE
diff --git a/dist/assets/index-575788e2.css b/dist/assets/index-575788e2.css
diff --git a/dist/assets/index-d7c8747b.js b/dist/assets/index-d7c8747b.js
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-a92a956e.js"></script>
-    <link rel="stylesheet" href="/assets/index-1317d9f6.css">
+    <script type="module" crossorigin src="/assets/index-d7c8747b.js"></script>
+    <link rel="stylesheet" href="/assets/index-575788e2.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
@@ -29,9 +29,10 @@ export function WorkContent() {
             className={WorkContentModule.WorksList}
         >
             {
-                Experiance.map(e => <WorkPlace
+                Experiance.map((e, i) => <WorkPlace
                     {...e}
                     key={e.name}
+                    last={i === Experiance.length - 1}
                 />)
             }
         </div>
diff --git a/src/components/content/work/WorkPlace.module.scss b/src/components/content/work/WorkPlace.module.scss
@@ -68,6 +68,7 @@
     }
 
     .colDates {
+        position: relative;
         width: 12%;
         min-width: 6.5rem;
         padding: var(--space-2) var(--space-5) var(--space-2) 0;
@@ -81,6 +82,17 @@
         font-weight: 600;
         font-size: var(--fs-small);
 
+        // connector that bridges the gap to the next card so the timeline is unbroken
+        &::after {
+            content: '';
+            position: absolute;
+            right: -3px;
+            top: 100%;
+            width: 3px;
+            height: calc(var(--space-6) * 3 + var(--space-5));
+            background: var(--job-accent);
+        }
+
         span {
             position: relative;
 
@@ -99,6 +111,10 @@
         }
     }
 
+    &[data-last="true"] .colDates::after {
+        display: none;
+    }
+
     .colResponsibilities {
         width: 58%;
         text-align: left;
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;
+    last?: boolean;
     logo: any,
     dateStart: Date,
     dateEnd: Date,
@@ -33,6 +34,7 @@ export function WorkPlace({
     dateEnd,
     site,
     color = 'red',
+    last = false,
     sphere,
     location,
     project,
@@ -46,6 +48,7 @@ export function WorkPlace({
         <div
             className={WorkPlaceModule.WorkPlace}
             style={{ ['--job-accent' as any]: accent }}
+            data-last={last}
         >
             <div
                 className={WorkPlaceModule.colDates}

Original file line number	Diff line number	Diff line change
`@@ -29,9 +29,10 @@ export function WorkContent() {`
`29`	`29`	`className={WorkContentModule.WorksList}`
`30`	`30`	`>`
`31`	`31`	`{`
`32`		`- Experiance.map(e => <WorkPlace`
	`32`	`+ Experiance.map((e, i) => <WorkPlace`
`33`	`33`	`{...e}`
`34`	`34`	`key={e.name}`
	`35`	`+ last={i === Experiance.length - 1}`
`35`	`36`	`/>)`
`36`	`37`	`}`
`37`	`38`	`</div>`