Added small device view

src/app.css

@@ -1,4 +1,4 @@
 /* Test */
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities';

src/lib/components/cards/Header.svelte

@@ -5,8 +5,8 @@
 </script>
 
 <header class="w-full h-screen flex flex-col justify-center items-center">
-  <div id="header-wrapper" class="header-wrapper">
-    <h1 id="title" class="h1 fixed">Alexander Harding</h1>
+  <div id="header-wrapper" class="header-wrapper text-center">
+    <h1 id="title" class="h1">Alexander Harding</h1>
     <h4 class="h4 m-0">Software and Application Developer</h4>
     <div class="cards flex w-full justify-between mt-6">
       {#each brands as brand}

src/lib/components/containers/Projects.svelte

@@ -0,0 +1,19 @@
+<script>
+  import LargeCard from "../items/LargeCard.svelte";
+
+  import projects from "$lib/data/projects.json";
+  import LargeCardSm from "../items/LargeCard-sm.svelte";
+
+  export let data;
+
+  const { avatars } = data;
+</script>
+
+<div id="projects" class="h-full">
+  <h2 class="h2 mb-4">Projects</h2>
+  <div class="h-fit gap-4 flex flex-col overflow-scroll">
+    {#each projects as project}
+      <LargeCardSm data={project} {avatars} />
+    {/each}
+  </div>
+</div>

src/lib/components/containers/TechStack.svelte

@@ -0,0 +1,12 @@
+<script>
+  import SmallCard from "../items/SmallCard.svelte";
+
+  export let techs;
+</script>
+
+<h2 class="h2">My Tech Stack</h2>
+<div class="cards">
+  {#each techs as tech}
+    <SmallCard data={tech} />
+  {/each}
+</div>

src/lib/components/items/LargeCard-sm.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { Avatar } from "@skeletonlabs/skeleton";
+
+  const fallbackThumbnail = "/Image_not_available.png";
+
+  function handleImageError(event) {
+    event.target.src = fallbackThumbnail;
+  }
+
+  export let data, avatars;
+
+  const avatar = avatars[data.author.username];
+</script>
+
+<a href={data.url} class="card variant-glass-surface card-hover overflow-hidden flex flex-col w-64">
+  <img
+    src={data.thumbnail || fallbackThumbnail}
+    class="bg-black/50 aspect-[21/9] object-cover"
+    alt={data.name}
+    loading="lazy"
+    on:error={handleImageError}
+  />
+
+  <div class="p-3 space-y-2 flex-auto">
+    <h3 class="text-lg font-bold truncate">{data.name}</h3>
+    <p class="text-sm line-clamp-2">{data.description}</p>
+  </div>
+
+  <hr class="opacity-50 mx-3" />
+
+  <footer class="p-3 flex items-center space-x-3 text-xs">
+    <Avatar src={avatar || fallbackAvatar} width="w-6" />
+    <div class="flex-auto truncate">
+      <h6 class="font-semibold">By {data.author.username}</h6>
+      <small class="opacity-75">Updated {data.date}</small>
+    </div>
+  </footer>
+</a>

src/lib/components/pages/Small.svelte

@@ -1,5 +1,48 @@
 <script>
-  
+  import MdiGithub from "~icons/mdi/github";
+  import MdiYoutube from "~icons/mdi/youtube";
+  import MdiDiscord from "~icons/mdi/discord";
+  import MdiLinkedin from "~icons/mdi/linkedin";
+  import CibGitea from "~icons/cib/gitea";
+
+  import Header from "../cards/Header.svelte";
+  import Projects from "../containers/Projects.svelte";
+  import TechStack from "../containers/TechStack.svelte";
+
+  import techs from "$lib/data/techstack.json";
+
+  export let data;
+
+  const brands = [
+    { url: "https://www.github.com/BackwardsUser", icon: MdiGithub },
+    { url: "https://www.youtube.com/@BackwardsDevelopment", icon: MdiYoutube },
+    { url: "https://discord.gg/Zhq9yjhHKr", icon: MdiDiscord },
+    {
+      url: "https://www.linkedin.com/in/alexander-harding-71b661265/",
+      icon: MdiLinkedin,
+    },
+    { url: "https://git.backwards.dev/", icon: CibGitea },
+  ];
 </script>
 
-<h1>Not Implemented.</h1>
+<Header {brands} />
+
+<!-- <div class="main flex flex-col gap-8">
+  <div class="section">
+    <Header {brands} />
+  </div>
+  <div class="section bg-surface-800 py-4 rounded-2xl flex flex-col">
+    <TechStack {techs} />
+  </div>
+  <div class="section bg-surface-800 py-4 rounded-2xl">
+    <Projects {data} />
+  </div>
+</div> -->
+
+<style>
+  .section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/routes/+page.svelte

@@ -21,8 +21,8 @@
 
 <div id="page-wrapper">
   {#if width >= 768}
-    <Large {data}/>
+    <Large {data} />
   {:else}
-    <Small />
+    <Small {data} />
   {/if}
 </div>