Initial commit

2025-05-29 09:14:36 -06:00 · 2025-05-29 09:14:36 -06:00 · ee7195b82a
commit ee7195b82a
parent 32aad3bfd3
22 changed files with 2067 additions and 781 deletions
--- a/.htmlnanorc
+++ b/.htmlnanorc
@ -0,0 +1,7 @@
+{
+    "minifySvg": {
+        "plugins": [
+            { "removeUnknownsAndDefaults": false }
+        ]
+    }
+}
--- a/.parcelrc
+++ b/.parcelrc
@ -0,0 +1,10 @@
+{
+  "extends": "@parcel/config-default",
+  "compressors": {
+    "*.{html,css,js,svg,map}": [
+      "...",
+      "@parcel/compressor-gzip",
+      "@parcel/compressor-brotli"
+    ]
+  }
+}
--- a/.posthtmlrc
+++ b/.posthtmlrc
@ -0,0 +1,9 @@
+{
+  "plugins": {
+    "posthtml-component": {
+      "root": "./src"
+    },
+    "posthtml-include": {},
+    "posthtml-markdownit": {}
+  }
+}
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -0,0 +1,16 @@
+steps:
+  - name: build
+    image: node:20-slim
+    environment:
+      PNPM_HOME: /pnpm
+      PATH: "/pnpm:$PATH"
+    commands:
+      - corepack enable
+      - pnpm install
+      - pnpm run build --no-chache
+      - rm -rf /var/woodpecker/thesandwich/*
+      - mv dist/* /var/woodpecker/thesandwich/
+    volumes:
+      - /var/woodpecker:/var/woodpecker
+      - /usr/share/fonts:/usr/share/fonts
+      - /usr/lib/helix/runtime/:/usr/lib/helix/runtime/
--- a/assets/apple-touch-icon.png
+++ b/assets/apple-touch-icon.png
--- a/assets/c0re.svg
+++ b/assets/c0re.svg
--- a/assets/createdwith.jpeg
+++ b/assets/createdwith.jpeg
--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/favicon.svg
+++ b/assets/favicon.svg
@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="1024"
+   height="1024"
+   viewBox="0 0 1024 1024"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient5">
+      <stop
+         style="stop-color:#957b09;stop-opacity:1;"
+         offset="0"
+         id="stop5" />
+      <stop
+         style="stop-color:#f8d170;stop-opacity:1;"
+         offset="0.64978778"
+         id="stop6" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+      <stop
+         style="stop-color:#636363;stop-opacity:1;"
+         offset="0.65339267"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient1"
+       id="linearGradient2"
+       x1="0"
+       y1="1024"
+       x2="1024"
+       y2="0"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       xlink:href="#linearGradient5"
+       id="linearGradient6"
+       x1="238.13318"
+       y1="785.09656"
+       x2="784.8255"
+       y2="237.32028"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(0.520675,0.791595)" />
+  </defs>
+  <g
+     id="g1">
+    <rect
+       style="display:inline;opacity:1;fill:url(#linearGradient2);fill-opacity:1;stroke:none;stroke-width:1.88976;stroke-linejoin:round"
+       id="rect1"
+       width="1024"
+       height="1024"
+       x="0"
+       y="0"
+       rx="5.1585231"
+       ry="5.1585231" />
+    <path
+       id="path5"
+       style="opacity:1;fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:55;stroke-dasharray:none;stroke-opacity:1"
+       d="M 266.15385,265.61187 757.84614,757.30416 M 512.52067,266.40345 V 759.17973 M 266.15385,265.61187 H 757.84614 V 758.38812 H 266.15385 Z" />
+  </g>
+</svg>
--- a/assets/icon.svg
+++ b/assets/icon.svg
@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="1024"
+   height="1024"
+   viewBox="0 0 1024 1024"
+   sodipodi:docname="icon.svg"
+   inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
+   inkscape:export-filename="icon.png"
+   inkscape:export-xdpi="6"
+   inkscape:export-ydpi="6"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient5"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#957b09;stop-opacity:1;"
+         offset="0"
+         id="stop5" />
+      <stop
+         style="stop-color:#f8d170;stop-opacity:1;"
+         offset="0.64978778"
+         id="stop6" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1" />
+      <stop
+         style="stop-color:#636363;stop-opacity:1;"
+         offset="0.65339267"
+         id="stop2" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient1"
+       id="linearGradient2"
+       x1="0"
+       y1="1024"
+       x2="1024"
+       y2="0"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5"
+       id="linearGradient6"
+       x1="238.13318"
+       y1="785.09656"
+       x2="784.8255"
+       y2="237.32028"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(0.520675,0.791595)" />
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="0.35090702"
+     inkscape:cx="471.63491"
+     inkscape:cy="387.56706"
+     inkscape:window-width="1727"
+     inkscape:window-height="1057"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g1" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1">
+    <rect
+       style="display:none;opacity:1;fill:url(#linearGradient2);fill-opacity:1;stroke:none;stroke-width:1.88976;stroke-linejoin:round"
+       id="rect1"
+       width="1024"
+       height="1024"
+       x="0"
+       y="0"
+       rx="5.1585231"
+       ry="5.1585231" />
+    <path
+       id="path5"
+       style="opacity:1;fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:55;stroke-dasharray:none;stroke-opacity:1"
+       d="M 266.15385,265.61187 757.84614,757.30416 M 512.52067,266.40345 V 759.17973 M 266.15385,265.61187 H 757.84614 V 758.38812 H 266.15385 Z" />
+  </g>
+</svg>
--- a/assets/mario.opus
+++ b/assets/mario.opus
--- a/assets/simulo.svg
+++ b/assets/simulo.svg
@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   width="512"
+   height="512"
+   viewbox="0 0 512 512"
+   sodipodi:docname="simulo.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1"><filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:label="Drop Shadow"
+       id="filter22"
+       x="-0.19533082"
+       y="-0.2255481"
+       width="1.3906616"
+       height="1.4510962"><feFlood
+         result="flood"
+         in="SourceGraphic"
+         flood-opacity="1.000000"
+         flood-color="rgb(255,255,255)"
+         id="feFlood21" /><feGaussianBlur
+         result="blur"
+         in="SourceGraphic"
+         stdDeviation="10.000000"
+         id="feGaussianBlur21" /><feOffset
+         result="offset"
+         in="blur"
+         dx="0.000000"
+         dy="0.000000"
+         id="feOffset21" /><feComposite
+         result="comp1"
+         operator="in"
+         in="flood"
+         in2="offset"
+         id="feComposite21" /><feComposite
+         result="comp2"
+         operator="over"
+         in="SourceGraphic"
+         in2="comp1"
+         id="feComposite22" /></filter></defs><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="1.2620189"
+     inkscape:cx="158.47623"
+     inkscape:cy="465.92012"
+     inkscape:window-width="990"
+     inkscape:window-height="1057"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" /><inkscape:clipboard
+     style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke-width:9.4488189;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;filter:url(#filter22);stop-color:#000000;stop-opacity:1"
+     min="73.949545,202.43782"
+     max="719.75163,786.02505"
+     geom-min="164.6582,293.14648"
+     geom-max="629.04299,695.3164" /><g
+     id="layer1"
+     transform="matrix(3.7795276,0,0,3.7795276,-73.949545,-202.43783)"><path
+       d="M 87.298887,68.091283 56.581901,121.29527 53.123198,127.28612 86.863777,138.97585 H 46.373739 L 25.864913,174.49874 H 87.298887 148.73339 L 118.0164,121.29527 114.61144,115.39796 87.849247,103.86688 H 107.95396 Z"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:2.5;stroke-linecap:square;stroke-miterlimit:0;filter:url(#filter22)"
+       id="path4"
+       transform="matrix(0.79281252,0,0,0.79281252,18.087291,25.130807)" /></g></svg>
--- a/assets/tysoncloud.svg
+++ b/assets/tysoncloud.svg
--- a/assets/westside.opus
+++ b/assets/westside.opus
--- a/icon.png
+++ b/icon.png
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "parcel-vanilla-starter",
+  "name": "thesandwich",
  "private": true,
  "version": "0.0.0",
  "source": "src/index.html",
@ -7,8 +7,18 @@
    "start": "parcel",
    "build": "parcel build"
  },
-  "dependencies": {},
  "devDependencies": {
-    "parcel": "^2.14.0"
+    "@parcel/compressor-brotli": "^2.15.2",
+    "@parcel/compressor-gzip": "^2.15.2",
+    "@parcel/config-default": "^2.15.2",
+    "parcel": "^2.15.2",
+    "posthtml": "^0.16.6",
+    "posthtml-component": "^2.1.0",
+    "posthtml-include": "^2.0.1",
+    "posthtml-markdownit": "^3.1.1"
+  },
+  "dependencies": {
+    "audiomotion-analyzer": "^4.5.0",
+    "htmx.org": "^1.9.12"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/blockquote.html
+++ b/src/blockquote.html
@ -0,0 +1,13 @@
+<script props>
+  module.exports = {
+    cite: props.cite || ''
+  }
+</script>
+<center style="margin: 16px;">
+  <blockquote>
+    <markdown>
+      <yield></yield>
+    </markdown>
+  </blockquote>
+  <p>—{{cite}}</p>
+</center>
--- a/src/index.html
+++ b/src/index.html
@ -1,13 +1,283 @@
 <!doctype html>
 <html lang="en">
-  <head>
+
+<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Parcel Vanilla App</title>
+  <meta name="color-scheme" content="dark">
+  <title>The SANDWICH</title>
  <link rel="stylesheet" href="style.css">
-  </head>
-  <body>
-    <h1>Parcel Vanilla App</h1>
-    <p>Edit <code>src/index.html</code> to get started!</p>
-  </body>
+  <link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32">
+  <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
+  <script type="module">
+    window.htmx = require('htmx.org');
+  </script>
+  <style>
+    .flex-container {
+      display: flex;
+
+      justify-content: center;
+      align-items: center;
+      /* flex-flow: column; */
+      flex-direction: column;
+
+      height: 100%;
+      gap: 5px;
+
+    }
+
+    /* From https://codepen.io/Knovour/pen/boJNPN */
+    .marquee {
+      margin: 0;
+      padding: 0;
+      color: #343434;
+      font-size: 72px;
+      font-weight: bold;
+      position: relative;
+      width: 100vw;
+      max-width: 100%;
+      height: 80px;
+      line-height: 1.0;
+      overflow-x: hidden;
+    }
+
+    .track {
+      position: absolute;
+      white-space: nowrap;
+      will-change: transform;
+      animation: marquee 32s linear infinite;
+    }
+
+    @keyframes marquee {
+      from {
+        transform: translateX(0);
+      }
+
+      to {
+        transform: translateX(-50%);
+      }
+    }
+  </style>
+</head>
+
+
+<body>
+  <iframe id="tubes" src="https://1j01.github.io/pipes/#{%22hideUI%22:true}" loading="lazy"
+    style="position: fixed; left: 0; top: 0; height: 100%; width: 100%; border-width: 0; display: none; z-index: 0;"></iframe>
+  <center id="page-content">
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <div style="position: relative; pointer-events: none;" class="flex-container">
+      <img id="logo" class="icon" src="/assets/icon.svg"
+        style="position: absolute; height: calc(min(512px, 95vw) + var(--energy));">
+      <div id="audioContainer" style="position: absolute;"></div>
+    </div>
+    <div style="height: min(30vw, 150px);"></div>
+    <audio id="player" src="/assets/westside.opus" loop></audio>
+    <audio id="player-spaghetti" src="/assets/mario.opus"></audio>
+    <div id="page-content-content">
+      <center style="margin: 16px;">
+        <h1 class="title">Very professional people making<br>very professional things</h1>
+      </center>
+      <center>
+        <div style="margin: 16px; margin-bottom: 32px; width: fit-content; text-align: left;">
+          <h1>Deliverables:</h1>
+          <ul>
+            <li>
+              <input type="checkbox" id="playpause" name="playpause" onclick="westSide()">
+              <label for="playpause">Increase productivity</label>
+            </li>
+            <li>
+              <input id="tube" type="checkbox" onclick="tube()">
+              <label for="tube">Increase tubes</label>
+            </li>
+          </ul>
+        </div>
+      </center>
+      <x-blockquote cite="You, just now">
+        Wow, such professionalism! What are these guys working on now?
+      </x-blockquote>
+      <x-project img="/assets/tysoncloud.svg">
+        <fill:title># TYSONCLOUD</fill:title>
+        <fill:subtitle>## When she computes your edge 'till you serve</fill:subtitle>
+        <fill:description>
+          <markdown>
+            You're really gonna give up your web baby to big cloud? _Non-sense!_ Slap that baby
+            into
+            the loving arms of Tyson Jenkins at **TYSONCLOUD**! Don't worry, he pesonally makes sure that every
+            web baby gets exactly one pat on the head each day. That's more than AWS can say about it's web servies!
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project img="/assets/simulo.svg" href="https://github.com/richgrov/simulo" onclick="spaghetti()"
+        class="project-alt">
+        <fill:title># Simulo</fill:title>
+        <fill:subtitle>## Super Mario in real life</fill:subtitle>
+        <fill:description>
+          <markdown>
+            Imagine Ready Play One, but with minimum dystopia. **Simulo** allows you to use the _Earth_ as
+            your
+            game
+            engine!
+            We've all been in that sticky situation where you wanna play soccer with the boys but you forgot to bring
+            a
+            soccer ball, _however_ you happen to have a $600 laser projector on you. Now with Simulo, no more will
+            your
+            soccer seshes be ruined by your idiotic forgetfulness.
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project svg="assets/c0re.svg" href="https://c0re.com">
+        <fill:title>
+          # c0re
+          #### So shiny!
+        </fill:title>
+        <fill:subtitle>## Git gud scrub!</fill:subtitle>
+        <fill:description>
+          <markdown>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore
+            et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project svg="assets/c0re.svg" href="https://github.com/StratusFearMe21/grezi-next" class="project-alt">
+        <fill:title># Grezi</fill:title>
+        <fill:subtitle>## When the power is point</fill:subtitle>
+        <fill:description>
+          <markdown>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore
+            et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project text="?">
+        <fill:title># Mystery</fill:title>
+        <fill:subtitle>## Oooooooo</fill:subtitle>
+        <fill:description>
+          <markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
+          <form hx-post="/api/speculate">
+            <label for="speculation">
+              Speculate about the <i>secret</i> project below:
+            </label><br>
+            <textarea name="speculation" id="speculation"></textarea>
+            <input type="submit" value="Speculate!">
+          </form>
+        </fill:description>
+      </x-project>
+      <x-blockquote cite="Your mom, last night">
+        OMG these projects are so skibidi! I must know the rizzlers behind them!
+      </x-blockquote>
+    </div>
+    <div style="background-color: #484848;">
+      <p style="font-size: 8pt;">Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>
+    </div>
+  </center>
+
+  <style>
+    .icon {
+      height: 128px;
+      display: block;
+      margin: auto;
+      /* width: 50%; */
+      /* animation: spinner-1o3y8q 10s infinite linear; */
+    }
+
+    #core-conic,
+    /* Mesh gradiants are rasterized to an
+    <image> in most browsers. We rotate
+    that generated image */
+    svg image {
+      transform-origin: 50% 50%;
+      animation: spin 15s infinite linear;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+  <script>
+    document.getElementById('playpause').checked = false
+    document.getElementById('tube').checked = false
+    function spaghetti() {
+      var player = document.getElementById('player-spaghetti');
+
+      if (player.paused) {
+        player.play()
+      } else {
+        player.pause()
+      }
+    }
+    function westSide() {
+      var player = document.getElementById('player');
+
+      if (player.paused) {
+        player.play()
+      } else {
+        player.pause()
+      }
+    }
+    function tube() {
+      const tubeBg = document.getElementById('tubes');
+      const pageContent = document.getElementById("page-content");
+
+      if (tubeBg.style.display == "block") {
+        tubeBg.style.display = "none";
+        pageContent.style.backgroundImage = "linear-gradient(to bottom, rgb(0, 0, 0), #636363 1024px)";
+      } else {
+        tubeBg.style.display = "block";
+        pageContent.style.backgroundImage = "linear-gradient(to bottom, rgb(0, 0, 0, 0), #636363BE 768px)";
+      }
+    }
+  </script>
+  <script type="module">
+    import AudioMotionAnalyzer from 'audiomotion-analyzer';
+    const container = document.getElementById('audioContainer');
+    const audioSource = document.getElementById('player');
+    const audioMotion = new AudioMotionAnalyzer(container, {source: audioSource});
+    audioMotion.registerGradient('sandwich', {
+      dir: 'h',           // add this property to create a horizontal gradient (optional)
+      colorStops: [       // list your gradient colors in this array (at least one color is required)
+        {color: '#957b09', pos: .0},  // use `level` to set the max bar amplitude (0 to 1) to use this color
+        {color: '#f8d170', pos: .65}, // in an object, use `pos` to adjust the offset (0 to 1) of a colorStop
+      ]
+    });
+    audioMotion.setOptions({source: audioSource, height: 256, overlay: true, bgAlpha: 0.0, showScaleX: false, gradient: 'sandwich', ledBars: true, mode: 7, reflexRatio: 0.5, reflexAlpha: 1.0, alphaBars: true, weightingFilter: '468', onCanvasDraw: drawCallback});
+
+
+    function drawCallback(instance, info) {
+      const energy = instance.getEnergy() * 256;
+      document.documentElement.style.setProperty('--energy', energy + 'px');
+    }
+  </script>
+</body>
+
 </html>
--- a/src/marquee.html
+++ b/src/marquee.html
@ -0,0 +1,7 @@
+<div class="marquee">
+  <div class="track">
+    <div class="content">
+      <yield></yield>
+    </div>
+  </div>
+</div>
--- a/src/project.html
+++ b/src/project.html
@ -0,0 +1,37 @@
+<script props>
+  module.exports = {
+    img: props.img || '',
+    svg: props.svg || '',
+    text: props.text || '',
+    href: props.href || '/',
+    onclick: props.onclick || ''
+  }
+</script>
+<div class="project">
+  <div class="project-title" style="min-width: 275px;">
+    <a href="{{href}}" target="_blank">
+      <if condition="img != ''">
+        <img class="figure" src="{{img}}">
+      </if>
+      <if condition="svg != ''">
+        <div class="figure">
+          <include src="{{svg}}"></include>
+        </div>
+      </if>
+      <if condition="text != ''">
+        <p style="font-size: 200px; text-align: center; margin: 0; padding: 0;">{{text}}</p>
+      </if>
+      <markdown>
+        <slot:title />
+      </markdown>
+    </a>
+  </div>
+  <div class="description">
+    <div onclick="{{onclick}}">
+      <markdown>
+        <slot:subtitle />
+      </markdown>
+    </div>
+    <slot:description />
+  </div>
+</div>
--- a/src/style.css
+++ b/src/style.css
@ -1,8 +1,135 @@
+:root {
+  --energy: 0px;
+}
+
+.title {
+  font-size: min(10vw, 36pt);
+  margin-bottom: 48px;
+}
+
+
+center:has(> blockquote) {
+  margin: 10px auto;
+  font-size: min(5vw, 22pt);
+  padding: 15px;
+  border-radius: 5px;
+}
+
+blockquote p {
+  text-align: center;
+}
+
+blockquote p::before {
+  content: "\201C";
+}
+
+blockquote p::after {
+  content: "\201D";
+}
+
+blockquote+p {
+  text-align: right;
+}
+
 html {
  color-scheme: light dark;
  font-family: system-ui;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+}
+
+
+#page-content {
+  background-image: linear-gradient(to bottom, #000000, #636363 1024px);
+}
+
+#page-content-content {
+  width: min(100%, 1024px);
+}
+
+#page-content,
+#page-content>* {
+  position: relative;
+  z-index: 1;
+}
+
+.project {
+  background-color: #484848;
+  padding: 16px 24px;
+  display: flex;
+  align-content: space-around;
+  align-items: center;
+  margin: 32px;
+}
+
+
+.project>div {
+  padding: 16px;
+}
+
+
+img.figure,
+.figure>svg {
+  width: 80%;
+}
+
+.figure>svg {
+  height: 80%;
+}
+
+.project-title h1 {
+  font-size: 24pt;
+}
+
+.project-alt {
+  flex-direction: row-reverse;
+}
+
+
+@media only screen and (max-width: 700px) {
+  .project {
+    flex-direction: column;
+    padding: 32px;
+  }
+
+  .project>div {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  blockquote {
+    margin: 0px auto;
+  }
+}
+
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 32pt;
+  /* margin: 0; */
+}
+
+input[type="checkbox"] {
+  transform: scale(1.5);
+  margin: 10px;
+}
+
+li,
+p {
+  font-size: 16pt;
+  text-align: left;
+}
+
+form {
+  text-align: left;
+}
+
+textarea {
+  width: 100%;
+}
+
+a {
+  color: inherit;
+  /* no underline */
+  text-decoration: none;
 }