update about and remove strapi

src/app.css

@@ -1,10 +1,8 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin "daisyui" {
-	themes:
+	themes: light --default, forest --prefersdark;
-		light --default,
-		forest --prefersdark;
 }
 
 :root {
-	@apply font-[Roboto];
+	@apply bg-[url("/background.jpg")] bg-cover font-[Roboto];
 }

src/lib/constants/about.ts

@@ -0,0 +1,43 @@
+import { BicepsFlexed, Braces, Gamepad2, Globe } from "@lucide/svelte";
+import type { Component } from "svelte";
+
+type Item = {
+	icon: Component;
+	title: string;
+	description: string;
+};
+
+export const name: string = "Benjamin Palko";
+
+export const titles: string[] = [
+	"Full Stack Developer",
+	"Video Game Developer",
+];
+
+export const description: string =
+	"Hi! I'm Ben, a Canadian Software Developer from Ottawa, Canada 🇨. I'm currently a Full Stack Developer and I love to do side projects, learn new things and have fun while doing it. I have participated in Game Jams, fallen down the rabbit hole of Linux Ricing and many other things away from the desk like races, cycling and even wood-working!";
+
+export const activities: Item[] = [
+	{
+		icon: Globe,
+		title: "Web Development",
+		description: "React, Typescript and Svelte oh my",
+	},
+	{
+		icon: Gamepad2,
+		title: "Game Development",
+		description:
+			"Unreal, Unity, Godot, RPG Maker. The game dev community was at peace until the Unity nation attacked",
+	},
+	{
+		icon: BicepsFlexed,
+		title: "Athletics",
+		description: "Self-proclaimed athlete, cyclist, runner and racer",
+	},
+	{
+		icon: Braces,
+		title: "Linux Ricing",
+		description:
+			"Builder of rices, vanquisher of Windows, distributor of open-source",
+	},
+];

src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 	import '../app.css';
 	import type { LayoutProps } from './$types';
 
-	let { children, data }: LayoutProps = $props();
+	let { children }: LayoutProps = $props();
 
 	let drawerOpen = $state(false);
 
@@ -30,11 +30,11 @@
 	let current = $derived(pages.find((p) => p.slug === page.route.id));
 </script>
 
-<div class="drawer drawer-end bg-cover" style:background-image={`url(${data.background.url})`}>
+<div class="drawer drawer-end">
 	<input id="navigation-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
 	<div class="drawer-content h-screen w-screen overflow-y-scroll lg:p-12">
 		<div
-			class="bg-base-100 border-base-300 mx-auto grid min-h-full max-w-7xl grid-rows-[max-content_max-content_auto_max-content] overflow-hidden border-2 shadow-md lg:gap-4 lg:rounded-4xl"
+			class="bg-base-100/90 border-base-300 mx-auto grid min-h-full max-w-7xl grid-rows-[max-content_max-content_auto_max-content] overflow-hidden border-2 shadow-md lg:gap-4 lg:rounded-4xl"
 		>
 			<header class="lg:p-6">
 				<Navbar drawerId="navigation-drawer" title="Benjamin Palko" {pages} route={page.route} />

src/routes/+page.server.ts

@@ -1,44 +0,0 @@
-import { logger } from '$lib/server/logger';
-import { error } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
-
-interface Data {
-	about: {
-		name: string;
-		bio: string;
-		titles: string[];
-		photo: {
-			url: string;
-		};
-		activities: { title: string; description: string }[];
-	};
-}
-
-export const load: PageServerLoad = async ({ locals }): Promise<Data | undefined> => {
-	const { strapi } = locals;
-
-	try {
-		const { data: about } = await strapi.About();
-
-		return {
-			about: {
-				name: about.Name,
-				bio: about.Bio,
-				titles: about.Titles.map((title: { value: string }) => title.value),
-				photo: {
-					url: about.Photo.url
-				},
-				activities: about.Activities.map((item: { Title: string; Description: string }) => {
-					return { title: item.Title, description: item.Description };
-				})
-			}
-		} satisfies Data;
-	} catch (err) {
-		if (err instanceof Error) {
-			logger.error('Uh-oh!', err);
-			if (err instanceof Error) {
-				error(500, err);
-			}
-		}
-	}
-};

src/routes/+page.svelte

@@ -1,35 +1,24 @@
 <script lang="ts">
 	import Hero from '$lib/components/Hero.svelte';
-	import { Braces } from 'lucide-svelte';
+	import { activities, description, name, titles } from '$lib/constants/about';
-	import type { PageProps } from './$types';
-
-	let { data }: PageProps = $props();
-
-	let about = $derived(data.about!);
-
-	type ActivityItem = Exclude<typeof about.activities, undefined>[number];
 </script>
 
-{#snippet Activity(item: ActivityItem)}
-	<div class="flex flex-col gap-4 lg:flex-row">
-		<Braces size={48} class="text-primary" />
-		<div class="flex flex-col">
-			<h3 class="text-xl">{item.title}</h3>
-			<p class="max-w-2xl">
-				{item.description}
-			</p>
-		</div>
-	</div>
-{/snippet}
-
 <div class="grid grid-cols-1 gap-8 px-6 md:grid-cols-2 md:px-12">
 	<div class="col-span-full lg:py-36">
-		<Hero photo={about.photo.url} titles={about.titles} name={about.name} description={about.bio} />
+		<Hero photo="/me.webp" {titles} {name} {description} />
 	</div>
 	<div class="col-span-full">
 		<h2 class="border-primary w-fit border-b text-2xl font-light">What I Do</h2>
 	</div>
-	{#each about.activities as activity (activity.title)}
+	{#each activities as item (item.title)}
-		{@render Activity(activity)}
+		<div class="flex flex-col gap-4 lg:flex-row">
+			<item.icon size={48} class="text-primary" />
+			<div class="flex flex-col">
+				<h3 class="text-xl">{item.title}</h3>
+				<p class="max-w-2xl">
+					{item.description}
+				</p>
+			</div>
+		</div>
 	{/each}
 </div>