added some blurbs and fixed it visually

src/components/SideBar.astro

@@ -24,6 +24,5 @@ import Hamburger from "../assets/hamburger.svg";
 
     <hr class="mb-10 border border-b-2 border-black rounded-sm" />
     <a href="/projects" class="">Projects</a>
-    <a href="/about" class="">About</a>
-    <a href="/resume" class="">Resume</a>
+    <a href="/public/resume.pdf" class="">Resume</a>
 </nav>

src/content/projects/enph253.md → src/content/projects/capstone.md

@@ -1,28 +1,23 @@
 ---
-title: Autonomous Racing Car
-blurb: Placed 3rd of 21 teams in a race for autonomous line following robots from scratch. 
+priority: 1
+title: Augmented Reality Development for Spinal Surgery
+blurb: Builing an augmented reality application to guide surgeons performing spinal injections. 
+skills: Unity, C#, Python (Django), Parallel Programming (Shaders)
 github: https://github.com/ChayceJRoss/ENPH353.git
 ---
 
-*   [Overview](#overview)
-    *   [Philosophy](#philosophy)
-    *   [Inline HTML](#html)
-    *   [Automatic Escaping for Special Characters](#autoescape)
-*   [Block Elements](#block-elements)
-    *   [Paragraphs and Line Breaks](#p)
-    *   [Headers](#header)
-    *   [Blockquotes](#blockquote)
-    *   [Lists](#list)
-    *   [Code Blocks](#precode)
-    *   [Horizontal Rules](#hr)
-*   [Span Elements](#span)
-    *   [Links](#link)
-    *   [Emphasis](#em)
-    *   [Code](#code)
-    *   [Images](#img)
-*   [Miscellaneous](#misc)
-    *   [Backslash Escapes](#backslash)
-    *   [Automatic Links](#autolink)
+- [Overview](#overview)
+  - [Philosophy](#philosophy)
+- [Block Elements](#block-elements)
+  - [Paragraphs and Line Breaks](#paragraphs-and-line-breaks)
+  - [Headers](#headers)
+  - [Blockquotes](#blockquotes)
+  - [Lists](#lists)
+  - [Code Blocks](#code-blocks)
+- [Span Elements](#span-elements)
+  - [Links](#links)
+  - [Emphasis](#emphasis)
+  - [Code](#code)
 
 
 **Note:** This document is itself written using Markdown; you

src/content/projects/enph353.md

@@ -1,6 +1,8 @@
 ---
+priority: 3
 title: Self Driving with Machine Learning
 blurb: Created a self driving robot (with ROS2) using computer vision and machine learning (in PyTorch).  
+skills: ROS (Robot Operating System), Python, OpenCV, TensorFlow
 ---
 
 This is a placeholder.

src/content/projects/farmjs.md

@@ -1,6 +1,8 @@
 ---
-title: Farm App
+title: FarmJS
+priority: 2
 blurb: Created a project and inventory management system for farms in Zimbabwe to manage their production flows for tobacco grading. 
+skills: NextJS, Docker, SQLite, Python (OpenCV), gRPC, Github Actions
 ---
 
-This is a placeholder.
+In 2024 I created a NextJS app to help inventory management for Zimbabwean farmers. This app allowed users to create Code 39 barcodes and scan them. Additionally, the app allowed farmers to keep track of their inputs, chemical uses and productivity statistics. 

src/pages/index.astro

@@ -1,7 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import { getCollection, getEntry } from "astro:content";
-
+import Headshot from "../assets/headshot.png";
+import { Image } from "astro:assets";
+import { data } from "alpinejs";
 const projects = await getCollection("projects");
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
@@ -10,8 +12,14 @@ const projects = await getCollection("projects");
 
 <Layout>
 	<div class="w-full md:w-[90%] h-full flex flex-col gap-16">
-		<section class="mt-4 md:mt-40 md:flex md:flex-row md:gap-4">
-			<img class="hidden md:block"src="https://placehold.co/300x400" alt="">
+		<section class="mt-4 md:mt-40 md:flex md:flex-row md:gap-8">
+			<Image
+				class="hidden md:block rounded-md"
+				quality={"max"}
+				src={Headshot}
+				height={400}
+				alt="Selfie of Chayce Ross on a ski trip."
+			/>
 			<div class="flex flex-col gap-4">
 				<h1 class="text-xl font-bold text-center">Hi! I'm Chayce</h1>
 				<p>
@@ -20,66 +28,33 @@ const projects = await getCollection("projects");
 				</p>
 			</div>
 		</section>
-
-		<section>
-			<h1 class="font-bold text-2xl text-center mb-2">Projects</h1>
-			<ul class="flex flex-col gap-2">
-				{
-					projects.map((project) => (
-						<li id={project.id}>
-							<a
-								href={`/projects/${project.id}`}
-								class="font-bold hover:underline hover:text-blue-800"
-							>
-								{project.data.title}
-							</a>
-							<p class="text-sm font-light">
-								{project.data.blurb}
-							</p>
-						</li>
-					))
-				}
-			</ul>
-		</section>
-		<section>
-			<h1 class="font-bold text-xl mb-1">Projects</h1>
-			<ul class="flex flex-col gap-2">
-				{
-					projects.map((project) => (
-						<li id={project.id}>
-							<a
-								href={`/projects/${project.id}`}
-								class="font-bold"
-							>
-								{project.data.title}
-							</a>
-							<p class="text-sm font-light">
-								{project.data.blurb}
-							</p>
-						</li>
-					))
-				}
-			</ul>
-		</section>
 		<section>
-			<h1 class="font-bold text-xl mb-1">Projects</h1>
+			<h1 class="font-bold text-2xl text-center">Projects</h1>
 			<ul class="flex flex-col gap-2">
 				{
-					projects.map((project) => (
-						<li id={project.id}>
-							<a
-								href={`/projects/${project.id}`}
-								class="font-bold"
-							>
-								{project.data.title}
-							</a>
-							<p class="text-sm font-light">
-								{project.data.blurb}
-							</p>
-						</li>
-					))
+					projects
+						.sort((a, b) => a.data.priority - b.data.priority)
+						.map((project) => (
+							<li id={project.id} class="p-2 rounded-md">
+								<a
+									href={`/projects/${project.id}`}
+									class="font-bold hover:underline text-blue-800"
+								>
+									{project.data.title}
+								</a>
+								{project.data.skills ? (
+									<p class="font-semibold text-sm">
+										{project.data.skills}
+									</p>
+								) : null}
+								<p class="text-sm font-light">
+									{project.data.blurb}
+								</p>
+							</li>
+						))
 				}
 			</ul>
 		</section>
+		<hr />
 	</div>
 </Layout>