blueify

src/app.css

@@ -43,7 +43,7 @@ hr {
 }
 
 .a {
-	color: orange;
+	color: #2563EB;
 }
 
 .a:hover {

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 dark:hover:bg-orange-700 hover:scale-110 duration-150"
+	class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-blue-300 dark:hover:bg-blue-600 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/Button.svelte

@@ -4,7 +4,7 @@
 	export let type;
 	export let disabled;
 
-	let classes = "h-full py-2 px-10 flex justify-center items-center lowercase group";
+	let classes = "h-full py-2 px-10 flex justify-center items-center uppercase group";
 
 	switch (type) {
 		case "title":
@@ -14,7 +14,7 @@
 
 		default:
 			classes +=
-				" hover:bg-white hover:bg-opacity-30 text-white font-bold text-lg duration-300";
+				" hover:bg-white hover:bg-opacity-20 text-white font-bold text-lg duration-300";
 			break;
 	}
 

src/lib/header/Header.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <main
-	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"
+	class="bg-gradient-to-r h-16 fixed w-full from-blue-700 to-blue-300 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
 >
 	<section class="">
 		<Nav />

src/lib/home/Banner.svelte

@@ -1,5 +1,8 @@
 <script>
+import { browser } from "$app/env";
+
 	import Socials from "$lib/Socials.svelte";
+import { onMount } from "svelte";
 
 	const array = [
 		"/banner1.png",
@@ -12,21 +15,64 @@
 		"/banner8.png",
 	];
 
+	const words = [
+		"JavaScript",
+		"TypeScript",
+		"MySQL",
+		"Laravel",
+		"PHP",
+		"Livewire",
+		"NestJS",
+		"NodeJS",
+		"PostgreSQL",
+		"TailwindCSS",
+		"Bootstrap",
+		"Fontawesome",
+		"Sass",
+		"Webpack",
+		"Redis",
+		"Svelte",
+		"SvelteKit",
+		"Python",
+		"Java",
+		"JavaFX"
+	];
+
+	onMount(() => {
+		for(let j = 0; j < 12; j++) {
+			let list = document.createElement('div');
+			list.classList.add('flex', 'gap-5');
+
+			for (let i = 0; i < 20; i++) {
+				const word = words[Math.floor(Math.random() * words.length)];
+				let element = document.createElement('span');
+				element.innerHTML = word;
+
+				list.appendChild(element);
+			}
+
+			document.getElementById('lists').appendChild(list);
+		}
+	});
+
 	let randomBannerPic = array[Math.floor(Math.random() * array.length)];
 	randomBannerPic = "/banner.png";
 </script>
 
-<main class="flex gap-5 items-center justify-between px-6 lg:px-20">
-	<div class="hidden lg:block h-full w-1/2">
+<main class="flex gap-5 items-center pt-5 pb-60 justify-between px-6 lg:px-20 relative z-0 overflow-hidden">
+	<div class="absolute inset-0 w-full h-full flex flex-col items-center gap-2 justify-center font-bold anim" id="lists">
+	</div>
+	<div class="container flex gap-5 items-center pt-5 pb-20 justify-between px-6 lg:px-20">
+		<div class="hidden lg:block h-full w-1/2 z-10">
 			<img
 				src={randomBannerPic}
 				alt="mid"
 			/>
 		</div>
 
-	<div class="flex flex-col gap-5 justify-center w-3/5">
+		<div class="flex flex-col gap-5 justify-center w-3/5 z-10">
 			<span>
-			<img src="/hello.png" alt="Hello!" class="h-20 popout" />
+				<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
 			</span>
 
 			<span class="flex flex-wrap gap-2 items-end">
@@ -50,9 +96,27 @@
 
 			<Socials />
 		</div>
+	</div>
 </main>
 
 <style>
+	.anim {
+		opacity: 2%;
+		overflow: hidden;
+		animation: anim;
+		animation-duration: 60s;
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+	}
+
+	@keyframes anim {
+		0% {
+			transform: scale(5) translate(100px, -100px) rotate(-45deg);
+		}
+		100% {
+			transform: scale(5) translate(-100px, 100px) rotate(-45deg);
+		}
+	}
 	.popout {
 		animation: popout;
 		animation-duration: 1s;

src/routes/__error.svelte

@@ -1,3 +0,0 @@
-<main>
-	<h1>Error</h1>
-</main>

src/routes/index.svelte

@@ -8,12 +8,11 @@
 	<title>Home | Bart Industries</title>
 </svelte:head>
 
-<main class="relative">
-	<section class="container py-10">
+<main>
 	<Banner />
-	</section>
 
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="-mt-20">
+	<div class="relative h-80 -mt-80 overflow-hidden">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute inset-0 h-96 w-full scale-x-150">
 			<path
 				class="block dark:hidden"
 				fill="rgba(229, 231, 235, 1)"
@@ -27,8 +26,9 @@
 				d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
 			/>
 		</svg>
+	</div>
 
-	<section class="bg-gray-200 dark:bg-gray-800 -mt-1">
+	<section class="bg-gray-200 dark:bg-gray-800 pt-20 z-20">
 		<div class="container px-5 flex flex-col gap-10 justify-center">
 
 			<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
@@ -225,7 +225,7 @@
 	<section
 		class="container px-5 lg:px-0 pb-20 flex flex-col lg:flex-row gap-10 justify-between items-center lg:items-start"
 	>
-		<img src="/contact.png" class="lg:w-1/3 h-full" alt="contact" />
+		<img src="/contactblue.png" class="lg:w-1/3 h-full" alt="contact" />
 
 		<div class="lg:w-1/3" id="contact">
 			<Form />