diff --git a/.vscode/settings.json b/.vscode/settings.json
index cd8a672..600971e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-	"cSpell.words": ["iconify", "Obispo"]
+	"cSpell.words": ["iconify", "Mullvad", "Obispo", "Syncthing"]
 }
diff --git a/package.json b/package.json
index e890d7c..6cda40b 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"@leveluptuts/svelte-side-menu": "^1.0.5",
 		"@leveluptuts/svelte-toy": "^2.0.3",
 		"@playwright/test": "^1.28.1",
+		"@rgossiaux/svelte-headlessui": "^1.0.2",
 		"@sveltejs/adapter-auto": "^1.0.0",
 		"@sveltejs/adapter-vercel": "^1.0.5",
 		"@sveltejs/kit": "^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e693a38..3ad0fc1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,7 @@ specifiers:
   '@leveluptuts/svelte-side-menu': ^1.0.5
   '@leveluptuts/svelte-toy': ^2.0.3
   '@playwright/test': ^1.28.1
+  '@rgossiaux/svelte-headlessui': ^1.0.2
   '@sveltejs/adapter-auto': ^1.0.0
   '@sveltejs/adapter-vercel': ^1.0.5
   '@sveltejs/kit': ^1.0.0
@@ -43,6 +44,7 @@ devDependencies:
   '@leveluptuts/svelte-side-menu': 1.0.5
   '@leveluptuts/svelte-toy': 2.0.3
   '@playwright/test': 1.29.2
+  '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
   '@sveltejs/adapter-auto': 1.0.2_@sveltejs+kit@1.2.2
   '@sveltejs/adapter-vercel': 1.0.5_@sveltejs+kit@1.2.2
   '@sveltejs/kit': 1.2.2_svelte@3.55.1+vite@4.0.4
@@ -651,6 +653,14 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@rgossiaux/svelte-headlessui/1.0.2_svelte@3.55.1:
+    resolution: {integrity: sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==}
+    peerDependencies:
+      svelte: ^3.44.0
+    dependencies:
+      svelte: 3.55.1
+    dev: true
+
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index d3fae80..21336a3 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import SEO from "$root/lib/components/SEO.svelte";
+	import { Image } from 'svelte-lazy-loader';
 	import Graphql from '@iconify-icons/simple-icons/graphql';
 	import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
 	import Prisma from '@iconify-icons/simple-icons/prisma';
@@ -9,7 +9,7 @@
 	import Remix from '@iconify-icons/simple-icons/remix';
 	import Svelte from '@iconify-icons/simple-icons/svelte';
 	import TypeScript from '@iconify-icons/simple-icons/typescript';
-
+	import SEO from "$root/lib/components/SEO.svelte";
 	import adventure from '$lib/assets/images/adventure.png';
 	import orange_derp from '$lib/assets/images/orange_derp.jpg';
 	import tortie_derp from '$lib/assets/images/tortie_derp.jpg';
@@ -288,7 +288,7 @@
 				"
 			>
 				<figure>
-					<img src={adventure} alt="Road Trip Adventure" />
+					<Image src={adventure} alt="Road Trip Adventure" />
 					<p class="center">Route 66 Road Trip</p>
 				</figure>
 			</div>
@@ -297,11 +297,11 @@
 			<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
 			<div class="cat-pics">
 				<figure>
-					<img src={tortie_derp} alt="Turnip Cat" />
+					<Image src={tortie_derp} alt="Turnip Cat" />
 					<p class="center">Turnip</p>
 				</figure>
 				<figure>
-					<img src={orange_derp} alt="Taco Cat" />
+					<Image src={orange_derp} alt="Taco Cat" />
 					<p class="center">Taco 🌮</p>
 				</figure>
 			</div>
diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index 8acaa50..5bdd87a 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -1,5 +1,345 @@
 <script lang="ts">
+  import {
+    Tab,
+    TabGroup,
+    TabList,
+    TabPanel,
+    TabPanels,
+  } from "@rgossiaux/svelte-headlessui";
+	import { Image } from "svelte-lazy-loader";
 	import SEO from "$root/lib/components/SEO.svelte";
+	import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png';
+	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png";
+  import weddingWebsite from "$lib/assets/images/Wedding_Website.png";
+  import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png";
 </script>
 
 <SEO title="Portfolio" />
