its all coming together

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
+		<Project description={lorem_ipsum} data={light_data} />
-			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}
-		/>
 		<br />
 
-		<Project
+		<Project description={lorem_ipsum} data={dazzle_data} />
-			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}
-		/>
 		<br />
 
-		<Project
+		<Project description={lorem_ipsum} data={bonfire_data} />
-			title="BONFIRE"
-			headline="You're enjoying its warmth on your eyes! :D"
-			description={lorem_ipsum}
-			icon="/signature.svg"
-			data={bonfire_data}
-			{mirrors}
-			{gallery}
-			{features}
-		/>
 		<br />
 
-		<Project
+		<Project description={lorem_ipsum} data={hikari_data} />
-			title="HIKARI"
-			headline="Toy raytracer written in Rust using Vulkan"
-			description={lorem_ipsum}
-			icon="/hikari.svg"
-			data={hikari_data}
-			{mirrors}
-			{gallery}
-			{features}
-		/>
 		<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
+		<!-- <Project headline="C++ Engineer" description={lorem_ipsum} /> -->
-			title="BITWYRE"
+		<!-- <br /> -->
-			headline="C++ Engineer"
+		<!---->
-			description={lorem_ipsum}
+		<!-- <Project headline="C++ Engineer" description={lorem_ipsum} /> -->
-			icon="/bitwyre-white.svg"
+		<!-- <br /> -->
-			{mirrors}
-			{gallery}
-			{features}
-		/>
-		<br />
-
-		<Project
-			title="Systematic Trading Group"
-			headline="C++ Engineer"
-			description={lorem_ipsum}
-			icon=""
-			{mirrors}
-			{gallery}
-			{features}
-		/>
-		<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>

src/routes/bio.svelte

@@ -1,25 +1,53 @@
 <script lang="ts">
 	import TiltCard from './tiltcard.svelte';
 
-	export let avatar: string;
+	const lorem_ipsum =
-	export let description: string;
+		'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>

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
+	let expanded = false; // 0: collapsed, 1: description, 2: gallery, 3: source code
-	const MAX_STAGE = 1;
-
-	function toggleExpansion() {
-		expansionStage = expansionStage >= MAX_STAGE ? 0 : expansionStage + 1;
-	}
 
 	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" />
+				<TiltCard imageSrc={data.icon} imageAlt="{data.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>
+					<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>
 		</div>
-		{:else}
+		{#if expanded}
-			<div class="m-4 min-w-0 flex-1">
+			<div transition:slide={{ duration: 150 }} class="ease-in">
-				<div>
-					<h1 class="font-mono text-3xl">{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>
-		{/if}
-
-		{#if expansionStage >= 1}
-			<div transition:slide={{ duration: 500 }} class="ease-out">
 				<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">
-					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}
+						{#each data.gallery as img}
-						<img src={img} alt="{title} screenshot" class="rounded object-cover" />
+							<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,17 +111,18 @@
 						</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" />
+								<GitBranch />
-								{repository.label}
+								Forge
 							</a>
 
+							{#if data.docs}
 								<a
-								href={documentation}
+									href={data.docs}
 									target="_blank"
 									rel="noopener noreferrer"
 									class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
@@ -184,6 +130,7 @@
 									<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>

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",

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",

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"
+    ]
 }
 

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"
+    ]
 }