Merge branch 'simple-test' into prod

2025-03-05 01:57:14 -05:00 · 2025-03-05 01:57:14 -05:00 · 1f6f26f5a4
commit 1f6f26f5a4
parent fd2e34c351 5efefe7751
22 changed files with 491 additions and 326 deletions
--- a/README.md
+++ b/README.md
@ -1,38 +0,0 @@
-# sv
-
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/package-lock.json
+++ b/package-lock.json
@ -27,6 +27,8 @@
 				"@sveltejs/vite-plugin-svelte": "^4.0.4",
 				"@tailwindcss/forms": "^0.5.10",
 				"autoprefixer": "^10.4.20",
+				"axios": "^1.8.1",
+				"dylan-ipsum": "^1.1.0",
 				"eslint": "^9.7.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.36.0",
@ -1655,6 +1657,13 @@
 			"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
 			"license": "MIT"
 		},
+		"node_modules/asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.20",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@ -1693,6 +1702,18 @@
 				"postcss": "^8.1.0"
 			}
 		},
+		"node_modules/axios": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.8.1.tgz",
+			"integrity": "sha512-NN+fvwH/kV01dYUQ3PTOZns4LWtWhOFCAhQ/pHb88WQ1hNe5V/dvFwc4VJcDL11LT9xSX0QtsR8sWUuyOuOq7g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"follow-redirects": "^1.15.6",
+				"form-data": "^4.0.0",
+				"proxy-from-env": "^1.1.0"
+			}
+		},
 		"node_modules/axobject-query": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@ -1983,6 +2004,19 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"delayed-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/commander": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -2159,6 +2193,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/depd": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@ -2213,6 +2257,13 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/dylan-ipsum": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/dylan-ipsum/-/dylan-ipsum-1.1.0.tgz",
+			"integrity": "sha512-L/U6bSf63eovEtddaJTRyuG42/1Nq5R7blYOyoAD8NXPw+EimuynIL9Sgh7F1msVwlmvCAFdpeh6wXjJuQg76A==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/eastasianwidth": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@ -2279,6 +2330,22 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/es-set-tostringtag": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+			"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@ -2826,6 +2893,27 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/follow-redirects": {
+			"version": "1.15.9",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+			"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/foreground-child": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@ -2843,6 +2931,22 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/form-data": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+			"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"es-set-tostringtag": "^2.1.0",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/forwarded": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@ -3057,6 +3161,22 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+			"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-symbols": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/hasown": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@ -4258,6 +4378,13 @@
 				"node": ">= 0.10"
 			}
 		},
+		"node_modules/proxy-from-env": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"format": "prettier --write .",
@ -26,6 +26,8 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.4",
 		"@tailwindcss/forms": "^0.5.10",
 		"autoprefixer": "^10.4.20",
