Update

src/lib/home/Sona.svelte

@@ -91,6 +91,43 @@
 					/>
 				</div>
 			</div>
+
+			<div
+				class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
+			>
+				<span id="about-coding" class="absolute top-0 -mt-40" />
+
+				<h4 class="text-lg font-bold">🖥️ Coding</h4>
+
+				<p>
+					I have an inherent distate to the endless tools, buildsteps and abstraction layers of the
+					modern world. Especially prelevant in fields like front-end webdevelopment. My philosophy
+					on the matter can not be explained better than by Emma Essex, creator of Halley Labs, who
+					wrote the following on their website:
+				</p>
+
+				<div class="bg-gray-200 p-5 flex gap-5">
+					<p class="text-6xl font-extrabold">"</p>
+					<blockquote cite="https://msx.horse/about.php">
+						as time has gone on, i have become fairly exhausted with the unnecesary bloat in all
+						things. my desire to better optimize, to work with fewer layers of abstraction, and so
+						on, continue to lead me back to a strong desire for utilitarian design. there is a
+						common misconception that stripping things to their roots robs them of personality, or
+						soul. this is naturally catastrophically untrue. it's just that when you get to that
+						point, the soul in all things is so bare that you have no choice but to really try to
+						understand it and interface with it. everything that goes on top is very cute and fun,
+						but attire is primarily cultural shorthand. as a people, we are better than needing
+						shorthand to understand or appreciate the soul in things. i encourage everybody to
+						search for the inherent soul in all things.
+					</blockquote>
+				</div>
+
+				<p>
+					I love working with a limited set of tools and create my own way of doing things. Per
+					example, working around the limitations of chat-based bots on Discord to build out my own
+					UI and functionalities. Unusual but robus solutions motivate me to continue.
+				</p>
+			</div>
 		</div>
 
 		<div class="lg:col-span-2 flex flex-col gap-5 overflow-x-hidden pt-10">
@@ -125,7 +162,11 @@
 					>&lt;nationality&gt; <bold class="font-bold lg:text-base">dutch 🇳🇱</bold> &lt;/nationality&gt;</span
 				>
 				<span class="h-5" />
-				<span>&lt;hobby&gt; <bold class="font-bold lg:text-base">coding</bold> &lt;/hobby&gt;</span>
+				<a href="#about-coding" class="group"
+					>&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]"
+						>coding</bold
+					> &lt;/hobby&gt;</a
+				>
 				<span>&lt;hobby&gt; <bold class="font-bold lg:text-base">gaming</bold> &lt;/hobby&gt;</span>
 				<a href="#about-furry" class="group"
 					>&lt;hobby&gt; <bold class="font-bold lg:text-base group-hover:underline text-[#2563EB]"

src/lib/home/Virtual.svelte

@@ -1,121 +1,213 @@
-<main class="@container flex flex-col gap-20 relative">
+<main class="@container flex flex-col relative">
-	<div class="absolute top-0 -mt-40" id="vr"></div>
+	<div class="absolute top-0 -mt-40" id="vr" />
-
-	<section class="w-full h-full flex flex-col justify-between gap-10 @lg:gap-20">
-		<h2 class="lg:hidden block baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600">Virtual Reality</h2>
-		<div class="flex-col hidden lg:flex baron text-2xl lg:text-4xl 2xl:text-5xl text-left text-blue-600 lg:-ml-80 xl:-ml-40 2xl:-ml-10">
-			<div class="flex gap-5 items-end">
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="flex-none text-4xl lg:text-5xl 2xl:text-6xl">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-				<h2 class="opacity-20 flex-none">Discover</h2>
-			</div>
-			<div class="flex gap-5 items-end">
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="flex-none text-4xl lg:text-5xl 2xl:text-6xl">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-				<h2 class="opacity-20 flex-none">Virtual Creativity</h2>
-			</div>
-		</div>
-
-		<article class="grid container grid-cols-1 @6xl:grid-cols-4 gap-5 relative">
-			<h2 class="rotate-[177deg] 2xl:block absolute hidden top-0 left-0 -ml-20 baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600" style="writing-mode: vertical-rl;">Virtual Reality</h2>
 
