From a8005943f5e3e3494f5d365cabf14f7110b39b95 Mon Sep 17 00:00:00 2001
From: sudoer777 <git@sudoer.ch>
Date: Fri, 2 Jun 2023 13:25:17 -0500
Subject: [PATCH] Add projects section

---
 src/components/content/global/Navbar.astro    | 10 ++++--
 src/components/content/index/About.mdx        |  2 +-
 src/components/content/index/Hero.astro       |  2 +-
 src/components/content/index/Projects.mdx     | 34 +++++++++++++++++++
 src/components/content/index/Section.astro    | 16 ++++-----
 src/components/content/index/Subsection.astro | 30 ++++++++++++++++
 src/layouts/Base.astro                        |  2 +-
 src/layouts/properties/Background.astro       |  4 ++-
 tailwind.config.cjs                           |  2 ++
 9 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 src/components/content/index/Subsection.astro

diff --git a/src/components/content/global/Navbar.astro b/src/components/content/global/Navbar.astro
index 0fb2577..49f3fff 100644
--- a/src/components/content/global/Navbar.astro
+++ b/src/components/content/global/Navbar.astro
@@ -13,9 +13,13 @@ const links = [
     <div
         class="max-h-navbar-h bg-background-light px-screen-x py-screen-y opacity-80"
     >
-        <ul role="list" class="flex w-full space-x-screen-x whitespace-nowrap">
-            <a href="/" rel="prefetch"><b>{homeText}</b></a>
-            <li class="w-full"></li>
+        <ul
+            role="list"
+            class="flex w-full items-center space-x-screen-x whitespace-nowrap font-normal"
+        >
+            <a href="/" rel="prefetch" class="mr-auto text-[1.25rem] font-bold"
+                >{homeText}</a
+            >
             {links.map((link) => <a href={link.link}>{link.text}</a>)}
         </ul>
     </div>
diff --git a/src/components/content/index/About.mdx b/src/components/content/index/About.mdx
index 60c7a1b..e967ac6 100644
--- a/src/components/content/index/About.mdx
+++ b/src/components/content/index/About.mdx
@@ -5,4 +5,4 @@ slug: 'about'
 background: true
 ---
 
-I am a incoming sophomore at the University of Texas at Dallas who loves programming and tech in general. Although web development and web hosting are my main interests, I enjoy branching out and exploring other ways to work with technology and create things.
+I am an incoming sophomore at the University of Texas at Dallas who loves programming and tech in general. Although web development and web hosting are my main interests, I enjoy branching out and exploring other ways to work with technology and create things.
diff --git a/src/components/content/index/Hero.astro b/src/components/content/index/Hero.astro
index 1509809..dfd1eb2 100644
--- a/src/components/content/index/Hero.astro
+++ b/src/components/content/index/Hero.astro
@@ -15,7 +15,7 @@ const imageAlt = 'black and white portrait of myself'
 ---
 
 <section class={`w-full ${viewHeight} ${padding}`}>
-    <div class={`mx-auto h-full flex items-center max-w-page-w`}>
+    <div class="mx-auto flex h-full max-w-page-w items-center">
         <h1 class={`font-medium ${textMainSize}`}>
             <i
                 ><b><u>{text[0]}</u></b><span class="text-font-light"
diff --git a/src/components/content/index/Projects.mdx b/src/components/content/index/Projects.mdx
index e69de29..7f7a99d 100644
--- a/src/components/content/index/Projects.mdx
+++ b/src/components/content/index/Projects.mdx
@@ -0,0 +1,34 @@
+---
+layout: './Section.astro'
+title: 'Projects'
+slug: 'projects'
+background: false
+---
+
+import Subsection from './Subsection.astro'
+
+My biggest personal project so far is building a server to self-host my cloud ecosystem. My server uses a Proxmox hypervisor along with Linux Debian VMs and Docker containers running services such as TrueNAS, Syncthing, Nextcloud, Plex, Forejo, Pterodactyl, and others. To get around carrier-grade NAT limitations, I host a VPN using Google Cloud and use nftables to route traffic so I can make services publicly accessible.
+
+I also have other projects viewable on multiple git platforms (Github, Forgejo), most of which came from hackathons, game jams, and school projects. Of these, the most interesting are:
+
+<Subsection title="GroceRead (HackAI UTD 2023)">
+    Android app intended to help visually-impaired people navigate grocery
+    stores by telling the user the product the phone camera is pointed at. Uses
+    Chooch API for object detection.
+</Subsection>
+
+<Subsection title="zzzz (Axxess UTD 2023)">
+    Educational chatbot that teaches body part terminology and suggests others
+    for the user to learn about. Wrote the API layer of the backend using
+    Django, and created most of the frontend using React.
+</Subsection>
+
+<Subsection title="Score Tracker (HS senior project)">
+    Web app that allows coaches of HS sports teams to submit game scores. Scores
+    would then be publicly viewable on the app's homepage and could be managed
+    through an admin interface. Created with Express.js, PostgreSQL, and vanilla
+    JavaScript for frontend. This was my first personal web project developed
+    from scratch.
+</Subsection>
+
+Some other projects and activities I have worked on include Med Check (MetroHacks 2022), zzz (UTD SGDA 2023 Spring Jam), zzz (UTD SGDA 2022 Thanksgiving Jam), ZipVersionControl (FLL #1790, yrs 2017-2019), FIRST Tech Challenge roboics (2021-2022), and FIRST Lego League robotics (2013-2019, #1790).
diff --git a/src/components/content/index/Section.astro b/src/components/content/index/Section.astro
index 2a12679..4c175c9 100644
--- a/src/components/content/index/Section.astro
+++ b/src/components/content/index/Section.astro
@@ -14,20 +14,20 @@ const fontSizeH2 = 'text-[1.5rem]'
 const paddingX = 'px-[1rem]'
 const paddingT = 'pt-[1.5rem]'
 const paddingB = 'pb-[2.5rem]'
-
-const spacing = 'pb-[.5rem]'
+const anchorDistance = 'mt-[-5rem] pt-[5rem]'
 ---
 
 <section
     class={`${paddingX} ${paddingT} ${paddingB} ${fontSize} ${
         frontmatter.background ? 'bg-background-dark' : ''
     }`}
-    id={frontmatter.slug}
 >
-    <div class={`mx-auto max-w-page-w`}>
-        <h2 class={`font-bold ${spacing} ${fontSizeH2}`}>
-            {frontmatter.title}
-        </h2>
-        <slot />
+    <div class={anchorDistance} id={frontmatter.slug}>
+        <div class={`mx-auto max-w-page-w space-y-paragraph`}>
+            <h2 class={`font-bold ${fontSizeH2}`}>
+                {frontmatter.title}
+            </h2>
+            <slot />
+        </div>
     </div>
 </section>
diff --git a/src/components/content/index/Subsection.astro b/src/components/content/index/Subsection.astro
new file mode 100644
index 0000000..1382869
--- /dev/null
+++ b/src/components/content/index/Subsection.astro
@@ -0,0 +1,30 @@
+---
+export interface Props {
+    title: string
+    url: string | null
+}
+
+const { title, url } = Astro.props
+
+const fontSize = 'text-[.9rem]'
+const fontSizeH3 = 'text-[1.4rem]'
+
+const margin = 'm-[-1rem] p-[1rem]'
+const background = 'bg-[#00000020]'
+const backgroundHover = 'hover:bg-[#000000cc]'
+const textColorHover = 'hover:text-[#ffffff]'
+---
+
+<a
+    href={url}
+    class={`block rounded ${
+        url && `${textColorHover} ${backgroundHover}`
+    } ${fontSize} ${margin} ${background}`}
+>
+    <div class={`mx-auto max-w-page-w space-y-paragraph`}>
+        <h3 class={`font-bold ${fontSizeH3}`}>
+            {title}
+        </h3>
+        <slot />
+    </div>
+</a>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 011c947..c2e7131 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -20,7 +20,7 @@ import '@fontsource-variable/jetbrains-mono'
     <Head title={title} description={description}>
         <SEO title={title} description={description} />
     </Head>
-    <body class="min-h-screen w-screen font-main text-font">
+    <body class="min-h-screen w-screen font-main font-light text-font">
         <Background>
             <Navbar />
             <main class="pt-navbar-h">
diff --git a/src/layouts/properties/Background.astro b/src/layouts/properties/Background.astro
index 3d727f8..f4d6521 100644
--- a/src/layouts/properties/Background.astro
+++ b/src/layouts/properties/Background.astro
@@ -3,7 +3,9 @@ const pattern = 'heropattern-circuitboard-pattern'
 ---
 
 <div class="bg-background">
-    <div class={`h-full min-h-screen w-full bg-contain bg-repeat ${pattern}`}>
+    <div
+        class={`h-full min-h-screen w-full bg-circuitboard bg-repeat ${pattern}`}
+    >
         <slot />
     </div>
 </div>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index db1c261..9499088 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -23,11 +23,13 @@ module.exports = {
         },
         backgroundSize: {
             contain: 'contain',
+            circuitboard: '40rem',
         },
         spacing: {
             'screen-x': '2rem',
             'screen-y': '1rem',
             'navbar-h': '4rem',
+            paragraph: '1rem',
         },
         maxWidth: {
             'page-w': '45rem',