src/lib/components/Hero.svelte

@@ -13,18 +13,18 @@
 
 <div class="hero bg-base-200">
 	<div class="hero-content">
-		<div class="flex flex-col gap-12 lg:flex-row">
+		<div class="flex flex-col items-center gap-12 lg:flex-row lg:items-start">
 			<div class="flex-0">
 				<div class="avatar">
 					<div
-						class="ring-offset-base-100 ring-base-100 dark:ring-primary w-56 rounded-full shadow-2xl ring-8 ring-offset-2 dark:shadow-none"
+						class="ring-offset-base-100 ring-base-100 dark:ring-primary w-48 rounded-full shadow-2xl ring-8 ring-offset-2 md:w-56 dark:shadow-none"
 					>
 						<img src={photo} alt="Its me!" />
 					</div>
 				</div>
 			</div>
-			<div class="flex flex-1 flex-col">
+			<div class="flex flex-1 flex-col text-center lg:text-left">
-				<p>{titles.join(', ')}</p>
+				<p class="text-gray-500">{titles.join(', ')}</p>
 				<h1 class="text-primary text-5xl font-light">
 					<span class="text-base-content font-semibold">{first}</span>
 					{rest}
@@ -32,7 +32,7 @@
 				<p class="block py-6">
 					{description}
 				</p>
-				<div class="flex flex-col gap-2 lg:flex-row lg:justify-end lg:gap-4">
+				<div class="flex flex-col gap-2 sm:flex-row lg:gap-4">
 					<a href="/resume" class="btn btn-outline btn-primary btn-wide">Resume</a>
 					<a href="/contact" class="btn btn-primary btn-wide">Contact</a>
 				</div>

src/lib/components/Navbar.svelte

@@ -14,7 +14,7 @@
 <nav class="navbar">
 	<div class="flex flex-1 items-center gap-4">
 		<a href="/">
-			<div class="avatar avatar-placeholder">
+			<div class="avatar avatar-placeholder animate-pulse">
 				<div
 					class="ring-primary ring-offset-base-100 bg-base-200 text-base-content mx-auto w-8 rounded-full ring-2 ring-offset-2 transition-all ease-in hover:text-2xl lg:w-12"
 				>

src/lib/components/WIP.svelte

@@ -6,7 +6,7 @@
 
 {#snippet Banner(messages: string[], backwards: boolean)}
 	<div
-		class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-3 text-xs font-semibold text-black lg:py-6 lg:text-lg"
+		class="bg-hazard flex h-fit w-[110%] flex-col bg-black py-3 text-xs font-semibold text-nowrap text-black lg:py-6 lg:text-lg"
 		class:rotate-5={!backwards}
 		class:-rotate-5={backwards}
 	>

src/routes/+layout.svelte

@@ -68,11 +68,12 @@
 
 	<div class="drawer-side">
 		<label for="navigation-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
-		<ul class="menu bg-base-200 flex min-h-full w-full flex-col-reverse gap-4 p-4">
+		<div class="menu bg-base-200 flex min-h-full w-full flex-col justify-between p-4">
+			<ul class="flex flex-col gap-4">
 				{#each pages as page (page.slug)}
 					<li>
 						<button
-						class="btn btn-primary btn-lg"
+							class="btn btn-primary btn-soft btn-lg"
 							onclick={() => {
 								goto(page.slug);
 								drawerOpen = false;
@@ -80,7 +81,15 @@
 						>
 					</li>
 				{/each}
-			<label for="navigation-drawer" class="btn btn-error btn-lg">Close</label>
 			</ul>
+
+			<div class="flex flex-col gap-4">
+				<h2 class="text-primary text-center text-4xl font-light lg:text-3xl">
+					<span class="text-base-content font-semibold">Benjamin</span>
+					Palko
+				</h2>
+				<label for="navigation-drawer" class="btn btn-error btn-soft btn-lg">Close</label>
+			</div>
+		</div>
 	</div>
 </div>

src/routes/+page.svelte

@@ -6,16 +6,22 @@
 		'Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.';
 </script>
 
-<div class="flex flex-col items-center px-12">
+<div class="flex flex-col items-center px-6 md:px-12">
 	<div class="lg:py-48">
 		<Hero
-			photo="/yeet-winter.jpg"
+			photo="/waterfall-cropped.jpg"
-			titles={['Software Engineer', 'Game Developer']}
+			titles={[
+				'Software Engineer',
+				'Game Developer',
+				'Linux Enjoyer',
+				'Cyclist',
+				'Goalie for Hire ⚽'
+			]}
 			name="Benjamin Palko"
 			{description}
 		/>
 	</div>
-	<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+	<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
 		<div class="col-span-full">
 			<h2 class="border-primary w-fit border-b text-2xl font-light">What I Do</h2>
 		</div>