feat: add blog landing page

src/lib/assets/Coredump.svelte

@@ -3,7 +3,8 @@
 
 	export let height = '192';
 	export let width = 'auto';
-	export let href: string;
+	export let href: string = '/blog';
+	export let transition: 'vertical' | 'horizontal' = 'horizontal';
 </script>
 
 <svg
@@ -17,7 +18,9 @@
 	fill="currentColor"
 	{height}
 	{width}
-	in:fly={{ x: -100, duration: 300, delay: 320 }}
+	in:fly={transition === 'horizontal'
+		? { x: -100, duration: 300, delay: 320 }
+		: { y: -100, duration: 300 }}
 	out:fly={{ x: 100, duration: 300 }}
 >
 	<a {href}>

src/lib/components/Blog/PostCard.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import Placeholder from '$lib/assets/img/galaxy.jpg';
+	import Button from '../ui/button/button.svelte';
+
+	export let title: string;
+	export let blurb: string;
+	export let description: string;
+</script>
+
+<Card.Root>
+	<Card.Header>
+		<h3 class="text-4xl font-serif font-bold mb-4">{title}</h3>
+		<p class="text-muted-foreground text-xl">{blurb}</p>
+	</Card.Header>
+	<Card.Content class="grid grid-cols-3 gap-6">
+		<img
+			src={Placeholder}
+			alt="Placeholder"
+			class="col-span-3 md:col-span-1 rounded-2xl shadow-md"
+		/>
+		<div class="flex flex-col justify-around col-span-3 md:col-span-2 gap-4">
+			<p class="text-primary/95 font-serif">{description}</p>
+			<Button variant="outline" href="/blog/2024/test-post" class="text-xl flex-grow sm:flex-grow-0"
+				>Read More</Button
+			>
+		</div>
+	</Card.Content>
+</Card.Root>

src/lib/components/Footer.svelte

@@ -4,7 +4,7 @@
 	import { Code } from 'svelte-radix';
 </script>
 
-<footer class="h-24 px-2 mb-12 text-sm md:text-md xl:text-lg">
+<footer class="h-24 px-4 mb-12 text-sm md:text-md xl:text-lg">
 	<Separator class="mb-4" />
 	<div class="flex justify-center flex-col gap-4">
 		<Socials center />

src/lib/components/Navbar/Navbar.svelte

@@ -24,7 +24,6 @@
 	};
 
 	onMount(() => {
-		console.log('test');
 		return navigating.subscribe(updateCurrent);
 	});
 </script>

src/lib/components/ThemePicker.svelte

@@ -13,7 +13,7 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { setMode } from 'mode-watcher';
 
