diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7c09236..17430d0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,10 +2,14 @@
 	function json_to_project(json: any) {
 		return {
 			title: json.title,
+			icon: json.icon,
+			headline: json.headline,
 			forge: json.forge,
 			codeberg: json.codeberg,
 			github: json.github,
-			gitlab: json.gitlab
+			gitlab: json.gitlab,
+			docs: json.docs,
+			gallery: json.gallery
 		};
 	}
 
@@ -18,29 +22,11 @@
 	import * as bonfire from './projects/bonfire.json';
 	import * as hikari from './projects/hikari.json';
 
-	import { Github, Gitlab, Code, GitBranch } from 'lucide-svelte';
 	const light_data = json_to_project(light);
 	const dazzle_data = json_to_project(dazzle);
 	const bonfire_data = json_to_project(bonfire);
 	const hikari_data = json_to_project(hikari);
 
-	const mirrors = [
-		{ label: 'Github', url: 'https://github.com/light7734/light', iconComponent: Github },
-		{ label: 'Gitlab', url: 'https://gitlab.com/light7734/light', iconComponent: Gitlab },
-		{ label: 'Codeberg', url: 'https://codeberg.org/light7734/light', iconComponent: Code }
-	];
-
-	const gallery = [
-		'https://placekittens.com/720/480',
-		'https://placekittens.com/720/481',
-		'https://placekittens.com/720/482',
-		'https://placekittens.com/720/483',
-		'https://placekittens.com/720/484',
-		'https://placekittens.com/720/484'
-	];
-
-	const features = ['MSAA', 'SSAO', 'PBR Lighting'];
-
 	const lorem_ipsum =
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
 </script>
@@ -48,9 +34,8 @@
 <div
 	class="min-h-screen bg-light-bg text-light-fg transition-colors duration-300 dark:bg-dark-bg dark:text-dark-fg"
 >
-	<ThemeToggle />
 	<main class="bg-card p-8 transition-all duration-300 ease-out">
-		<Bio description={lorem_ipsum} avatar="/pfp.jpg" />
+		<Bio />
 
 		<br />
 
@@ -66,52 +51,16 @@
 
 		<br />
 
-		<Project
-			title="Light"
-			headline="Dependency free, cross-platform and feature-rich 3D game engine."
-			description={lorem_ipsum}
-			icon="/light.svg"
-			data={light_data}
-			{mirrors}
-			{gallery}
-			{features}
-		/>
+		<Project description={lorem_ipsum} data={light_data} />
 		<br />
 
-		<Project
-			title="Dazzle"
-			headline="Best way to learn is to teach, here be my articles."
-			description={lorem_ipsum}
-			icon="/signature.svg"
-			data={dazzle_data}
-			{mirrors}
-			{gallery}
-			{features}
-		/>
+		<Project description={lorem_ipsum} data={dazzle_data} />
 		<br />
 
-		<Project
-			title="BONFIRE"
-			headline="You're enjoying its warmth on your eyes! :D"
-			description={lorem_ipsum}
-			icon="/signature.svg"
-			data={bonfire_data}
-			{mirrors}
-			{gallery}
-			{features}
-		/>
+		<Project description={lorem_ipsum} data={bonfire_data} />
 		<br />
 
-		<Project
-			title="HIKARI"
-			headline="Toy raytracer written in Rust using Vulkan"
-			description={lorem_ipsum}
-			icon="/hikari.svg"
-			data={hikari_data}
-			{mirrors}
-			{gallery}
-			{features}
-		/>
+		<Project description={lorem_ipsum} data={hikari_data} />
 		<br />
 
 		<div class="relative left-1/2 flex w-screen max-w-none -translate-x-1/2 items-center">
@@ -125,27 +74,11 @@
 		</div>
 		<br />
 
-		<Project
-			title="BITWYRE"
-			headline="C++ Engineer"
-			description={lorem_ipsum}
-			icon="/bitwyre-white.svg"
-			{mirrors}
-			{gallery}
-			{features}
-		/>
-		<br />
-
-		<Project
-			title="Systematic Trading Group"
-			headline="C++ Engineer"
-			description={lorem_ipsum}
-			icon=""
-			{mirrors}
-			{gallery}
-			{features}
-		/>
-		<br />
+		<!-- <Project headline="C++ Engineer" description={lorem_ipsum} /> -->
+		<!-- <br /> -->
+		<!---->
+		<!-- <Project headline="C++ Engineer" description={lorem_ipsum} /> -->
+		<!-- <br /> -->
 
 		<div class="relative left-1/2 flex w-screen max-w-none -translate-x-1/2 items-center">
 			<div class="border-border flex-grow border-t border-t-dark-neutral"></div>
