Merge pull request #218 from bartvdbraak/feat/content

Update project logos and add new projects

src/lib/components/site/projects/projects-item.svelte

@@ -1,27 +1,23 @@
 <script lang="ts">
 	import { Circle } from 'radix-icons-svelte';
-	import { Scale } from 'lucide-svelte';
+	import { Calendar, Scale } from 'lucide-svelte';
 	import * as Card from '$lib/components/ui/card';
 	import type { Project } from '$lib/content/projects';
-	import * as Avatar from '$lib/components/ui/avatar';
 
 	export let projectsItem: Project;
-	let { avatarImg, title, description, languages, license, year } = projectsItem;
+	let { logo, title, description, languages, license, year } = projectsItem;
 </script>
 
-<Card.Root class="hover:bg-muted/50">
-	<Card.Header class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+<Card.Root class="mb-6 inline-block hover:bg-muted/50">
+	<Card.Header class="grid grid-cols-[1fr_72px] items-start gap-4 space-y-0">
 		<div class="space-y-1">
-			<Card.Title tag="h2">{title}</Card.Title>
+			<Card.Title tag="h2" class="mb-2">{title}</Card.Title>
 			<Card.Description>
 				{description}
 			</Card.Description>
 		</div>
 		<div class="justify-self-end">
-			<Avatar.Root>
-				<Avatar.Image src={avatarImg} alt={title} />
-				<Avatar.Fallback>NA</Avatar.Fallback>
-			</Avatar.Root>
+			<enhanced:img src={logo} class="rounded-sm" alt={`${title} logo`} />
 		</div>
 	</Card.Header>
 	<Card.Content>
@@ -36,8 +32,8 @@
 				<Scale class="mr-1 h-3 w-3" />
 				{license}
 			</div>
-			<div>
-				Started in
+			<div class="flex items-center">
+				<Calendar class="mr-1 h-3 w-3" />
 				{year}
 			</div>
 		</div>

src/lib/components/site/projects/projects.svelte

@@ -3,7 +3,7 @@
 	import projects from '$lib/content/projects';
 </script>
 
-<div class="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2">
+<div class="w-full columns-1 gap-6 md:columns-2">
 	{#each projects as project}
 		{#if project.url}
 			<a href={project.url} target="_blank">

src/lib/content/projects.ts

@@ -1,7 +1,11 @@
-import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
-import videoWallLogo from '$lib/assets/projects/videowall-logo.png';
-import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
-import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
+import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png?enhanced';
+import videoWallLogo from '$lib/assets/projects/videowall-logo.png?enhanced';
+import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png?enhanced';
+import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png?enhanced';
+import helloBartLogo from '$lib/assets/logo-icon.png?enhanced';
+import omnidashLogo from '$lib/assets/projects/omnidash-logo.png?enhanced';
+import azureGeocodeMappingLogo from '$lib/assets/projects/azure-geocode-mapping-logo.png?enhanced';
+import slayerWeightCalcLogo from '$lib/assets/projects/slayerweightcalc-logo.png?enhanced';
 
 export type ProgrammingLanguage = {
 	name: string;
@@ -10,7 +14,7 @@ export type ProgrammingLanguage = {
 
 export type Project = {
 	url?: string;
-	avatarImg: string;
+	logo: string;
 	title: string;
 	description: string;
 	languages: ProgrammingLanguage[];
@@ -19,9 +23,54 @@ export type Project = {
 };
 
 const projects: Project[] = [
+	{
+		url: 'https://hellob.art',
+		logo: helloBartLogo,
+		title: 'hellob.art',
+		description:
+			'The website you are currently visiting. A personal portfolio website that regularly gets rebuilt. Currently it has been built in Svelte and SvelteKit and uses shadcn-svelte and Tailwind CSS for component styling.',
+		year: '2020',
+		license: 'GPLv3',
+		languages: [
+			{
+				name: 'Svelte',
+				color: 'text-orange-400'
+			}
+		]
+	},
+	{
+		url: 'https://omnidash.io',
+		logo: omnidashLogo,
+		title: 'Omnidash',
+		description:
+			'Omnidash is an open-source dashboard for retrieving ticketing information from various sources and displaying them in a single view.',
+		year: '2023',
+		license: 'GPLv3',
+		languages: [
+			{
+				name: 'Svelte',
+				color: 'text-orange-400'
+			}
+		]
+	},
+	{
+		url: 'https://github.com/bartvdbraak/azure-geocode-mapping',
+		logo: azureGeocodeMappingLogo,
+		title: 'azure-geocode-mapping',
+		description:
+			'azure-geocode-mapping is a Python package that generates a mapping of Azure regions to their display names and geocodes.',
+		year: '2023',
+		license: 'MIT',
+		languages: [
+			{
+				name: 'Python',
+				color: 'text-blue-400'
+			}
+		]
+	},
 	{
 		url: 'https://www.github.com/bartvdbraak/keyweave',
-		avatarImg: keyweaveLogo,
+		logo: keyweaveLogo,
 		title: 'Keyweave',
 		description:
 			'Keyweave is an open-source tool crafted in Rust to seamlessly fetch secrets from Azure Key Vault and weave them into a convenient .env file.',
@@ -31,11 +80,15 @@ const projects: Project[] = [
 			{
 				name: 'Rust',
 				color: 'text-red-400'
+			},
+			{
+				name: 'Bicep',
+				color: 'text-blue-400'
 			}
 		]
 	},
 	{
-		avatarImg: videoWallLogo,
+		logo: videoWallLogo,
 		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.',
@@ -53,7 +106,7 @@ const projects: Project[] = [
 		]
 	},
 	{
-		avatarImg: ticketDashboardLogo,
+		logo: ticketDashboardLogo,
 		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.',
@@ -72,7 +125,7 @@ const projects: Project[] = [
 	},
 	{
 		url: 'https://zaantje.com/',
-		avatarImg: zaantjeLogo,
+		logo: zaantjeLogo,
 		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.',
@@ -84,6 +137,25 @@ const projects: Project[] = [
 				color: 'text-emerald-400'
 			}
 		]
+	},
+	{
+		url: 'https://bartvdbraak.github.io/SlayerWeightCalculator/',
+		logo: slayerWeightCalcLogo,
+		title: 'SlayerWeightCalculator',
+		description:
+			'I created this Slayer calculator for OldSchool RuneScape in 2019, but I am no longer maintaining it. As of 23th April 2023, I have decided to publicly archive the repository for it.',
+		year: '2019',
+		license: 'BSD-2',
+		languages: [
+			{
+				name: 'Vue.js',
+				color: 'text-emerald-400'
+			},
+			{
+				name: 'Python',
+				color: 'text-blue-400'
+			}
+		]
 	}
 ];
 

src/routes/projects/+page.ts

@@ -2,7 +2,7 @@
 export function load() {
 	return {
 		name: `Projects`,
-		title: `Projects Ive realized`,
+		title: `Projects I've realized`,
 		subTitle: `Explore some of the projects I worked on in the past.`
 	};
 }