-			<img src="/homepage/vr/vr.png" class="skew-x-3 lg:ml-3 object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2" alt="couch" />
+	<div class="text-center text-xl font-bold flex flex-col text-[#2563EB] fira @2xl:-mt-60">
+		<div class="opacity-10 flex w-screen justify-between">
+			<span>//</span>
+			<span>//</span>
+		</div>
+		<div class="opacity-20 flex w-screen justify-between">
+			<span>///</span>
+			<span>///</span>
+		</div>
+		<div class="opacity-30 flex w-screen justify-between">
+			<span>////</span>
+			<span>////</span>
+		</div>
+		<div class="opacity-40 flex w-screen justify-between">
+			<span>/////</span>
+			<span>/////</span>
+		</div>
+		<div class="opacity-50 flex w-screen justify-between">
+			<span>//////////</span>
+			<span>//////////</span>
+		</div>
+		<div class="opacity-60 flex w-screen justify-between">
+			<span>////////////////////</span>
+			<span>////////////////////</span>
+		</div>
+		<div class="opacity-70 flex w-screen justify-between">
+			<span>//////////////////////////////</span>
+			<span>//////////////////////////////</span>
+		</div>
+		<div class="opacity-80 flex w-screen justify-between">
+			<span>////////////////////////////////////////</span>
+			<span>////////////////////////////////////////</span>
+		</div>
+		<div class="opacity-90">
+			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+		</div>
+		<div class="opacity-100">
+			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+		</div>
+		<div class="opacity-100">
+			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+		</div>
+		<div class="opacity-100">
+			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+		</div>
+		<div class="opacity-90">
+			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+		</div>
+		<div class="opacity-80 flex w-screen justify-between">
+			<span>////////////////////////////////////////</span>
+			<span>////////////////////////////////////////</span>
+		</div>
+		<div class="opacity-70 flex w-screen justify-between">
+			<span>//////////////////////////////</span>
+			<span>//////////////////////////////</span>
+		</div>
+		<div class="opacity-60 flex w-screen justify-between">
+			<span>////////////////////</span>
+			<span>////////////////////</span>
+		</div>
+		<div class="opacity-50 flex w-screen justify-between">
+			<span>//////////</span>
+			<span>//////////</span>
+		</div>
+		<div class="opacity-40 flex w-screen justify-between">
+			<span>/////</span>
+			<span>/////</span>
+		</div>
+		<div class="opacity-30 flex w-screen justify-between">
+			<span>////</span>
+			<span>////</span>
+		</div>
+		<div class="opacity-20 flex w-screen justify-between">
+			<span>///</span>
+			<span>///</span>
+		</div>
+		<div class="opacity-10 flex w-screen justify-between">
+			<span>//</span>
+			<span>//</span>
+		</div>
+	</div>
 
-			<img src="/homepage/vr/fancy.png" class="skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
+	<section class="w-full h-full flex flex-col justify-between gap-10 @2xl:gap-20 @2xl:-mt-40">
+		<div class="baron text-2xl lg:text-4xl 2xl:text-5xl text-center text-blue-600 mx-auto">
+			<h2 class="text-4xl lg:text-4xl 2xl:text-6xl">Discover</h2>
+			<h2 class="text-4xl lg:text-6xl 2xl:text-8xl">Virtual Creativity</h2>
+		</div>
 
-			<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg relative">
+		<article class="grid container grid-cols-1 @6xl:grid-cols-4 gap-5 relative">
-				<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
+			<h2
+				class="rotate-[177deg] 2xl:block absolute hidden top-0 left-0 -ml-20 baron text-6xl text-center @2xl:text-left @2xl:text-8xl text-blue-600"
+				style="writing-mode: vertical-rl;"
+			>
+				Virtual Reality
+			</h2>
+
+			<img
+				src="/homepage/vr/vr.png"
+				class="skew-x-3 lg:ml-3 object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2"
+				alt="couch"
+			/>
+
+			<img
+				src="/homepage/vr/fancy.png"
+				class="skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full"
+				alt="couch"
+			/>
+
+			<div
+				class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg relative"
+			>
+				<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3" />
 				<p class="w-full h-full p-5 2xl:p-10 z-10">
-					VR is a world where anything is possible. A place where cities can be built with just a few button clicks. A place where friendships and communities are built on creativity and compassion. A place where anyone can be what they want to be without limitation. A place where freedom flourishes and humanity's light shines brighter than anywhere else.
+					VR is a world where anything is possible. A place where cities can be built with just a
-					<br/><br/>
+					few button clicks. A place where friendships and communities are built on creativity and
-					Despite what the failures of big-tech's attempts at creating a metaverse may make you think, VR is a very real and very big world consisting of millions of creative individuals with plenty of proven business models.
+					compassion. A place where anyone can be what they want to be without limitation. A place
+					where freedom flourishes and humanity's light shines brighter than anywhere else.
+					<br /><br />
+					Despite what the failures of big-tech's attempts at creating a metaverse may make you think,
+					VR is a very real and very big world consisting of millions of creative individuals with plenty
+					of proven business models.
 				</p>
 			</div>
 
