From 4b529f6f5be92b1fa7645dbe61cdf6ce1f500f96 Mon Sep 17 00:00:00 2001
From: BackwardsUser <alexander@backwards.dev>
Date: Tue, 4 Mar 2025 22:01:38 -0500
Subject: [PATCH] Everything went dark... idk what happened

---
 package-lock.json                            | 127 +++++++++++++++++++
 package.json                                 |   2 +
 src/app.css                                  |  21 ---
 src/lib/components/cards/Header.svelte       |  27 ++++
 src/lib/components/containers/Contact.svelte |  38 ++++++
 src/lib/components/items/LargeCard.svelte    |  42 ++++++
 src/lib/components/items/SmallCard.svelte    |  11 ++
 src/lib/components/pages/Large.svelte        | 113 +++++++++++++++++
 src/lib/components/pages/Small.svelte        |   5 +
 src/routes/+page.server.js                   |  16 +++
 src/routes/+page.svelte                      |  70 +++-------
 11 files changed, 402 insertions(+), 70 deletions(-)
 create mode 100644 src/lib/components/cards/Header.svelte
 create mode 100644 src/lib/components/containers/Contact.svelte
 create mode 100644 src/lib/components/items/LargeCard.svelte
 create mode 100644 src/lib/components/items/SmallCard.svelte
 create mode 100644 src/lib/components/pages/Large.svelte
 create mode 100644 src/lib/components/pages/Small.svelte
 create mode 100644 src/routes/+page.server.js

diff --git a/package-lock.json b/package-lock.json
index 06a6d6c..5835bfc 100644
--- 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",
diff --git a/package.json b/package.json
index f325819..255ad2e 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/app.css b/src/app.css
index 4c59189..f0efb4b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,24 +2,3 @@
 @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;
-} */
\ No newline at end of file
diff --git a/src/lib/components/cards/Header.svelte b/src/lib/components/cards/Header.svelte
new file mode 100644
index 0000000..846ce8a
--- /dev/null
+++ 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">
+    <h1 id="title" class="h1 fixed">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>
\ No newline at end of file
diff --git a/src/lib/components/containers/Contact.svelte b/src/lib/components/containers/Contact.svelte
new file mode 100644
index 0000000..c7ad70e
--- /dev/null
+++ b/src/lib/components/containers/Contact.svelte
@@ -0,0 +1,38 @@
+<script>
+  import MaterialSymbolsPerson from '~icons/material-symbols/person';
+  import MaterialSymbolsMail from '~icons/material-symbols/mail';
+</script>
+
+
+<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>
+    <div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
+      <div class="input-group-shim"><MaterialSymbolsPerson /></div>
+      <input type="text" placeholder="John Doe" required />
+    </div>
+    <p>Email</p>
+    <div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
+      <div class="input-group-shim"><MaterialSymbolsMail /></div>
+      <input type="email" placeholder="john@example.com" required />
+    </div>
+    <p>Subject</p>
+    <div class="input-group input-group-divider grid-cols-[auto_1fr_auto] mb-4">
+      <div class="input-group-shim"><MaterialSymbolsMail /></div>
+      <select class="select" required>
+        <option value="other" disabled selected hidden>Choose Subject</option>
+        <option value="request">Work Request</option>
+        <option value="upload">Upload Request</option>
+        <option value="support">Support Request</option>
+        <option value="other">Other</option>
+      </select>
+    </div>
+    <p>Your Message</p>
+    <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>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/items/LargeCard.svelte b/src/lib/components/items/LargeCard.svelte
new file mode 100644
index 0000000..3c3b2a6
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/lib/components/items/SmallCard.svelte b/src/lib/components/items/SmallCard.svelte
new file mode 100644
index 0000000..8d7f041
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/lib/components/pages/Large.svelte b/src/lib/components/pages/Large.svelte
new file mode 100644
index 0000000..d7eb2c1
--- /dev/null
+++ 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 = 100;
+
+  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>
diff --git a/src/lib/components/pages/Small.svelte b/src/lib/components/pages/Small.svelte
new file mode 100644
index 0000000..65501fb
--- /dev/null
+++ b/src/lib/components/pages/Small.svelte
@@ -0,0 +1,5 @@
+<script>
+  
+</script>
+
+<h1>Not Implemented.</h1>
\ No newline at end of file
diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
new file mode 100644
index 0000000..d8bd70b
--- /dev/null
+++ 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`
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2e0f079..9858a4b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,56 +1,28 @@
 <script>
+  import { onMount } from "svelte";
+  import Large from "$lib/components/pages/Large.svelte";
+  import Small from "$lib/components/pages/Small.svelte";
 
-  import BrandIcon from "$lib/components/items/BrandIcon.svelte";
+  export let data;
 
-  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';
+  let width = 0;
 
-  const brands = [
-    { url: "https://www.github.com/BackwardsUser", icon: CibGitea },
-    { 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 },
-  ]
+  onMount(() => {
+    const updateWidth = () => {
+      width = window.innerWidth;
+    };
 
+    updateWidth(); // Set initial width
+    window.addEventListener("resize", updateWidth);
+
+    return () => window.removeEventListener("resize", updateWidth);
+  });
 </script>
-<main class="grid wrapper justify-center items-center">
-  <div class="left w-full h-2/3 bg-surface-500 text-center">
-    <h4 class="h4">Tools</h4>
-  </div>
-  <div class="header-wrapper">
-    <header class="w-full h-screen flex flex-col justify-center items-center">
-      <h1 class="h1">Alexander Harding</h1>
-      <h4 class="h4">Software and Application Developer</h4>
-      <div class="cards flex justify-between">
-        {#each brands as brand}
-          <BrandIcon url={brand.url} icon={brand.icon} />
-        {/each}
-      </div>
-    </header>
-  </div>
-  <div class="right w-full h-2/3 bg-surface-500 text-center">
-    <h4 class="h4">Downloads</h4>
-  </div>
-  <div class="main">
-    <div class="projects"></div>
-    <div class="contact"></div>
-  </div>
-</main>
 
-<style>
-  .wrapper {
-    grid-template-columns: 0.5fr 2fr 0.5fr;
-  }
-
-  .left {
-    border-radius: 0 0.5em 0.5em 0;
-  }
-
-  .right {
-    border-radius: 0.5em 0 0 0.5em;
-  }
-</style>
\ No newline at end of file
+<div id="page-wrapper">
+  {#if width >= 768}
+    <Large {data}/>
+  {:else}
+    <Small />
+  {/if}
+</div>