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

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" >
-    <Image class="mx-auto block" src={starlink_headquarters_selfie} alt="starlink_headquarters_selfie" loading="eager"/>
-    <h2 >Timeline</h2>
-    <ul>
-        <li>Test</li>
+<ExperienceLayout title="SpaceX - Hardware Test Engineer I/II">
+    <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>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>