diff --git a/src/routes/bio.svelte b/src/routes/bio.svelte
index 5109cd1..7974c29 100644
--- a/src/routes/bio.svelte
+++ b/src/routes/bio.svelte
@@ -1,25 +1,53 @@
 <script lang="ts">
 	import TiltCard from './tiltcard.svelte';
 
-	export let avatar: string;
-	export let description: string;
+	const lorem_ipsum =
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
+
+	let tiltX = 0;
+	let tiltY = 0;
+
+	function handleMouseMove(event: MouseEvent) {
+		const card = event.currentTarget as HTMLElement;
+		const rect = card.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const y = event.clientY - rect.top;
+		const centerX = rect.width / 2;
+		const centerY = rect.height / 2;
+		const percentX = (x - centerX) / centerX;
+		const percentY = (centerY - y) / centerY; // Invert Y for natural tilt
+		const maxTilt = 2;
+		tiltX = percentY * maxTilt;
+		tiltY = percentX * maxTilt;
+	}
+
+	function handleMouseLeave() {
+		tiltX = 0;
+		tiltY = 0;
+	}
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="relative mx-auto flex w-full max-w-2xl rounded-l border-b border-l border-t shadow-lg duration-300 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]"
+	class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border border-dark-red transition-all duration-300 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]"
+	style="transform: perspective(1000px) rotateX({tiltX}deg) rotateY({tiltY}deg);"
+	on:mousemove={handleMouseMove}
+	on:mouseleave={handleMouseLeave}
 >
-	<div class="m-4">
-		<h1 class="font-mono text-4xl">LIGHT 7734</h1>
-		<p class="text-muted-foreground leading-relaxed">
-			{description}
-		</p>
-	</div>
-
 	<div class="mx-auto flex max-w-2xl origin-center">
 		<img
-			src={avatar}
+			src={'/pfp.jpg'}
 			alt="author"
-			class="h-full w-full object-cover transition-transform duration-100 ease-out"
+			class="h-full w-full rounded-t-lg object-cover transition-transform duration-100 ease-out"
 		/>
 	</div>
+
+	<div class="m-4 min-w-[60%]">
+		<h1 class="font-mono text-4xl">Light Roxanna</h1>
+		<h3 class="mt-4 text-xl text-light-accent">Software Engineer</h3>
+
+		<p class="text-muted-foreground leading-relaxed">
+			{lorem_ipsum}
+		</p>
+	</div>
 </div>
diff --git a/src/routes/project.svelte b/src/routes/project.svelte
index ad07e9d..44669d5 100644
--- a/src/routes/project.svelte
+++ b/src/routes/project.svelte
@@ -2,54 +2,37 @@
 </script>
 
 <script lang="ts">
-	import { ChevronDown, ChevronUp, ExternalLink, BookText } from 'lucide-svelte';
-
+	import { ChevronDown, ChevronUp, BookText, Github, Gitlab, Code, GitBranch } from 'lucide-svelte';
 	interface ProjectData {
 		title: string | undefined;
+		icon: string;
+		headline: string;
 		forge: string | undefined;
 		codeberg: string | undefined;
 		github: string | undefined;
 		gitlab: string | undefined;
+		docs: string | undefined;
+		gallery: string[] | undefined;
 	}
 
 	import LanguageStats from './languages.svelte';
 	import TiltCard from './tiltcard.svelte';
 
-	import { Github, Gitlab, Code, GitBranch } from 'lucide-svelte';
+	export let data: ProjectData = {
+		title: '',
+		icon: '',
+		headline: '',
+		forge: '',
+		codeberg: '',
+		github: '',
+		gitlab: '',
+		docs: '',
+		gallery: undefined
+	};
 
-	interface ProjectLink {
-		label: string;
-		url: string;
-		iconComponent: any;
-	}
-
-	interface Language {
-		name: string;
-		icon?: string;
-	}
-
-	export let data: ProjectData = { title: '', forge: '', codeberg: '', github: '', gitlab: '' };
-
-	export let title: string;
-	export let headline: string;
 	export let description: string;
-	export let icon: string;
-	export let repository: ProjectLink = { label: 'Forgejo', url: '', iconComponent: GitBranch };
-	export let mirrors: ProjectLink[] = [
-		{ label: 'Github', url: '', iconComponent: Github },
-		{ label: 'Gitlab', url: '', iconComponent: Gitlab },
-		{ label: 'Codeberg', url: '', iconComponent: Code }
-	];
-	export let documentation: string = '';
-	export let gallery: string[] = [];
-	export let features: string[] = [];
 
