update

src/lib/footer/Footer.svelte

@@ -11,12 +11,12 @@
 		class="container flex flex-col-reverse lg:flex-row justify-between gap-10"
 	>
 		<div class="flex flex-col gap-3">
-			<h4 class="font-sm font-bold">Bart Industries</h4>
+			<h4 class="text-xl font-bold baron-light">Bart Industries</h4>
 			<hr />
-			<p class="text-xs">Copyright 2022 Mid</p>
+			<p class="text-xs">Copyright 2022 Mid // Midblep. All rights reserved.</p>
 		</div>
 
-		<div class="flex flex-col gap-5 lg:items-end">
+		<!-- <div class="flex flex-col gap-5 lg:items-end">
 			<Socials />
 			<div class="text-amber-500 flex gap-2 items-center font-bold">
 				<span class="text-xs">Theme:</span>
@@ -24,6 +24,6 @@
 					><ThemeSwitcher /></span
 				>
 			</div>
-		</div>
+		</div> -->
 	</section>
 </main>

src/lib/footer/Social.svelte

@@ -10,7 +10,7 @@
 <a
 	href={url}
 	{title}
-	class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-orange-100 hover:scale-110 duration-150"
+	class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-orange-100 dark:hover:bg-orange-700 hover:scale-110 duration-150"
 >
 	<div class="aspect-square flex flex-col items-center justify-center p-5">
 		<span class="text-5xl ">{icon}</span>

src/lib/header/Header.svelte

@@ -3,9 +3,12 @@
 </script>
 
 <main
-	class="bg-gradient-to-l from-orange-500 to-amber-500 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
+	class="bg-gradient-to-l h-16 fixed w-full from-orange-500 to-amber-500 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
 >
 	<section class="">
 		<Nav />
 	</section>
 </main>
+<div class="h-16">
+
+</div>

src/lib/header/Nav.svelte

@@ -15,8 +15,9 @@
 		</a>
 		<div class="hidden lg:flex h-16 baron-light">
 			<Button url="/" text="Home" />
+			<Button disabled="true" url="/portfolio" text="Portfolio" />
+			<Button disabled="true" url="/experience" text="Experience" />
 			<Button disabled="true" url="/esu" text="ESU" />
-			<Button disabled="true" url="/portfolio" text="works" />
 			<Button disabled="true" url="/furry" text="Furry" />
 		</div>
 	</div>
@@ -26,8 +27,9 @@
 	<div class="flex lg:hidden h-16">
 		<Dropdown text="🍔">
 			<Button url="/" text="Home" />
+			<Button disabled="true" url="/portfolio" text="Portfolio" />
+			<Button disabled="true" url="/experience" text="Experience" />
 			<Button disabled="true" url="/esu" text="ESU" />
-			<Button disabled="true" url="/portfolio" text="works" />
 			<Button disabled="true" url="/furry" text="Furry" />
 			<ThemeSwitcher />
 		</Dropdown>

src/lib/home/Card.svelte

@@ -17,9 +17,9 @@
 	}
 </script>
 
-<div class="flex flex-col gap-2 w-full relative py-8 px-8 lg:px-12 lg:py-10 group hover:scale-105 hover:-translate-y-5 duration-300">
+<div class="flex flex-col gap-2 w-full relative py-8 px-8 lg:px-12 lg:py-10 group hover:-translate-y-1 duration-300">
 	<div
-		class="{skew} {color} absolute inset-0 z-0 w-full shadow-lg rounded-xl flex flex-col justify-end group-hover:shadow-2xl duration-300"
+		class="{skew} {color} absolute inset-0 z-0 w-full shadow-lg rounded-xl flex flex-col justify-end group-hover:shadow-xl duration-300"
 	>
 		{#if buttonText != null && buttonHref != null}
 			<a

src/routes/__layout.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="bg-gray-100 dark:bg-gray-900 text-black dark:text-white">
-	<Construction />
+	<!-- <Construction /> -->
 
 	<div class="min-h-screen">
 		<Header />

src/routes/index.svelte

@@ -145,6 +145,50 @@
 						I developed this website in exchange for artistic goods.
 						It is hosted on Vercel and built on top of SvelteKit.
 						It features a fully mobile compatible design that catches your eye from the moment you visit the homepage.
+						Great detail went into making sure no part of the site is boring, such as giving buttons that extra pop and even making a little blurred leaf pattern for the background on pages that get very long.
+					</p>
+				</Card>
+
+				<Card
+					buttonHref="https://invesvpo.com"
+					buttonRedirect="_blank"
+					buttonText="🌐 Visit Website"
+				>
+					<h3
+						class="text-xl font-bold inline-flex items-center gap-3"
+					>
+						<img
+							src="/invesvpo.png"
+							class="h-10 -my-2"
+							alt="invesvpo"
+						/>
+						Invesvpo
+					</h3>
+					<p class="text-sm text-gray-800 dark:text-gray-100">
+						I made a website for a friend called Invesvpo, who wanted a place to show to people to redirect them to his social media, and also to tell them what kind of stuff he does.
+						It was created with the NextJS on React in 2021 by me entirely.
+					</p>
+				</Card>
+
+				<Card
+					buttonHref="https://trickthefox.com/"
+					buttonRedirect="_blank"
+					buttonText="🌐 Visit Website"
+				>
+					<h3
+						class="text-xl font-bold inline-flex items-center gap-3"
+					>
+						<img
+							src="/trick.png"
+							class="h-8 rounded-full"
+							alt="trick"
+						/>
+						Trick The Fox
+					</h3>
+					<p class="text-sm text-gray-800 dark:text-gray-100">
+						Trick The Fox was made with NextJS using React in 2021. It had several updates over time later on and features some nice secrets.
+						It connects to an Airtable database to store simple data such as gallery entries, which can then be managed by the client with Airtable's easy spreadsheet-like interface.
+						Hosted with Vercel, this package is completely free to run and maintain thanks to Airtable's free tier and its only cost are that of the domain.
 					</p>
 				</Card>
 
@@ -153,7 +197,7 @@
 					<h3
 						class="text-xl font-bold inline-flex items-center gap-3"
 					>
-						More here soon...
+						More soon...
 					</h3>
 					<p class="text-sm text-gray-800 dark:text-gray-100">
 						I am still working on this website, and adding my previous works to this as I go. I have done many more things than this though!