-	export let hideLabel: boolean = true;
+	export let hideLabel: boolean = false;
 	export let wide: boolean = false;
 
 	let modes = [
@@ -32,7 +32,7 @@
 		<slot {builder} />
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content class={wide ? 'w-[80%]' : ''}>
-		{#if hideLabel}
+		{#if !hideLabel}
 			<DropdownMenu.Label>Color Theme</DropdownMenu.Label>
 		{/if}
 		<DropdownMenu.Group>

src/routes/+layout.svelte

@@ -8,11 +8,6 @@
 	import '@fontsource/merriweather/latin.css';
 	import Footer from '$lib/components/Footer.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
-	import { onMount } from 'svelte';
-
-	onMount(() => {
-		console.log('Hello from the layout!');
-	});
 </script>
 
 <Toaster />

src/routes/+page.svelte

@@ -29,8 +29,8 @@
 				<h2>a hacker.</h2>
 			</Typewriter>
 			<br />
-			<Typewriter mode="scramble" scrambleDuration={1000}>
-				<p>I'm interested in systems programming, web design, data science, and statistics.</p>
+			<Typewriter>
+				<p>I'm building and designing software, for humans.</p>
 			</Typewriter>
 		</div>
 		<div class="flex flex-wrap gap-4 justify-center my-8">

src/routes/blog/+page.svelte

@@ -6,37 +6,82 @@
 	// import { config } from '$lib/stores/index.js';
 	import { cn } from '$lib/utils.js';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
+	import Coredump from '$lib/assets/Coredump.svelte';
+	import { fly } from 'svelte/transition';
+	import { onMount } from 'svelte';
+	import PostCard from '$lib/components/Blog/PostCard.svelte';
+	import { faker } from '@faker-js/faker';
+
+	let loaded = false;
+
+	onMount(() => {
+		loaded = true;
+	});
 </script>
 
 <svelte:head>
 	<title>Youwen Wu | The Coredump</title>
-	<meta name="description" content="My blog on computer science, math, and more." />
+	<meta name="description" content="My blog on computer science, math, games, art, and more." />
 	<meta name="author" content="Youwen Wu" />
 </svelte:head>
 
 <main class="dots-background">
-	<div class="container max-w-5xl md:mx-auto mx-4 py-8 my-1">
-		<h1 class="text-5xl md:text-6xl font-serif font-bold mt-14 sm:mt-18">The Coredump</h1>
-		<p class="text-xl sm:text-2xl text-muted-foreground mt-6">
-			My blog on computer science, math, and more.
+	<div class="max-w-5xl md:mx-auto py-8 my-1 container px-4">
+		<!-- <h1 class="text-5xl md:text-6xl font-serif font-bold mt-14 sm:mt-18">The Coredump</h1> -->
+		{#if loaded}
+			<Coredump width="100%" height="auto" transition="vertical" />
+			<p
+				class="text-xl sm:text-2xl text-muted-foreground font-mono"
+				in:fly={{ duration: 300, y: -50, delay: 200 }}
+			>
+				my blog on computer science, math, games, art, and more.
 			</p>
-		<div class="grid grid-cols-3 mt-20 gap-2 sm:gap-4">
-			<div class="col-span-2">
-				<h2 class="text-3xl font-serif font-bold">Latest Posts</h2>
-				<div class="grid grid-cols-1 gap-4 mt-4"></div>
+
+			<div class="grid grid-cols-3 mt-20 gap-8">
+				<div class="col-span-3 md:col-span-2">
+					<h2 class="text-4xl font-serif font-bold" in:fly|global={{ y: -50, delay: 300 }}>
+						Latest Posts
+					</h2>
+					{#each Array(5) as _, i}
+						<div
+							class="grid grid-cols-1 gap-4 mt-8"
+							in:fly|global={{ x: -50, delay: 350 + i * 100 }}
+						>
+							<PostCard
+								title={faker.hacker.noun() +
+									' ' +
+									faker.hacker.verb() +
+									' ' +
+									faker.hacker.adjective() +
+									' ' +
+									faker.hacker.noun()}
+								blurb={faker.hacker.phrase()}
+								description={faker.lorem.paragraphs(2)}
+							/>
 						</div>
-			<Card.Root class="col-span-1 bg-secondary border-primary/10 bg-opacity-75 backdrop-blur-sm">
+					{/each}
+				</div>
+				<div in:fly={{ y: -50, delay: 300 }} class="col-span-3 md:col-span-1">
+					<Card.Root class="bg-primary-foreground backdrop-blur-sm border-primary/10">
 						<Card.Header>
-					<h2 class="text-3xl font-serif font-bold mb-8">Archive</h2>
+							<h2 class="text-3xl font-serif font-bold mb-6">Archive</h2>
 							<h3 class="text-3xl font-serif font-medium text-muted-foreground">2024</h3>
-					<Separator class="mt-2 mb-4" />
+							<Separator class="mt-4 bg-primary/10 h-1" />
 						</Card.Header>
 						<Card.Content>
 							{#each Array(5) as _, i}
-						<div class="grid grid-cols-1 gap-2 mt-8">
-							<h3 class="text-2xl font-serif font-bold">Post Title</h3>
+								<div class="grid grid-cols-1 gap-2 mb-8">
+									<h3 class="text-2xl font-serif font-bold">
+										{faker.hacker.noun() +
+											' ' +
+											faker.hacker.verb() +
+											' ' +
+											faker.hacker.adjective() +
+											' ' +
+											faker.hacker.noun()}
+									</h3>
 									<p class="text-lg text-muted-foreground">
-								An insightful and succinct blurb about the post.
+										{faker.hacker.phrase()}
 									</p>
 									<div class="flex items-center gap-2">
 										<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
@@ -50,4 +95,8 @@
 					</Card.Root>
 				</div>
 			</div>
+		{:else}
+			<div class="h-screen"></div>
+		{/if}
+	</div>
 </main>