Initial commit

2023-07-11 02:03:57 -04:00 · 2023-07-11 02:03:57 -04:00 · 9dd00286e9
commit 9dd00286e9
64 changed files with 26733 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,33 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Img
+public/img/*
+!public/img/bucket.svg
+
+# Content
+content/blog/*
+content/projects/*
+!content/blog/.!.template.md
+!content/projects/.!.template.md
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
--- a/README.md
+++ b/README.md
@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
--- a/app.vue
+++ b/app.vue
@ -0,0 +1,29 @@
+<script setup>
+  useHead({
+    htmlAttrs: [
+      { lang: 'en'}
+    ],
+    link: [
+      { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+      { rel: 'icon', sizes: '32x32', href: '/favicon-32x32.png' },
+      { rel: 'icon', sizes: '16x16', href: '/favicon-16x16.png' },
+      { rel: 'manifest', href: '/site.webmanifest' },
+      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#131020' },
+    ],
+    meta: [
+      { name: 'msapplication-TileColor', content: '#131020' },
+      { name: 'theme-color', content: '#ffffff' }
+    ],
+    script: [
+      {  defer: 'true', 'data-domain': 'ryanmoon.com', src: 'https://pa.inspin.co/js/latest.js' }
+    ]
+  })
+</script>
+
+<template>
+  <Header></Header>
+  <main>
+    <NuxtPage/>
+  </main>
+  <Footer></Footer>
+</template>
--- a/assets/fonts/ryanmoon/ryanmoon.eot
+++ b/assets/fonts/ryanmoon/ryanmoon.eot
--- a/assets/fonts/ryanmoon/ryanmoon.svg
+++ b/assets/fonts/ryanmoon/ryanmoon.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="ryanmoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="layers" d="M512 805.632l331.264-165.632-331.264-165.632-331.264 165.632zM492.928 891.478l-426.667-213.333c-21.077-10.539-29.611-36.139-19.072-57.216 4.309-8.661 11.136-15.189 19.072-19.072l426.667-213.333c12.459-6.229 26.453-5.803 38.144 0l426.667 213.333c21.077 10.539 29.611 36.181 19.072 57.259-4.309 8.619-11.179 15.147-19.072 19.072l-426.667 213.333c-12.459 6.229-26.453 5.803-38.144 0zM66.261 175.19l426.667-213.333c12.459-6.229 26.453-5.803 38.144 0l426.667 213.333c21.077 10.539 29.611 36.181 19.072 57.259s-36.181 29.611-57.259 19.072l-407.552-203.819-407.595 203.776c-21.077 10.539-46.72 2.005-57.259-19.072s-2.005-46.72 19.072-57.259zM66.261 388.523l426.667-213.333c12.459-6.229 26.453-5.803 38.144 0l426.667 213.333c21.077 10.539 29.611 36.181 19.072 57.259s-36.181 29.611-57.259 19.072l-407.552-203.819-407.595 203.776c-21.077 10.539-46.72 2.005-57.259-19.072s-2.005-46.72 19.072-57.259z" />
+<glyph unicode="&#xe901;" glyph-name="link" d="M640 597.334h128c47.147 0 89.728-19.072 120.661-50.005s50.005-73.515 50.005-120.661-19.072-89.728-50.005-120.661-73.515-50.005-120.661-50.005h-128c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667h128c70.699 0 134.741 28.715 181.035 74.965s74.965 110.336 74.965 181.035-28.715 134.741-74.965 181.035-110.336 74.965-181.035 74.965h-128c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM384 256h-128c-47.147 0-89.728 19.072-120.661 50.005s-50.005 73.515-50.005 120.661 19.072 89.728 50.005 120.661 73.515 50.005 120.661 50.005h128c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-128c-70.699 0-134.741-28.715-181.035-74.965s-74.965-110.336-74.965-181.035 28.715-134.741 74.965-181.035 110.336-74.965 181.035-74.965h128c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667zM341.333 384h341.333c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-341.333c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667z" />
+<glyph unicode="&#xe902;" glyph-name="zap" d="M494.293 714.24l-24.619-196.949c1.408-30.549 19.84-47.957 42.325-47.957h292.907l-275.2-330.24 24.619 196.949c-1.408 30.549-19.84 47.957-42.325 47.957h-292.907zM521.899 880.64l-426.667-512c-15.104-18.091-12.629-45.013 5.461-60.075 7.979-6.699 17.707-9.941 27.307-9.899h335.659l-36.651-293.376c-2.944-23.381 13.653-44.715 37.035-47.616 14.891-1.877 28.928 4.181 38.059 15.019l426.667 512c15.104 18.091 12.629 45.013-5.461 60.075-7.979 6.699-17.707 9.941-27.307 9.899h-335.659l36.651 293.376c2.944 23.381-13.653 44.715-37.035 47.616-14.891 1.877-28.928-4.181-38.059-15.019z" />
+<glyph unicode="&#xe903;" glyph-name="x" d="M737.833 734.167l-512-512c-7.719-7.721-12.494-18.386-12.494-30.167s4.774-22.446 12.494-30.167v0c7.721-7.719 18.386-12.494 30.167-12.494s22.446 4.774 30.167 12.494l512 512c7.719 7.721 12.494 18.386 12.494 30.167s-4.774 22.446-12.494 30.167v0c-7.721 7.719-18.386 12.494-30.167 12.494s-22.446-4.774-30.167-12.494v0zM256 746.667c-11.781-0.002-22.447-4.778-30.167-12.5v0c-7.719-7.721-12.494-18.386-12.494-30.167s4.774-22.446 12.494-30.167l512-512c7.721-7.719 18.386-12.494 30.167-12.494s22.446 4.774 30.167 12.494v0c7.719 7.721 12.494 18.386 12.494 30.167s-4.774 22.446-12.494 30.167l-512 512c-7.72 7.722-18.385 12.498-30.166 12.5v0z" />
+<glyph unicode="&#xe904;" glyph-name="calendar" d="M298.667 853.334v-42.667h-85.333c-35.328 0-67.413-14.379-90.496-37.504s-37.504-55.168-37.504-90.496v-597.333c0-35.328 14.379-67.413 37.504-90.496s55.168-37.504 90.496-37.504h597.333c35.328 0 67.413 14.379 90.496 37.504s37.504 55.168 37.504 90.496v597.333c0 35.328-14.379 67.413-37.504 90.496s-55.168 37.504-90.496 37.504h-85.333v42.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-42.667h-256v42.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM853.333 554.667h-682.667v128c0 11.776 4.736 22.4 12.501 30.165s18.389 12.501 30.165 12.501h85.333v-42.667c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v42.667h256v-42.667c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v42.667h85.333c11.776 0 22.4-4.736 30.165-12.501s12.501-18.389 12.501-30.165zM170.667 469.334h682.667v-384c0-11.776-4.736-22.4-12.501-30.165s-18.389-12.501-30.165-12.501h-597.333c-11.776 0-22.4 4.736-30.165 12.501s-12.501 18.389-12.501 30.165z" />
+<glyph unicode="&#xe905;" glyph-name="menu" d="M128 320c-23.564 0-42.667-19.103-42.667-42.667v0c0-23.564 19.103-42.667 42.667-42.667v0h768c23.564 0 42.667 19.103 42.667 42.667v0c0 23.564-19.103 42.667-42.667 42.667v0zM128 661.333c-23.564 0-42.667-19.103-42.667-42.667v0c0-23.564 19.103-42.667 42.667-42.667v0h768c23.564 0 42.667 19.103 42.667 42.667v0c0 23.564-19.103 42.667-42.667 42.667v0z" />
+</font></defs></svg>
--- a/assets/fonts/ryanmoon/ryanmoon.ttf
+++ b/assets/fonts/ryanmoon/ryanmoon.ttf
--- a/assets/fonts/ryanmoon/ryanmoon.woff
+++ b/assets/fonts/ryanmoon/ryanmoon.woff
--- a/assets/fonts/ryanmoon/ryanmoon.woff2
+++ b/assets/fonts/ryanmoon/ryanmoon.woff2
--- a/assets/fonts/source-sans-pro/source-sans-pro-400.woff
+++ b/assets/fonts/source-sans-pro/source-sans-pro-400.woff
--- a/assets/fonts/source-sans-pro/source-sans-pro-400.woff2
+++ b/assets/fonts/source-sans-pro/source-sans-pro-400.woff2
--- a/assets/fonts/source-sans-pro/source-sans-pro-600.woff
+++ b/assets/fonts/source-sans-pro/source-sans-pro-600.woff
--- a/assets/fonts/source-sans-pro/source-sans-pro-600.woff2
+++ b/assets/fonts/source-sans-pro/source-sans-pro-600.woff2
--- a/assets/fonts/source-sans-pro/source-sans-pro-700.woff
+++ b/assets/fonts/source-sans-pro/source-sans-pro-700.woff
--- a/assets/fonts/source-sans-pro/source-sans-pro-700.woff2
+++ b/assets/fonts/source-sans-pro/source-sans-pro-700.woff2
--- a/assets/style/_config.scss
+++ b/assets/style/_config.scss
@ -0,0 +1,33 @@
+
+// Font Stack
+$p-font: 'Source Sans Pro', sans-serif;
+$s-font: 'Source Serif Pro', sans-serif;
+
+// Primary Colors
+$b-color: #faf6f1; // background #fafafa
+$s-color: #ff3b2d; // secondary
+$t-color: #5271ff; // trinary
+$h-color: #596170; // hover
+
+$w-color: #ffffff; // white
+$bl-color: #000000; // black
+$error: #d30012; // error
+$hr: #d30012; // hr
+
+$btn-color: #faf1e5; // button
+$btnh-color: #f5ece0; // button hover
+$btns-color: #3182ce; // button secondary
+$btnsh-color: #2b6cb0; // button secondary hover
+$i-color: #faf3ea; // input
+
+// Font Colors
+$f-color: #323b4e; // primary 4a5568 #323b4e
+$fs-color: #4a5568; // secondary 747474
+$ft-color: #2d3748; // trinary
+$link: #3182ce; // link
+
+// Dark Colors
+$bd-color: #101010; // background
+$fd-color: #e9e9e9; // primary
+$hd-color: #bbbbbb; // hover
+$hrd: #ffffff; // hr dark
--- a/assets/style/_fonts.scss
+++ b/assets/style/_fonts.scss
@ -0,0 +1,85 @@
+/* source-sans-pro-regular - latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+    url('/assets/fonts/source-sans-pro/source-sans-pro-400.woff2') format('woff2'),
+    url('/assets/fonts/source-sans-pro/source-sans-pro-400.woff') format('woff');
+}
+
+/* source-sans-pro-600 - latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: local(''),
+    url('/assets/fonts/source-sans-pro/source-sans-pro-600.woff2') format('woff2'),
+    url('/assets/fonts/source-sans-pro/source-sans-pro-600.woff') format('woff');
+}
+
+/* source-sans-pro-700 - latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+    url('/assets/fonts/source-sans-pro/source-sans-pro-700.woff2') format('woff2'),
+    url('/assets/fonts/source-sans-pro/source-sans-pro-700.woff') format('woff');
+}
+
+/* source-serif-pro-regular - latin */
+@font-face {
+  font-family: 'Source Serif Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+    url('/assets/fonts/source-serif-pro/source-serif-pro-400.woff2') format('woff2'),
+    url('/assets/fonts/source-serif-pro/source-serif-pro-400.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'ryanmoon';
+  src:  url('/assets/fonts/ryanmoon/ryanmoon.eot?p6u3nb');
+  src:  url('/assets/fonts/ryanmoon/ryanmoon.eot?p6u3nb#iefix') format('embedded-opentype'),
+    url('/assets/fonts/ryanmoon/ryanmoon.woff2?p6u3nb') format('woff2'),
+    url('/assets/fonts/ryanmoon/ryanmoon.ttf?p6u3nb') format('truetype'),
+    url('/assets/fonts/ryanmoon/ryanmoon.woff?p6u3nb') format('woff'),
+    url('/assets/fonts/ryanmoon/ryanmoon.svg?p6u3nb#ryanmoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'ryanmoon' !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-calendar:before {
+  content: "\e904";
+}
+.icon-layers:before {
+  content: "\e900";
+}
+.icon-link:before {
+  content: "\e901";
+}
+.icon-zap:before {
+  content: "\e902";
+}
+.icon-menu:before {
+  content: "\e905";
+}
+.icon-x:before {
+  content: "\e903";
+}
--- a/assets/style/components/_footer.scss
+++ b/assets/style/components/_footer.scss
@ -0,0 +1,47 @@
+footer {
+  max-width: 42rem;
+  margin: 0 auto;
+  padding: 1.25rem 1rem;
+
+  p,
+  .links h4 {
+    display: inline-block;
+    color: $fs-color;
+    font-family: $p-font;
+    font-size: .875rem;
+    font-weight: 600;
+    text-decoration: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .links {
+    float: right;
+    
+    a {
+      margin-left: 1.5rem;
+      
+      &:hover h4 {
+        text-decoration: underline;
+      }
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  footer {
+    padding: 2rem;
+
+    .links {
+      float: unset;
+
+      a {
+        margin-left: 1rem;
+      }
+    }
+  }
+}
--- a/assets/style/components/_header.scss
+++ b/assets/style/components/_header.scss
@ -0,0 +1,77 @@
+header {
+  background: $b-color;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 2000;
+  
+  .center {
+    max-width: 42rem;
+    height: 70px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  a {
+    display: inline-block;
+    font-family: $p-font;
+    text-decoration: none;
+
+    h1 {
+      color: $f-color;
+      font-size: 1rem;
+      font-weight: 600;
+      margin-top: 8px;
+    }
+  }
+
+  .nav {
+    display: inline-flex;
+    float: right;
+
+    a {
+      color: $fs-color;
+      margin: 0 0 0 24px;
+      
+      h2 {
+        font-size: .925rem;
+        font-weight: 600;
+        margin-top: 8.5px;
+      }
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &:hover {
+        cursor: pointer;
+        color: darken($fs-color, 16%)
+      }
+    }
+
+    .cta {
+      background: $btn-color;
+      width: fit-content;
+      padding: 9px 16px;
+      margin: 0;
+      border-radius: 4px;
+      
+      &:hover {
+        cursor: 'pointer';
+        background: $btnh-color;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  header {
+    max-width: 100vw;
+
+    .center {
+      max-width: 100%;
+      padding: 1rem 2rem;
+    } 
+  }
+}
--- a/assets/style/components/_index.scss
+++ b/assets/style/components/_index.scss
@ -0,0 +1,2 @@
+@import 'header';
+@import 'footer';
--- a/assets/style/main.scss
+++ b/assets/style/main.scss
@ -0,0 +1,51 @@
+@import 'fonts';
+@import 'config';
+
+body {
+    background: $b-color;
+    margin: 0;
+}
+
+main {
+    max-width: 42rem;
+    min-height: calc(100vh - 130px);
+    margin: 70px auto 0 auto;
+}
+
+@media only screen and (max-width: 600px) {
+    main { min-height: calc(100vh - 155px) }
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+*, *:after, *:before { 
+    box-sizing: border-box;
+    
+    &:focus {
+        outline: none;
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+b,
+label {
+    font-family: $p-font;
+    margin: 0;
+    padding: 0;
+}
+
+@import 'components/index';
+@import 'pages/default';
+@import 'pages/index';
+@import 'pages/projects';
+@import 'pages/contact';
+@import 'pages/404';
--- a/assets/style/pages/_404.scss
+++ b/assets/style/pages/_404.scss
@ -0,0 +1,23 @@
+.lost {
+  position: relative;
+  top: calc(50vh - 160px);
+  width: 180px;
+  margin: auto;
+  text-align: center;
+
+  h2 {
+    color: $fs-color;
+    font-size: 1.5rem;
+    font-weight: 700;
+    padding: .25rem 0 .75rem 0;
+  }
+
+  a {
+    color: $link;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
--- a/assets/style/pages/_contact.scss
+++ b/assets/style/pages/_contact.scss
@ -0,0 +1,107 @@
+.contact {
+  padding: 3rem 8.5rem 3rem 1rem;
+
+  form {
+    display: grid;
+    grid-row-gap: 1.25rem;
+    grid-column-gap: 1rem;
+    grid-template-columns: 1fr 1fr;
+    margin: 2rem 0;
+
+    .group {
+      width: 100%;
+      position: relative;
+    }
+
+    label {
+      display: block;
+      text-align: start;
+      font-size: .825rem;
+      margin-inline-end: 12px;
+      margin-bottom: 8px;
+      font-weight: 600;
+      opacity: 1;
+      line-height: 1;
+      margin-left: 4px;
+      text-transform: uppercase;
+
+      span {
+        color: $error;
+        margin: 0 0 0 .25rem;
+      }
+    }
+
+    textarea,
+    select,
+    input {
+      position: relative;
+      width: 100%;
+      min-width: 0px;
+      height: 40px;
+      color: $f-color;
+      background: #faf3ea;
+      outline: 2px solid transparent;
+      font-size: .925rem;
+      font-weight: 400;
+      padding: 0 16px;
+      border-radius: .375rem;
+      border: 1px solid #e6dfd6;
+
+      &:focus {
+        border-color: $btns-color;
+        box-shadow: 0 0 0 1px $btns-color;
+      }
+
+      &::placeholder {
+        font-family: $p-font;
+        font-size: .925rem;
+        opacity: .4;
+      }
+    }
+
+    select {
+      background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
+      background-position: calc(100% - 0.75rem) center;
+      background-color: #faf3ea;
+      appearance: none;
+      padding-right: 2rem;
+    }
+
+    textarea {
+      min-height: 6rem;
+      padding: .5rem 1rem;
+    }
+
+    .message {
+      grid-column: 1/3;
+    }
+    
+    button {
+      height: 2.5rem;
+      width: max-content;
+      white-space: nowrap;
+      align-items: center;
+      vertical-align: middle;
+      color: $w-color;
+      background: $btns-color;
+      font-family: $p-font;
+      font-size: 0.925rem;
+      font-weight: 600;
+      padding: .5rem 1.5rem;
+      border: none;
+      border-radius: .375rem;
+
+      &:hover {
+        background: $btnsh-color;
+        text-decoration: none;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .contact {
+    padding: 3rem 2rem;
+  }
+}
--- a/assets/style/pages/_default.scss
+++ b/assets/style/pages/_default.scss
@ -0,0 +1,101 @@
+.about,
+.blog,
+.donate,
+.contact {
+  max-width: 42rem;
+  margin: 0 auto;
+  padding: 3rem 5rem 3rem 1rem;
+
+  h2 {
+    a {
+      color: $ft-color;
+      text-decoration: none;
+
+      &:hover {
+        cursor: text;
+      }
+    }
+  }
+
+  p {
+    color: $f-color;
+    font-size: 1.125rem;
+    margin: 1rem 0 0;
+    line-height: 1.5;
+
+    a {
+      color: $link;
+      text-decoration: none;
+    }
+  }
+}
+
+.blog .card {
+  display: block;
+  padding: 0 4rem 0 0;
+
+  a {
+    display: inline-block;
+    text-decoration: none;
+    margin: 0 .25rem 0 0;
+
+    p {
+      color: $ft-color;
+      font-size: 1.05rem;
+      font-weight: 600;
+    }
+
+    &:hover { cursor: pointer;
+      p { text-decoration: underline }
+    }
+  }
+
+  .desc {
+    font-size: .925rem;
+  }
+
+  p {
+    font-size: 1rem;
+    color: $fs-color;
+    margin: .1rem 0;
+  }
+
+  hr {
+    height: 1px;
+    margin: 1rem auto;
+    border: none;
+    color: $s-color;
+    background-color: $s-color;
+    opacity: .1;
+  }
+}
+
+.donate {
+
+  .qr {
+    font-size: .9em;
+  }
+  
+  .address {
+    font-size: .8rem;
+    margin: 6px 0 0 0;
+
+    text-overflow: ellipsis;
+    overflow: hidden; 
+    white-space: nowrap;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .about,
+  .blog,
+  .donate,
+  .contact {
+    padding: 3rem 4rem 3rem 2rem;
+  }
+
+  .donate .address {
+    width: calc(100vw - 4rem); 
+  }
+
+}
--- a/assets/style/pages/_index.scss
+++ b/assets/style/pages/_index.scss
@ -0,0 +1,112 @@
+.index {
+  .hero {
+    padding: 2rem 1rem;
+  
+    h1 {
+      color: $ft-color;
+      font-size: 3rem;
+      font-weight: 900;
+      padding: 2.25rem 0 .5rem 0;
+      margin-left: -.1rem;
+    }
+  
+    h2 {
+      color: $fs-color;
+      font-size: 1.25rem;
+      font-weight: 400;
+      line-height: 1.4;
+      padding: .5rem 0;
+    }
+
+    p {
+      display: inline-block;
+      color: $fs-color;
+      margin: 1rem 0;
+    }
+
+    a {
+
+      p {
+        color: $link;
+        margin-left: .5rem;
+      }
+
+      &:hover { cursor: pointer;
+        p { text-decoration: underline }
+      }
+    }
+  }
+
+  .projects {
+    padding: 2rem 1rem;
+
+    h3 {
+      font-size: .875rem;
+      font-weight: 500;
+      color: $s-color;
+      text-transform: uppercase;
+      letter-spacing: .2rem;
+      margin: 0 0 .5rem 0;
+    }
+
+    .card {
+      padding: .75rem 0;
+
+      a {
+        display: inline-block;
+        text-decoration: none;
+  
+        p {
+          color: $ft-color;
+          font-size: 1.15rem;
+          font-weight: 600;
+        }
+  
+        &:hover { cursor: pointer;
+          p { text-decoration: underline }
+        }
+      }
+  
+      p {
+        color: $fs-color;
+        margin: .1rem 0;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .index {
+    .hero {
+      padding: 2rem;
+
+      h1 {
+        font-size: 4rem;
+        line-height: 4.5rem;
+        padding: 0 0 1rem 0;
+        margin-left: -.2rem;
+
+        span {
+          display: none;
+        }
+      }
+
+      h2 {
+        font-size: 1.25rem;
+        padding: 1rem 0;
+      }
+
+      p {
+        font-size: .95rem;
+      }
+    }
+
+    .projects {
+      padding: 2rem;
+
+      p {
+        padding-right: 1rem;
+      }
+    }
+  }
+}
--- a/assets/style/pages/_projects.scss
+++ b/assets/style/pages/_projects.scss
@ -0,0 +1,145 @@
+.project {
+  padding: 0 5rem;
+  line-height: 1.5;
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 6em auto 0 auto;
+  }
+
+  .hero {
+    width: calc(100% + 8em);
+    max-width: none;
+    padding: 2.5rem 0 2rem 0;
+    margin: 0 0 0 -4em;
+  }
+
+  h1 {
+    color: $f-color;
+    font-size: 1.2rem;
+    font-weight: 500;
+    margin: 0 0 .25rem;
+    opacity: .8;
+  }
+
+  h2 {
+    display: block;
+    font-size: 1.75rem;
+    font-weight: 600;
+    line-height: 2rem;
+    padding-right: 12%;
+    margin: 0 0 2rem;
+  }
+
+  hr {
+    height: 1px;
+    margin: 1.5rem auto;
+    border: none;
+    color: $fd-color;
+    background-color: $fd-color;
+  }
+
+  label {
+    position: relative;
+    display: block;
+    font-size: 1rem;
+    color: $f-color;
+    margin: 1rem 0 0 2rem;
+    opacity: .6;
+
+    span {
+      position: absolute;
+      top: 3px;
+      left: -24px;
+      font-size: .95rem;
+    }
+
+    .icon-link {
+      top: 5px;
+      transform: rotate(135deg);
+    }
+  }
+
+  a,
+  p {
+    color: $f-color;
+    font-size: 1.15rem;
+    font-weight: 600;
+    margin: 0 0 0 2rem;
+  }
+  
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+}
+
+.content {
+  padding: 0 5rem 4rem;
+
+  img {
+    width: 100%;
+    max-width: none;
+    margin: 2rem 0 0 0;
+  }
+
+  em {
+    display: block;
+    font-size: 14px;
+    text-align: center;
+    margin: 0 0 2rem 0;
+    opacity: .6;
+  }
+
+  h2 {
+    font-size: 1.35rem;
+    font-weight: 700;
+    letter-spacing: -.3px;
+    line-height: 26px;
+    margin: 40px 0 0;
+    scroll-margin-top: 4.6em;
+
+    a {
+      color: $f-color;
+      text-decoration: none;
+    }
+  }
+
+  p {
+    color: $f-color;
+    font-size: 1.05rem;
+    line-height: 26px;
+    margin-top: 16px;
+  }
+}
+
+#yourgames h2 {
+  padding-right: 24%
+}
+
+@media only screen and (max-width: 600px) {
+  .project {
+    padding: 0 2rem;
+  
+    .hero {
+      width: calc(100% + 2em);
+      margin: 0 0 0 -1em;
+    }
+
+    h2 {
+      font-size: 1.50rem;
+      line-height: 1.85rem;
+      padding-right: 2rem;
+    }
+  }
+
+  .content {
+    padding: 0 2rem 4rem;
+  }
+}
--- a/components/Footer.vue
+++ b/components/Footer.vue
@ -0,0 +1,15 @@
+<script setup>
+  const { isDesktopOrTablet } = useDevice();
+</script>
+
+<template>
+  <footer>
+    <p v-if="isDesktopOrTablet" >Made with blood, sweat, and media queries.</p>
+    <div class="links">
+      <!-- <NuxtLink ><h4>dark</h4></NuxtLink> -->
+      <NuxtLink to="/" target="_BLANK" ><h4>rss</h4></NuxtLink>
+      <NuxtLink to="https://git.inspin.co/ryan" target="_BLANK" ><h4>git</h4></NuxtLink>
+      <NuxtLink to="mailto:hello@ryanmoon.com"><h4>hello@ryanmoon.com</h4></NuxtLink>
+    </div>
+  </footer>
+</template>
--- a/components/Header.vue
+++ b/components/Header.vue
@ -0,0 +1,30 @@
+<script setup>
+  const { isDesktopOrTablet } = useDevice();
+</script>
+
+<template>
+  <header>
+    <div class="center">
+      <NuxtLink to="/"><h1>Ryan Moon</h1></NuxtLink>
+      <div class="nav" >
+        <NuxtLink to="/about"><h2>About</h2></NuxtLink>
+        <!-- <NuxtLink to="/blog"><h2>blog</h2></NuxtLink> -->
+        <NuxtLink to="/donate"><h2>Donate</h2></NuxtLink>
+        <NuxtLink to="/contact" v-if="isDesktopOrTablet" ><h2 class="cta">Get in touch</h2></NuxtLink>
+      </div>
+      
+      <!--
+      <span className="icon-menu" @click="setStatus(true)"></span>
+      <div class="topnav">
+        <div id="myLinks">
+          <span className="icon-x" @click="setStatus(false)"></span>
+          <a href="#news">News</a>
+          <a href="#contact">Contact</a>
+          <a href="#about">About</a>
+        </div>
+      </div>
+      -->
+
+    </div>
+  </header>
+</template>
--- a/components/index/Apps.vue
+++ b/components/index/Apps.vue
@ -0,0 +1,19 @@
+<script setup>
+  const apps = await queryContent('projects')
+    .sort({ priority: 1 })
+    .where({ public: true })
+    .only(['slug', 'project', 'excerpt'])
+    .find()
+</script>
+
+<template>
+  <div class="projects">
+    <h3>Projects</h3>
+    <div class="card" v-for="app in apps" :key="app.slug">
+      <NuxtLink :to="'/projects/' + app.slug" class="title" >
+        <p>{{ app.project }}</p>
+      </NuxtLink>
+      <p class="desc">{{ app.excerpt }}</p>
+    </div>
+  </div>
+</template>
--- a/components/index/Hero.vue
+++ b/components/index/Hero.vue
@ -0,0 +1,14 @@
+<script setup>
+  const { isMobile, isDesktopOrTablet } = useDevice();
+</script>
+
+<template>
+  <div class="hero" >
+    <h1 v-if="isMobile" >Hello, <br/>I&apos;m Ryan</h1>
+    <h1 v-if="isDesktopOrTablet" >Hello, I&apos;m Ryan 👋</h1>
+    <h2 v-if="isMobile" >Software Developer focused on design, implementation, and maintenance of web platforms.</h2>
+    <h2 v-if="isDesktopOrTablet" >Free Software Developer focused on design, <br/>implementation, and maintenance of web platforms.</h2>
+    <p>Have an exciting project?</p>
+    <NuxtLink to="/contact" ><p>Let&apos;s connect</p></NuxtLink>
+  </div>
+</template>
--- a/content/about.md
+++ b/content/about.md
@ -0,0 +1,20 @@
+---
+title: About - Ryan Moon
+slug: donate
+---
+
+## About me.
+
+Hello, nice to meet you. I'm Ryan and this is my webpage.
+
+A little bit about myself. I created my first website in 2017 for playing flash games at school. Since then, I've learned how to develop more intricate websites that include authentication and user functionality.
+
+I believe in the <a href="https://www.gnu.org/philosophy/free-software-intro.en.html" target="_BLANK">free software movement</a> and the source code for my websites are available on my <a href="https://git.inspin.co/ryan" target="_BLANK">gitea</a> instance, using a GPL Licence.
+
+My current development stack consist of Nuxt.js, Directus.io, and PostgreSQL. I also frequently use Ghost.js as a headless CMS for blogging.
+
+<!---
+Take a look at the <a href="/list">software and companies</a> I champion.
+-->
+
+In my free time, I like to read books, fish at the lake, and run long distances.
--- a/content/blog.md
+++ b/content/blog.md
@ -0,0 +1,9 @@
+---
+title: Blog - Ryan Moon
+slug: blog
+page: true
+---
+
+## Blog articles.
+
+A place to discuss privacy, websites, and...
--- a/content/blog/.!.template.md
+++ b/content/blog/.!.template.md
@ -0,0 +1,18 @@
+---
+title: 
+slug: 
+thumbnail: 
+published: MMM D, YYYY
+updated: MMM D, YYYY
+length: 
+tags: 
+excerpt: 
+---
+
+## Table of contents
+
+[](#)
+
+
+## Heading
+
--- a/content/contact.md
+++ b/content/contact.md
@ -0,0 +1,8 @@
+---
+title: Contact - Ryan Moon
+slug: contact
+---
+
+## How can I help?
+
+Please feel free to email me at <a href="hello@ryanmoon.com" >hello@ryanmoon.com</a> or fill out the form below and I will get back to you as soon as possible.
--- a/content/donate.md
+++ b/content/donate.md
@ -0,0 +1,17 @@
+---
+title: Donate - Ryan Moon
+slug: donate
+---
+
+## Donate.
+
+If you would like to support me and the work that I do, you can donate through Bitcoin, Monero, or by sending a gift to my Post Office Box.
+
+Bitcoin (<a class="qr" href="/img/bitcoin.jpg">QR</a>):
+<p class="address">1GCs7LvxUAArBq4kWHKkV4s1zU6YAn5yaA</p>
+
+Monero (<a class="qr" href="/img/monero.jpg">QR</a>):
+<p class="address">44nyPeCjHXZBZqke86pSKvHHCXsSDUG4qDrgkz5XsUg48MUM2NdjKftSMUULcsMZcuWf1FtWR9qhGTrvGFaQ1T7KQWRAUP8</p>
+
+Shipping address:
+<p class="address">PO Box 175 Rexford, NY 12148</p>
--- a/content/projects/.!.template.md
+++ b/content/projects/.!.template.md
@ -0,0 +1,21 @@
+---
+title: 
+slug: 
+icon: 
+thumbnail: 
+published: MMM D, YYYY
+updated: MMM D, YYYY
+excerpt: 
+concept:
+completed: 
+stack: 
+live: 
+domain: 
+url: 
+repo: 
+public: 
+---
+
+## Challenge
+
+## Solution
--- a/error.vue
+++ b/error.vue
@ -0,0 +1,23 @@
+<script setup>
+  useHead({
+    title: '404 - Page not found',
+    meta: [
+      { 
+        name: 'description', 
+        content: `This page does not exist or has been moved.` 
+      },      
+    ],
+  })
+</script>
+
+<template>
+  <Header></Header>
+  <main>
+    <div class="lost">
+      <img alt="404" src="/img/bucket.svg" />
+      <h2>Page not found</h2>
+      <NuxtLink to="/"><p>Go back</p></NuxtLink>
+    </div>
+  </main>
+  <Footer></Footer>
+</template>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -0,0 +1,13 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: false },
+
+  modules: [
+    '@nuxt/content',
+    '@nuxtjs/device',
+  ],
+  
+  css: [
+    "~/assets/style/main.scss",
+  ],
+})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,24 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/content": "^2.7.0",
+    "@nuxt/devtools": "latest",
+    "@nuxtjs/device": "^3.1.0",
+    "@types/node": "^20",
+    "nuxt": "^3.6.2",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2"
+  },
+  "dependencies": {
+    "@nuxtjs/axios": "^5.13.6",
+    "nuxt-mail": "^4.0.1"
+  }
+}
--- a/pages/about.vue
+++ b/pages/about.vue
@ -0,0 +1,3 @@
+<template>
+  <ContentDoc class="about" />
+</template>
--- a/pages/blog/.!.[slug].vue
+++ b/pages/blog/.!.[slug].vue
@ -0,0 +1,15 @@
+<script setup>
+  const { path } = useRoute()
+
+  const { data } = await useAsyncData(`content-${path}`, () => {
+    return queryContent().where({ _path: path }).findOne()
+  })
+</script>
+
+<template>
+  <div class="blog">
+    <h1 class="">{{ data.title }}</h1>
+    <p>{{ data.excerpt }}</p>
+    <ContentDoc class="content" />
+  </div>
+</template>
--- a/pages/blog/.!.index.vue
+++ b/pages/blog/.!.index.vue
@ -0,0 +1,20 @@
+<script setup>
+  const articles = await queryContent('blog')
+    .sort({ id: -1 })
+    .where({ id: { $gt: 0 } })
+    .find()
+</script>
+
+<template>
+  <div class="blog">
+    <ContentDoc />
+    <br/>
+    <div class="card" v-for="article in articles" :id="article.id" :key="article.slug">
+      <NuxtLink :to="'/blog/' + article.slug" class="title" >
+        <p>{{ article.title }}</p>
+      </NuxtLink>
+      <p class="desc">{{ article.published}} - {{ article.length }} min read</p>
+      <hr/>
+    </div>
+  </div>
+</template>
--- a/pages/contact.vue
+++ b/pages/contact.vue
@ -0,0 +1,39 @@
+<template>
+  <div class="contact">
+    <ContentDoc id="content" />
+
+    <form>
+      <div class="group">
+        <label for="name">Name<span aria-hidden="true">*</span></label>
+        <input name="name" id="name" type="text" placeholder="Your name" required="true" />
+      </div>
+
+      <div class="group">
+        <label for="subject">Subject<span aria-hidden="true">*</span></label>
+        <select name="subject" id="subject" >
+          <option value="General" >General</option>
+          <option value="Project Request" >Project Request</option>
+          <option value="Other" >Other</option>
+          <option disabled selected hidden >---</option>
+        </select>
+      </div>
+
+      <div class="group">
+        <label for="company">Company</label>
+        <input name="company" id="company" type="text" placeholder="Your company" required="false" />
+      </div>
+
+      <div class="group">
+        <label for="email">Email<span aria-hidden="true">*</span></label>
+        <input name="email" id="email" type="email" placeholder="Email address" required="true" />
+      </div>
+
+      <div class="group message">
+        <label for="message">Message<span aria-hidden="true">*</span></label>
+        <textarea name="message" id="message" placeholder="Start typing here" required="true" ></textarea>
+      </div>
+
+      <button type="submit" >Submit</button>
+    </form>
+  </div>
+</template>
--- a/pages/donate.vue
+++ b/pages/donate.vue
@ -0,0 +1,3 @@
+<template>
+  <ContentDoc class="donate" />
+</template>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -0,0 +1,18 @@
+<script setup>
+  useHead({
+    title: 'Ryan Moon - Software Developer',
+    meta: [
+      { 
+        name: 'description', 
+        content: `Hello, nice to meet you. I'm Ryan and this is my webpage.` 
+      },      
+    ],
+  })
+</script>
+
+<template>
+  <div class="index">
+    <IndexHero></IndexHero>
+    <IndexApps></IndexApps>
+  </div>
+</template>
--- a/pages/projects/[slug].vue
+++ b/pages/projects/[slug].vue
@ -0,0 +1,37 @@
+<script setup>
+  const { path } = useRoute()
+
+  // https://content.nuxtjs.org/guide/displaying/querying#with-useasyncdata
+  const { data, error } = await useAsyncData(`content-${path}`, () => {
+    return queryContent().where({ _path: path, public: true }).findOne()
+  })
+
+  // https://nuxt.com/docs/api/utils/create-error#createerror
+  if (error.value) {
+    showError(
+      createError({
+        statusCode: 404,
+        statusMessage: 'Not Found',
+      })
+    )
+  }
+</script>
+
+<template>
+  <div class="project" :id="data.slug">
+    <img class="hero" :src="'/img/project/' + data.slug + '/' + data.thumbnail" alt >
+    <h1>{{ data.project }}</h1>
+    <h2>{{ data.concept}}</h2>
+    <hr />
+    <label ><span className="icon-calendar"></span>Year of Completion</label>
+    <p>{{ data.completed}}</p>
+    <label ><span className="icon-layers"></span>Technology Stack</label>
+    <p>{{ data.stack}}</p>
+    <div v-if="data.live">
+      <label ><span className="icon-link"></span>Live Site</label>
+      <NuxtLink :to="data.url" target="_BLANK" >Check out the live product</NuxtLink>
+    </div>
+    <hr />
+  </div>
+  <ContentDoc class="content" />
+</template>
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/browserconfig.xml
+++ b/public/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#131020</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/bucket.svg
+++ b/public/img/bucket.svg
@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<defs>
+  <clipPath id="ldio-vqnbxvtpct-cp">
+    <path d="M57.6,64.3c6.1,5.4,9.9,13.2,9.9,22c0,0.2,0,0.5,0,0.7h44c0-0.2,0-0.5,0-0.7c0-40.3-32.5-73-72.7-73.3v20.1 l9.5,25.6C48.4,58.8,54.9,61.9,57.6,64.3"/>
+  </clipPath>
+</defs>
+<path fill="#e3e3e3" d="M54.6,66c-1.2,0-2.2-0.8-2.5-2c-0.3-1.4,0.6-2.7,2-2.9l0.3-0.1c0.3-0.2,1.3-1.6,1.5-5.8 c0.1-4.4-0.8-9.9-2.5-15.6c-1.7-5.7-4.1-10.8-6.6-14.4c-2.4-3.4-4-4.1-4.4-4l-0.3,0.1c-1.3,0.5-2.7-0.1-3.3-1.3 c-0.5-1.3,0.1-2.7,1.3-3.3l0.5-0.2c0.1,0,0.2-0.1,0.3-0.1c2.2-0.7,5.7-0.2,10,5.9c2.8,4,5.4,9.6,7.3,15.8 c1.9,6.2,2.8,12.3,2.7,17.2c-0.2,7.4-2.9,9.8-5.1,10.4c-0.1,0-0.2,0-0.3,0.1L55.1,66C54.9,66,54.8,66,54.6,66z">
+  <animateTransform attributeName="transform" type="translate" keyTimes="0;0.5;1" values="0,0;0,3;0 0" dur="1s" repeatCount="indefinite"/>
+</path>
+<g id="ldio-vqnbxvtpct-rainbow" clip-path="url(#ldio-vqnbxvtpct-cp)">
+  <path fill="#ff8900" stroke-width="0" d="M 95 85Q 97.45 88.17 97.02 91.32T 93.55 96.97T 89.51 101.88T 89.27 108.24T 88.12 114.77T 82.43 118.16T 76.56 120.63T 73.4 126.15T 69.35 131.4T 62.73 131.75T 56.39 131.22T 51.03 134.64T 45 137.4T 38.97 134.64T 33.61 131.22T 27.27 131.75T 20.65 131.4T 16.6 126.15T 13.44 120.63T 7.57 118.16T 1.88 114.77T 0.73 108.24T 0.49 101.88T -3.55 96.97T -7.02 91.32T -5 85T -2.25 79.26T -3.55 73.03T -3.99 66.42T 0.73 61.76T 5.83 57.96T 7.57 51.84T 10.25 45.78T 16.6 43.85T 22.88 42.85T 27.27 38.25T 32.46 34.12T 38.97 35.36T 45 37.4T 51.03 35.36T 57.54 34.12T 62.73 38.25T 67.12 42.85T 73.4 43.85T 79.75 45.78T 82.43 51.84T 84.17 57.96T 89.27 61.76T 93.99 66.42T 93.55 73.03T 92.25 79.26T 95 85ZM 72.5 85Q 71.81 83.38 71.7 81.76T 71.7 78.42T 71.27 75.04T 69.35 72.22T 67.14 69.72T 65.58 66.76T 63.63 63.97T 60.62 62.37T 57.5 61.18T 54.75 59.29T 51.72 57.72T 48.31 57.7T 45 58.1T 41.69 57.7T 38.28 57.72T 35.25 59.29T 32.5 61.18T 29.38 62.37T 26.37 63.97T 24.42 66.76T 22.86 69.72T 20.65 72.22T 18.73 75.04T 18.3 78.42T 18.3 81.76T 17.5 85T 17.1 88.39T 18.3 91.58T 19.85 94.54T 20.65 97.78T 21.87 100.96T 24.42 103.24T 27.16 105.13T 29.38 107.63T 31.94 109.88T 35.25 110.71T 38.56 111.12T 41.69 112.3T 45 113.1T 48.31 112.3T 51.44 111.12T 54.75 110.71T 58.06 109.88T 60.62 107.63T 62.84 105.13T 65.58 103.24T 68.13 100.96T 69.35 97.78T 70.15 94.54T 71.7 91.58T 72.9 88.39Z">
+    <animateTransform attributeName="transform" type="rotate" values="0 45 85;27.692307692307693 45 85" dur="0.5s" repeatCount="indefinite" keyTimes="0;1"/>
+  </path>
+  <path fill="#ffff56" stroke-width="0" d="M 87.5 85Q 89.93 88.21 89.44 91.39T 85.78 96.97T 81.48 101.66T 80.75 107.98T 78.93 114.4T 72.83 117.12T 66.68 118.73T 62.66 123.66T 57.65 128.08T 51.05 127.07T 45 125.1T 38.95 127.07T 32.35 128.08T 27.34 123.66T 23.32 118.73T 17.17 117.12T 11.07 114.4T 9.25 107.98T 8.52 101.66T 4.22 96.97T 0.56 91.39T 2.5 85T 5.31 79.29T 4.22 73.03T 4.16 66.35T 9.25 62.02T 14.69 58.74T 17.17 52.88T 20.73 47.23T 27.34 46.34T 33.7 46.52T 38.95 42.93T 45 40.1T 51.05 42.93T 56.3 46.52T 62.66 46.34T 69.27 47.23T 72.83 52.88T 75.31 58.74T 80.75 62.02T 85.84 66.35T 85.78 73.03T 84.69 79.29T 87.5 85ZM 72.5 85Q 71.8 83.08 71.63 81.17T 71.39 77.25T 70.56 73.33T 68.13 70.13T 65.33 67.38T 63.01 64.22T 60.19 61.36T 56.42 59.99T 52.58 59.19T 48.91 57.78T 45 56.9T 41.09 57.78T 37.42 59.19T 33.58 59.99T 29.81 61.36T 26.99 64.22T 24.67 67.38T 21.87 70.13T 19.44 73.33T 18.61 77.25T 18.37 81.17T 17.5 85T 17.19 89T 18.61 92.75T 20.53 96.17T 21.87 99.87T 23.76 103.4T 26.99 105.78T 30.46 107.63T 33.58 110.01T 37.08 111.96T 41.09 112.22T 45 111.9T 48.91 112.22T 52.92 111.96T 56.42 110.01T 59.54 107.63T 63.01 105.78T 66.24 103.4T 68.13 99.87T 69.47 96.17T 71.39 92.75T 72.81 89Z">
+    <animateTransform attributeName="transform" type="rotate" values="0 45 85;32.72727272727273 45 85" dur="1s" repeatCount="indefinite" keyTimes="0;1"/>
+  </path>
+  <path fill="#56ff56" stroke-width="0" d="M 81 85Q 82.76 88.3 82.23 91.56T 78.83 97.31T 74.62 102.1T 72.58 108.14T 69.3 113.96T 63 116.18T 56.7 117.14T 51.25 120.45T 45 122.8T 38.75 120.45T 33.3 117.14T 27 116.18T 20.7 113.96T 17.42 108.14T 15.38 102.1T 11.17 97.31T 7.77 91.56T 9 85T 11.32 79.06T 11.17 72.69T 12.26 66.1T 17.42 61.86T 23.02 58.8T 27 53.82T 32.07 49.48T 38.75 49.55T 45 50.8T 51.25 49.55T 57.93 49.48T 63 53.82T 66.98 58.8T 72.58 61.86T 77.74 66.1T 78.83 72.69T 78.68 79.06T 81 85ZM 72.5 85Q 71.76 82.66 71.49 80.33T 70.84 75.59T 69.34 70.95T 66.07 67.32T 62.29 64.39T 58.75 61.18T 54.61 58.59T 49.78 57.92T 45 58.1T 40.22 57.92T 35.39 58.59T 31.25 61.18T 27.71 64.39T 23.93 67.32T 20.66 70.95T 19.16 75.59T 18.51 80.33T 17.5 85T 17.33 89.88T 19.16 94.41T 21.7 98.45T 23.93 102.68T 26.94 106.53T 31.25 108.82T 35.8 110.28T 40.22 112.08T 45 113.1T 49.78 112.08T 54.2 110.28T 58.75 108.82T 63.06 106.53T 66.07 102.68T 68.3 98.45T 70.84 94.41T 72.67 89.88Z">
+    <animateTransform attributeName="transform" type="rotate" values="0 45 85;40 45 85" dur="0.5s" repeatCount="indefinite" keyTimes="0;1"/>
+  </path>
+  <path fill="#568eff" stroke-width="0" d="M 75.5 85Q 76.57 88.56 75.91 92.05T 72.48 98.23T 67.91 103.27T 64.02 108.85T 58.75 113.56T 51.79 114.74T 45 114.3T 38.21 114.74T 31.25 113.56T 25.98 108.85T 22.09 103.27T 17.52 98.23T 14.09 92.05T 14.5 85T 16.43 78.48T 17.52 71.77T 20.22 65.24T 25.98 61.15T 32.29 58.6T 38.21 55.26T 45 53.3T 51.79 55.26T 57.71 58.6T 64.02 61.15T 69.78 65.24T 72.48 71.77T 73.57 78.48T 75.5 85ZM 71 85Q 70.2 82.16 69.76 79.35T 68.43 73.72T 65.8 68.42T 61.21 64.67T 56.02 62.12T 50.79 59.65T 45 58.4T 39.21 59.65T 33.98 62.12T 28.79 64.67T 24.2 68.42T 21.57 73.72T 20.24 79.35T 19 85T 19.07 90.92T 21.57 96.28T 25.14 100.84T 28.79 105.33T 33.46 108.97T 39.21 110.35T 45 110.4T 50.79 110.35T 56.54 108.97T 61.21 105.33T 64.86 100.84T 68.43 96.28T 70.93 90.92Z">
+    <animateTransform attributeName="transform" type="rotate" values="0 45 85;51.42857142857143 45 85" dur="1s" repeatCount="indefinite" keyTimes="0;1"/>
+  </path>
+</g>
+<path fill="#e3e3e3" d="M57.1,63.3c-0.1-1.4-1.4-2.4-2.7-2.2c-1.8,0.2-7.3-6.1-11-18.4c-3.7-12.2-2.6-20.6-1-21.4 c1.2-0.6,1.7-2.2,1-3.4c-0.6-1.2-2.2-1.7-3.4-1c-1.4,0.7-2.4,2.1-3.1,3.9c-4.5,2.2-24.3,12-32.3,15.3c-1.8,0.8-3,2.5-3.1,4.4 c-0.4,10.6,2.6,20.2,8.8,29c1.1,1.6,3.1,2.4,5.1,2.1l28.5-6.3c-1.8-1.4-3.3-3-4.4-4.8c-0.2-0.3-0.6-0.5-1-0.4l-1.1,0.3 C35.5,61,33.5,59.9,33,58c-0.5-1.9,0.7-3.8,2.5-4.3l0.9-0.3c0.4-0.1,0.7-0.5,0.6-0.9l0,0c-0.1-0.5-0.6-0.9-1.1-0.7l-8.2,2.5 c-1.9,0.6-3.9-0.5-4.4-2.5c-0.5-1.9,0.7-3.8,2.5-4.3l9.5-2.9c0.4-0.1,0.6-0.5,0.6-0.9c-0.1-2.6,0.1-5.1,0.7-7.4 c0.5,2.6,1.1,5.3,1.9,7.9C41.8,54.8,48,66,54.3,66c0.2,0,0.4,0,0.5,0C56.2,65.9,57.2,64.6,57.1,63.3z">
+  <animateTransform attributeName="transform" type="translate" keyTimes="0;0.5;1" values="0 0;0 3;0 0" dur="1s" repeatCount="indefinite"/>
+</path>
+<!-- [ldio] generated by https://loading.io/ --></svg>
--- a/public/mstile-144x144.png
+++ b/public/mstile-144x144.png
--- a/public/mstile-150x150.png
+++ b/public/mstile-150x150.png
--- a/public/mstile-310x150.png
+++ b/public/mstile-310x150.png
--- a/public/mstile-310x310.png
+++ b/public/mstile-310x310.png
--- a/public/mstile-70x70.png
+++ b/public/mstile-70x70.png
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1880 3500 l0 -2345 295 -1 c202 0 295 3 296 10 1 6 2 452 3 991 l1
+980 405 0 c223 1 412 -1 421 -3 9 -2 26 -22 38 -45 12 -23 26 -49 31 -57 9
+-13 116 -202 174 -305 13 -22 96 -168 186 -325 90 -157 174 -305 188 -330 14
+-25 68 -119 120 -210 52 -91 106 -185 120 -210 13 -25 48 -85 77 -135 29 -49
+63 -108 75 -130 12 -22 46 -83 77 -136 l55 -95 336 1 c186 1 338 3 340 4 2 0
+-5 13 -16 29 -10 15 -31 47 -45 72 -25 46 -70 123 -509 875 -135 231 -254 434
+-264 452 -11 18 -93 159 -184 314 -91 155 -166 286 -168 290 -2 4 37 19 85 35
+126 40 234 87 338 147 210 122 378 300 484 514 39 78 94 237 105 303 3 19 8
+49 11 65 29 173 25 439 -10 611 -93 451 -379 747 -863 888 -48 14 -112 30
+-142 36 -137 26 -129 25 -215 34 -33 4 -80 10 -105 13 -25 3 -426 7 -892 8
+l-848 1 0 -2346z m1650 1856 c234 -28 410 -80 535 -161 220 -140 321 -360 317
+-690 -5 -366 -180 -646 -482 -769 -25 -10 -54 -22 -65 -27 -30 -12 -155 -46
+-195 -53 -186 -31 -248 -33 -715 -32 l-450 1 -1 865 c0 528 3 867 9 871 12 8
+974 3 1047 -5z"/>
+</g>
+</svg>
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "Ryan Moon",
+    "short_name": "Ryan Moon",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#131020",
+    "background_color": "#131020",
+    "display": "standalone"
+}
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}