i cant be bothered to split this up

app.vue

@@ -1,7 +1,3 @@
 <template>
-  <div>
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtPage />
 </template>

assets/css/home.scss

@@ -0,0 +1,157 @@
+#home {
+  header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1rem 0;
+
+    section {
+      display: flex;
+      flex-direction: column;
+
+      h1 {
+        font-family: var(--slab);
+        font-size: 4rem;
+        border-left: 10px solid var(--main);
+        padding-left: 1rem;
+      }
+
+      span {
+        color: var(--gray);
+        font-family: var(--sans);
+        font-weight: normal;
+        font-style: italic;
+        font-size: 1.3rem;
+        margin-top: 1rem;
+      }
+    }
+
+    img {
+      width: 20rem;
+      border-radius: 3rem;
+      border: 1px var(--main) solid;
+    }
+  }
+
+  main {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 1rem 0;
+
+    article {
+      width: 60%;
+      padding: 2rem;
+      background-color: var(--black);
+      border: 1px var(--gray) solid;
+      border-radius: 3rem;
+
+      p {
+        font-family: var(--serif);
+        line-height: 1.7;
+        margin: 1rem 0;
+
+        a {
+          border-bottom: 3px solid var(--main);
+        }
+
+        &::first-letter {
+          font-size: 1.4rem;
+          line-height: 1rem;
+        }
+      }
+    }
+
+    nav {
+      width: 30%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-end;
+
+      a {
+        font-family: var(--sans);
+        font-size: 2.5rem;
+        font-family: var(--slab);
+
+        &:first-of-type {
+          margin-bottom: 3rem;
+        }
+
+        &::before {
+          content: '>';
+          color: var(--main);
+          font-family: var(--slab);
+          margin-right: 0.5rem;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    header {
+      align-items: center;
+      flex-direction: column;
+
+      section {
+        margin: 2rem 0;
+        align-items: center;
+
+        h1 {
+          font-size: 3rem;
+          border-left: none;
+          border-bottom: 3px solid var(--main);
+          padding-left: 0;
+        }
+
+        h2 {
+          color: var(--gray);
+          font-family: var(--sans);
+          font-weight: normal;
+          font-size: 1.3rem;
+          margin-bottom: 1rem;
+        }
+      }
+    }
+
+    main {
+      flex-direction: column-reverse;
+      margin: 0;
+
+      article {
+        width: 100%;
+        border-radius: 0;
+        border: none;
+        background-color: transparent;
+
+        p {
+          font-size: 1.1rem;
+        }
+      }
+
+      nav {
+        width: 100%;
+        margin: 3rem 0;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-evenly;
+
+        a {
+          border-bottom: 3px solid var(--main);
+
+          &:first-of-type {
+            margin-bottom: 0rem;
+          }
+
+          &::before {
+            content: '';
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}

assets/css/portfolio.scss

@@ -0,0 +1,44 @@
+#portfolio {
+  header {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: center;
+
+    h1 {
+      font-size: 3rem;
+      border-left: 10px solid var(--main);
+      padding-left: 1rem;
+      font-family: var(--slab);
+    }
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  footer {
+    margin: 2rem 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    a {
+      color: var(--gray);
+      border: none;
+      font-size: 1rem;
+      font-family: var(--sans);
+      cursor: pointer;
+      border: 1px solid var(--gray);
+      border-radius: 1rem;
+      padding: 0.5rem 1rem;
+      transition-duration: 200ms;
+
+      &:hover {
+        border-color: var(--white);
+        color: var(--white);
+      }
+    }
+  }
+}

assets/css/theme.css

@@ -0,0 +1,122 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Noto+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Noto+Serif:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Slab:wght@700&display=swap');
+
+:root {
+  --bg_h: #1d2021;
+  --bg: #282828;
+  --bg_s: #32302f;
+  --bg1: #3c3836;
+  --bg2: #504945;
+  --bg3: #665c54;
+  --bg4: #7c6f64;
+
+  --fg: #fbf1c7;
+  --fg1: #ebdbb2;
+  --fg2: #d5c4a1;
+  --fg3: #bdae93;
+  --fg4: #a89984;
+
+  --red: #fb4934;
+  --green: #b8bb26;
+  --yellow: #fabd2f;
+  --blue: #83a598;
+  --purple: #d3869b;
+  --aqua: #8ec07c;
+  --gray: #928374;
+  --orange: #fe8019;
+
+  --red_dim: #cc2412;
+  --green_dim: #98971a;
+  --yellow_dim: #d79921;
+  --blue_dim: #458588;
+  --purple_dim: #b16286;
+  --aqua_dim: #689d6a;
+  --gray_dim: #a89984;
+  --orange_dim: #d65d0e;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg_h: #f9f5d7;
+    --bg: #fbf1c7;
+    --bg_s: #f2e5bc;
+    --bg1: #ebdbb2;
+    --bg2: #d5c4a1;
+    --bg3: #bdae93;
+    --bg4: #a89984;
+
+    --fg: #282828;
+    --fg1: #3c3836;
+    --fg2: #504945;
+    --fg3: #665c54;
+    --fg4: #7c6f64;
+
+    --red: #9d0006;
+    --green: #79740e;
+    --yellow: #b57614;
+    --blue: #076678;
+    --purple: #8f3f71;
+    --aqua: #427b58;
+    --orange: #af3a03;
+    --gray: #928374;
+
+    --red_dim: #cc2412;
+    --green_dim: #98971a;
+    --yellow_dim: #d79921;
+    --blue_dim: #458598;
+    --purple_dim: #b16286;
+    --aqua_dim: #689d6a;
+    --orange_dim: #d65d0e;
+    --gray_dim: #7c6f64;
+  }
+}
+
+:root {
+  --mono: 'JetBrains Mono', monospace;
+  --sans: 'Noto Sans', sans-serif;
+  --serif: 'Noto Serif', serif;
+  --slab: 'Roboto Slab', serif;
+
+  --black: var(--bg_h);
+  --dark_gray: var(--bg);
+  --light-gray: var(--fg4);
+  --white: var(--fg);
+
+  --main: var(--red_dim);
+  --foreground: var(--white);
+  --background: var(--black);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: var(--white);
+  font-weight: normal;
+}
+
+*::selection {
+  color: var(--white);
+  background-color: var(--main);
+}
+
+html,
+body,
+div#__nuxt {
+  margin: 0 auto;
+
+  min-height: 100%;
+  max-width: 70rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+}
+
+html {
+  background-color: var(--dark_gray);
+}