Education page finished, improvements to carousel, placeholder content from old website

src/components/CustomCarousel.astro

@@ -4,6 +4,9 @@ import {Image} from 'astro:assets';
 import type {carouselGroup} from "@interfaces/image-carousel.ts";
 
 const groupToShow: carouselGroup = Astro.props.carouselGroup;
+
+const limitByHeightClasses = "sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl";
+const limitByWidthClasses = "max-h-fit";
 ---
 
 <custom-carousel class="flex flex-col relative w-full"
@@ -11,13 +14,14 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
                  data-custom-carousel-interval={groupToShow.interval}>
 
     <!-- Carousel wrapper -->
-    <div class="relative overflow-hidden h-56 md:h-156">
+    <div class="relative overflow-hidden w-full h-56 md:h-156">
         {
             groupToShow.images.map((image, index) => (
-                    <div class="hidden duration-700 ease-in-out" data-custom-carousel-item>
+                    <div class="hidden duration-700 ease-in-out" data-custom-carousel-item={index}>
                         <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"
+                               class="absolute inset-0 m-auto h-full w-auto max-h-full max-w-full object-contain"
                                alt="..."
+                               layout='constrained'
                                loading="eager"/>
                     </div>
             ))
@@ -26,7 +30,7 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
 
     {(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">
+            <div class="absolute z-30 flex -translate-x-1/2 bottom-2 left-1/2 space-x-3 rounded-full">
                 {
                     groupToShow.images.map((_, index) => (
                             <button type="button"
@@ -106,7 +110,7 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
             this._options = this._getOptions();
             this._carousel = new Carousel(this, this._items, this._options);
 
-            if (this._slide) this._carousel.cycle();
+            if (this._slide && this._items.length > 0) this._carousel.cycle();
 
             this._attachHandlers()
 
@@ -126,7 +130,7 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
             let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
 
             return {
-                defaultPosition: 1,
+                defaultPosition: 0,
                 interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
 
                 indicators: {

src/components/Table.astro

@@ -0,0 +1,34 @@
+---
+import type {tableData} from "@interfaces/table.ts";
+
+const data: tableData = Astro.props.data;
+const columnPadding: number = data.columnPadding || 2;
+const rowPadding: number = data.columnPadding || 2;
+const paddingClasses: string = `px-${columnPadding} py-${rowPadding}`;
+---
+
+<div class="relative overflow-x-auto">
+    <table class="w-full text-sm text-left ">
+        <thead class="text-xs border-b-4 border-caperren-green uppercase bg-black">
+        <tr>
+            {data.header.map(headingText => (
+                    <th scope="col" class={paddingClasses}>
+                        {headingText}
+                    </th>
+            ))}
+        </tr>
+        </thead>
+        <tbody>
+        {data.rows.map(row => (
+                <tr class=" border-b dark:bg-black  border-caperren-green">
+                    {row.map(rowColumnText => (
+                            <th scope="row"
+                                class={paddingClasses + " font-medium  whitespace-nowrap"}>
+                                {rowColumnText}
+                            </th>
+                    ))}
+                </tr>
+        ))}
+        </tbody>
+    </table>
+</div>

src/data/site-layout.ts

@@ -2,6 +2,7 @@ import type {navLink} from "@interfaces/site-layout.ts"
 
 export const siteLayout: navLink[] = [
     {navText: "About", path: ""},
+    {navText: "Education", path: "education"},
     {
         navText: "Experiences",
         path: "experience",

src/interfaces/table.ts

@@ -0,0 +1,6 @@
+export interface tableData {
+    header: string[];
+    columnPadding?: number;
+    rowPadding?: number;
+    rows: Array<Array<any>>;
+}

src/pages/education.astro

@@ -0,0 +1,116 @@
+---
+import BaseLayout from "@layouts/BaseLayout.astro";
+import Carousel from "@components/CustomCarousel.astro";
+import Timeline from "@components/Timeline.astro";
+import Table from "@components/Table.astro";
+
+import type {carouselGroup} from "@interfaces/image-carousel.ts";
+import type {tableData} from "@interfaces/table.ts";
+
+import fhhs_diploma from "@assets/education/fhhs-diploma.jpg";
+import osu_bs_cs_diploma from "@assets/education/osu-bs-cs-diploma.jpg"
+import type {timelineEntry} from "@interfaces/timeline.ts";
+
+const diplomaCarouselGroup: carouselGroup = {
+    animation: "slide",
+    images: [
+        fhhs_diploma,
+        osu_bs_cs_diploma
+    ]
+}
+
+const timeline: timelineEntry[] = [
+    {
+        event: "High School Diploma",
+        eventDetail: "Friday Harbor High School",
+        date: "June 2011"
+    },
+    {
+        event: "B.S. Computer Science",
+        eventDetail: "Oregon State University",
+        date: "June 2019"
+    },
+];
+
+const courseTable: tableData = {
+    header: ["Program", "Course", "Description"],
+    rows: [
+        ["CS", "LDT", "INTRO TO LINUX"],
+        ["CS", "261", "DATA STRUCTURES"],
+        ["CS", "271", "COMPUTER ARCH & ASSEM LANGUAGE"],
+        ["CS", "290", "WEB DEVELOPMENT"],
+        ["CS", "312", "SYSTEM ADMINISTRATION"],
+        ["CS", "325", "ANALYSIS OF ALGORITHMS"],
+        ["CS", "331", "INTRO ARTIFICIAL INTELLIGENCE"],
+        ["CS", "340", "INTRODUCTION TO DATABASES"],
+        ["CS", "344", "OPERATING SYSTEMS I"],
+        ["CS", "352", "INTRO TO USABILITY ENGINEERING"],
+        ["CS", "361", "SOFTWARE ENGINEERING I"],
+        ["CS", "362", "SOFTWARE ENGINEERING II"],
+        ["CS", "370", "INTRODUCTION TO SECURITY"],
+        ["CS", "372", "INTRO TO COMPUTER NETWORKS"],
+        ["CS", "381", "PROGRAMMING LANGUAGE FUND"],
+        ["CS", "391", "SOC & ETHICAL ISSUES IN COMSC"],
+        ["CS", "444", "OPERATING SYSTEMS II"],
+        ["CS", "461", "SENIOR SOFTWARE ENGR PROJECT I"],
+        ["CS", "462", "SENIOR SOFTWARE ENGR PROJECT II"],
+        ["CS", "463", "SENIOR SOFTWARE ENGR PROJECT III"],
+        ["CS", "464", "OPEN SOURCE SOFTWARE"],
+        ["CS", "468", "INCLUSIVE DESIGN (HCI)"],
+        ["CS", "496", "MOBILE/CLOUD SOFTWARE DEVEL"],
+        ["ECE", "111", "INTRODUCTION TO ECE: TOOLS"],
+        ["ECE", "112", "INTRODUCTION TO ECE: CONCEPTS"],
+        ["ECE", "151", "PROGRAMMING I/EMBED CONTR LAB"],
+        ["ECE", "152", "PROGRAMMING II/EMBED CONTR LAB"],
+        ["ECE", "271", "DIGITAL LOGIC DESIGN"],
+        ["ECE", "272", "DIGITAL LOGIC DESIGN LAB"],
+        ["ECE", "375", "COMPUTER ORG & ASSEMBLY LANG"],
+        ["ENGR", "201", "ELECTRICAL FUNDAMENTALS I"],
+        ["ENGR", "202", "ELECTRICAL FUNDAMENTALS II"],
+        ["ENGR", "391", "ENGINEERING ECON & PROJ MGMT"],
+        ["ROB", "421", "APPLIED ROBOTICS"],
+        ["ROB", "456", "INTELLIGENT ROBOTS"],
+        ["MTH", "231", "ELEMENTS DISCRETE MATH"],
+        ["MTH", "241", "CALC FOR MGT & SOCIAL SCI"],
+        ["MTH", "251", "DIFFERENTIAL CALCULUS"],
+        ["MTH", "252", "INTEGRAL CALCULUS"],
+        ["MTH", "254", "VECTOR CALCULUS I"],
+        ["MTH", "306", "MATRIX & POWER SERIES METHODS"],
+        ["ST", "314", "INTRO TO STATS FOR ENGINEERS"],
+        ["PH", "211", "GENERAL PHYSICS WITH CALCULUS I"],
+        ["PH", "212", "GENERAL PHYSICS WITH CALCULUS II"],
+        ["PH", "213", "GENERAL PHYSICS WITH CALCULUS III"],
+        ["WR", "LDT", "COMPOSITION III"],
+        ["WR", "LDT", "CREATIVE WRITING"],
+        ["WR", "121", "ENGLISH COMPOSITION"],
+        ["WR", "214", "WRITING IN BUSINESS"],
+        ["WR", "327", "TECHNICAL WRITING"],
+        ["BI", "102", "GENERAL BIOLOGY"],
+        ["BI", "349", "BIODIVERSITY: CAUSES, CONSERV"],
+        ["CH", "201", "CHEMISTRY FOR ENGINEERING MAJ"],
+        ["CH", "211", "RECITATION FOR CHEMISTRY 201"],
+        ["COMM", "114", "ARGUMENT & CRITICAL DISCOURSE"],
+        ["GEO", "LDT", "SURVEY EARTH SCIENCE"],
+        ["HDFS", "240", "HUMAN SEXUALITY"],
+        ["HHS", "231", "LIFETIME FITNESS FOR HEALTH"],
+        ["HHS", "246", "LIFETIME FITNESS: WALKING"],
+        ["MUS", "LDT", "LA: MUSIC APPRECIATION"],
+        ["MUS", "108", "MUSIC CULTURES/ NAT AM FLUTE"],
+        ["PAC", "123", "BOWLING I"],
+        ["PHL", "205", "ETHICS"],
+        ["PS", "LDT", "AMERICAN GOVT"],
+        ["PSY", "201", "GENERAL PSYCHOLOGY"],
+        ["QS", "262", "INTRODUCTION TO QUEER STUDIES"]
+    ]
+};
+---
+<BaseLayout>
+    <Carousel carouselGroup={diplomaCarouselGroup}/>
+    <h2 class="font-bold md:text-2xl my-4 underline">Timeline</h2>
+    <Timeline timeline={timeline}/>
+    <h2 class="font-bold md:text-2xl my-4 underline">Oregon State University</h2>
+    <a class="font-bold md:text-lg my-4 text-blue-500 underline hover:text-blue-300"
+       href="https://github.com/caperren/school_archives/tree/master/OSU%20Coursework">Coursework Archives</a>
+    <h3 class="font-bold md:text-lg my-4 underline">Course Listing</h3>
+    <Table data={courseTable}/>
+</BaseLayout>

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

@@ -57,4 +57,11 @@ const timeline: timelineEntry[] = [
         </div>
     </div>
     <h2 class="font-bold md:text-2xl my-4">Details</h2>
+
+
+
+    Though I did get to work on some really fun projects during my internship at SpaceX, I unfortunately can’t go into much detail due to NDA’s and ITAR restrictions. What I can say is that I mainly wrote Python for a new avionics hardware test system. My experience with writing Python in the numerous other projects I’ve done really helped me out here, as the framework SpaceX has created was quite complex and would otherwise have been fairly difficult to write code for. I also wrote a simple tool for automating the creation of Jira work tickets so that the two teams that ended up using it wouldn’t have to have their members manually creating dozens of them as work and issues came in through a separate system.
+
+    I was also quite happy in that I got to perform some circuit debugging on avionics test system hardware, both for my project and for a separate test system. A final experience I had here was getting to work directly with the head engineer from a company that supplied a piece of test hardware I was interfacing with. It was quite incredible to see just how much weight a SpaceX email address had when trying to solve problems I had found with the hardware. Not only were they responsive, but in fact were willing to fast-track firmware updates for us to get things working. Coming from clubs and small labs where a support email might not even get a response for months, it was quite a refreshing experience.
+
 </ExperienceLayout>

src/pages/hobby/homelab/home-server-rack.astro

@@ -1,6 +1,22 @@
 ---
 import HobbyLayout from "@layouts/HobbyLayout.astro";
+
+import type {carouselGroup} from "@interfaces/image-carousel.ts";
+
+import starlink_headquarters_selfie
+    from "@assets/experience/spacex/hardware-test-engineer-i-ii/starlink_headquarters_selfie.jpg";
+import Carousel from "@components/CustomCarousel.astro";
+
+const headerCarouselGroup: carouselGroup = {
+    animation: "slide",
+    images: [
+        starlink_headquarters_selfie
+    ]
+}
 ---
 
 <HobbyLayout>
+    <Carousel carouselGroup={headerCarouselGroup}/>
+
+    <h2 class="font-bold md:text-2xl my-4">Prior Homelab</h2>
 </HobbyLayout>