tiny updates

src/lib/home/Banner.svelte

@@ -90,7 +90,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 web
+					I like to make things on the web
 				</span>
 			</span>
 
@@ -101,13 +101,20 @@
 					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,
+					I am open for 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>.
+					if you want to reach out you can use one of the methods below or <a href="#contact" class="a">the contact form</a>.
 				</p>
 			</span>
 
 			<Socials />
 		</div>
+
+		<div class="hidden lg:flex 3xl:hidden absolute left-0 bottom-0 w-full justify-center mb-40 z-50 text-8xl float scale-x-110 text-blue-600">
+			🠗
+			<div class="absolute inset-0 flex justify-center -mt-5 font-bold text-black dark:text-white text-lg">
+				See What I've Made
+			</div>
+		</div>
 	</div>
 </main>
 
@@ -117,7 +124,7 @@
 		opacity: 2%;
 		overflow: hidden;
 		animation: anim;
-		animation-duration: 200s;
+		animation-duration: 120s;
 		animation-timing-function: linear;
 		animation-iteration-count: infinite;
 	}
@@ -165,7 +172,7 @@
 
 	.float {
 		animation: float;
-		animation-duration: 3s;
+		animation-duration: 2s;
 		animation-iteration-count: infinite;
 		animation-timing-function: ease-in-out;
 	}
@@ -173,15 +180,15 @@
 	@keyframes float {
 		0% {
 			padding-top: 0px;
-			padding-bottom: 10px;
+			padding-bottom: 20px;
 		}
 		50% {
 			padding-top: 10px;
-			padding-bottom: 0px;
+			padding-bottom: 10px;
 		}
 		100% {
 			padding-top: 0px;
-			padding-bottom: 10px;
+			padding-bottom: 20px;
 		}
 	}
 </style>

src/lib/home/Card.svelte

@@ -1,42 +1,25 @@
 <script>
-	export let color = "bg-gradient-to-br from-gray-200 to-gray-400 dark:bg-gradient-to-br dark:from-gray-500 dark:to-gray-700";
-	export let rotation = "";
 	export let buttonText;
 	export let buttonRedirect = "";
 	export let buttonHref;
-	let skew;
-
-	switch (rotation) {
-		case "left":
-			skew = "skew-x-1 lg:skew-x-6";
-			break;
-
-		case "right":
-			skew = "-skew-x-1 lg:-skew-x-6";
-			break;
-	}
 </script>
 
-<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="z-10 flex flex-col group">
-	<div
+	<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
-		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
-				href={buttonHref}
-				target={buttonRedirect}
-				class="rounded-b-xl bg-white bg-opacity-50 p-5 hover:bg-opacity-100 duration-150 text-base lg:text-lg font-bold dark:text-black z-40"
-			>
-				<span class="p-5 z-10">{buttonText}</span>
-			</a>
-		{/if}
-	</div>
 
-	<div class="z-10 flex flex-col gap-5 flex-grow">
+	<div class="flex-grow flex flex-col gap-2 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700">
 		<slot />
-
-		{#if buttonText != null && buttonHref != null}
-			<span class="h-16 lg:h-10" />
-		{/if}
 	</div>
+
+	{#if buttonText != null && buttonHref != null}
+		<a
+			href={buttonHref}
+			target={buttonRedirect}
+			class="rounded-b-xl bg-white dark:bg-gray-900 bg-opacity-50 p-5 group-hover:-translate-y-1 hover:bg-opacity-100 dark:hover:bg-blue-600 hover:bg-blue-200 duration-300 text-base lg:text-lg font-bold z-40"
+		>
+			<span class="px-5">{buttonText}</span>
+		</a>
+	{:else}
+		<span class="h-10 bg-opacity-50 group-hover:-translate-y-1 bg-white dark:bg-gray-900 rounded-b-xl duration-300"></span>
+	{/if}
 </div>

src/routes/index.svelte

@@ -28,8 +28,16 @@
 		</svg>
 	</div>
 
-	<section class="bg-gray-200 dark:bg-gray-800 pt-20 z-20">
+	<section class="bg-gray-200 dark:bg-gray-800 z-20">
 		<div class="container px-5 flex flex-col gap-10 justify-center">
+			<div class="flex flex-col gap-5">
+				<h2 class="font-bold text-4xl">I do a lot of things</h2>
+				<p>
+					Like any aspiring developer my ambitions are great, and so I tend to be part of a lot of places.
+					<br/>
+					Below are some of the things I do and develop for, resulting in experience with a range of technologies and people.
+				</p>
+			</div>
 
 			<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
 				<Card
@@ -126,7 +134,16 @@
 				</Card>
 			</div>
 
-			<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
+			<hr class="my-10 opacity-10" />
+
+			<div class="flex flex-col gap-5">
+				<h2 class="font-bold text-4xl">I make stunning pages that fit</h2>
+				<p>
+					I love to make personalized websites for small creators and businesses that truly show their personality to the world with unique design.
+				</p>
+			</div>
+
+			<div class="grid grid-cols-1 lg:grid-cols-4 gap-10 justify-between">
 				<Card
 					buttonHref="https://sivkyne.xyz"
 					buttonRedirect="_blank"
@@ -197,10 +214,15 @@
 					<h3
 						class="text-xl font-bold inline-flex items-center gap-3"
 					>
-						More soon...
+						🙋
+						Want your own?
 					</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!
+						My focus is on making people ''wow'' when they open the site and design something truly unique that represents you and your style.
+						Smaller websites can feature a range of things such as your socials, blog, contact form, CMS pages, gallery, and much more. In certain cases, their upkeep can be entirely free forever!
+						I am open to requests so if you want to explore the possibilities of having your own website and what one can do for you, please feel free to <a class="a" href="#contact">contact me</a>.
+						<br/><br/>
+						If you are a larger business, have complicated needs or desire a more formal agreement please contact me via my company DubbelNull.
 					</p>
 				</Card>
 			</div>

tailwind.config.cjs

@@ -8,6 +8,9 @@ module.exports = {
 		extend: {
 			borderWidth: {
 				screen: '500px'
+			},
+			screens: {
+				'3xl': '2000px'
 			}
 		}
 	},