From 4a4a6b0848bccc7177ec076f3ce947ce2a409b52 Mon Sep 17 00:00:00 2001
From: pml68 <tutorialmester@gmail.com>
Date: Sat, 20 Jan 2024 14:21:27 +0100
Subject: feat: add actual content to projects page (dummy projects for now)

---
 src/routes/projects/+page.svelte | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

(limited to 'src/routes/projects')

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 5a074b6..8b64856 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,7 +1,38 @@
 <script lang="ts">
+  import '$lib/assets/css/projects.scss'
+
   import { base } from "$app/paths"
+  import { projects } from '$lib/projects.json'
+
+  type Project = {
+    iconLink: string,
+    link: string,
+    title: string,
+    description: string
+  }
+
+  const projectsList: Project[] = projects
 </script>
 
-<div class="home">
-  ⮜ Take me back <a href={base + '/'}><b>home</b></a>
+<svelte:head>
+  <title>Projects</title>
+</svelte:head>
+
+<div class="spacer">
+  <div class="home">
+    Take me back <a href={base + '/'}><b>home</b></a>
+  </div>
+</div>
+<div class="project-container">
+  {#each projectsList as {iconLink, link, title, description}}
+    <a href={link} target="_blank">
+      <div class="project">
+        <img src={iconLink} alt={title + ' icon'} class="project-icon">
+        <div class="content">
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
+      </div>
+    </a>
+  {/each}
 </div>
-- 
cgit v1.2.3