big update!

src/app.css

@@ -41,3 +41,11 @@ hr {
 	display: flex;
 	flex-direction: column;
 }
+
+.a {
+	color: orange;
+}
+
+.a:hover {
+	text-decoration: underline;
+}

src/lib/Socials.svelte

@@ -2,7 +2,7 @@
 	import Social from "./footer/Social.svelte";
 </script>
 
-<span class="flex gap-10">
+<span class="flex gap-3">
 	<Social
 		url="https://twitter.com/midblep"
 		title="The Bird App"

src/lib/ThemeSwitcher.svelte

@@ -3,7 +3,7 @@
 	import { getCookie } from "./helpers/cookies";
 
 	let classes =
-		"w-full h-full py-1 px-5 flex justify-center items-center hover:bg-orange-200 dark:hover:bg-orange-700 duration-300";
+		"h-full py-2 px-5 flex justify-center items-center group hover:bg-white hover:bg-opacity-30 text-white text-lg duration-300";
 
 	function switchTheme() {
 		if (document.documentElement.classList.contains("dark")) {
@@ -15,13 +15,13 @@
 
 	function setLight() {
 		document.documentElement.classList.remove("dark");
-		document.querySelector("#theme").innerHTML = "🌙";
+		document.querySelector("#theme").innerHTML = "Set to Dark";
 		document.cookie = "theme=light";
 	}
 
 	function setDark() {
 		document.documentElement.classList.add("dark");
-		document.querySelector("#theme").innerHTML = "☀️";
+		document.querySelector("#theme").innerHTML = "Set to Light";
 		document.cookie = "theme=dark";
 	}
 
@@ -38,5 +38,7 @@
 </script>
 
 <button type="none" class={classes} on:click={switchTheme} id="theme">
-	☀️ <span class="text-xs text-gray-400 px-2">/</span> 🌙
+	<span class="transform group-hover:scale-90 duration-300">
+		Dark / Light
+	</span>
 </button>

src/lib/footer/Social.svelte

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

src/lib/header/Button.svelte

@@ -4,7 +4,7 @@
 	export let type;
 	export let disabled;
 
-	let classes = "h-full py-2 px-5 flex justify-center items-center lowercase";
+	let classes = "h-full py-2 px-10 flex justify-center items-center lowercase group";
 
 	switch (type) {
 		case "title":
@@ -14,16 +14,18 @@
 
 		default:
 			classes +=
-				" hover:bg-orange-200 dark:hover:bg-orange-700 duration-300";
+				" hover:bg-white hover:bg-opacity-30 text-white font-bold text-lg duration-300";
 			break;
 	}
 
 	if (disabled) {
 		url = null;
-		classes += " cursor-not-allowed text-gray-400";
+		classes += " cursor-not-allowed text-white opacity-50";
 	}
 </script>
 
 <a href={url} class={classes}>
+	<p class="transform group-hover:scale-110 duration-300">
 		{text}
+	</p>
 </a>

src/lib/header/Header.svelte

@@ -3,9 +3,9 @@
 </script>
 
 <main
-	class="bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-40"
+	class="bg-gradient-to-l from-orange-500 to-amber-500 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
 >
-	<section class="container">
+	<section class="">
 		<Nav />
 	</section>
 </main>

src/lib/header/Nav.svelte

@@ -7,29 +7,28 @@
 	import DropdownButton from "./DropdownButton.svelte";
 </script>
 
-<div class="flex justify-between items-center">
-	<a class="flex h-14" href="/">
+<div class="flex items-center justify-between">
+	<div class="flex items-center">
+		<a class="flex h-16 hover:bg-white hover:bg-opacity-20 duration-300" href="/">
 			<!-- <Button url="/" text="<img src='/bart.png' />" type="title" /> -->
-		<img src="/bart.png" alt="Logo" class="h-full px-5 py-2 bg-amber-500" />
+			<img src="/bart.png" alt="Logo" class="h-full px-5 py-3 transform hover:scale-95 duration-300" />
 		</a>
-	<div class="hidden lg:flex h-14">
-		<Button url="/" text="🏠 Home" />
-		<Button disabled="true" url="/esu" text="📒 ESU" />
-		<Button disabled="true" url="/portfolio" text="🧰 works" />
-		<Button disabled="true" url="/furry" text="🐈‍⬛ Furry" />
-		<span><ThemeSwitcher /></span>
+		<div class="hidden lg:flex h-16 baron-light">
+			<Button url="/" text="Home" />
+			<Button disabled="true" url="/esu" text="ESU" />
+			<Button disabled="true" url="/portfolio" text="works" />
+			<Button disabled="true" url="/furry" text="Furry" />
 		</div>
-	<div class="flex lg:hidden h-14">
+	</div>
+	<div class="hidden lg:flex h-16">
+		<ThemeSwitcher />
+	</div>
+	<div class="flex lg:hidden h-16">
 		<Dropdown text="🍔">
-			<Button url="/" text="🏠 Home" />
-			<Button disabled="true" url="/esu" text="📒 ESU" />
-			<Button disabled="true" url="/portfolio" text="🧰 works" />
-			<Button disabled="true" url="/furry" text="🐈‍⬛ Furry" />
-			<Button
-				disabled="true"
-				url="http://ad.localhost"
-				text="🔞 AD Site"
-			/>
+			<Button url="/" text="Home" />
+			<Button disabled="true" url="/esu" text="ESU" />
+			<Button disabled="true" url="/portfolio" text="works" />
+			<Button disabled="true" url="/furry" text="Furry" />
 			<ThemeSwitcher />
 		</Dropdown>
 	</div>

src/lib/home/Banner.svelte

@@ -12,11 +12,19 @@
 		"/banner8.png",
 	];
 
-	const randomBannerPic = array[Math.floor(Math.random() * array.length)];
+	let randomBannerPic = array[Math.floor(Math.random() * array.length)];
+	randomBannerPic = "/banner.png";
 </script>
 
-<main class="flex gap-10 items-center justify-between px-6 lg:px-20">
-	<div class="flex flex-col gap-5 justify-center w-full">
+<main class="flex gap-5 items-center justify-between px-6 lg:px-20">
+	<div class="hidden lg:block h-full w-1/2">
+		<img
+			src={randomBannerPic}
+			alt="mid"
+		/>
+	</div>
+
+	<div class="flex flex-col gap-5 justify-center w-3/5">
 		<span>
 			<img src="/hello.png" alt="Hello!" class="h-20 popout" />
 		</span>
@@ -24,7 +32,7 @@
 		<span class="flex flex-wrap gap-2 items-end">
 			<h2 class="text-4xl font-extrabold">I'm Midnight,</h2>
 			<span class="text-3xl font-extralight">
-				i like to make things on the interwebs
+				i like to make things on the web
 			</span>
 		</span>
 
@@ -32,21 +40,16 @@
 
 		<span class="my-2">
 			<p class="text-gray-800 dark:text-gray-300 lg:w-3/4">
-				Bart Industries is a collection of my works, projects and
-				ambitions <br /> including my furry characters, stories and other
-				things i feel like sharing online.
+				Bart Industries is a collection of everything I've done such as my projects, involvements and ambitions,
+				but also other things such as my furry side, stories and everything else I feel like sharing.
+				<br/><br/>
+				I am open for work opportunities,
+				If you want to reach out you can use one of the methods below or <a href="#contact" class="a">use the contact form</a>.
 			</p>
 		</span>
 
 		<Socials />
 	</div>
-
-	<div class="hidden lg:block float h-full w-2/3">
-		<img
-			src={randomBannerPic}
-			alt="mid"
-		/>
-	</div>
 </main>
 
 <style>

src/lib/home/Form.svelte

@@ -20,7 +20,7 @@
 	</span>
 
 	<section
-		class="bg-gray-200 dark:bg-gray-800 p-10 rounded-xl shadow w-full flex flex-col gap-5"
+		class="bg-slate-400 bg-opacity-10 dark:bg-gray-800 p-10 rounded-xl shadow w-full flex flex-col gap-5"
 	>
 		<h3 class="text-xl font-bold">Quick compose email</h3>
 

src/routes/index.svelte

@@ -9,11 +9,11 @@
 </svelte:head>
 
 <main class="relative">
-	<section class="container py-20">
+	<section class="container py-10">
 		<Banner />
 	</section>
 
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="-mt-20">
 		<path
 			class="block dark:hidden"
 			fill="rgba(229, 231, 235, 1)"
@@ -183,7 +183,7 @@
 	>
 		<img src="/contact.png" class="lg:w-1/3 h-full" alt="contact" />
 
-		<div class="lg:w-1/3">
+		<div class="lg:w-1/3" id="contact">
 			<Form />
 		</div>
 	</section>