-			<img src="/homepage/vr/mad.png" class="skew-x-3 lg:ml-5 object-cover @6xl:aspect-[3/1] @6xl:col-span-3 w-full h-full" alt="couch" />
+			<img
-
+				src="/homepage/vr/mad.png"
-			<img src="/homepage/vr/couch.png" class="skew-x-3 lg:-skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" />
+				class="skew-x-3 lg:ml-5 object-cover @6xl:aspect-[3/1] @6xl:col-span-3 w-full h-full"
-
+				alt="couch"
-			<img src="/homepage/vr/doggo.png" class="skew-x-3 lg:-skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
+			/>
-
+
-			<img src="/homepage/vr/bsaber.png" class="skew-x-3 lg:-skew-x-3 lg:-ml-5 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
+			<img
-
+				src="/homepage/vr/couch.png"
-			<img src="/homepage/vr/meet.png" class="skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[2/1] w-full h-full @6xl:col-span-2" alt="couch" />
+				class="skew-x-3 lg:-skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2"
-
+				alt="couch"
-			<div class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg lg:-ml-3 relative">
+			/>
-				<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3"></div>
+
+			<img
+				src="/homepage/vr/doggo.png"
+				class="skew-x-3 lg:-skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full"
+				alt="couch"
+			/>
+
+			<img
+				src="/homepage/vr/bsaber.png"
+				class="skew-x-3 lg:-skew-x-3 lg:-ml-5 object-cover @6xl:aspect-[1/1] w-full h-full"
+				alt="couch"
+			/>
+
+			<img
+				src="/homepage/vr/meet.png"
+				class="skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[2/1] w-full h-full @6xl:col-span-2"
+				alt="couch"
+			/>
+
+			<div
+				class="object-cover @6xl:aspect-[2/1] h-full w-full @6xl:col-span-2 flex flex-col gap-5 2xl:text-lg lg:-ml-3 relative"
+			>
+				<div class="absolute inset-0 w-full h-full bg-white dark:bg-black skew-x-3" />
 				<p class="w-full h-full p-5 2xl:p-10 z-10">
-					Because of my adventures in virtual reality I have gained knowledge surrounding things such as game development, modelling and texturing. Most of the avatars shown in the pictures were hand-made by me, and I have created many worlds and systems inside these VR platforms.
+					Because of my adventures in virtual reality I have gained knowledge surrounding things
-					<br/><br/>
+					such as game development, modelling and texturing. Most of the avatars shown in the
-					In my experience auxiliary skills, like in this case having knowledge of the inner workings of the software that makes these emerging technological markets possible, often come in handy even when working in a completely different field. They make you a more versatile person with a broader range of knowledge that'll help inspire and solve difficult problems with unique solutions.
+					pictures were hand-made by me, and I have created many worlds and systems inside these VR
+					platforms.
+					<br /><br />
+					In my experience auxiliary skills, like in this case having knowledge of the inner workings
+					of the software that makes these emerging technological markets possible, often come in handy
+					even when working in a completely different field. They make you a more versatile person with
+					a broader range of knowledge that'll help inspire and solve difficult problems with unique
+					solutions.
 				</p>
 			</div>
 
-			<img src="/homepage/vr/party.png" class="skew-x-3 lg:ml-2 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
+			<img
-
+				src="/homepage/vr/party.png"
-			<img src="/homepage/vr/fun.png" class="skew-x-3 lg:ml-5 object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2" alt="couch" />
+				class="skew-x-3 lg:ml-2 object-cover @6xl:aspect-[1/1] w-full h-full"
-
+				alt="couch"
-			<img src="/homepage/vr/sly.png" class="skew-x-3 lg:ml-7 object-cover @6xl:aspect-[1/1] w-full h-full" alt="couch" />
+			/>
-
+
-			<img src="/homepage/vr/dog.png" class="skew-x-3 lg:-skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full @6xl:col-span-2 @6xl:row-span-2" alt="couch" />
+			<img
-
+				src="/homepage/vr/fun.png"
-			<img src="/homepage/vr/dj.png" class="skew-x-3 lg:-skew-x-3 lg:ml-2 object-cover @6xl:aspect-[2/1] @6xl:col-span-2 w-full h-full" alt="couch" />
+				class="skew-x-3 lg:ml-5 object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2"
-
+				alt="couch"
-			<img src="/homepage/vr/what.jpg" class="skew-x-3 lg:-skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[2/1] @6xl:col-span-2 w-full h-full" alt="couch" />
+			/>
-
+
+			<img
+				src="/homepage/vr/sly.png"
+				class="skew-x-3 lg:ml-7 object-cover @6xl:aspect-[1/1] w-full h-full"
+				alt="couch"
+			/>
+
+			<img
+				src="/homepage/vr/dog.png"
+				class="skew-x-3 lg:-skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full @6xl:col-span-2 @6xl:row-span-2"
+				alt="couch"
+			/>
+
+			<img
+				src="/homepage/vr/dj.png"
+				class="skew-x-3 lg:-skew-x-3 lg:ml-2 object-cover @6xl:aspect-[2/1] @6xl:col-span-2 w-full h-full"
+				alt="couch"
+			/>
+
+			<img
+				src="/homepage/vr/what.jpg"
+				class="skew-x-3 lg:-skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[2/1] @6xl:col-span-2 w-full h-full"
+				alt="couch"
+			/>
 		</article>
 	</section>
-
+</main>
-</main>

src/routes/+page.svelte

@@ -37,7 +37,7 @@
 		<Sona />
 	</div>
 
-	<div class="bg-repeat-y bg-contain dotsandlines py-20">
+	<div class="bg-repeat-y bg-contain dotsandlines mt-20 mb-20">
 		<Virtual />
 	</div>