Started refactoring, added prettier and checks and reformatted project, added cspell and checks and custom project words, beginning of robotic oceanographic surface sampler content

src/components/Timeline/Timeline.astro

@@ -1,36 +1,39 @@
 ---
-import type {timelineEntry} from "@interfaces/timeline.ts";
+import type { timelineEntry } from "@interfaces/timeline.ts";
 
 const timeline: timelineEntry[] = Astro.props.timeline || [];
 ---
 
 <custom-timeline>
-    <div class="flex flex-col w-full">
-        <div class="z-10 grid gap-6 grid-flow-row max-w-full 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>
-        <div class="z-0 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
+  <div class="flex w-full flex-col">
+    <div
+      class="3xl:grid-cols-6 z-10 grid max-w-full grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+      data-timeline
+    >
+      {
+        timeline.map((entry, index) => (
+          <div
+            class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
+            data-timeline-node-index={index}
+          >
+            <h3 class="text-lg font-bold">{entry.event}</h3>
+            <h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
+            <time class="mt-1 mb-2 text-sm leading-none italic">
+              {entry.date}
+            </time>
+            {entry.description && (
+              <p class="text-sm font-normal">{entry.description}</p>
+            )}
+          </div>
+        ))
+      }
     </div>
+    <div
+      class="z-0 w-full max-w-full overflow-x-visible"
+      data-custom-timeline-line-wrapper
+    >
+    </div>
+  </div>
 </custom-timeline>
 
-<script src="./timeline.ts"/>
+<script src="./timeline.ts"></script>