Update design

src/lib/footer/Footer.svelte

@@ -1,15 +1,6 @@
-<script>
+<footer class="@container p-20 z-20 flex flex-col gap-10">
-	import Form from '$lib/home/Form.svelte';
+	<section class="flex flex-col justify-between gap-5">
-	import Socials from '$lib/Socials.svelte';
+		<!-- <h4 class="text-2xl font-bold">Bart Industries</h4> -->
-	import ThemeSwitcher from '$lib/ThemeSwitcher.svelte';
-	import Social from './Social.svelte';
-</script>
-
-<footer
-	class="@container py-20 lg:mt-40 bg-gradient-to-t from-blue-500 dark:from-blue-900 text-black dark:text-white z-20 flex flex-col gap-10"
->
-	<section class="container flex flex-col justify-between gap-5">
-		<h4 class="text-2xl font-bold">Bart Industries</h4>
 		<div class="flex flex-col">
 			<p class="text-sm">Copyright 2022 Pascal van Ginkel. All rights reserved.</p>
 			<p class="text-sm">Website made using SvelteKit, hosted on Vercel.</p>

src/lib/portfolio/Section.svelte

@@ -2,20 +2,22 @@
 	export let title = '';
 </script>
 
-<img
+<main class="flex flex-col">
-	class="scale-150 w-full -mt-20 rotate-180 lg:scale-100"
+	<img
-	src="/homepage/steps.svg"
+		class="scale-150 w-full -mt-20 rotate-180 lg:scale-100"
-	alt="Header"
+		src="/homepage/steps.svg"
-/>
+		alt="Header"
+	/>
 
-<div class="@container flex flex-col justify-center bg-[#3A53FF] px-10 pb-40 -mt-1" id={title}>
+	<div class="@container flex flex-col justify-center bg-[#3A53FF] px-10 pb-40 -mt-1" id={title}>
-	<h2 class="font-bold text-4xl text-center lg:text-8xl baron mb-20 text-white">{title}</h2>
+		<h2 class="font-bold text-4xl text-center lg:text-8xl baron mb-20 text-white">{title}</h2>
 
-	<div
+		<div
-		class="grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between"
+			class="grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between"
-	>
+		>
-		<slot />
+			<slot />
+		</div>
 	</div>
-</div>
 
-<img class="scale-150 w-full lg:scale-100" src="/homepage/steps.svg" alt="Header" />
+	<img class="scale-150 w-full lg:scale-100" src="/homepage/steps.svg" alt="Header" />
+</main>

src/routes/(landing)/+layout.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="bg-white h-screen overflow-y-auto dark:bg-black text-black dark:text-white">
-	<div class="w-full min-h-screen max-w-[2000px] flex flex-col gap-5 mx-auto">
+	<div class="w-full max-h-screen overflow-hidden max-w-[2000px] flex flex-col gap-5 mx-auto">
 		<Header />
 		<slot />
 	</div>

src/routes/(landing)/+page.svelte

@@ -116,16 +116,18 @@
 		/>
 
 		<div
-			class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim opacity-5 dark:opacity-5"
+			class="absolute inset-0 w-full h-full flex flex-col items-center gap-1 justify-center font-bold anim opacity-5 dark:opacity-5"
 			id="lists"
 		/>
 
-		<div class="flex h-full w-full @4xl:p-20 gap-20 p-5 z-10">
+		<div class="flex @8xl:p-20 @2xl:p-10 gap-20 p-5 z-10">
-			<div class="items-start @7xl:block hidden z-10 w-full">
+			<img
-				<img src={randomBannerPic} alt="mid" class="w-[40vw] z-10" />
+				src={randomBannerPic}
-			</div>
+				alt="mid"
+				class="w-[40%] h-auto flex-none @6xl:inline-block hidden z-10"
+			/>
 
-			<div class="flex flex-col py-5 h-full gap-10 z-10 w-full">
+			<div class="flex flex-col py-5 h-full gap-10 w-full flex-grow z-10">
 				<div class="flex flex-col gap-2">
 					<p class="text-4xl font-bold"><span class="whitepigeon">Hello</span></p>
 					<h2 class="text-6xl flex gap-2 font-extralight">
@@ -138,7 +140,7 @@
 					</h2>
 				</div>
 
-				<p class="lg:text-lg @2xl:mb-10">
+				<p class="lg:text-lg @8xl:mb-10">
 					I'm a {calculateAge(new Date('2001-10-30'))} year old programmer and tech enthusiast from The
 					Netherlands. I have a Bachelor of Science degree in Software Engineering and run a development
 					company called DubbelNull. During the week I work at Agro IT and build software that improves

src/routes/(pages)/portfolio/+page.svelte

@@ -8,7 +8,7 @@
 	<title>Bart Industries</title>
 </svelte:head>
 
-<main class="flex flex-col my-20">
+<main class="flex flex-col my-20 gap-20 2xl:gap-40">
 	<Professional />
 	<Experience />
 	<Projects />