2 files changed, 34 insertions, 3 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4391bf3..17129e9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,6 +31,6 @@
   </div>
   <br>
   <div class="projects">
-    Check out my projects <a href={base + '/projects'}><b>here ⮞</b></a>
+    Check out my projects <a href={base + '/projects'}><b>here</b></a>
   </div>
 </div>
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>