Made a baseline working carousel, timeline, and started flushing out content for primary spacex experience

package-lock.json

@@ -8,21 +8,26 @@
       "name": "caperren-com",
       "version": "0.0.1",
       "dependencies": {
-        "@tailwindcss/vite": "^4.1.11",
         "astro": "^5.15.3",
         "flowbite": "^3.1.2",
+        "leader-line-new": "^1.1.9",
+        "luxon": "^3.7.2",
         "tailwindcss": "^4.1.11",
-        "vitest": "^4.0.7"
+        "uuid": "^13.0.0"
       },
       "devDependencies": {
         "@playwright/test": "^1.56.1",
-        "@types/node": "^24.10.0"
+        "@tailwindcss/vite": "^4.1.11",
+        "@types/luxon": "^3.7.1",
+        "@types/node": "^24.10.0",
+        "vitest": "^4.0.7"
       }
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1003,6 +1008,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
       "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "minipass": "^7.0.4"
@@ -1015,6 +1021,7 @@
       "version": "0.3.12",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
       "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1025,6 +1032,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1040,6 +1048,7 @@
       "version": "0.3.29",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
       "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1448,6 +1457,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
       "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@swc/helpers": {
@@ -1463,6 +1473,7 @@
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
       "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
@@ -1478,6 +1489,7 @@
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
       "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -1509,6 +1521,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1525,6 +1538,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1541,6 +1555,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1557,6 +1572,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1573,6 +1589,7 @@
       "cpu": [
         "arm"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1589,6 +1606,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1605,6 +1623,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1621,6 +1640,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1637,6 +1657,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1661,6 +1682,7 @@
       "cpu": [
         "wasm32"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -1682,6 +1704,7 @@
       "cpu": [
         "arm64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1698,6 +1721,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1711,6 +1735,7 @@
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.11.tgz",
       "integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/node": "4.1.11",
@@ -1725,6 +1750,7 @@
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
       "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/deep-eql": "*",
@@ -1744,6 +1770,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
       "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/estree": {
@@ -1770,6 +1797,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/luxon": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.7.1.tgz",
+      "integrity": "sha512-H3iskjFIAn5SlJU7OuxUmTEpebK6TKB8rxZShDslBMZJ5u9S//KM1sbdAisiSrqwLQncVjnpi2OK2J51h+4lsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -1825,6 +1859,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.7.tgz",
       "integrity": "sha512-jGRG6HghnJDjljdjYIoVzX17S6uCVCBRFnsgdLGJ6CaxfPh8kzUKe/2n533y4O/aeZ/sIr7q7GbuEbeGDsWv4Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
@@ -1842,6 +1877,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.7.tgz",
       "integrity": "sha512-OsDwLS7WnpuNslOV6bJkXVYVV/6RSc4eeVxV7h9wxQPNxnjRvTTrIikfwCbMyl8XJmW6oOccBj2Q07YwZtQcCw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/spy": "4.0.7",
@@ -1868,6 +1904,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.7.tgz",
       "integrity": "sha512-YY//yxqTmk29+/pK+Wi1UB4DUH3lSVgIm+M10rAJ74pOSMgT7rydMSc+vFuq9LjZLhFvVEXir8EcqMke3SVM6Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tinyrainbow": "^3.0.3"
@@ -1880,6 +1917,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.7.tgz",
       "integrity": "sha512-orU1lsu4PxLEcDWfjVCNGIedOSF/YtZ+XMrd1PZb90E68khWCNzD8y1dtxtgd0hyBIQk8XggteKN/38VQLvzuw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/utils": "4.0.7",
@@ -1893,6 +1931,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.7.tgz",
       "integrity": "sha512-xJL+Nkw0OjaUXXQf13B8iKK5pI9QVtN9uOtzNHYuG/o/B7fIEg0DQ+xOe0/RcqwDEI15rud1k7y5xznBKGUXAA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/pretty-format": "4.0.7",
@@ -1907,6 +1946,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.7.tgz",
       "integrity": "sha512-FW4X8hzIEn4z+HublB4hBF/FhCVaXfIHm8sUfvlznrcy1MQG7VooBgZPMtVCGZtHi0yl3KESaXTqsKh16d8cFg==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://opencollective.com/vitest"
@@ -1916,6 +1956,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.7.tgz",
       "integrity": "sha512-HNrg9CM/Z4ZWB6RuExhuC6FPmLipiShKVMnT9JlQvfhwR47JatWLChA6mtZqVHqypE6p/z6ofcjbyWpM7YLxPQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/pretty-format": "4.0.7",
@@ -2065,6 +2106,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
       "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2257,6 +2299,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.0.tgz",
       "integrity": "sha512-aUTnJc/JipRzJrNADXVvpVqi6CO0dn3nx4EVPxijri+fj3LUUDyZQOgVeW54Ob3Y1Xh9Iz8f+CgaCl8v0mn9bA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -2323,6 +2366,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
       "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=18"
@@ -2502,6 +2546,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
       "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==",
+      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -2578,6 +2623,7 @@
       "version": "5.18.2",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
       "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -2676,6 +2722,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.2.tgz",
       "integrity": "sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==",
+      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=12.0.0"
@@ -2824,6 +2871,7 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/h3": {
@@ -3177,6 +3225,7 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
       "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -3194,10 +3243,17 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/leader-line-new": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/leader-line-new/-/leader-line-new-1.1.9.tgz",
+      "integrity": "sha512-x56aRYaqJTA4aAS2fgbSpvWKY3IxRXDSFeGkNBmCQ3LX44B3F1HEjcBTkCiK5I3W0nPWeUTWe7dTt59VtdfFWw==",
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
       "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "devOptional": true,
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -3438,6 +3494,15 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
+    "node_modules/luxon": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.2.tgz",
+      "integrity": "sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.19",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
@@ -4275,6 +4340,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -4284,6 +4350,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
       "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "minipass": "^7.1.2"
@@ -4296,6 +4363,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
       "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "mkdirp": "dist/cjs/src/bin.js"
@@ -4512,6 +4580,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -5033,6 +5102,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/sisteransi": {
@@ -5076,12 +5146,14 @@
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/std-env": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
       "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width": {
@@ -5152,6 +5224,7 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
       "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5161,6 +5234,7 @@
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
       "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
@@ -5184,6 +5258,7 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
       "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/tinyexec": {
@@ -5215,6 +5290,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
       "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -5585,6 +5661,19 @@
         }
       }
     },
+    "node_modules/uuid": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -5724,6 +5813,7 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.7.tgz",
       "integrity": "sha512-xQroKAadK503CrmbzCISvQUjeuvEZzv6U0wlnlVFOi5i3gnzfH4onyQ29f3lzpe0FresAiTAd3aqK0Bi/jLI8w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vitest/expect": "4.0.7",
@@ -5801,6 +5891,7 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
       "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/web-namespaces": {
@@ -5826,6 +5917,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
       "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "siginfo": "^2.0.0",
@@ -5880,6 +5972,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
       "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
       "license": "BlueOak-1.0.0",
       "engines": {
         "node": ">=18"

package.json

@@ -11,13 +11,17 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.11",
     "astro": "^5.15.3",
     "flowbite": "^3.1.2",
-    "tailwindcss": "^4.1.11"
+    "leader-line-new": "^1.1.9",
+    "luxon": "^3.7.2",
+    "tailwindcss": "^4.1.11",
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/luxon": "^3.7.1",
     "@types/node": "^24.10.0",
     "vitest": "^4.0.7"
   }

src/components/Carousel.astro

@@ -1,8 +0,0 @@
----
-const { images } = Astro.props;
----
-<div class="carousel">
-    {images.map(img => (
-            <img src={img} alt="carousel item" style="width:100%; max-width:600px; margin: 1rem auto; display:block;" />
-    ))}
-</div>

src/components/CustomCarousel.astro

@@ -0,0 +1,173 @@
+---
+import {Image} from 'astro:assets';
+
+import type {carouselGroup} from "@interfaces/image-carousel.ts";
+
+const groupToShow: carouselGroup = Astro.props.carouselGroup;
+---
+
+<custom-carousel class="flex flex-col relative w-full"
+                 data-custom-carousel={groupToShow.animation}
+                 data-custom-carousel-interval={groupToShow.interval}>
+
+    <!-- Carousel wrapper -->
+    <div class="relative overflow-hidden h-56 md:h-156">
+        {
+            groupToShow.images.map((image, index) => (
+                    <div class="hidden duration-700 ease-in-out" data-custom-carousel-item>
+                        <Image src={image}
+                               class="relative sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
+                               alt="..."
+                               loading="eager"/>
+                    </div>
+            ))
+        }
+    </div>
+
+    {(groupToShow.images.length > 1) && (
+        <!-- Slider indicators -->
+            <div class="absolute z-30 flex -translate-x-1/2 bottom-8 md:bottom-2 left-1/2 space-x-3 rounded-full">
+                {
+                    groupToShow.images.map((_, index) => (
+                            <button type="button"
+                                    class="w-3 h-3 rounded-full bg-black hover:bg-caperren-green-light"
+                                    aria-current={index ? "false" : "true"}
+                                    aria-label={index.toString()}
+                                    data-custom-carousel-slide-to={index}></button>
+                    ))
+                }
+            </div>
+        <!-- Slider controls -->
+            <button
+                    type="button"
+                    class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
+                    data-custom-carousel-prev
+            >
+        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
+            <svg
+                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 6 10"
+            >
+                <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M5 1 1 5l4 4"
+                />
+            </svg>
+            <span class="hidden">Previous</span>
+        </span>
+            </button>
+            <button
+                    type="button"
+                    class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
+                    data-custom-carousel-next
+            >
+        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full ring-2 ring-caperren-green/25 bg-black/25 group-hover:bg-black/75">
+            <svg
+                    class="h-4 w-4 text-caperren-green group-hover:text-caperren-green-light "
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 6 10"
+            >
+                <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="m1 9 4-4-4-4"
+                />
+            </svg>
+            <span class="hidden">Next</span>
+        </span>
+            </button>
+    )}
+</custom-carousel>
+
+<script>
+    import {Carousel, type CarouselItem, type CarouselOptions, type IndicatorItem} from 'flowbite';
+
+    class CustomCarousel extends HTMLElement {
+        _slide: boolean;
+        _items: CarouselItem[];
+        _options: CarouselOptions;
+        _carousel: Carousel;
+
+        constructor() {
+            super();
+
+            this._slide = this.getAttribute('data-custom-carousel') === 'slide';
+            this._items = this._getItems();
+            this._options = this._getOptions();
+            this._carousel = new Carousel(this, this._items, this._options);
+
+            if (this._slide) this._carousel.cycle();
+
+            this._attachHandlers()
+
+        }
+
+        _getItems = (): CarouselItem[] => {
+            let customItems = this.querySelectorAll('[data-custom-carousel-item]') || [];
+
+            return Array.from(customItems).map(
+                (item, index): CarouselItem => {
+                    return {el: item as HTMLElement, position: index}
+                }
+            )
+        }
+
+        _getOptions = (): CarouselOptions => {
+            let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
+
+            return {
+                defaultPosition: 1,
+                interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
+
+                indicators: {
+                    activeClasses: 'border-2 border-caperren-green bg-black',
+                    inactiveClasses: 'bg-caperren-green/40 hover:bg-caperren-green-light',
+                    items: Array.from(customIndicators).map(
+                        (item, index): IndicatorItem => {
+                            return {
+                                el: item as HTMLElement,
+                                position: Number(item.getAttribute('data-custom-carousel-slide-to'))
+                            }
+                        }
+                    )
+                }
+            }
+        }
+
+        _attachHandlers = (): void => {
+            // Controls
+            const carouselNextEl = this.querySelector(
+                '[data-custom-carousel-next]'
+            );
+            const carouselPrevEl = this.querySelector(
+                '[data-custom-carousel-prev]'
+            );
+
+            if (carouselNextEl) {
+                carouselNextEl.addEventListener('click', () => {
+                    this._carousel.next();
+                });
+            }
+
+            if (carouselPrevEl) {
+                carouselPrevEl.addEventListener('click', () => {
+                    this._carousel.prev();
+                });
+            }
+        }
+
+
+    }
+
+    customElements.define('custom-carousel', CustomCarousel)
+</script>

src/components/Navbar.astro

@@ -20,7 +20,7 @@ import {siteLayout} from "@data/site-layout.ts";
                       d="M1 1h15M1 7h15M1 13h15"/>
             </svg>
         </button>
-        <div class="hidden w-full md:block md:w-auto" id="navbar-multi-level">
+        <div class="z-40 hidden w-full md:block md:w-auto" id="navbar-multi-level">
             <NestedNavbarEntry items={siteLayout}/>
         </div>
     </div>

src/components/NestedNavbarEntries.astro

@@ -21,7 +21,7 @@ const getHrefPath = (entry: navLink): string => {
                                     data-dropdown-toggle={"dropdownNavbar" + getNavLinkSuffix(entry)}
                                     data-dropdown-placement="bottom"
                                     class="flex items-center justify-between py-2 px-3 w-full hover:text-caperren-green-light md:hover:bg-transparent md:border-0 md:hover:text-caperren-green-light md:p-0 ">
-                                {entry.title}
+                                {entry.navText}
                                 <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                      fill="none" viewBox="0 0 10 6">
                                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
@@ -39,7 +39,7 @@ const getHrefPath = (entry: navLink): string => {
 
                             <a href={getHrefPath(entry)}
                                class="block py-2 px-3 bg-transparent hover:text-caperren-green-light ring-caperren-green-dark md:p-0"
-                               aria-current="page">{entry.title}</a>
+                               aria-current="page">{entry.navText}</a>
 
                     )}
                 </li>

src/components/Timeline.astro

@@ -0,0 +1,78 @@
+---
+import type {timelineEntry} from "@interfaces/timeline.ts";
+const timeline: timelineEntry[] = Astro.props.timeline || [];
+---
+
+<custom-timeline>
+
+    <div class="relative z-10 grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
+         data-timeline>
+        {timeline.map((entry, index) => (
+                <div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
+                     data-timeline-node-index={index}
+                >
+                    <h3 class="text-lg font-bold">
+                        {entry.event}
+                    </h3>
+                    <h4 class="font-semibold leading-none">
+                        {entry.eventDetail}
+                    </h4>
+                    <time class="mb-2 mt-1 text-sm italic leading-none">
+                        {entry.date}
+                    </time>
+                    {entry.description && (
+                            <p class="text-sm font-normal">
+                                {entry.description}
+                            </p>
+                    )}
+                </div>
+        ))}
+    </div>
+</custom-timeline>
+
+<script>
+    import LeaderLine from "leader-line-new";
+
+    class CustomTimeline extends HTMLElement {
+        _eventElements: Element[];
+
+        constructor() {
+            super();
+            this._eventElements = this._getNodeElements();
+            this._paintLeaderLines();
+
+        }
+
+        _getNodeElements = (): Element[] => {
+            return Array.from(
+                this.querySelectorAll('[data-timeline-node-index]')
+            ).sort(
+                (elementA, elementB) =>
+                    Number(elementA.getAttribute('data-timeline-node-index')) - Number(elementB.getAttribute('data-timeline-node-index'))
+            );
+        }
+
+        _paintLeaderLines = () => {
+            let pairs = this._eventElements.map((entry, index) => {
+                if (index < this._eventElements.length - 1) {
+                    return [entry, this._eventElements[index + 1]];
+                }
+            }).filter(pair => pair !== undefined)
+
+            pairs.forEach(pair => {
+                new LeaderLine({
+                    start: pair[0],
+                    end: pair[1],
+                    color: '#10ac25',
+                    size: 3,
+                    startSocket: "right",
+                    endSocket: "left",
+                    startPlug: "square",
+                    endPlug: "arrow3"
+                });
+            });
+        }
+    }
+
+    customElements.define('custom-timeline', CustomTimeline)
+</script>

src/data/site-layout.ts

@@ -1,87 +1,87 @@
 import type {navLink} from "@interfaces/site-layout.ts"
 
 export const siteLayout: navLink[] = [
-    {title: "About", path: ""},
+    {navText: "About", path: ""},
     {
-        title: "Experiences",
+        navText: "Experiences",
         path: "experience",
         children: [
             {
-                title: "SpaceX",
+                navText: "SpaceX",
                 path: "spacex",
                 children: [
                     {
-                        title: "Hardware Test Engineer I/II",
+                        navText: "Hardware Test Engineer I/II",
                         path: "hardware-test-engineer-i-ii"
                     },
                     {
-                        title: "Avionics Test Engineering Internship",
+                        navText: "Avionics Test Engineering Internship",
                         path: "avionics-test-engineering-internship"
                     }
                 ]
             },
             {
-                title: "OSU CEOAS",
+                navText: "OSU CEOAS",
                 path: "osu-ceoas-ocean-mixing-group",
                 children: [
                     {
-                        title: "Robotics Oceanographic Surface Sampler",
+                        navText: "Robotics Oceanographic Surface Sampler",
                         path: "robotic-oceanographic-surface-sampler",
                     },
                     {
-                        title: "LeConte Glacier Deployments",
+                        navText: "LeConte Glacier Deployments",
                         path: "leconte-glacier-deployments",
                     }
                 ]
             },
             {
-                title: "OSU SARL",
+                navText: "OSU SARL",
                 path: "osu-sinnhuber-aquatic-research-laboratory",
                 children: [
                     {
-                        title: "Team Lead",
+                        navText: "Team Lead",
                         path: "team-lead",
                     },
                     {
-                        title: "Zebrafish Embryo Pick and Plate",
+                        navText: "Zebrafish Embryo Pick and Plate",
                         path: "zebrafish-embryo-pick-and-plate",
                     },
                     {
-                        title: "Shuttlebox Behavior System",
+                        navText: "Shuttlebox Behavior System",
                         path: "shuttlebox-behavior-system",
                     },
                     {
-                        title: "Dechorionator",
+                        navText: "Dechorionator",
                         path: "dechorionator",
                     },
                     {
-                        title: "Denso Embryo Pick and Plate",
+                        navText: "Denso Embryo Pick and Plate",
                         path: "denso-embryo-pick-and-plate",
                     },
                     {
-                        title: "ZScan Processor",
+                        navText: "ZScan Processor",
                         path: "zscan-processor",
                     }
                 ]
             },
             {
-                title: "OSU Robotics Club",
+                navText: "OSU Robotics Club",
                 path: "osu-robotics-club",
                 children: [
                     {
-                        title: "Club Officer",
+                        navText: "Club Officer",
                         path: "club-officer",
                     },
                     {
-                        title: "Mars Rover Software Team Lead",
+                        navText: "Mars Rover Software Team Lead",
                         path: "mars-rover-software-team-lead",
                     },
                     {
-                        title: "Mars Rover Emergency Software Team Lead",
+                        navText: "Mars Rover Emergency Software Team Lead",
                         path: "mars-rover-emergency-software-team-lead",
                     },
                     {
-                        title: "Mars Rover Electrical Team Lead",
+                        navText: "Mars Rover Electrical Team Lead",
                         path: "mars-rover-electrical-team-lead",
                     }
                 ]
@@ -89,63 +89,85 @@ export const siteLayout: navLink[] = [
         ]
     },
     {
-        title: "Hobbies",
+        navText: "Hobbies",
         path: "hobby",
         children: [
 
             {
-                title: "Homelab", path: "homelab",
+                navText: "Homelab", path: "homelab",
                 children: [
-                    {title: "Home Server Rack", path: "home-server-rack"},
+                    {navText: "Home Server Rack", path: "home-server-rack"},
-                    {title: "Offsite Backup Rack", path: "offsite-backup-rack"},
+                    {navText: "Offsite Backup Rack", path: "offsite-backup-rack"},
-                    {title: "Kubernetes Cluster", path: "kubernetes-cluster"},
+                    // {title: "Kubernetes Cluster", path: "kubernetes-cluster"},
-                    {title: "Home Automation", path: "home-automation"},
+                    {navText: "Home Automation", path: "home-automation"},
                 ]
             },
             {
-                title: "Motorcycling",
+                navText: "Motorcycling",
                 path: "motorcycling",
                 children: [
-                    {title: "Lineup", path: "lineup"},
+                    {navText: "Lineup", path: "lineup"},
-                    {
+                    // {
-                      title: "Custom Accessories",
+                    //   title: "Custom Accessories",
-                      path: "custom-accessories",
+                    //   path: "custom-accessories",
-                      children: [
+                    //   children: [
-                          {title: "Chubby Buttons 2 Mount", path: "chubby-buttons-2-mount"},
+                    //       {title: "Chubby Buttons 2 Mount", path: "chubby-buttons-2-mount"},
-                      ]
+                    //   ]
-                    },
+                    // },
-                    {
+                    // {
-                        title: "Trips",
+                    //     title: "Trips",
-                        path: "trips",
+                    //     path: "trips",
-                        children: [
+                    //     children: [
-                            {title: "2025-08 | Alaska ", path: "2025-08-alaska"},
+                    //         {title: "2025-08 | Alaska ", path: "2025-08-alaska"},
-                            {title: "2024-10 | Norway ", path: "2024-10-norway"}
+                    //         {title: "2024-10 | Norway ", path: "2024-10-norway"}
-                        ]
+                    //     ]
-                    },
+                    // },
                 ]
             },
-            {
+            // {
-                title: "Homelab", path: "homelab",
+            //     title: "Projects", path: "projects",
-                children: [
+            //     children: [
-                    {title: "Home Server Rack", path: "home-server-rack"},
+            //         {title: "Shed Solar", path: "shed-solar"},
-                    {title: "Offsite Backup Rack", path: "offsite-backup-rack"},
+            //         {title: "OSSM Overkill Edition", path: "ossm-overkill-edition"},
-                    {title: "Kubernetes Cluster", path: "kubernetes-cluster"},
+            //     ]
-                    {title: "Home Automation", path: "home-automation"},
+            // },
-                ]
+            // {title: "NixOS", path: "nixos"},
-            },
+            // {title: "Body Mods", path: "body-mods"},
-            {title: "NixOS", path: "nixos"},
-            {title: "Body Mods", path: "body-mods"},
         ]
     },
     {
-        title: "Resumes",
+        navText: "Resumes",
         path: "resume",
         children: [
-            {title: "2025-11-10 | Complete CV", path: "2025-11-10-complete-cv"},
+            // {title: "2025-11-10 | Complete CV", path: "2025-11-10-complete-cv"},
-            {title: "2025-11-10 | Infrastructure Engineer", path: "2025-11-10-infrastructure-engineer"},
+            {navText: "2025-11-10 | Infrastructure Engineer", path: "2025-11-10-infrastructure-engineer"},
-            {title: "2019-07-01 | Hardware Test Engineer", path: "2019-07-01-hardware-test-engineer"},
+            {navText: "2019-07-01 | Hardware Test Engineer", path: "2019-07-01-hardware-test-engineer"},
         ]
     },
-    {title: "Github", pubpath: "https://github.com/caperren"},
+    {navText: "Github", pubpath: "https://github.com/caperren"},
-    {title: "LinkedIn", pubpath: "https://www.linkedin.com/in/caperren/"}
+    {navText: "LinkedIn", pubpath: "https://www.linkedin.com/in/caperren/"}
-]
+]
+
+export const pathToMetadata = (path: string): navLink => {
+    const paths = path.split("/").filter((entry) => entry);
+    let currentEntries: navLink[] = siteLayout;
+    let foundEntry: navLink | undefined;
+
+    for (const path of paths) {
+        for (const currentEntry of currentEntries) {
+            if (currentEntry.path === path) {
+                foundEntry = currentEntry;
+
+                if (foundEntry.children && foundEntry.children.length > 0) {
+                    currentEntries = foundEntry.children;
+                }
+            }
+        }
+    }
+
+    if (foundEntry === undefined) {
+        throw new Error(`${path} not found in site layout!`);
+    }
+
+    return foundEntry;
+}

src/env.d.ts

@@ -6,4 +6,11 @@ interface ImportMetaEnv {
 
 interface ImportMeta {
     readonly env: ImportMetaEnv;
-}
+}
+
+declare global {
+    interface Window {
+        LeaderLine: any;
+    }
+}
+export {};

src/interfaces/experience-metadata.ts

@@ -0,0 +1,13 @@
+import { DateTime } from 'luxon';
+
+export interface experience {
+
+
+}
+export interface subExperience {
+    name: string;
+    description: string;
+
+    startDate: DateTime;
+    endDate?: DateTime;
+}

src/interfaces/image-carousel.ts

@@ -0,0 +1,5 @@
+export interface carouselGroup {
+    animation: "static" | "slide";
+    interval?: number;
+    images: ImageMetadata[];
+}

src/interfaces/site-layout.ts

@@ -1,5 +1,5 @@
 export interface navLink {
-    title: string;
+    navText: string;
     path?: string;
     pubpath?: string;
     children?: navLink[];

src/interfaces/timeline.ts

@@ -0,0 +1,6 @@
+export interface timelineEntry {
+    event: string;
+    eventDetail?: string
+    date: string;
+    description?: string;
+}

src/layouts/BaseLayout.astro

@@ -1,7 +1,8 @@
 ---
-import '../styles/global.css'
+import '@styles/global.css'
-import Navbar from '../components/Navbar.astro';
+
-import Footer from '../components/Footer.astro';
+import Navbar from '@components/Navbar.astro';
+import Footer from '@components/Footer.astro';
 
 const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren` : "Corwin Perren";
 ---
@@ -12,14 +13,19 @@ const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren` : "
     <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>{pageTitle}</title>
+
+    <script is:inline type="module" src="/src/scripts/main.js"></script>
+
 </head>
 <body class="bg-black text-white">
 <Navbar/>
 <main class="mx-6 mt-6 mb-14">
+    {(Astro.props.title) && (
+            <h1 class="font-extrabold md:text-3xl md:mb-6">{Astro.props.title}</h1>
+    )}
     <slot/>
 </main>
 <Footer/>
 </body>
 </html>
 
-<script is:inline type="module" src="/src/scripts/main.js"></script>

src/layouts/ExperienceLayout.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from './BaseLayout.astro';
 ---
-<BaseLayout>
+<BaseLayout title={Astro.props.title}>
     <slot/>
 </BaseLayout>

src/pages/experience/spacex/avionics-test-engineering-internship.astro

@@ -1,11 +1,60 @@
 ---
 import ExperienceLayout from '@layouts/ExperienceLayout.astro';
-import {Image} from 'astro:assets';
+import Timeline from '@components/Timeline.astro';
+import Carousel from "@components/CustomCarousel.astro";
 
 import spring_2019_interns from "@assets/experience/spacex/avionics-test-engineering-internship/spring-2019-interns.jpg";
----
-<ExperienceLayout>
-    <Image class="mx-auto block" src={spring_2019_interns} alt="spring-2019-interns.jpg" loading="eager"/>
 
-    <span>Final text here</span>
+import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type {timelineEntry} from "@interfaces/timeline.ts";
+
+const headerCarouselGroup: carouselGroup = {
+    animation: "slide",
+    images: [
+        spring_2019_interns
+    ]
+}
+
+const timeline: timelineEntry[] = [
+    {
+        event: "Started",
+        date: "January 2019",
+    },
+    {
+        event: "Finished",
+        date: "March 2019",
+    }
+];
+---
+<ExperienceLayout title="SpaceX - Avionics Test Engineering Internship">
+    <!-- FIXME: Image bounds are all messed up -->
+    <Carousel carouselGroup={headerCarouselGroup}/>
+
+    <h2 class="font-bold md:text-2xl my-4">Summary</h2>
+    <h3 class="font-bold md:text-lg my-4">Timeline</h3>
+    <Timeline timeline={timeline}/>
+    <h3 class="font-bold md:text-lg my-4">Key Takeaways</h3>
+    <ul class="list-disc list-inside">
+        <li></li>
+    </ul>
+    <h3 class="font-bold md:text-lg my-4">Skills Used</h3>
+    <div class="relative grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  border-caperren-green">
+        <div>
+            <div class="font-extrabold text-sm">Software</div>
+            <hr class="text-caperren-green"/>
+            <ul class="list-disc list-inside text-sm">
+                <li>Python</li>
+                <li>Test Driven Development</li>
+            </ul>
+        </div>
+        <div>
+            <div class="font-extrabold text-sm">Electrical</div>
+            <hr class="text-caperren-green"/>
+        </div>
+        <div>
+            <div class="font-extrabold text-sm">Other</div>
+            <hr class="text-caperren-green"/>
+        </div>
+    </div>
+    <h2 class="font-bold md:text-2xl my-4">Details</h2>
 </ExperienceLayout>

src/pages/experience/spacex/hardware-test-engineer-i-ii.astro

@@ -1,13 +1,87 @@
 ---
 import ExperienceLayout from '@layouts/ExperienceLayout.astro';
-import {Image} from 'astro:assets';
+import Timeline from '@components/Timeline.astro';
+import Carousel from "@components/CustomCarousel.astro";
 
-import starlink_headquarters_selfie from "@assets/experience/spacex/hardware-test-engineer-i-ii/starlink_headquarters_selfie.jpg";
+import starlink_headquarters_selfie
+    from "@assets/experience/spacex/hardware-test-engineer-i-ii/starlink_headquarters_selfie.jpg";
+
+import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type {timelineEntry} from "@interfaces/timeline.ts";
+
+const headerCarouselGroup: carouselGroup = {
+    animation: "slide",
+    images: [
+        starlink_headquarters_selfie
+    ]
+}
+
+const timeline: timelineEntry[] = [
+    {
+        event: "Started",
+        eventDetail: "Satellite Hardware Test Team",
+        date: "September 2019",
+        description: "Owned test systems for four generations of Starlink flight computers and two generations of power boards"
+    },
+    {
+        event: "Transitioned To Remote",
+        eventDetail: "Moved To Oregon",
+        date: "August 2022",
+        description: "Personal decision, but I was allowed to work on tools for the build reliability engineering team"
+    },
+    {
+        event: "Changed Teams",
+        eventDetail: "Components Test Infra Team",
+        date: "March 2024 - VERIFY",
+        description: "Vertical move that allowed for broader application of my skills"
+    },
+    {
+        event: "Finished",
+        eventDetail: "Thanks for all the fish!",
+        date: "April 2025",
+        description: "Celebrated five and a half years of helping put thousands of satellites, and dozens of rockets, into orbit"
+    }
+];
 ---
-<ExperienceLayout title="SpaceX - Hardware Test Engineer II" >
+<ExperienceLayout title="SpaceX - Hardware Test Engineer I/II">
-    <Image class="mx-auto block" src={starlink_headquarters_selfie} alt="starlink_headquarters_selfie" loading="eager"/>
+    <Carousel carouselGroup={headerCarouselGroup}/>
-    <h2 >Timeline</h2>
+
-    <ul>
+    <h2 class="font-bold md:text-2xl my-4">Summary</h2>
-        <li>Test</li>
+    <h3 class="font-bold md:text-lg my-4">Timeline</h3>
+    <Timeline timeline={timeline}/>
+    <h3 class="font-bold md:text-lg my-4">Key Takeaways</h3>
+    <ul class="list-disc list-inside">
+        <li>Created test systems which validated ~4500 Starlink satellite flight computers, and ~4000 power boards</li>
+        <li>Developed program-critical infrastructure that enabled efficient triage, management, and tracking of hardware failures</li>
+        <li>Designed and deployed automated, unified, and containerized infrastructure to greatly increase application reliability and development speed  </li>
     </ul>
+    <h3 class="font-bold md:text-lg my-4">Skills Used</h3>
+    <div class="relative grid gap-6 grid-flow-row sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4  border-caperren-green">
+        <div>
+            <div class="font-extrabold text-sm">Software</div>
+            <hr class="text-caperren-green"/>
+            <ul class="list-disc list-inside text-sm">
+                <li>Python</li>
+                <li>Test Driven Development</li>
+            </ul>
+        </div>
+        <div>
+            <div class="font-extrabold text-sm">Electrical</div>
+            <hr class="text-caperren-green"/>
+        </div>
+        <div>
+            <div class="font-extrabold text-sm">Mechanical</div>
+            <hr class="text-caperren-green"/>
+        </div>
+        <div>
+            <div class="font-extrabold text-sm">Other</div>
+            <hr class="text-caperren-green"/>
+        </div>
+    </div>
+
+    <h2 class="font-bold md:text-2xl my-4">Details By Team</h2>
+    <h3 class="font-bold md:text-lg my-4">Starlink Hardware Test</h3>
+    <h3 class="font-bold md:text-lg my-4">Build Reliability Engineering</h3>
+    <h3 class="font-bold md:text-lg my-4">Components Test Infrastructure</h3>
+
 </ExperienceLayout>

src/pages/index.astro

@@ -1,9 +1,20 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-import {Image} from 'astro:assets';
+import Carousel from "@components/CustomCarousel.astro";
 
-import headshot from "../assets/headshot.png";
+import headshot from "@assets/headshot.png";
+import type {carouselGroup} from "@interfaces/image-carousel.ts";
+
+
+
+const headerCarouselGroup: carouselGroup = {
+    animation: "slide",
+    images: [
+        headshot,
+        headshot
+    ]
+}
 ---
 <BaseLayout>
-    <Image class="mx-auto block" src={headshot} alt="headshot" loading="eager"/>
+    <Carousel carouselGroup={headerCarouselGroup}/>
 </BaseLayout>

src/styles/global.css

@@ -11,3 +11,7 @@
     --color-caperren-green-light: #00ff2a;
     --color-caperren-green-dark: #06370e;
 }
+
+.leader-line {
+    z-index: 0;
+}

tsconfig.json

@@ -5,7 +5,8 @@
       "@components/*": ["./src/components/*"],
       "@data/*": ["./src/data/*"],
       "@interfaces/*": ["./src/interfaces/*"],
-      "@layouts/*": ["./src/layouts/*"]
+      "@layouts/*": ["./src/layouts/*"],
+      "@styles/*": ["./src/styles/*"]
 
     }
   },