+
+<h1>Portfolio!</h1>
+<div class="portfolioTabStyles">
+	<TabGroup>
+		<TabList
+			aria-label="tabs portfolios"
+			style="
+				display: grid;
+				gap: 1rem;
+				grid-template-columns: auto auto;
+				place-content: start;
+				place-items: center;
+				margin-bottom: 1.5rem;
+			"
+		>
+			<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
+				<h2>Personal Sites</h2>
+			</Tab>
+			<Tab value="professional-sites" class={({selected}) => selected ? "tab-selected  portfolio-tab" : "tab-unselected  portfolio-tab"}>
+				<h2>Professional Sites</h2>
+			</Tab>
+		</TabList>
+		<TabPanels>
+			<TabPanel>
+				<div class="portfolioStyles">
+					<div class="gridItemStyles">
+						<div>
+							<h2>Personal Website</h2>
+							<Image
+								src={personalSite}
+								alt="Home Page bradleyshellnut.com"
+							/>
+						</div>
+						<div>
+							<p>
+								My personal website written using the following
+								technologies.
+							</p>
+							<p>Tech Stack:</p>
+							<ul>
+								<li>React 18</li>
+								<li>Gatsby 5</li>
+								<li>
+									<a
+										target="_blank"
+										href="https://radix-ui.com"
+										title="Radix UI"
+										rel="noreferrer"
+									>
+										Radix UI
+									</a>
+								</li>
+								<li>Styled Components</li>
+								<li>GraphQL</li>
+								<li>Deployed using Netlify</li>
+								<li>
+									Most icons from{' '}
+									<a
+										target="_blank"
+										href="https://github.com/react-icons/react-icons"
+										title="react icons"
+										rel="noreferrer"
+									>
+										react-icons
+									</a>
+								</li>
+								<li>
+									Bee, Shell, Nut, and Adventure Icons made by{' '}
+									<a
+										target="_blank"
+										href="https://www.flaticon.com/authors/freepik"
+										title="Freepik"
+										rel="noreferrer"
+									>
+										"Freepik"
+									</a>{' '}
+									from{' '}
+									<a
+										target="_blank"
+										href="https://www.flaticon.com/"
+										title="Flaticon"
+										rel="noreferrer"
+									>
+										flaticon.com
+									</a>
+								</li>
+							</ul>
+							<p>
+								Current version was improved after the suggestions on{' '}
+								<a
+									href="https://syntax.fm/show/444/syntax-highlight#t=33:19"
+									target="_blank"
+									aria-label="Syntax.fm Podcast Number 444"
+									rel="noreferrer"
+								>
+									Show 444
+								</a>{' '}
+								of the{' '}
+								<a
+									href="https://syntax.fm/show/444/syntax-highlight#t=33:19"
+									target="_blank"
+									aria-label="Syntax.fm Podcast"
+									rel="noreferrer"
+								>
+									Syntax Podcast
+								</a>
+								.
+							</p>
+							<p>
+								Previous archived version of my{' '}
+								<a
+									href="https://web.archive.org/web/20210224002046/https://bradleyshellnut.com/"
+									target="_blank"
+									aria-label="Archive before Syntax Podcast"
+									rel="noreferrer"
+								>
+									personal website
+								</a>
+								.
+							</p>
+						</div>
+					</div>
+					<div class="gridItemStyles">
+						<div>
+							<h2>Wedding Website</h2>
+							<Image src={weddingWebsite} alt="Wedding Website" />
+							<p>
+								<a
+									href="https://weddingsite-six.vercel.app/"
+									target="_blank"
+									aria-label="Wedding Website"
+									rel="noreferrer"
+								>
+									View Site
+								</a>{' '}
+								<a
+									href="https://weddingsite-six.vercel.app/"
+									target="_blank"
+									aria-label="Wedding Website"
+									rel="noreferrer"
+								>
+									<!-- <RiExternalLinkLine /> -->
+								</a>
+							</p>
+							<p>
+								<a
+									href="https://github.com/BradNut/weddingsite"
+									target="_blank"
+									aria-label="Github Repo for the wedding site"
+									rel="noreferrer"
+								>
+									Github Repo
+								</a>{' '}
+								<a
+									href="https://github.com/BradNut/weddingsite"
+									target="_blank"
+									aria-label="Github Repo for the wedding site"
+									rel="noreferrer"
+								>
+									<!-- <FaGithub /> -->
+								</a>
+							</p>
+						</div>
+						<div>
+							<p>
+								An application that allows viewing of wedding details and
+								provides the ability to RSVP to the wedding.
+							</p>
+							<p>
+								The app was initially created for my wedding but what is
+								linked here is a public demo of the application.
+							</p>
+							<p>Tech stack:</p>
+							<ul>
+								<li>Next.js 13</li>
+								<li>React 18</li>
+								<li>
+									<a
+										target="_blank"
+										href="https://radix-ui.com"
+										title="Radix UI"
+										rel="noreferrer"
+									>
+										Radix UI
+									</a>
+								</li>
+								<li>MongoDB</li>
+								<li>Styled Components</li>
+								<li>Next Iron Session</li>
+							</ul>
+						</div>
+					</div>
+					<div class="gridItemStyles">
+						<div>
+							<h2>Old Personal Website</h2>
+							<Image
+								src={oldSite}
+								alt="Home Page of old bradleyshellnut.com"
+							/>
+							<p>
+								<a
+									href="https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about"
+									target="_blank"
+									aria-label="Archive of bradleyshellnut.com"
+									rel="noreferrer"
+								>
+									Link to an archive snapshot
+								</a>
+							</p>
+						</div>
+						<div>
+							<p>
+								This was my first real personal website hosted on
+								DigitalOcean. It was built using the following:
+							</p>
+							<ul>
+								<li>React</li>
+								<li>Redux for any state management</li>
+								<li>ReactStrap for CSS grid management</li>
+								<li>React Router for routing links in the page</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</TabPanel>
+			<TabPanel>
+				<div class="gridItemStyles">
+					<div>
+						<h2>Mark Shellnut Architect </h2>
+						<Image
+							src={shellnutArchitectWebsite}
+							alt="Mark Shellnut Architect"
+						/>
+						<p>
+							<a
+								href="https://markshellnutarchitect.com/"
+								target="_blank"
+								aria-label="Mark Shellnut Architect"
+								rel="noreferrer"
+							>
+								View Site
+							</a>{' '}
+							<a
+								href="https://markshellnutarchitect.com/"
+								target="_blank"
+								aria-label="Mark Shellnut Architect"
+								rel="noreferrer"
+							>
+								<!-- <RiExternalLinkLine /> -->
+							</a>
+						</p>
+					</div>
+					<div>
+						<p>Company website for Mark Shellnut Architect.</p>
+						<p>Tech stack:</p>
+						<ul>
+							<li>React 18</li>
+							<li>Gatsby 5</li>
+							<li>
+								<a
+									target="_blank"
+									href="https://radix-ui.com"
+									title="Radix UI"
+									rel="noreferrer"
+								>
+									Radix UI
+								</a>
+							</li>
+							<li>Styled Components</li>
+							<li>GraphQL</li>
+							<li>Lambda Functions</li>
+						</ul>
+					</div>
+				</div>
+			</TabPanel>
+		</TabPanels>
+	</TabGroup>
+</div>
+
+<style lang="postcss">
+	:global(.portfolioStyles) {
+		margin-top: 1rem;
+		display: grid;
+		grid-template-columns: repeat(auto, minmax(300px, 400px));
+		gap: 3rem;
+		margin: 0.5rem auto;
+
+		@media (max-width: 580px) {
+			grid-template-columns: repeat(1, minmax(150px, 400px));
+			grid-gap: 1.2rem;
+			margin: 0.2rem 0;
+		}
+	}
+
+	:global(.gridItemStyles) {
+		display: grid;
+		grid-template-columns: 0.5fr 0.5fr;
+		width: 100%;
+		gap: 2rem;
+		margin: 0 auto;
+
+		@media (max-width: 580px) {
+			grid-template-columns: 1fr;
+		}
+
+		img {
+			border-radius: 3px;
+			max-width: 800px;
+		}
+
+		p {
+			margin: 1rem 0;
+			padding: 0;
+		}
+	}
+
+	:global(.tab-unselected) {
+		h2 {
+			border-bottom: 2px solid var(--white);
+		}
+	}
+	
+	:global(.tab-selected) {
+		h2 {
+			border-bottom: 2px solid var(--shellYellow);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte
index 7c33f3a..48201e6 100644
--- a/src/routes/privacy/+page.svelte
+++ b/src/routes/privacy/+page.svelte
@@ -2,4 +2,219 @@
 	import SEO from "$root/lib/components/SEO.svelte";
 </script>
 
-<SEO title="Privacy Blog" />
\ No newline at end of file
+<SEO title="Privacy Blog" />
+
+<div>
+	<div>
+		<h1>Privacy</h1>
+		<p>
+			Long story short, I believe everyone should know who has your personal
+			data, how it is being collected/stored, and what it is being used for.
+		</p>
+		<p>
+			However, it is ultimately up to each person to determine how much data
+			they are willing to give to any business/entity.
+		</p>
+		<p>
+			For the sake of transparency I am using{' '}
+			<a
+				target="_blank"
+				aria-label="Umami Analytics FAQ"
+				href="https://umami.is/docs/faq"
+				rel="noreferrer"
+			>
+				Umami Analytics
+			</a>{' '}
+			to anonymously track visits to my site. You can completely block this
+			if you want by either using an AdBlocker like{' '}
+			<a
+				target="_blank"
+				aria-label="uBlock Origin"
+				href="https://ublockorigin.com/"
+				rel="noreferrer"
+			>
+				uBlock Origin
+			</a>{' '}
+			and/or set your browser to send "Do Not Track" requests as I honor
+			them.
+		</p>
+	</div>
+	<div style="margin-top: 2.5rem;">
+		<h2>Useful Resources</h2>
+		<p>
+			Here are a few sites/lists of privacy oriented software for you to
+			check out:
+		</p>
+		<ul>
+			<li>
+				<a
+					target="_blank"
+					aria-label="Privacy Respecting Software"
+					href="https://github.com/Lissy93/personal-security-checklist/blob/master/5_Privacy_Respecting_Software.md"
+					rel="noreferrer"
+				>
+					Privacy Respecting Software
+				</a>
+			</li>
+			<li>
+				<a
+					target="_blank"
+					aria-label="Privacy Guides"
+					href="https://www.privacyguides.org/"
+					rel="noreferrer"
+				>
+					Privacy Guides
+				</a>
+			</li>
+			<li>
+				<a
+					target="_blank"
+					aria-label="Ethical Alternatives"
+					href="https://ethical.net/resources/"
+					rel="noreferrer"
+				>
+					Ethical Alternatives
+				</a>
+			</li>
+		</ul>
+	</div>
+	<div>
+		<h3>Privacy Centric Paid Services I use:</h3>
+		<ul>
+			<li>
+				Article Saving:{' '}
+				<a
+					target="_blank"
+					aria-label="Wallabag Article Saver"
+					href="https://github.com/wallabag/wallabag"
+					rel="noreferrer"
+				>
+					Wallabag
+				</a>
+			</li>
+			<li>
+				Anonymous Email Forwarding:{' '}
+				<a
+					target="_blank"
+					aria-label="AnonAddy Email Forwarding"
+					href="https://anonaddy.com/"
+					rel="noreferrer"
+				>
+					AnonAddy
+				</a>
+			</li>
+			<li>
+				Email:{' '}
+				<a
+					target="_blank"
+					aria-label="ProtonMail"
+					href="https://protonmail.com"
+					rel="noreferrer"
+				>
+					ProtonMail
+				</a>
+			</li>
+			<li>
+				Notes:{' '}
+				<a
+					target="_blank"
+					aria-label="Standard Notes"
+					href="https://standardnotes.org/"
+					rel="noreferrer"
+				>
+					Standard Notes
+				</a>
+			</li>
+			<li>
+				VPN:{' '}
+				<a
+					target="_blank"
+					aria-label="Mullvad VPN"
+					href="https://mullvad.net/en/"
+					rel="noreferrer"
+				>
+					Mullvad VPN
+				</a>
+			</li>
+		</ul>
+	</div>
+	<div>
+		<h3>NAS Servers for Self Hosting:</h3>
+		<ul>
+			<li>
+				<a
+					target="_blank"
+					aria-label="Synology NAS"
+					href="https://synology.com/"
+					rel="noreferrer"
+				>
+					Synology
+				</a>
+				: An easy, not cheap, local solution for Google Services like Drive,
+				Drive, Photos, Calendar, other services using Docker, etc. (Yes I
+				should use{' '}
+				<a
+					target="_blank"
+					aria-label="NextCloud Local Hosting Service"
+					href="https://nextcloud.com/"
+					rel="noreferrer"
+				>
+					NextCloud
+				</a>
+				...maybe eventually)
+			</li>
+			<li>
+				Mac Mini: Used as a{' '}
+				<a
+					target="_blank"
+					aria-label="Plex"
+					href="https://www.plex.tv/"
+					rel="noreferrer"
+				>
+					Plex Server
+				</a>{' '}
+				for my Movies/TV/Music until I build a dedicated NAS and maybe
+				switch to{' '}
+				<a
+					target="_blank"
+					aria-label="JellyFin"
+					href="https://jellyfin.org/"
+					rel="noreferrer"
+				>
+					JellyFin
+				</a>{' '}
+				once it is more mature.
+			</li>
+		</ul>
+	</div>
+	<div>
+		<h3>Software Deployed:</h3>
+		<ul>
+			<li>
+				<a
+					target="_blank"
+					aria-label="Traefik Cloud Proxy"
+					href="https://github.com/traefik/traefik"
+					rel="noreferrer"
+				>
+					Traefik
+				</a>
+				: A HTTP reverse proxy and load balancer.
+			</li>
+			<li>
+				<a
+					target="_blank"
+					aria-label="Syncthing File Synchronization"
+					href="https://github.com/syncthing/syncthing"
+					rel="noreferrer"
+				>
+					Syncthing
+				</a>
+				: An open source file synchronization program.
+			</li>
+		</ul>
+	</div>
+</div>
+
+<style lang="postcss">
+</style>
\ No newline at end of file