+		"axios": "^1.8.1",
+		"dylan-ipsum": "^1.1.0",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
--- a/src/app.css
+++ b/src/app.css
@ -1,24 +1,4 @@
+/* Test */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
-/* @font-face {
-  font-family: 'Nunita';
-  src: url('$lib/assets/fonts/Nunito-VariableFont_wght.ttf');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('$lib/assets/fonts/Roboto-VariableFont_wdth,wght.ttf');
-}
-
-:root {
-  --theme-font-family-base: 'Roboto', serif;
-  --theme-font-family-heading: 'Roboto', serif;
-}
-
-:root body[data-theme='modern'],
-:root body[data-theme='gold-nouveau'] {
-  --theme-font-family-base: 'Nunita', serif;
-  --theme-font-family-heading: 'Nunita', serif;
-} */
+@import 'tailwindcss/utilities';
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@ -1,44 +0,0 @@
-<script>
-  import Hero from "$lib/components/Hero.svelte";
-  import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
-  import { crossfade, fade, fly } from "svelte/transition";
-  import { onMount } from "svelte";
-  
-  let isAtTop = true;
-  
-  onMount(() => {
-    const handleScroll = () => {
-      isAtTop = window.scrollY === 0;
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  });
-</script>
-
-<!-- Add these classes to your root container (likely in app.html or layout.svelte) -->
-<style>
-  :global(html) {
-    scroll-snap-type: y mandatory;
-    scroll-behavior: smooth;
-  }
-</style>
-
-<!-- Add scroll-snap-align to your sections -->
-<header class="fancy-background align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
-  <div class=""></div>
-  <Hero></Hero>
-  <div 
-    class="transition-all duration-300 text-xl self-center ease-in-out relative slide h-6"
-    class:opacity-0={!isAtTop}
-  >
-    {#if isAtTop}
-      <div
-        class="animate-bounce"
-        in:fly={{ x: 200, duration: 300 }}
-        out:fly={{ x: -200, duration: 300 }}
-      >
-        <ArrowDown></ArrowDown>
-      </div>
-    {/if}
-  </div>
-</header>
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@ -1,38 +0,0 @@
-<script>
-  import BackwardsLogo from "$lib/assets/Backwards.png";
-
-  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';
-
-</script>
-
-<div class="text-center h-max self-center" id="hero">
-  <h1 class="h1">Backwards Development</h1>
-  <h4 class="h4">A Software Development and Distribution Company</h4>
-  <div class="flex justify-evenly pt-4">
-    <a href="https://github.com/BackwardsUser/" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
-      <span class="block spinner duration-500"><MdiGithub /></span>
-    </a>
-    <a href="https://git.backwards.dev/" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
-      <span class="block spinner duration-500"><CibGitea /></span>
-    </a>
-    <a href="https://www.linkedin.com/in/alexander-harding-71b661265/" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
-      <span class="block spinner duration-500"><MdiLinkedin /></span>
-    </a>
-    <a href="https://www.youtube.com/@BackwardsDevelopment" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
-      <span class="block spinner duration-500"><MdiYoutube /></span>
-    </a>
-    <a href="https://discord.gg/Zhq9yjhHKr" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
-      <span class="block spinner duration-500"><MdiDiscord /></span>
-    </a>
-  </div>
-</div>
-
-<style>
-  .spin:hover>.spinner {
-    transform: rotateZ(360deg);
-  }
-</style>
--- a/src/lib/components/Media.svelte
+++ b/src/lib/components/Media.svelte
@ -1,29 +0,0 @@
-<script>
-  import MaterialSymbolsArrowForwardRounded from "~icons/material-symbols/arrow-forward-rounded";
-  import MaterialSymbolsLabProfileOutline from '~icons/material-symbols/lab-profile-outline';
-
-  let mediaPageOnline = false;
-
-</script>
-
-<div class="w-screen h-screen flex flex-col justify-center items-center">
-  <h2 class="h2 font-bold">Backwards Media</h2>
-  <h3 class="h3">Upload and Share Media with your Friends</h3>
-  <div class="flex flex-row controls pt-4 gap-12">
-    <a href={mediaPageOnline ? "https://media.backwards.dev/" : ""} class="btn variant-filled-primary cool-hover opacity-50 cursor-not-allowed">
-      <span>Try it out</span>
-      <span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsArrowForwardRounded /></span>
-    </a>
-    <a href="/about#media" class="btn variant-ghost-surface cool-hover">
-      <span>Learn more</span>
-      <span class="effect duration-500 ease-in-out rounded-xl"><MaterialSymbolsLabProfileOutline /></span>
-    </a>
-  </div>
-</div>
-
-<style>
-  /* dumb ass name :(, cool ass animation :) */
-  .cool-hover:hover>.effect {
-    transform: rotateZ(360deg);
-  }
-</style>
--- a/src/lib/components/Projects.svelte
+++ b/src/lib/components/Projects.svelte
@ -1,50 +0,0 @@
-<script>
-  import { Avatar } from "@skeletonlabs/skeleton";
-  import projects from "$lib/data/projects.json";
-  import { onMount } from "svelte";
-
-  const fallbackThumbnail = "/Image_not_available.png"; // Set a valid default image path
-
-  function handleImageError(event, type) {
-    if (type === "thumbnail") {
-      event.target.src = fallbackThumbnail;
-    }
-  }
-</script>
-
-
-<div class="min-h-screen">
-  <h2 class="h2 text-center w-screen pt-4">Projects</h2>
-  <div class="flex gap-4 p-4 w-max m-auto">
-    {#each projects as project}
-      <a href={project.url} class="card w-min variant-glass-surface card-hover overflow-hidden flex flex-col">
-        <header>
-          <img
-          src={project.thumbnail || fallbackThumbnail}
-          class="bg-black/50 aspect=[21/9] object-cover flex justify-center items-center"
-          alt={project.name}
-          loading="lazy"
-          on:error={handleImageError}>
-        </header>
-        <div class="p-4 space-y-4 flex-auto">
-          <h3 class="h3" data-toc-ignore>{project.name}</h3>
-          <article>
-            <p>
-              {project.description}
-            </p>
-          </article>
-        </div>
-        <hr class="opacity-50" />
-        <footer class="p-4 flex text-nowrap justify-start items-center space-x-4">
-          <Avatar src={project.author.icon || fallbackAvatar} width="w-8" />
-          <div class="flex-auto gap-6 flex justify-between items-center">
-            <h6 class="font-bold" data-toc-ignore>
-              By {project.author.username}
-            </h6>
-            <small>Updated {project.date}</small>
-          </div>
-        </footer>
-      </a>
-    {/each}
-  </div>
-</div>
--- a/src/lib/components/TechStack.svelte
+++ b/src/lib/components/TechStack.svelte
@ -1,18 +0,0 @@
-<script>
-  import Techs from '$lib/data/techstack.json';
-  import { Avatar } from '@skeletonlabs/skeleton';
-</script>
-
-<div class="w-screen h-screen flex flex-col justify-center items-center">
-  <h2 class="h2 font-bold pb-0">Our Preferred Tech Stack</h2>
-  <span class="text-sm pt-0 pb-4 text-surface-200">Subject to change</span>
-  <div class="w-1/2 flex flex-wrap gap-4 justify-center">
-    {#each Techs as tech}
-      <a href={tech.url} class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 hover:bg-surface-700 rounded-lg">
-        <Avatar class="p-2" src={tech.logo} alt={`Logo of ${tech.name}`} />
-        <span class="text-xl">{tech.name}</span>
-        <div class="spacer"></div>
-      </a>
-    {/each}
-  </div>
-</div>
--- a/src/lib/components/cards/Header.svelte
+++ b/src/lib/components/cards/Header.svelte
@ -0,0 +1,27 @@
+<script>
+  import BrandIcon from "$lib/components/items/BrandIcon.svelte";
+
+  export let brands;
+</script>
+
+<header class="w-full h-screen flex flex-col justify-center items-center">
+  <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}
+        <BrandIcon url={brand.url} icon={brand.icon} />
+      {/each}
+    </div>
+  </div>
+</header>
+
+<style>
+  .header-wrapper {
+    position: relative;
+  }
+
+  #title.fixed {
+    transform: translateY(-100%) translateX(-0.75em);
+  }
+</style>
--- a/src/lib/components/containers/Contact.svelte
+++ b/src/lib/components/containers/Contact.svelte
@ -3,8 +3,9 @@
  import MaterialSymbolsMail from '~icons/material-symbols/mail';
 </script>

-<div class="w-screen h-screen flex justify-center items-center">
-  <form action="?/contact" class="dark:bg-surface-900 bg-surface-200 w-1/2 min-h-max p-8 rounded-md">
+
+<div class="flex justify-center items-center">
+  <form action="?/contact" class="w-full min-h-full dark:bg-surface-700 bg-surface-200 p-8 m-4 rounded-lg pr-12">
    <h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1>
    <hr class="opacity-25" />
    <p class="pt-4">Fullname</p>
@ -29,7 +30,7 @@
      </select>
    </div>
    <p>Your Message</p>
-    <textarea class="textarea mb-4" rows="4" placeholder="What can we help you with?" required ></textarea>
+    <textarea class="textarea mb-4" rows="4" placeholder="..." required ></textarea>
    <div class="w-full text-end">
      <button type="submit" class="btn variant-filled-primary">Submit</button>
    </div>
--- a/src/lib/components/containers/Projects.svelte
+++ b/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>
--- a/src/lib/components/containers/TechStack.svelte
+++ b/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>
--- a/src/lib/components/items/BrandIcon.svelte
+++ b/src/lib/components/items/BrandIcon.svelte
@ -0,0 +1,7 @@
+<script>
+  export let url, icon;
+</script>
+
+<a href={url} class="btn variant-filled-surface text-2xl p-3 rounded-md spin">
+  <span class="block spinner duration-500"><svelte:component this={icon}></svelte:component></span>
+</a>
--- a/src/lib/components/items/LargeCard-sm.svelte
+++ b/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>
--- a/src/lib/components/items/LargeCard.svelte
+++ b/src/lib/components/items/LargeCard.svelte
@ -0,0 +1,42 @@
+<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 w-min variant-glass-surface card-hover overflow-hidden flex flex-col">
+  <header>
+    <img
+    src={data.thumbnail || fallbackThumbnail}
+    class="bg-black/50 aspect=[21/9] object-cover flex justify-center items-center"
+    alt={data.name}
+    loading="lazy"
+    on:error={handleImageError}>
+  </header>
+  <div class="p-4 space-y-4 flex-auto">
+    <h3 class="h3" data-toc-ignore>{data.name}</h3>
+    <article>
+      <p>
+        {data.description}
+      </p>
+    </article>
+  </div>
+  <hr class="opacity-50" />
+  <footer class="p-4 flex text-nowrap justify-start items-center space-x-4">
+    <Avatar src={avatar || fallbackAvatar} width="w-8" />
+    <div class="flex-auto gap-6 flex justify-between items-center">
+      <h6 class="font-bold" data-toc-ignore>
+        By {data.author.username}
+      </h6>
+      <small>Updated {data.date}</small>
+    </div>
+  </footer>
+</a>
--- a/src/lib/components/items/SmallCard.svelte
+++ b/src/lib/components/items/SmallCard.svelte
@ -0,0 +1,11 @@
+<script>
+  import { Avatar } from "@skeletonlabs/skeleton";
+
+  export let data;
+</script>
+
+<a href="{data.url}" class="m-4 flex flex-row justify-between items-center card card-hover p-4 dark:hover:bg-surface-700 hover:bg-surface-200 rounded-lg">
+  <Avatar class="p-2" src={data.logo} alt={`Logo of ${data.name}`} />
+  <span class="text-xl">{data.name}</span>
+  <div class="spacer"></div>
+</a>
--- a/src/lib/components/pages/Large.svelte
+++ b/src/lib/components/pages/Large.svelte
@ -0,0 +1,113 @@
+<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 MaterialSymbolsPerson from '~icons/material-symbols/person';
+  import MaterialSymbolsMail from '~icons/material-symbols/mail';
+
+
+  import Header from "$lib/components/cards/Header.svelte";
+  import SmallCard from "../items/SmallCard.svelte";
+
+  import techs from "$lib/data/techstack.json";
+  import projects from "$lib/data/projects.json";
+
+  import { onMount } from "svelte";
+  import DylanIpsum from "dylan-ipsum";
+  import LargeCard from "../items/LargeCard.svelte";
+  import Contact from "../containers/Contact.svelte";
+
+  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 },
+  ];
+
+  const downloads = [];
+
+  let End = 300;
+  let rightStart = 0;
+
+  function setSidebars() {
+    let rPos = Math.min(window.scrollY / End, 1);
+    let lPos = Math.min(Math.max((window.scrollY - rightStart) / End, 0), 1);
+    document.getElementById("left").style =
+      `transform: translateX(${(lPos - 1) * 100}%);`;
+    document.getElementById("right").style =
+      `transform: translateX(${Math.abs(rPos - 1) * 100}%);`;
+  }
+
+  const avatars = data.avatars;
+
+  onMount(() => {
+    setSidebars();
+    window.addEventListener("scroll", setSidebars);
+  });
+</script>
+
+<div id="main" class="w-screen grid">
+  <div id="left" class="sidebar h-screen bg-surface-200 dark:bg-surface-500 text-center">
+    <h4 class="h4">My Tech Stack</h4>
+    <div class="cards">
+      {#each techs as tech}
+        <SmallCard data={tech} />
+      {/each}
+    </div>
+  </div>
+
+  <div id="content">
+    <Header {brands}></Header>
+    <div id="projects" class="flex py-8 m-4 flex-col justify-center items-center bg-surface-200 dark:bg-surface-500 rounded-lg">
+      <h1 class="h1 pb-8">Projects</h1>
+      <div class="flex flex-shrink-0 flex-wrap justify-center gap-4">
+        {#each projects as project}
+          <LargeCard data={project} {avatars} />
+        {/each}
+      </div>
+    </div>
+    <div id="contact">
+      <Contact />
+    </div>
+  </div>
+
+  <div id="right" class="sidebar h-screen bg-surface-200 dark:bg-surface-500 text-center">
+    <h4 class="h4">Downloads</h4>
+    {#if downloads.length > 0}
+      {#each downloads as download}
+        <p class="pt-4">-- Not Implemented --</p>
+      {/each}
+    {:else}
+      <p class="pt-4">-- No files uploaded --</p>
+    {/if}
+  </div>
+</div>
+
+<style>
+  #main {
+    contain: paint;
+    grid-template-columns: 20% 60% 20%;
+    position: relative;
+  }
+
+  #left {
+    border-radius: 0 0.5em 0.5em 0;
+    transform: translateX(-100%);
+  }
+
+  #right {
+    border-radius: 0.5em 0 0 0.5em;
+    transform: translateX(100%);
+  }
+
+  .sidebar {
+    position: sticky;
+    top: 0;
+    right: 0;
+  }
+</style>
--- a/src/lib/components/pages/Small.svelte
+++ b/src/lib/components/pages/Small.svelte
@ -0,0 +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>
+
+<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>
--- a/src/routes/+page.server.js
+++ b/src/routes/+page.server.js
@ -0,0 +1,16 @@
+import axios from "axios"
+import { DISCORD_TOKEN } from "$env/static/private"
+
+export const load = async () => {
+  let content = await axios.get("https://discord.com/api/v9/users/@me", {
+    headers: {
+      "Authorization": DISCORD_TOKEN
+    }
+  });
+  
+  return {
+    avatars: {
+      "BackwardsUser": `https://cdn.discordapp.com/avatars/${content.data.id}/${content.data.avatar}.png?size=64`
+    }
+  }
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,92 +1,28 @@
 <script>
  import { onMount } from "svelte";
-  import Header from "$lib/components/Header.svelte";
-  import { fly } from "svelte/transition";
-  import Media from "$lib/components/Media.svelte";
-  import Contact from "$lib/components/Contact.svelte";
-  import TechStack from "$lib/components/TechStack.svelte";
-  import Projects from "$lib/components/Projects.svelte";
+  import Large from "$lib/components/pages/Large.svelte";
+  import Small from "$lib/components/pages/Small.svelte";

-  /* IMPORTANT */
-  // Anything added into the page directly will likely break the page's scrolling behaviour
-  // To properly add something to the main page, make it into a component and add it to the array.
-  // This array is in order of how they are to be displayed, modifying their positions will modify them in page.
+  export let data;

-  let slides = [
-    Header,
-    Projects,
-    TechStack,
-    Contact,
-    // Media,
-  ];
+  let width = 0;

+  onMount(() => {
+    const updateWidth = () => {
+      width = window.innerWidth;
+    };

-  let currentSection = 0;
+    updateWidth(); // Set initial width
+    window.addEventListener("resize", updateWidth);

-  // Update the current section based on scroll position
-  const handleScroll = () => {
-    const sections = document.querySelectorAll(".section");
-    const scrollTop = document.querySelector(".scroll-container").scrollTop;
-    sections.forEach((section, index) => {
-      if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
-        currentSection = index;
-      }
-    });
-  };
+    return () => window.removeEventListener("resize", updateWidth);
+  });
 </script>

-<div id="main" class="scroll-container" on:scroll={handleScroll}>
-  {#each slides as content}
-    <section class="section">
-      <svelte:component this={content} />
-    </section>
-  {/each}
+<div id="page-wrapper">
+  {#if width >= 768}
+    <Large {data} />
+  {:else}
+    <Small {data} />
+  {/if}
 </div>
-
-<!-- Tracker -->
-{#if currentSection > 0}
-  <div in:fly={{ x: 50, duration: 300 }} out:fly={{ x: 50, duration: 300 }} class="tracker">
-    {#each slides.slice(1) as _, i}
-      <div class="tracker-dot {i + 1 === currentSection ? 'active' : ''}"></div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .scroll-container {
-    scroll-snap-type: y mandatory;
-    overflow-y: auto;
-    height: 100vh;
-    width: 100vw;
-    scroll-behavior: smooth;
-  }
-
-  .section {
-    scroll-snap-align: start;
-    min-height: 100vh; /* Full viewport height */
-    width: 100vw;
-  }
-
-  /* Tracker Styles */
-  .tracker {
-    position: fixed;
-    top: 50%;
-    right: 20px;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .tracker-dot {
-    width: 10px;
-    height: 10px;
-    @apply bg-surface-600;
-    border-radius: 50%;
-    transition: background-color 0.3s ease;
-  }
-
-  .tracker-dot.active {
-    @apply bg-primary-600;
-  }
-</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -9,5 +9,8 @@ export default defineConfig({
 			compiler: 'svelte',
 			autoInstall: true
 		})
-	]
+	],
+	build: {
+		outDir: '../../build'
+	}
 });