feat: revamped project page

src/routes/projects/+page.svelte

@@ -1,50 +1,6 @@
 <script>
-	import videowallImage from '$lib/assets/videowall.jpeg';
+	import ProjectCard from './ProjectCard.svelte';
-	import videowallLogo from '$lib/assets/videowall-logo.png';
+	import projects from './projects-cards';
-	import ticketDashboardImage from '$lib/assets/ticketdashboard.png';
-	import ticketDashboardLogo from '$lib/assets/triple-logo.png';
-	import zaantjeImage from '$lib/assets/zaantje.png';
-	import zaantjeLogo from '$lib/assets/zaantje-logo.png';
-	import ProjectCard from '$lib/components/ProjectCard.svelte';
-
-	let projects = [
-		{
-			id: 1,
-			link: '#',
-			headerImage: videowallImage,
-			headerSubTitle: 'Private Project',
-			title: 'Videowall',
-			description: `An internal application to control an impressive 6x5 monitor setup with a user-friendly
-										frontend built with React and Next.js utilizing a powerful backend developed in Golang.`,
-			logo: videowallLogo,
-			contributors: [],
-			date: '2021'
-		},
-		{
-			id: 2,
-			link: '#',
-			headerImage: ticketDashboardImage,
-			headerSubTitle: 'Private Project',
-			title: 'Ticket Dashboard',
-			description: `Web app that consolidates tickets from various sources into one view for easy navigation, filters, and search for efficient 
-			ticket management. Developed with Next.js for frontend and Golang for backend.`,
-			logo: ticketDashboardLogo,
-			contributors: [],
-			date: '2020'
-		},
-		{
-			id: 3,
-			link: 'https://zaantje.com',
-			headerImage: zaantjeImage,
-			headerSubTitle: 'Personal Project',
-			title: 'Zaantje',
-			description: `A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you 
-										on a virtual tour of Zaandam, showcasing locations of famous music videos.`,
-			logo: zaantjeLogo,
-			contributors: [],
-			date: '2020'
-		}
-	];
 </script>
 
 <svelte:head>
@@ -56,7 +12,7 @@
 </svelte:head>
 
 <main class="container mx-auto px-4 py-8 text-left">
-	<h2 class="text-3xl font-bold mb-8">My Projects</h2>
+	<h2 class="text-3xl font-bold mb-8">Projects</h2>
 
 	<p class="text-lg leading-relaxed mb-8">
 		Here, you'll find a curated collection of projects that I've either created or contributed to as

src/routes/projects/ProjectCard.svelte

@@ -1,17 +1,16 @@
-<script>
+<script lang="ts">
 	import { Avatar } from '@skeletonlabs/skeleton';
 
-	export let link = '';
+	import type { Project } from './projects-cards';
-	export let headerImage = '';
+
-	export let headerSubTitle = '';
+	export let link: Project['link'];
-	export let title = '';
+	export let headerImage: Project['headerImage'];
-	export let description = '';
+	export let headerSubTitle: Project['headerSubTitle'];
-	export let logo = '';
+	export let title: Project['title'];
-	/**
+	export let description: Project['description'];
-	 * @type {any[]}
+	export let logo: Project['logo'];
-	 */
+	export let contributors: Project['contributors'];
-	export let contributors = [];
+	export let date: Project['date'];
-	export let date = '';
 </script>
 
 <a class="card bg-initial card-hover overflow-hidden" href={link}>

src/routes/projects/projects-assets.ts

@@ -0,0 +1,15 @@
+import videowallImage from '$lib/assets/projects/videowall.jpeg';
+import videowallLogo from '$lib/assets/projects/videowall-logo.png';
+import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png';
+import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
+import zaantjeImage from '$lib/assets/projects/zaantje.png';
+import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
+
+export {
+	videowallImage,
+	videowallLogo,
+	ticketDashboardImage,
+	ticketDashboardLogo,
+	zaantjeImage,
+	zaantjeLogo
+};

src/routes/projects/projects-cards.ts

@@ -0,0 +1,60 @@
+import {
+	ticketDashboardImage,
+	ticketDashboardLogo,
+	videowallImage,
+	videowallLogo,
+	zaantjeImage,
+	zaantjeLogo
+} from './projects-assets';
+
+interface Contributor {
+	name: string;
+	imageSrc: string;
+}
+
+export interface Project {
+	link?: string;
+	headerImage: string;
+	headerSubTitle: string;
+	title: string;
+	description: string;
+	logo: string;
+	contributors: Contributor[];
+	date: string;
+}
+
+const projects: Project[] = [
+	{
+		headerImage: videowallImage,
+		headerSubTitle: 'Private Project',
+		title: 'Videowall',
+		description: `An internal application to control an impressive 6x5 monitor setup with a user-friendly
+										frontend built with React and Next.js utilizing a powerful backend developed in Golang.`,
+		logo: videowallLogo,
+		contributors: [],
+		date: '2021'
+	},
+	{
+		headerImage: ticketDashboardImage,
+		headerSubTitle: 'Private Project',
+		title: 'Ticket Dashboard',
+		description: `Web app that consolidates tickets from various sources into one view for easy navigation, filters, and search for efficient 
+			ticket management. Developed with Next.js for frontend and Golang for backend.`,
+		logo: ticketDashboardLogo,
+		contributors: [],
+		date: '2020'
+	},
+	{
+		link: 'https://zaantje.com',
+		headerImage: zaantjeImage,
+		headerSubTitle: 'Personal Project',
+		title: 'Zaantje',
+		description: `A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you 
+										on a virtual tour of Zaandam, showcasing locations of famous music videos.`,
+		logo: zaantjeLogo,
+		contributors: [],
+		date: '2020'
+	}
+];
+
+export default projects;