updateeeee

src/lib/footer/Footer.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <main
-	class="py-10 px-2 lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow"
+	class="py-10 px-2 lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-20"
 >
 	<section
 		class="container flex flex-col-reverse lg:flex-row justify-between gap-10"

src/lib/header/Button.svelte

@@ -1,31 +1,53 @@
 <script>
+	import { page } from '$app/stores';
+
 	export let text;
 	export let url;
 	export let type;
 	export let disabled;
 
-	let classes = "h-full py-2 px-10 flex justify-center items-center uppercase group";
+	let classes;
 
-	switch (type) {
-		case "title":
-			classes +=
-				" text-xl font-bold text-white bg-amber-500 duration-300";
-			break;
+	initButton($page.url.pathname);
 
-		default:
-			classes +=
-				" hover:bg-white hover:bg-opacity-20 text-white font-bold text-lg duration-300";
-			break;
-	}
+	function initButton(givenUrl) {
+		let current;
+		classes = "h-full py-2 px-10 flex justify-center items-center uppercase group";
+
+		switch (type) {
+			case "title":
+				classes +=
+					" text-xl font-bold bg-amber-500 duration-300";
+				break;
+
+			default:
+				classes +=
+					" hover:bg-white hover:bg-opacity-20 font-bold text-lg duration-300";
+				break;
+		}
 
-	if (disabled) {
-		url = null;
-		classes += " cursor-not-allowed text-white opacity-50";
+		if (disabled) {
+			url = null;
+			classes += " cursor-not-allowed opacity-50 select-none";
+		}
+
+		if(url == "/") current = givenUrl == "/";
+		if(url != "/") current = givenUrl.includes(url);
+
+		if(current == true) {
+			classes += " text-white bg-white bg-opacity-10";
+		} else {
+			classes += " text-gray-200";
+		}
 	}
+
+	page.subscribe(value => {
+		initButton(value.url.pathname);
+	});
 </script>
 
 <a href={url} class={classes}>
-	<p class="transform group-hover:scale-110 duration-300">
+	<p class="transform duration-300 {!disabled ? "group-hover:scale-110" : ''}">
 		{text}
 	</p>
 </a>

src/lib/home/Banner.svelte

@@ -1,8 +1,6 @@
 <script>
-import { browser } from "$app/env";
-
 	import Socials from "$lib/Socials.svelte";
-import { onMount } from "svelte";
+	import { onMount } from "svelte";
 
 	const array = [
 		"/banner1.png",
@@ -35,7 +33,13 @@ import { onMount } from "svelte";
 		"SvelteKit",
 		"Python",
 		"Java",
-		"JavaFX"
+		"JavaFX",
+		"NGINX",
+		"Docker",
+		"REST",
+		"GraphQL",
+		"TypeORM",
+		"Eloquent"
 	];
 
 	onMount(() => {
@@ -43,7 +47,7 @@ import { onMount } from "svelte";
 			let list = document.createElement('div');
 			list.classList.add('flex', 'gap-2');
 
-			for (let i = 0; i < 10; i++) {
+			for (let i = 0; i < 20; i++) {
 				const word = words[Math.floor(Math.random() * words.length)];
 				let element = document.createElement('span');
 				element.innerHTML = word;
@@ -101,10 +105,11 @@ import { onMount } from "svelte";
 
 <style>
 	.anim {
+		user-select: none;
 		opacity: 2%;
 		overflow: hidden;
 		animation: anim;
-		animation-duration: 120s;
+		animation-duration: 200s;
 		animation-timing-function: linear;
 		animation-iteration-count: infinite;
 	}

src/routes/__error.svelte

@@ -0,0 +1,18 @@
+<script context="module">
+    /** @type {import('@sveltejs/kit').Load} */  export function load({ error, status }) {
+      return {
+        props: {
+          title: `${status}: ${error.message}`
+        }
+      };
+    }
+</script>
+
+<script>
+    export let title;
+</script>
+
+<div class="py-20 container flex flex-col gap-10">
+    <h2 class="text-4xl font-bold text-center">Error {title}</h2>
+    <img src="/banner5.jpeg" class="w-1/3 mx-auto rounded-2xl" alt="Oops! Hotdogs!" />
+</div>

src/routes/__layout.svelte

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

src/routes/portfolio.svelte

@@ -6,4 +6,32 @@
 	<title>Home</title>
 </svelte:head>
 
-<main />
+<main>
+	<section class="bg-opacity-50 relative h-80">
+		<div class="absolute left-0 h-full w-full bg-blue-600 opacity-50"></div>
+
+		<div class="container absolute inset-0 pt-20">
+			<h1 class="text-8xl font-bold baron-light">portfolio</h1>
+		</div>
+	</section>
+
+	<div class="container">
+		<section class="py-20 flex gap-10 flex-col items-between">
+			<section class="w-1/2 h-96">
+				<h2 class="font-bold text-4xl">The Moonlit Den</h2>
+			</section>
+
+			<section class="w-1/2 h-96">
+				<h2 class="font-bold text-4xl">The Moonlit Den</h2>
+			</section>
+
+			<section class="w-1/2 h-96">
+				<h2 class="font-bold text-4xl">The Moonlit Den</h2>
+			</section>
+
+			<section class="w-1/2 h-96">
+				<h2 class="font-bold text-4xl">The Moonlit Den</h2>
+			</section>
+		</section>
+	</div>
+</main>