feat: add international page and update card component

- Introduced a new international page with dynamic content loading.
- Updated Card component to display article date if available.
- Removed unused about and contact pages.
- Cleaned up package-lock.json by removing unnecessary dependencies.

src/routes/Header.svelte

@@ -17,17 +17,14 @@
 				<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
 					<a href="/">Home</a>
 				</li>
-				<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
-					<a href="/about">About</a>
-				</li>
 				<li aria-current={$page.url.pathname.startsWith('/projects') ? 'page' : undefined}>
 					<a href="/projects">Projects</a>
 				</li>
 				<li aria-current={$page.url.pathname.startsWith('/shs') ? 'page' : undefined}>
 					<a href="/shs">SHS</a>
 				</li>
-				<li aria-current={$page.url.pathname.startsWith('/contact') ? 'page' : undefined}>
-					<a href="/contact">Contact</a>
+				<li aria-current={$page.url.pathname.startsWith('/international') ? 'page' : undefined}>
+					<a href="/international">International</a>
 				</li>
 			</ul>
 		</nav>

src/routes/about/+page.svelte

@@ -1,8 +0,0 @@
-<svelte:head>
-	<title>About me</title>
-	<meta name="description" content="About me" />
-</svelte:head>
-
-<div class="text-column">
-	<h1>About me</h1>
-</div>

src/routes/contact/+page.svelte

@@ -1 +0,0 @@
-<h1>Work in progress</h1>

src/routes/international/+page.server.ts

@@ -0,0 +1,12 @@
+import { items } from '$lib/international';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => ({
+	data: await Promise.all(
+		[...items.entries()].map(async ([path, load]) =>
+			load().then(({ metadata }) => ({ path, ...metadata }))
+		)
+	).then((data) =>
+		data.sort(({ date: a }, { date: z }) => new Date(z ?? 0).getTime() - new Date(a ?? 0).getTime())
+	)
+});

src/routes/international/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Card from '$lib/components/Card.svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>International</title>
+	<meta name="description" content="international" />
+</svelte:head>
+
+<div>
+	<h1>International</h1>
+
+	<p>This is the international page.</p>
+
+	<hr />
+
+	<section class="card_list">
+		{#each data.data as article}
+			<Card {article} />
+		{/each}
+	</section>
+</div>
+
+<style>
+	.card_list {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 1rem;
+		text-align: center;
+	}
+</style>

src/routes/international/+page.ts

@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ data }) => ({
+	...data
+});

src/routes/international/trips/+page.md

@@ -0,0 +1,16 @@
+---
+title: 👨‍💻 Travel Journal
+date: 2024-10-24
+description: Travel Journal
+tags: 
+  - travel
+  - journal
+---
+
+<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
+ padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
+ border-radius: 8px; will-change: transform;">
+  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
+    src="https://www.canva.com/design/DAGI_IOWeMs/IrYKO0p7yfpkWyAWE2p74A/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
+  </iframe>
+</div>

src/routes/projects/can7/+page.md

@@ -4,7 +4,10 @@ date: 2022-09-08
 description: A dashboard for can7
 tags:
   - web
-  - php
-  - laravel
-image: /img/net7.png
+  - js
+  - sveltekit
+  - shadcn
+image: /img/can7.png
 ---
+
+<img src="/img/can7.png" alt="drawing" width="100%" style="border-radius: 10px">

src/routes/projects/net7/+page.md

@@ -8,3 +8,5 @@ tags:
   - tailwind
 image: /img/net7.png
 ---
+
+<img src="/img/net7.png" alt="net7" width="100%" style="border-radius: 10px">