Add more body sections

src/components/content/global/Navbar.astro

@@ -7,20 +7,34 @@ const links = [
     { text: 'Hobbies', link: '/#hobbies' },
     { text: 'Contact Me', link: '/#contact' },
 ]
+
+const buttonPaddingX = 'px-[.75rem]'
+const buttonPaddingY = 'py-[.5rem]'
+
+const spacing = 'space-x-[.25rem]'
 ---
 
 <div class="fixed z-navbar w-full backdrop-blur-sm">
     <div
-        class="max-h-navbar-h bg-background-light px-screen-x py-screen-y opacity-80"
+        class={`max-h-navbar-h bg-background-light ${buttonPaddingX} ${buttonPaddingY} opacity-80`}
     >
         <ul
             role="list"
-            class="flex w-full items-center space-x-screen-x whitespace-nowrap font-normal"
+            class={`flex w-full items-center whitespace-nowrap font-normal ${spacing}`}
         >
             <a href="/" rel="prefetch" class="mr-auto text-[1.25rem] font-bold"
                 >{homeText}</a
             >
-            {links.map((link) => <a href={link.link}>{link.text}</a>)}
+            {
+                links.map((link) => (
+                    <a
+                        href={link.link}
+                        class={`rounded hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none ${buttonPaddingX} ${buttonPaddingY}`}
+                    >
+                        {link.text}
+                    </a>
+                ))
+            }
         </ul>
     </div>
 </div>

src/components/content/index/Contact.astro

@@ -0,0 +1,6 @@
+---
+layout: './Section.astro'
+title: 'Contact Me'
+slug: 'contact'
+background: true
+---

src/components/content/index/Experience.mdx

@@ -0,0 +1,28 @@
+---
+layout: './Section.astro'
+title: 'Experience & Skills'
+slug: 'experience'
+background: true
+---
+
+import Subsection from './Subsection.astro'
+
+Although I am most familiar with JavaScript and C#, I have used several other programming languages [i.e. Java, Python, C++, Kotlin] and can quickly learn new ones.
+
+I have also used multiple web frameworks. I am most familiar with Express.js and React, but I have also used ASP.NET, Astro, and a bit of Django and Next.js. I plan to become more familiar with Django, Rails, and Laravel for backend along with Svelte and SolidJS for frontend.
+
+I am also familiar with Linux since I use Arch Linux on my laptop and work with Linux Debian VMs on my server. Along with that, I have worked with PostgreSQL and MS SQL in my projects and at work, and I have also touched Google Cloud and Azure, using them for my self-hosted cloud, a cybersecurity course, and for work-related tasks.
+
+Although I have learned most of these skills in my spare time, I have also used them in the professional world:
+
+<Subsection title="Scrumfish" subtitle="Nampa, ID">
+    Worked on backend and frontend for multiple projects using ASP.NET, MS SQL,
+    and React to create APIs, a login system with MFA, and functional frontend
+    components.
+</Subsection>
+
+<Subsection title="R-Technics" subtitle="Boise, ID">
+    Performed Windows server maintenance tasks and created a prototype in C# to
+    pull song data using the SongSelect API, which was later integrated into the
+    company's main product.
+</Subsection>

src/components/content/index/Hobbies.mdx

@@ -0,0 +1,8 @@
+---
+layout: './Section.astro'
+title: 'Hobbies'
+slug: 'hobbies'
+background: false
+---
+
+Besides programming and working with technology, I enjoy biking and playing Minecraft modpacks. Biking gives me a way to explore the outdoors while traveling to where I need to go, and it is also less costly and more environmentally sustainable than travelling via car.

src/components/content/index/Projects.mdx

@@ -9,21 +9,25 @@ 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:
+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)">
+<Subsection
+    title="GroceRead"
+    subtitle="HackAI, UTD 2023"
+    url="https://devpost.com/software/groceread"
+>
     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)">
+<Subsection title="zzzz" subtitle="Axxess Hackathon, UTD 2023">
-    Educational chatbot that teaches body part terminology and suggests others
+    Educational chatbot that teaches anatomical 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)">
+<Subsection title="Score Tracker" subtitle="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
@@ -31,4 +35,4 @@ I also have other projects viewable on multiple git platforms (Github, Forgejo),
     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).
+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].

src/components/content/index/Subsection.astro

@@ -1,30 +1,40 @@
 ---
 export interface Props {
     title: string
+    subtitle: string
     url: string | null
 }
 
-const { title, url } = Astro.props
+const { title, subtitle, url } = Astro.props
 
 const fontSize = 'text-[.9rem]'
 const fontSizeH3 = 'text-[1.4rem]'
+const fontSpacing = 'leading-[1.5rem]'
 
 const margin = 'm-[-1rem] p-[1rem]'
 const background = 'bg-[#00000020]'
-const backgroundHover = 'hover:bg-[#000000cc]'
-const textColorHover = 'hover:text-[#ffffff]'
 ---
 
 <a
     href={url}
+    target="_blank"
+    rel="noopener noreferrer"
     class={`block rounded ${
-        url && `${textColorHover} ${backgroundHover}`
+        url &&
+        `hover:bg-background-hover hover:text-font-hover focus-visible:bg-background-hover focus-visible:text-font-hover focus-visible:outline-none`
     } ${fontSize} ${margin} ${background}`}
 >
     <div class={`mx-auto max-w-page-w space-y-paragraph`}>
-        <h3 class={`font-bold ${fontSizeH3}`}>
+        <span class={`flex flex-col`}>
-            {title}
+            <h3 class={`font-bold ${fontSizeH3}`}>{title}</h3>
-        </h3>
+            {
+                subtitle && (
+                    <span class={`font-thin italic ${fontSpacing}`}>
+                        {subtitle}
+                    </span>
+                )
+            }
+        </span>
         <slot />
     </div>
 </a>

tailwind.config.cjs

@@ -14,8 +14,10 @@ module.exports = {
             background: '#dbf6db',
             'background-dark': '#bbd8bb',
             'background-light': '#ffffff',
+            'background-hover': '#000000cc',
             font: '#000000',
             'font-light': '#004f07',
+            'font-hover': '#ffffff',
             pattern: 'rgba(0,0,0,.02)',
         },
         fontFamily: {