-	let expansionStage = 0; // 0: collapsed, 1: description, 2: gallery, 3: source code
-	const MAX_STAGE = 1;
-
-	function toggleExpansion() {
-		expansionStage = expansionStage >= MAX_STAGE ? 0 : expansionStage + 1;
-	}
+	let expanded = false; // 0: collapsed, 1: description, 2: gallery, 3: source code
 
 	import { slide } from 'svelte/transition';
 
@@ -84,76 +67,38 @@
 	on:mouseleave={handleMouseLeave}
 >
 	<div class="p-6">
-		{#if icon !== ''}
-			<div class="mb-4 flex items-center gap-4">
-				<div class="flex-shrink-0">
-					<TiltCard imageSrc={icon} imageAlt="{title} icon" width="256px" height="256px" />
-				</div>
-				<div class="m-4 min-w-0 flex-1">
-					<div>
-						<h1 class="font-mono text-4xl uppercase">{title}</h1>
-
-						<div class="border-border w-full self-center border-t p-1"></div>
-						<p class="text-muted-foreground leading-relaxed">
-							{headline}
-						</p>
-					</div>
-				</div>
+		<div class="mb-4 flex items-center gap-4">
+			<div class="flex-shrink-0">
+				<TiltCard imageSrc={data.icon} imageAlt="{data.title} icon" width="256px" height="256px" />
 			</div>
-		{:else}
 			<div class="m-4 min-w-0 flex-1">
 				<div>
-					<h1 class="font-mono text-3xl">{title}</h1>
+					<h1 class="font-mono text-4xl uppercase">{data.title}</h1>
 
 					<div class="border-border w-full self-center border-t p-1"></div>
 					<p class="text-muted-foreground leading-relaxed">
-						{headline}
+						{data.headline}
 					</p>
 				</div>
 			</div>
-		{/if}
-
-		{#if expansionStage >= 1}
-			<div transition:slide={{ duration: 500 }} class="ease-out">
+		</div>
+		{#if expanded}
+			<div transition:slide={{ duration: 150 }} class="ease-in">
 				<p class="text-muted-foreground pb-8 leading-relaxed">
 					{description}
 				</p>
 
-				<!-- LANGUAGES -->
+				{#if data.gallery}
+					<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
+						Gallery
+					</h3>
 
-				<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
-					Supported Graphics-APIs
-				</h3>
-
-				<div class="flex flex-wrap gap-3">
-					<p>Vulkan</p>
-
-					<p>DirectX</p>
-
-					<p>Metal</p>
-				</div>
-
-				<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
-					Features
-				</h3>
-
-				<!-- FEATURES -->
-				<ul class="text-muted-foreground mb-2 list-disc pl-5">
-					{#each features as feature}
-						<li>{feature}</li>
-					{/each}
-				</ul>
-				<h4 class="mb-1 font-medium">{title}'s Tech Stack':</h4>
-
-				<!-- GALLERY -->
-				<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
-					Gallery
-				</h3>
-				<div class="mb-4 grid grid-cols-3 gap-2">
-					{#each gallery as img}
-						<img src={img} alt="{title} screenshot" class="rounded object-cover" />
-					{/each}
-				</div>
+					<div class="mb-4 grid grid-cols-3 gap-2">
+						{#each data.gallery as img}
+							<img src={img} alt="{data.title} screenshot" class="rounded object-cover" />
+						{/each}
+					</div>
+				{/if}
 
 				<div class="mx-auto w-full py-4">
 					<LanguageStats repositoryUrl={data.github ? data.github : ''} />
@@ -166,24 +111,26 @@
 						</h3>
 						<div class="flex flex-wrap gap-3">
 							<a
-								href={repository.url}
+								href={data.forge}
 								target="_blank"
 								rel="noopener noreferrer"
 								class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
 							>
-								<svelte:component this={repository.iconComponent} class="h-4 w-4" />
-								{repository.label}
+								<GitBranch />
+								Forge
 							</a>
 
-							<a
-								href={documentation}
-								target="_blank"
-								rel="noopener noreferrer"
-								class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
-							>
-								<BookText class="h-4 w-4" />
-								Documentation
-							</a>
+							{#if data.docs}
+								<a
+									href={data.docs}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
+								>
+									<BookText class="h-4 w-4" />
+									Documentation
+								</a>
+							{/if}
 						</div>
 					</div>
 					<div class="border-border mx-4 h-8 self-center border-l"></div>
@@ -192,6 +139,16 @@
 							Mirrors
 						</h3>
 						<div class="flex flex-wrap gap-3">
+							<a
+								href={data.github}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
+							>
+								<Github class="h-4 w-4" />
+								Github
+							</a>
+
 							<a
 								href={data.gitlab}
 								target="_blank"
@@ -199,7 +156,17 @@
 								class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
 							>
 								<Gitlab class="h-4 w-4" />
-								"Gitlab"
+								Gitlab
+							</a>
+
+							<a
+								href={data.gitlab}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
+							>
+								<Code class="h-4 w-4" />
+								Codeberg
 							</a>
 						</div>
 					</div>
@@ -209,10 +176,12 @@
 	</div>
 
 	<button
-		on:click={toggleExpansion}
+		on:click={function () {
+			expanded = !expanded;
+		}}
 		class="bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground border-border group flex w-full items-center justify-center gap-2 rounded-b-lg border-t px-6 py-3 transition-colors duration-200"
 	>
-		{#if expansionStage >= MAX_STAGE}
+		{#if expanded}
 			<ChevronUp
 				class="h-4 w-16 transition-transform duration-200 group-hover:translate-y-[-2px]"
 			/>
@@ -221,7 +190,7 @@
 				class="h-30 w-30 transition-transform duration-200 group-hover:translate-y-[2px]"
 			/>
 			<span class="font-bold">
-				{#if expansionStage === 0}
+				{#if !expanded}
 					DETAILS
 				{/if}
 			</span>
diff --git a/src/routes/projects/bonfire.json b/src/routes/projects/bonfire.json
index 66a0121..95d6836 100644
--- a/src/routes/projects/bonfire.json
+++ b/src/routes/projects/bonfire.json
@@ -1,5 +1,7 @@
 {
     "title": "Bonfire",
+    "icon": "/signature.svg",
+    "headline": "You're enjoying its warmth on your eyes! : D",
     "forge": "https://git.light7734.com/light7734/bonfire",
     "codeberg": "https://codeberg.org/light7734/bonfire",
     "github": "https://github.com/light7734/bonfire",
diff --git a/src/routes/projects/dazzle.json b/src/routes/projects/dazzle.json
index c20d169..2019c63 100644
--- a/src/routes/projects/dazzle.json
+++ b/src/routes/projects/dazzle.json
@@ -1,5 +1,7 @@
 {
     "title": "Dazzle",
+    "icon": "/signature.svg",
+    "headline": "Best way to learn is to teach, here be my articles.",
     "forge": "https://git.light7734.com/light7734/dazzle",
     "codeberg": "https://codeberg.org/light7734/dazzle",
     "github": "https://github.com/light7734/dazzle",
diff --git a/src/routes/projects/hikari.json b/src/routes/projects/hikari.json
index e092c67..3d97d4c 100644
--- a/src/routes/projects/hikari.json
+++ b/src/routes/projects/hikari.json
@@ -1,8 +1,13 @@
 {
     "title": "Hikari",
+    "icon": "/hikari.svg",
+    "headline": "Toy raytracer written in Rust using Vulkan",
     "forge": "https://git.light7734.com/light7734/hikari",
     "codeberg": "https://codeberg.org/light7734/hikari",
     "github": "https://github.com/light7734/hikari",
-    "gitlab": "https://gitlab.com/light7734/hikari"
+    "gitlab": "https://gitlab.com/light7734/hikari",
+    "gallery": [
+        "/hikari_raytrace.png"
+    ]
 }
 
diff --git a/src/routes/projects/light.json b/src/routes/projects/light.json
index c09ee10..4944741 100644
--- a/src/routes/projects/light.json
+++ b/src/routes/projects/light.json
@@ -1,7 +1,18 @@
 {
     "title": "Light",
+    "icon": "/light.svg",
+    "headline": "Dependency free, cross-platform and feature-rich 3D game engine.",
     "forge": "https://git.light7734.com/light7734/light",
     "codeberg": "https://codeberg.org/light7734/light",
     "github": "https://github.com/light7734/light",
-    "gitlab": "https://gitlab.com/light7734/light"
+    "gitlab": "https://gitlab.com/light7734/light",
+    "docs": "https://docs.light7734.com/",
+    "gallery": [
+		"https://placekittens.com/720/480",
+		"https://placekittens.com/720/481",
+		"https://placekittens.com/720/482",
+		"https://placekittens.com/720/483",
+		"https://placekittens.com/720/484",
+		"https://placekittens.com/720/484"
+    ]
 }
diff --git a/static/hikari_raytrace.png b/static/hikari_raytrace.png
new file mode 100644
index 0000000..71bd324
Binary files /dev/null and b/static/hikari_raytrace.png differ