tiny additions

src/lib/footer/Social.svelte

@@ -10,7 +10,8 @@
 <a
 	href={url}
 	{title}
-	class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-blue-300 dark:hover:bg-blue-600 hover:scale-110 duration-150"
+	target="_blank"
+	class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-blue-300 dark:hover:bg-blue-600 hover:scale-110 duration-150 shadow"
 >
 	<div class="aspect-square flex flex-col items-center justify-center p-5">
 		<span class="text-5xl ">{icon}</span>

src/lib/home/Form.svelte

@@ -14,15 +14,12 @@
 	}
 </script>
 
-<main class="flex flex-col gap-5">
-	<span class="p-5 flex justify-center">
-		<Socials />
-	</span>
+<main class="flex flex-col gap-10">
+	<img src="/homepage/contact.png" class="w-1/2" />
 
 	<section
-		class="bg-slate-400 bg-opacity-10 dark:bg-gray-800 p-10 rounded-xl shadow w-full flex flex-col gap-5"
+		class="bg-slate-200 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>
 
 		<form
 			class="flex flex-col gap-5"
@@ -45,7 +42,7 @@
 					id="email"
 					name="email"
 					type="text"
-					class="text-lg py-1 px-2 rounded-lg shadow dark:bg-gray-600"
+					class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
 					bind:value={email}
 				/>
 			</div>
@@ -57,7 +54,7 @@
 				<textarea
 					id="message"
 					name="message"
-					class="text-lg py-1 px-2 rounded-lg shadow dark:bg-gray-600"
+					class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
 					bind:value={message}
 					rows="5"
 				/>
@@ -68,7 +65,7 @@
                     <button
                         type="submit"
                         on:click={send}
-                        class="bg-white dark:bg-black py-2 px-3 rounded-lg font-bold shadow button"
+                        class="bg-blue-600 py-2 px-3 rounded-lg font-bold text-white shadow button"
                         >Send</button
                     >
                 {:else}
@@ -89,6 +86,8 @@
 			{/if}
 		</form>
 	</section>
+
+	<Socials />
 </main>
 
 <style>

src/routes/index.svelte

@@ -191,7 +191,7 @@
 							Want your own?
 						</h3>
 						<p class="text-sm text-gray-800 dark:text-gray-100">
-							My focus is on making people ''wow'' when they open your site with a design that is something truly unique and represents you. <br/><br/>
+							My focus is on making people ''wow'' when they open your site with a design that is something truly unique and representing of you and your brand. <br/><br/>
 							Anything is possible! Your site can have your socials, a blog, an email contact form, a gallery, and anything else.
 							In some cases a site's upkeep can be entirely free forever, too! <br/><br/>
 							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>.
@@ -257,12 +257,16 @@
 	</svg>
 
 	<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"
+		class="relative container px-5 lg:px-0 mb-20 flex flex-col lg:flex-row gap-10 h-full justify-center items-center"
+		id="contact"
 	>
-		<img src="/contactblue.png" class="lg:w-1/3 h-full" alt="contact" />
-
-		<div class="lg:w-1/3" id="contact">
+		<div class="lg:w-1/3 z-10">
 			<Form />
 		</div>
+
+		<img src="/homepage/fullbody.png" class="lg:w-1/3 h-full z-10" alt="contact" />
+
+		<div class="absolute inset-0 w-full h-full opacity-50 bg-contain bg-no-repeat bg-center" style="background-image: url('homepage/blob2.svg')"></div>
+		<!-- <div class="absolute right-0 top-0 bottom-0 w-1/2 h-full opacity-5 bg-contain bg-no-repeat" style="background-image: url('homepage/fullbody.png')"></div> -->
 	</section>
 </main>

static/homepage/blob.svg

@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g transform="translate(370.66054007412544 340.79557212711893)"><path d="M285 -266.8C357.8 -212.1 397.4 -106.1 387.6 -9.8C377.8 86.5 318.7 173 245.8 210.7C173 248.3 86.5 237.2 10.1 227C-66.2 216.9 -132.5 207.8 -170 170.1C-207.5 132.5 -216.2 66.2 -224.1 -7.9C-232 -82 -239.1 -164 -201.6 -218.7C-164 -273.4 -82 -300.7 12 -312.7C106.1 -324.7 212.1 -321.5 285 -266.8" fill="#ffffff"></path></g></svg>

static/homepage/blob2.svg

@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g transform="translate(480.0005693571776 313.1188457984587)"><path d="M236.7 -215.3C297.5 -175.8 331.3 -87.9 329.6 -1.6C328 84.6 290.9 169.2 230.1 206.7C169.2 244.2 84.6 234.6 3.4 231.2C-77.8 227.8 -155.6 230.6 -230.6 193.1C-305.6 155.6 -377.8 77.8 -388.3 -10.5C-398.8 -98.8 -347.5 -197.5 -272.5 -237C-197.5 -276.5 -98.8 -256.8 -5.4 -251.3C87.9 -245.9 175.8 -254.8 236.7 -215.3" fill="#ffffff"></path></g></svg>