init

2025-03-03 14:47:53 +00:00 · 2023-12-04 19:52:18 +01:00 · 2023-12-04 19:52:18 +01:00 · e8e70a7c8c
commit e8e70a7c8c
69 changed files with 3187 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/15
+++ b/15
@ -0,0 +1,15 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Philip Ahlqvist.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS-IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OF OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+# LBRY Tech
+
+A rewrite of the lbry.tech website, using Astro.
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -0,0 +1,15 @@
+import { defineConfig } from 'astro/config';
+import codeblocks from "@thewebforge/astro-code-blocks";
+import preload from "astro-preload";
+
+import mdx from "@astrojs/mdx";
+
+// https://astro.build/config
+export default defineConfig({
+  prefetch: true,
+  integrations: [preload(), codeblocks({
+    // Copy Button Options
+    copyButtonTitle: 'Copy',
+    copyButtonTooltip: 'Copied to clipboard',
+}), mdx()]
+});
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -0,0 +1,23 @@
+{
+  "name": "lbry-tech",
+  "version": "0.0.1",
+  "dependencies": {
+    "@astrojs/mdx": "^1.1.5",
+    "@astropub/md": "^0.3.0",
+    "@lbry/components": "^4.2.5",
+    "@thewebforge/astro-code-blocks": "^0.2.0",
+    "astro": "^3.6.1",
+    "astro-preload": "^1.1.2",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "sass": "^1.69.5"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "type": "module"
+}
--- a/public/assets/apple-touch-icon.png
+++ b/public/assets/apple-touch-icon.png
--- a/public/assets/favicon.ico
+++ b/public/assets/favicon.ico
--- a/public/assets/favicon.svg
+++ b/public/assets/favicon.svg
@ -0,0 +1,3 @@
+<svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.803, 6.045l0, 0.705l-6.941, 4.265l-5.23, -2.565l0.01, -0.395l5.201, 2.56l6.61, -4.06l-0.001, -0.29l-6.24, -3.01l-6.96, 4.305l0, 1.925l6.59, 3.26l6.722, -4.123l-0.362, -0.062l0.04, -0.245l0.856, 0.145l-0.14, 0.875l-0.245, -0.04l0.06, -0.382l-6.911, 4.232l-6.959, -3.44l0, -2.34l7.29, -4.51l6.61, 3.19Z"/>
+</svg>
--- a/public/assets/humans.txt
+++ b/public/assets/humans.txt
@ -0,0 +1,18 @@
+/* TEAM */
+
+Paul Anthony Webb - Creator, Designer, and Developer
+…and the rest of the LBRY squad
+
+
+
+/* THANKS */
+
+LBRY - https://lbry.com
+Viewers like you
+
+
+
+/* SITE */
+
+Standards: CSS3, HTML5, JavaScript (ES5, ES6/7)
+Components: choo, fastify, NodeJS, Sass
--- a/public/assets/media/images/background-a.jpg
+++ b/public/assets/media/images/background-a.jpg
--- a/public/assets/media/images/carlsagan2.jpg
+++ b/public/assets/media/images/carlsagan2.jpg
--- a/public/assets/media/images/doge-meme.jpg
+++ b/public/assets/media/images/doge-meme.jpg
--- a/public/assets/media/images/grid.png
+++ b/public/assets/media/images/grid.png
--- a/public/assets/media/images/lbry-green.png
+++ b/public/assets/media/images/lbry-green.png
--- a/public/assets/media/images/lbry-overview.png
+++ b/public/assets/media/images/lbry-overview.png
--- a/public/assets/media/images/missing.png
+++ b/public/assets/media/images/missing.png
--- a/public/assets/media/images/og-image.png
+++ b/public/assets/media/images/og-image.png
--- a/public/assets/media/svg/anchor.svg
+++ b/public/assets/media/svg/anchor.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#222">
+  <path d="M45, 19a3, 3, 0, 1, 0-2.82-4H28.9a5, 5, 0, 0, 0-9.8, 0H5.82a3, 3, 0, 1, 0, 0, 2h9.1q-0.77.46-1.5, 1a18.48, 18.48, 0, 0, 0-6.55, 9, 5, 5, 0, 1, 0, 2, .35A16.4, 16.4, 0, 0, 1, 19.18, 17.24a5, 5, 0, 0, 0, 9.65, 0A16.36, 16.36, 0, 0, 1, 39.11, 27.38a5, 5, 0, 1, 0, 2-.37, 18.22, 18.22, 0, 0, 0-8-10h9.07A3, 3, 0, 0, 0, 45, 19ZM10, 32a3, 3, 0, 1, 1-3-3A3, 3, 0, 0, 1, 10, 32ZM24, 19a3, 3, 0, 1, 1, 3-3A3, 3, 0, 0, 1, 24, 19ZM44, 32a3, 3, 0, 1, 1-3-3A3, 3, 0, 0, 1, 44, 32Z"/>
+</svg>
--- a/public/assets/media/svg/chat.svg
+++ b/public/assets/media/svg/chat.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#222">
+  <path d="M34, 14V0H0V35l11.35-9H14v5a9, 9, 0, 0, 0, 9, 9H36.65L48, 48.08V14H34ZM10.65, 24L2, 30.92V2H32V17a7, 7, 0, 0, 1-7, 7H10.65ZM46, 44l-8.65-6H23a7, 7, 0, 0, 1-7-7V26h9a9, 9, 0, 0, 0, 9-9V16H46V44Z"/>
+</svg>
--- a/public/assets/media/svg/discord.svg
+++ b/public/assets/media/svg/discord.svg
@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
--- a/public/assets/media/svg/down.svg
+++ b/public/assets/media/svg/down.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" fill="#222">
+  <path d="M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z"/>
+</svg>
--- a/public/assets/media/svg/flag.svg
+++ b/public/assets/media/svg/flag.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#222">
+  <path d="M44, 0H4L19, 48l1.91-.6L14.52, 26.81ZM7, 2H38.83l-25, 22.7Z"/>
+</svg>
--- a/public/assets/media/svg/keyboard.svg
+++ b/public/assets/media/svg/keyboard.svg
@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#222">
+  <path d="M0, 8V31a9, 9, 0, 0, 0, 9, 9H39a9, 9, 0, 0, 0, 9-9V8H0ZM46, 31a7, 7, 0, 0, 1-7, 7H9a7, 7, 0, 0, 1-7-7V10H46V31Z"/>
+  <rect x="6" y="28" width="4" height="4"/>
+  <rect x="38" y="28" width="4" height="4"/>
+  <rect x="6" y="14" width="4" height="4"/>
+  <rect x="14" y="14" width="4" height="4"/>
+  <rect x="22" y="14" width="4" height="4"/>
+  <rect x="10" y="21" width="4" height="4"/>
+  <rect x="18" y="21" width="4" height="4"/>
+  <rect x="26" y="21" width="4" height="4"/>
+  <rect x="34" y="21" width="4" height="4"/>
+  <rect x="38" y="14" width="4" height="4"/>
+  <rect x="30" y="14" width="4" height="4"/>
+  <rect x="14" y="28" width="20" height="4"/>
+</svg>
--- a/public/assets/media/svg/logo--white.svg
+++ b/public/assets/media/svg/logo--white.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 320 250" xmlns="http://www.w3.org/2000/svg" fill="#fcfcfc">
+  <path d="M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z"/>
+  <path d="M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z"/>
+</svg>
--- a/public/assets/media/svg/logo.svg
+++ b/public/assets/media/svg/logo.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 320 250" xmlns="http://www.w3.org/2000/svg" fill="#222">
+  <path d="M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z"/>
+  <path d="M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z"/>
+</svg>
--- a/public/assets/media/svg/monitor.svg
+++ b/public/assets/media/svg/monitor.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="#222">
+  <path d="M43, 4H5A5, 5, 0, 0, 0, 0, 9V39a5, 5, 0, 0, 0, 5, 5H43a5, 5, 0, 0, 0, 5-5V9A5, 5, 0, 0, 0, 43, 4Zm3, 35a3, 3, 0, 0, 1-3, 3H5a3, 3, 0, 0, 1-3-3V9A3, 3, 0, 0, 1, 5, 6H43a3, 3, 0, 0, 1, 3, 3V39Z"/>
+  <polygon points="26.47 30.36 22.35 10.81 16.36 24 8 24 8 26 17.64 26 21.65 17.19 25.53 35.63 31.55 26 40 26 40 24 30.45 24 26.47 30.36"/>
+</svg>
--- a/public/assets/media/svg/reddit.svg
+++ b/public/assets/media/svg/reddit.svg
@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Reddit</title><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
--- a/public/assets/media/svg/slack.svg
+++ b/public/assets/media/svg/slack.svg
@ -0,0 +1,4 @@
+<svg viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg" fill="#222">
+  <path d="M130.394, 104.948l-23.347, 7.82l7.554, 22.552l23.347, -7.82l-7.554, -22.552Z"/>
+  <path d="M202.665, 95.937c-18.048, -60.159 -44.07, -74.149 -104.228, -56.102c-60.159, 18.048 -74.149, 44.07 -56.102, 104.228c18.048, 60.159 44.07, 74.149 104.228, 56.102c60.159, -18.048 74.149, -44.07 56.102, -104.228Zm-30.359, 39.033l-11.333, 3.777l3.918, 11.752c1.539, 4.757 -0.98, 9.933 -5.736, 11.472c-0.98, 0.28 -2.099, 0.56 -3.078, 0.42c-3.638, -0.14 -7.135, -2.519 -8.394, -6.156l-3.918, -11.752l-23.364, 7.835l3.918, 11.752c1.539, 4.756 -0.98, 9.933 -5.736, 11.472c-0.98, 0.279 -2.099, 0.559 -3.078, 0.419c-3.638, -0.14 -7.135, -2.518 -8.394, -6.155l-3.918, -11.752l-11.332, 3.777c-0.979, 0.28 -2.098, 0.56 -3.078, 0.42c-3.637, -0.14 -7.135, -2.518 -8.394, -6.156c-1.539, -4.757 0.979, -9.933 5.736, -11.472l11.332, -3.777l-7.554, -22.525l-11.333, 3.778c-0.979, 0.279 -2.098, 0.559 -3.078, 0.419c-3.637, -0.14 -7.135, -2.518 -8.394, -6.155c-1.539, -4.757 0.98, -9.934 5.736, -11.473l11.332, -3.777l-3.917, -11.752c-1.539, -4.757 0.98, -9.933 5.736, -11.472c4.757, -1.539 9.933, 0.979 11.472, 5.736l3.918, 11.752l23.363, -7.835l-3.917, -11.751c-1.539, -4.757 0.979, -9.934 5.736, -11.473c4.757, -1.538 9.933, 0.98 11.472, 5.736l3.918, 11.752l11.332, -3.777c4.756, -1.539 9.933, 0.979 11.472, 5.736c1.539, 4.757 -0.98, 9.933 -5.736, 11.472l-11.332, 3.777l7.554, 22.525l11.333, -3.777c4.756, -1.539 9.933, 0.979 11.472, 5.736c1.539, 4.756 -0.98, 9.933 -5.736, 11.472Z"/>
+</svg>
--- a/public/assets/media/svg/text-logo--white.svg
+++ b/public/assets/media/svg/text-logo--white.svg
@ -0,0 +1,6 @@
+<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" fill="#fcfcfc">
+  <path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
+  <path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
+  <path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
+  <path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
+</svg>
--- a/public/assets/media/svg/text-logo.svg
+++ b/public/assets/media/svg/text-logo.svg
@ -0,0 +1,6 @@
+<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" fill="#222">
+  <path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
+  <path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
+  <path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
+  <path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
+</svg>
--- a/public/assets/media/svg/watch--green.svg
+++ b/public/assets/media/svg/watch--green.svg
@ -0,0 +1,10 @@
+<svg
+	fill="#3edb8d"
+	height="24px"
+	viewBox="0 0 96 96"
+	width="24px"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+	<path d="M72, 21.174V12c0-6.63-5.37-12-12-12H36c-6.63, 0-12, 5.37-12, 12v9.174C16.637, 27.766, 12, 37.34, 12, 48s4.637, 20.234, 12, 26.826 V84c0, 6.63, 5.37, 12, 12, 12h24c6.63, 0, 12-5.37, 12-12v-9.174C79.363, 68.234, 84, 58.66, 84, 48S79.363, 27.766, 72, 21.174z M32, 12 c0-2.21, 1.79-4, 4-4h24c2.21, 0, 4, 1.79, 4, 4v3.751C59.18, 13.354, 53.749, 12, 48, 12s-11.179, 1.354-16, 3.751V12z M64, 84 c0, 2.21-1.79, 4-4, 4H36c-2.21, 0-4-1.79-4-4v-3.751C36.821, 82.646, 42.251, 84, 48, 84s11.18-1.354, 16-3.751V84z M48, 76 c-15.464, 0-28-12.536-28-28s12.536-28, 28-28s28, 12.536, 28, 28S63.464, 76, 48, 76z M56, 60c-1.023, 0-2.047-0.391-2.828-1.172l-8-8 C44.422, 50.078, 44, 49.061, 44, 48V32c0-2.209, 1.791-4, 4-4s4, 1.791, 4, 4v14.343l6.828, 6.829c1.562, 1.562, 1.562, 4.095, 0, 5.656 C58.047, 59.609, 57.023, 60, 56, 60z"/>
+</svg>
--- a/public/assets/media/svg/watch.svg
+++ b/public/assets/media/svg/watch.svg
@ -0,0 +1,3 @@
+<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<path d="M72, 21.174V12c0-6.63-5.37-12-12-12H36c-6.63, 0-12, 5.37-12, 12v9.174C16.637, 27.766, 12, 37.34, 12, 48s4.637, 20.234, 12, 26.826 V84c0, 6.63, 5.37, 12, 12, 12h24c6.63, 0, 12-5.37, 12-12v-9.174C79.363, 68.234, 84, 58.66, 84, 48S79.363, 27.766, 72, 21.174z M32, 12 c0-2.21, 1.79-4, 4-4h24c2.21, 0, 4, 1.79, 4, 4v3.751C59.18, 13.354, 53.749, 12, 48, 12s-11.179, 1.354-16, 3.751V12z M64, 84 c0, 2.21-1.79, 4-4, 4H36c-2.21, 0-4-1.79-4-4v-3.751C36.821, 82.646, 42.251, 84, 48, 84s11.18-1.354, 16-3.751V84z M48, 76 c-15.464, 0-28-12.536-28-28s12.536-28, 28-28s28, 12.536, 28, 28S63.464, 76, 48, 76z M56, 60c-1.023, 0-2.047-0.391-2.828-1.172l-8-8 C44.422, 50.078, 44, 49.061, 44, 48V32c0-2.209, 1.791-4, 4-4s4, 1.791, 4, 4v14.343l6.828, 6.829c1.562, 1.562, 1.562, 4.095, 0, 5.656 C58.047, 59.609, 57.023, 60, 56, 60z"/>
+</svg>
--- a/public/assets/svg/code.svg
+++ b/public/assets/svg/code.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.32em" height="1em" viewBox="0 0 1856 1408"><path fill="#FFFFFF" d="m585 1143l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23L192 704l393 393q10 10 10 23t-10 23zM1176 76L803 1367q-4 13-15.5 19.5T764 1389l-62-17q-13-4-19.5-15.5T680 1332L1053 41q4-13 15.5-19.5T1092 19l62 17q13 4 19.5 15.5T1176 76zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393l-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z"/></svg>
--- a/public/assets/svg/comments.svg
+++ b/public/assets/svg/comments.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.13em" height="1em" viewBox="0 0 576 512"><path fill="#FFFFFF" d="M532 386.2c27.5-27.1 44-61.1 44-98.2c0-80-76.5-146.1-176.2-157.9C368.3 72.5 294.3 32 208 32C93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2c-15.3 30.7-37.3 54.5-37.7 54.9c-6.3 6.7-8.1 16.5-4.4 25c3.6 8.5 12 14 21.2 14c53.5 0 96.7-20.2 125.2-38.8c9.2 2.1 18.7 3.7 28.4 4.9C208.1 407.6 281.8 448 368 448c20.8 0 40.8-2.4 59.8-6.8C456.3 459.7 499.4 480 553 480c9.2 0 17.5-5.5 21.2-14c3.6-8.5 1.9-18.3-4.4-25c-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3L122.1 305c-14.1 9.1-28.5 16.3-43.1 21.4c2.7-4.7 5.4-9.7 8-14.8l15.5-31.1L77.7 256C64.2 242.6 48 220.7 48 192c0-60.7 73.3-112 160-112s160 51.3 160 112s-73.3 112-160 112c-16.5 0-33-1.9-49-5.6l-19.8-4.5zM498.3 352l-24.7 24.4l15.5 31.1c2.6 5.1 5.3 10.1 8 14.8c-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1l-19.9 4.6c-16 3.7-32.5 5.6-49 5.6c-54 0-102.2-20.1-131.3-49.7C338 339.5 416 272.9 416 192c0-3.4-.4-6.7-.7-10C479.7 196.5 528 238.8 528 288c0 28.7-16.2 50.6-29.7 64z"/></svg>
--- a/public/assets/svg/keyboard.svg
+++ b/public/assets/svg/keyboard.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.13em" height="1em" viewBox="0 0 576 512"><path fill="#FFFFFF" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></svg>
--- a/public/assets/svg/wand-magic-sparkles.svg
+++ b/public/assets/svg/wand-magic-sparkles.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="#FFFFFF" d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z"/></svg>
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>
--- a/src/components/Carousel.astro
+++ b/src/components/Carousel.astro
@ -0,0 +1,153 @@
+---
+import { Image } from "astro-preload/components";
+
+interface Props {
+	slides: Array<object>;
+}
+
+const { slides } = Astro.props;
+---
+
+<div class="slideshow-container">
+    {slides.map((slide: object, i: number) => (
+        <div class="mySlides fade">
+            <div class="numbertext">{i+1} / {slides.length}</div>
+            <Image url={slide.src || slide.href} width="100%" />
+            <a href={slide.href} target="_blank" class="text">
+                <p class="title">{slide.title}</p>
+                <p class="description">{slide.description}</p>
+            </a>
+        </div>
+    ))}
+
+    <!-- Next and previous buttons -->
+    <a class="prev">&#10094;</a>
+    <a class="next">&#10095;</a>
+</div>
+<br>
+
+    <div style="text-align:center">
+        {slides.map((slide: object, i: number) => (
+            <span class="dot"></span>
+        ))}
+    </div>
+    <script>
+        import {currentSlide, plusSlides} from '../scripts/carousel.js';
+    
+        document.querySelector('.prev').addEventListener('click', (e)=>{plusSlides(-1)});
+        document.querySelector('.next').addEventListener('click', (e)=>{plusSlides(1)});
+
+        slides.forEach((slide, i)=>{
+            document.querySelector(`#dot${i+1}`).addEventListener('click', (e)=>{currentSlide(i+1)});
+        })
+        
+        // document.querySelector('#dot2').addEventListener('click', (e)=>{currentSlide(2)});
+        // document.querySelector('#dot3').addEventListener('click', (e)=>{currentSlide(3)});
+    </script>
+</div>
+<style>
+/* Slideshow container */
+.slideshow-container {
+    width: 80%;
+    height: 80%;
+    max-width: 1280px;
+    max-height: 720px;
+    position: relative;
+    margin: auto;
+    border-radius: 16px;
+    overflow: hidden;
+  }
+  
+  /* Hide the images by default */
+  .mySlides {
+    display: none;
+  }
+  
+  /* Next & previous buttons */
+  .prev, .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    margin-top: -22px;
+    padding: 16px;
+    color: white;
+    font-weight: bold;
+    font-size: 18px;
+    transition: 0.6s ease;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
+  }
+  
+  /* Position the "next button" to the right */
+  .next {
+    right: 0;
+    border-radius: 3px 0 0 3px;
+  }
+  
+  /* On hover, add a black background color with a little bit see-through */
+  .prev:hover, .next:hover {
+    background-color: rgba(0,0,0,0.8);
+  }
+  
+  /* Caption text */
+  .text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #f2f2f2;
+    font-size: 15px;
+    padding: 8px 12px;
+    position: absolute;
+    left: 50%;
+    bottom: 16px;
+    transform: translateX(-50%);
+    /* width: 100%; */
+    text-align: center;
+    /* margin: 1.5em; */
+    border-radius: 16px;
+    background-color: var(--secondary-background);
+  }
+
+  .text .title {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+  
+  /* Number text (1/3 etc) */
+  .numbertext {
+    color: #f2f2f2;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+  }
+  
+  /* The dots/bullets/indicators */
+  .dot {
+    cursor: pointer;
+    height: 15px;
+    width: 15px;
+    margin: 0 2px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    transition: background-color 0.6s ease;
+  }
+  
+  .active, .dot:hover {
+    background-color: #717171;
+  }
+  
+  /* Fading animation */
+  .fade {
+    animation-name: fade;
+    animation-duration: 1.5s;
+  }
+  
+  @keyframes fade {
+    from {opacity: .4}
+    to {opacity: 1}
+  }    
+</style>
--- a/src/components/Contribute.astro
+++ b/src/components/Contribute.astro
@ -0,0 +1,62 @@
+---
+import { contributions } from "../config";
+---
+
+<section id="contribute">
+    <div class="text">
+        <h2>Contribute</h2>
+        <p>No matter your experience or skill level, you can progress content freedom.</p>
+    </div>
+    <div class="contributions">
+        {contributions.map((contribution: object) => (
+            <div class="contribution">
+                <figure><img src={contribution.url} alt={contribution.title}/></figure>
+                <div class="text">
+                    <p class="title">{contribution.title}</p>
+                </div>
+            </div>
+        ))}
+    </div>
+    <div class="button-primary"><a href="/contribute">Collaborate with Contributors</a></div>
+</section>
+<style>
+    .contributions {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 40px;
+    }
+
+    .contributions .contribution {
+        display: flex;
+        flex-direction: column;
+        width: 150px;
+        height: 150px;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        /* padding: 10px; */
+        border-radius: 16px;
+        transition: 0.3s;
+        box-shadow: 2px 2px 2px var(--tertiary-background);
+        background-color: var(--secondary-background);
+    }
+
+    .contributions .contribution figure {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+    }
+
+    .contributions .contribution figure img {
+        height: 50px;
+        color: red;
+        fill: red;
+    }
+
+    .contributions .contribution .title {
+        font-size: 1.5rem;
+        font-weight: bold;
+    }
+</style>
--- a/src/components/Featured.astro
+++ b/src/components/Featured.astro
@ -0,0 +1,81 @@
+---
+import { Image } from "astro-preload/components";
+import { featured, AWESOME_LBRY } from '../config';
+---
+
+<section id="featured">
+    <div class="text">
+        <h2>Featured Projects</h2>
+        <p>Check out some cool projects from the community.</p>
+    </div>
+    <div class="projects">
+        {featured.map((slide: object) => (
+            <a href={slide.href} target="_blank" class="project">
+                <figure><Image url={slide.src || slide.href} height="100%" alt={slide.title}  /></figure>
+                <div class="text">
+                    <p class="title">{slide.title}</p>
+                    <p class="description">{slide.description}</p>
+                </div>
+            </a>
+        ))}
+    </div>
+    <div class="button-primary"><a href={AWESOME_LBRY} target="_blank">Explore even more!</a></div>
+</section>
+<style>
+    .projects {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 40px;
+    }
+
+    .projects .project {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 400px;
+        height: 225px;
+        overflow: hidden;
+        /* padding: 10px; */
+        border-radius: 16px;
+        transition: 0.3s;
+        box-shadow: 2px 2px 2px var(--tertiary-background);
+        background-color: var(--secondary-background);
+    }
+
+    .projects .project figure {
+        display: flex;
+        justify-content: center;
+        margin: 10px;
+        border-radius: 0.5em;
+        overflow: hidden;
+    }
+
+    .projects .project figure img {
+        border-radius: 0.5em;
+    }
+
+    /* .projects */
+
+    .projects .project .text {
+        position: absolute;
+        top: 100%;
+        transition: 0.3s;
+        width: 100%;
+        padding: 10px 20px;
+        background-color: var(--tertiary-background);
+    }
+
+    .projects .project .text .title {
+        font-size: 1.25rem;
+        font-weight: bold;
+    }
+
+    .projects .project:hover {
+        transform: scale(1.1);
+    }
+
+    .projects .project:hover .text {
+        transform: translateY(-100%);
+    }
+</style>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@ -0,0 +1,25 @@
+<footer class="footer">
+    <ul>
+        <li>
+            <a href="https://lbry.org" title="Rediscover content freedom">LBRY.org</a>
+        </li>
+
+        <li><a href="/overview" title="LBRY overview">Overview</a></li>
+        <li><a href="/playground" title="Play with LBRY">Playground</a></li>
+        <li><a href="/resources" title="View LBRY resources">Resources</a></li>
+        <li><a href="/community" title="Hang with LBRY">Community</a></li>
+    </ul>
+</footer>
+<style>
+    footer {
+        margin-top: 2rem;
+        padding: 20px 20px;
+        background-color: var(--secondary-background);
+    }
+
+    footer ul {
+        display: flex;
+        gap: 25px;
+        list-style: none;
+    }
+</style>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -0,0 +1,41 @@
+---
+import '../styles/Header.css';
+
+export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {};
+const { pathname } = Astro.url;
+
+const links = [
+  { name: "Overview", href: "/overview" },
+  { name: "Playground", href: "/playground" },
+  { name: "Resources", href: "/resources"},
+  { name: "Tutorials", href: "/tutorials"},
+  { name: "Community", href: "/community"}
+]
+
+const isActive = (href: string)=>{
+    return href === pathname || href === pathname.split('/').slice(0,2).join('/');;
+}
+
+---
+
+<header>
+  <nav class="navigation">
+    <div class="left">
+      <a class="logo" href="/" title="LBRY homepage">
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14.803, 6.045l0, 0.705l-6.941, 4.265l-5.23, -2.565l0.01, -0.395l5.201, 2.56l6.61, -4.06l-0.001, -0.29l-6.24, -3.01l-6.96, 4.305l0, 1.925l6.59, 3.26l6.722, -4.123l-0.362, -0.062l0.04, -0.245l0.856, 0.145l-0.14, 0.875l-0.245, -0.04l0.06, -0.382l-6.911, 4.232l-6.959, -3.44l0, -2.34l7.29, -4.51l6.61, 3.19Z"/>
+        </svg>
+        <span><strong>LBRY Tech</strong></span>
+      </a>
+      <ul>
+        {links.map((link) => (
+          <li><a class:list={[isActive(link.href) ? "active": ""]} href={link.href} title={link.name}>{link.name}</a></li>
+        ))}
+      </ul>
+    </div>
+    <div class="right">
+      <div class="search"><p>Search TODO</p></div>
+      <btn class="menu"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></btn>
+    </div>
+  </nav>
+</header>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@ -0,0 +1,153 @@
+<div class="hero">
+    <div class="left">
+        <div class="center">
+            <h1>LBRY</h1>
+            <p>LBRY is a <span class="tag">free</span>, <span class="tag">open</span>, and <span class="tag">community-run</span> digital marketplace.<br/>
+            Build the future of content freedom. </p>
+        </div>
+    </div>
+    <div class="right">
+        <figure><img src="https://picsum.photos/750/420" /></figure>
+        <div class="body">
+            <a class="button-primary" href="/playground">Explore our Playground</a>
+        </div>
+    </div>
+</div>
+<style>
+
+	.hero {
+		display: flex;
+		/* align-items: center; */
+		min-height: 50vh;
+		gap: 50px;
+		background-color: var(--secondary-background);
+	}
+
+	.center {
+		display: flex;
+		flex-direction: column;
+		align-self: flex-end;
+	}
+
+	.left, .right {
+		display: flex;
+		align-items: flex-start;
+        justify-content: center;
+		flex-direction: column;
+		width: 50%;
+        margin: 0 25px;
+	}
+
+	.hero h1 {
+		font-size: 3.5rem;
+	}
+
+	.hero .left p {
+		font-size: 1.5rem;
+		line-height: 2rem;
+	}
+
+	.tag {
+		font-weight: bold;
+		color: var(--accent);
+	}
+
+    .hero .right {
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        /* overflow: hidden; */
+    }
+
+    .hero .right .body {
+        position: absolute;
+        align-items: center;
+    }
+
+    .hero .right .body a {
+        font-size: 1.5rem;
+        font-weight: bold;
+        padding: 10px 20px;
+        background: rgba(4, 21, 35, 0.5);;
+        border-radius: 16px;
+        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 2px var(--tertiary-background);
+        backdrop-filter: blur(7.7px);
+        -webkit-backdrop-filter: blur(7.7px);
+    }
+
+    .hero .right .body a:hover {
+        transform: scale(1.2);
+        transform: rotate(2deg);
+        color: var(--accent);
+    }
+
+    .hero .right figure {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* max-height: 90%; */
+        overflow: hidden;
+    }
+
+    .hero .right img {
+        /* position: absolute; */
+        width: 70%;
+        align-self: center;
+        /* top: 25%; */
+        /* left: 85px; */
+        /* top: 92px; */
+        transform: rotate(-2deg);
+        transform-origin: 0 0;
+        box-shadow: 2px 2px 2px;
+        border-radius: 16px;
+        filter: blur(1px);
+    }
+
+    /* img {
+        position: absolute;
+        width: 70%;
+        transform: translateY(-40%);
+        border-radius: 1em;
+        box-shadow: inset 0 0 10px 10px #000;
+    } */
+
+    @media only screen and (max-width: 1000px) {
+        .hero {
+            gap: 25px;
+        }
+    }
+
+    @media only screen and (max-width: 750px) {
+        .hero {
+            align-items: center;
+            flex-direction: column;
+            gap: 50px;
+            padding: 20px 0;
+        }
+
+        .hero .left, .hero .right {
+            margin: 0;
+            width: 80%;
+        }
+
+        .hero .body {
+            width: fit-content;
+        }
+
+        .hero .right .body a {
+            width: fit-content;
+        }
+
+        .hero .right .body a:hover {
+            transform: scale(1.2);
+            transform: rotate(2deg);
+            color: var(--accent);
+        }
+    }
+</style>
--- a/src/components/Resources.astro
+++ b/src/components/Resources.astro
@ -0,0 +1,75 @@
+---
+import { resources } from '../config';
+---
+
+<section id="resources">
+    <div class="text">
+        <h2>Study Class</h2>
+        <p>Learn By Reading</p>
+    </div>
+    <div class="resources">
+        {resources.map((resource: object) => (
+            <div class="resource">
+                <div class="text">
+                    <p class="title">{resource.title}</p>
+                    <p class="description">{resource.description}</p>
+                </div>
+                <div class="button-primary"><a href={resource.href}>Study {resource.title}</a></div>
+            </div>
+        ))}
+    </div>
+</section>
+<style>
+    .resources {
+        display: flex;
+        gap: 40px;
+        flex-basis: 0;
+        margin: 0 50px;
+    }
+
+    .resources .resource {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 25px;
+        justify-content: center;
+        padding: 10px 20px;
+        border-radius: 1em;
+        box-shadow: 2px 2px 2px var(--tertiary-background);
+        background-color: var(--secondary-background);
+    }
+
+    .resources .resource .title {
+        font-size: 1.2rem;
+        font-weight: bold;
+    }
+
+    .resources .resource .description {
+        font-size: 1rem;
+    }
+
+    .resources .resource .button-primary {
+        align-self: center;
+    }
+
+    @media only screen and (max-width: 1000px) {
+        .resources {
+            flex-direction: column;
+            flex-wrap: wrap;
+            margin: 50px;
+        }
+
+        .resources .resource .title {
+            text-align: center;
+        }
+    }
+
+    @media only screen and (max-width: 600px) {
+        .resources {
+            flex-direction: column;
+            margin: 50px;
+        }
+
+        
+    }
+</style>
--- a/src/config.js
+++ b/src/config.js
@ -0,0 +1,69 @@
+export const AWESOME_LBRY = "https://github.com/LBRYFoundation/Awesome-LBRY";
+
+export const features = [
+    {
+      description: "Get your head around LBRY with 3 interactive examples.",
+      destination: "/playground",
+      label: "Party in the Playground",
+      title: "Learn By Trying"
+    },
+    {
+      description: "Dig into the formal specification of the LBRY protocol.",
+      destination: "/spec",
+      label: "Study the Spec",
+      title: "Learn By Reading"
+    }
+]
+
+export const resources = [
+  {
+    title: "Overview",
+    href: "/overview",
+    description: "What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?"
+  }, {
+    title: "Resources",
+    href: "/resources",
+    description: "Looking for API documentation, formal specifications, how-tos, resources, or the meaning of life? Find at least some of these things in the resources area."
+  }, {
+    title: "Specifications",
+    href: "/spec",
+    description: "Dig into the formal specification of the LBRY protocol."
+  }
+]
+
+export const contributions = [
+  {
+    url: "/assets/svg/code.svg",
+    title: "Coding"
+  }, {
+    url: "/assets/svg/wand-magic-sparkles.svg",
+    title: "Creating"
+  }, {
+    url: "/assets/svg/keyboard.svg",
+    title: "Writing"
+  }, {
+    url: "/assets/svg/comments.svg",
+    title: "Testing"
+  }
+]
+
+export const featured = [
+  {
+    src: "https://codeberg.org/MorsMortium/LBRY-GTK/media/branch/CRewrite/share/icons/hicolor/scalable/apps/lbry-gtk.svg",
+    href: "https://codeberg.org/MorsMortium/LBRY-GTK",
+    title: "LBRY GTK",
+    description: "LBRY-GTK as the name suggests is a GTK client to the LBRY network."
+  },
+  {
+    src: "https://github.com/alojzjakob/LBRYworm/raw/main/lbryworm/css/lbryworm-logo.png",
+    href: "https://www.lbryworm.com/",
+    title: "Bookworm",
+    description: "LBRY Worm is a search engine that surfaces books from the LBRY blockchain."
+  },
+  {
+    src: "https://user-images.githubusercontent.com/14793624/126025087-08fae6dd-e9d3-4eed-9f3a-aa15661553e3.png",
+    href: "https://github.com/Hound-fm/podcatcher",
+    title: "Podcatcher",
+    description: "Audio media crawler for lbry."
+  }
+]
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -0,0 +1 @@
+/// <reference types="astro/client" />
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -0,0 +1,57 @@
+---
+import '../styles/global.scss';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+
+import { ViewTransitions } from 'astro:transitions';
+
+interface Props {
+	title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>{title || 'LBRY Tech'}</title>
+
+		<meta name="apple-mobile-web-app-capable" content="yes"/>
+		<meta name="author" content="${config.meta.title}"/>
+		<meta name="description" content="${description}"/>
+		<meta name="title" content="${config.meta.title}"/>
+		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
+
+		<!-- / Open Graph / -->
+		<meta property="og:title" content={title}/>
+		<meta property="og:description" content="${description}"/>
+		<!-- <meta property="og:image" content="${newMetadata && newMetadata["og:image"] ? newMetadata["og:image"] : "/assets/media/images/og-image.png"}"/> -->
+		<meta property="og:image:height" content="${newMetadata && newMetadata["og:image:height"] ? newMetadata["og:image:height"] : 1125}"/>
+		<meta property="og:image:width" content="${newMetadata && newMetadata["og:image:width"] ? newMetadata["og:image:width"] : 2000}"/>
+		<meta property="og:locale" content="en_US"/>
+		<meta property="og:site_name" content="LBRY.tech"/>
+		<meta property="og:type" content="website"/>
+		<meta property="og:url" content="https://lbry.tech${state.href}"/>
+
+		<!-- / Social/App Stuff / -->
+		<meta name="apple-mobile-web-app-title" content="${config.meta.title}"/>
+		<meta name="application-name" content="${config.meta.title}"/>
+		<meta name="msapplication-TileColor" content="${config.meta.color}"/>
+		<meta name="msapplication-TileImage" content="/assets/apple-touch-icon.png"/>
+		<meta name="theme-color" content="${config.meta.color}"/>
+
+		<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"/>
+		<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
+		<link rel="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
+		<link rel="shortcut icon" href="/assets/favicon.ico"/>
+		<ViewTransitions />
+	</head>
+	<body>
+		<Header/>
+		<main><slot /></main>
+		<Footer/>
+	</body>
+</html>
+<style is:global>
+</style>
--- a/src/layouts/Markdown.astro
+++ b/src/layouts/Markdown.astro
@ -0,0 +1,33 @@
+---
+import Layout from './Layout.astro';
+import { markdown } from '@astropub/md'
+import '../styles/markdown.css';
+// import {compile} from '@mdx-js/mdx'
+
+// const compiled = await compile()
+
+const { frontmatter } = Astro.props;
+
+const description = await markdown(frontmatter.description)
+
+---
+
+<Layout title={frontmatter.title}>
+    <div class="wrapper">
+        <div class="markdown-body">
+            <h1>{frontmatter.title}</h1>
+            <h3>{description}</h3>
+            <slot/>
+        </div>
+    </div>
+    <style>
+        .wrapper {
+            margin: auto;
+            max-width: 1000px;
+        }
+
+        .wrapper .markdown-body {
+            margin: 10px 20px;
+        }
+    </style>
+</Layout>
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@ -0,0 +1,9 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+import { features } from '../config';
+---
+
+<Layout title="404">
+    <h1>404</h1>
+</Layout>
--- a/src/pages/build.mdx
+++ b/src/pages/build.mdx
@ -0,0 +1,253 @@
+---
+layout: '../layouts/Markdown.astro'
+title: Build
+description: Learn how to build your own app via LBRY in this comprehensive guide! The future of content freedom begins with you. *patriotic music plays*
+---
+
+## Introduction
+
+Want to build something on top of LBRY? This is the place to get started. If this is your first introduction to LBRY, you should read the [Overview](./overview.md) first. If you would rather build with us, check out our [Contributing Guide](./contribute.md).
+
+There are exactly 1,000,006 app ideas that could work on the LBRY network, but it doesn't make sense for _everything_ to be built on it.
+
+### When to Use LBRY
+
+- You want to build an application that contributes to the world's knowledge, or benefits from global, shared discovery.
+- You want to replace an existing centralized service related to digital content distribution with a decentralized or community-controlled one.
+- You want to build an application that is permissionless to interact with.
+- You want to further openness, freedom of information, and/or personal choice on the internet.
+
+### When Not to Use LBRY
+
+- You want to privately distribute data or information. LBRY is designed for publishing and sharing information in an open fashion.
+- You want to do illegal things.
+
+Ready to get started? Let's build a [Hello Satoshi](#hello-satoshi) app.
+
+If you want to read a more general overview on application building (or you don't want to use Electron), you can jump right to [Applications 101](#applications-101).
+
+## Hello Satoshi
+
+This section will guide you through creating a basic [Electron](https://electronjs.org) application that calls to the LBRY network and renders an image returned by the network.
+
+Electron is nice because it allows you to easily create web apps that don't rely on any centralized web servers, but you can absolutely use any tooling or language you would like.
+
+### The Steps
+
+_These steps require [npm](https://www.npmjs.com). Learn how to install it [here](https://www.npmjs.com/get-npm)._
+
+#### 1. Download and build the starter app
+
+[electron-starter](https://github.com/lbryio/electron-starter) is the `create-react-app` of LBRY application building.
+
+```
+git clone https://github.com/lbryio/electron-starter
+cd electron-starter
+npm install
+npm run dev
+```
+
+#### 2. Verify the app works
+
+Type a word into the text input and click the button to [resolve](https://lbry.tech/api/sdk#resolve) it. This performs a [[claim]] lookup, which retrieves metadata the title, thumbnail, and file type from the LBRY blockchain.
+
+Try resolving `lbry://doitlive`.
+
+#### 3. Modify the code
+
+Now that we have the metadata, let's [get](https://lbry.tech/api/sdk#get) the actual file! The code to do this is already there, just un-comment these lines in the app's [renderer/index.js](https://github.com/lbryio/electron-starter/blob/master/src/renderer/index.js) file.
+
+```js
+claimData.innerText = "Loading...";
+
+Lbry.get({ uri: `lbry://${value}` })
+  .then(result => {
+    const filePath = result.download_path;
+    const image = document.createElement("img");
+
+    image.src = filePath;
+    imageWrapper.appendChild(image);
+
+    claimData.innerText = JSON.stringify(result, null, 2);
+  })
+  .catch(error => {
+    claimData.innerText = JSON.stringify(error, null, 2);
+  });
+```
+
+This is the code that actually downloads a file. There are more robust ways to handle the download progress, but this will work fine for images. After you added that code back, try `get`ing `lbry://doitlive`.
+
+### You Did It!
+
+While our Hello Satoshi app isn't much to look at, it shows how simple it is to connect to the LBRY network and download files!
+
+Unfortunately, most users will want more functionality in an app than typing into a box and looking at the JSON data returned. Let's check out how to build apps real people want to use in the next section.
+
+## Applications 101
+
+You can build many types of apps. Your app doesn't have to use Electron, nor does it have to be targeted at consumers, use a UI, or even fetch digital content at all! In this section, we'll look into the different types of apps you could build, and the different components needed to build anything you want.
+
+Most applications will use the [LBRY SDK](#sdk) as a way of accessing and communicating with the LBRY network. A look at the [APIs](https://lbry.tech/api/sdk) provided by the SDK will help you understand what it can and can't do.
+
+Some applications do not need to access content available on the network (e.g. a wallet-only app, or a blockchain visualizer). These applications might use [lbrycrd](#lbrycrd), the full-node blockchain daemon, or [chainquery](#chainquery), which parses blockchain data into SQL.
+
+Let's look at some specific types of applications and the basic design for each.
+
+### Web Applications
+
+#### Full Web Applications
+
+By full web application, we mean a centrally-hosted web application that uses most or all of the suite of capabilities the LBRY protocol provides.
+
+For an example of a full web application that uses LBRY, check out the [spee.ch codebase](https://github.com/lbryio/spee.ch).
+
+To create a full web application follow the typical steps you follow to create a basic application. Then, [follow the steps to interact with the LBRY SDK](#sdk).
+
+Full web applications can may also benefit from using [chainquery](#chainquery), which provides an SQL interface to blockchain data. 
+
+If your web application will utilize user accounts, a common design pattern is to simply associate user IDs with common LBRY types like files, claims, and channels.
+
+If your web application will utilize per-user funds, we recommend using the account functionality provided by the SDK to give each user an account (wallet). This will allow you to keep funds cleanly separated with a single SDK instance.
+
+That's all it takes!
+
+#### Blockchain Applications
+
+By blockchain applications, we mean applications that don't utilize the data network and digital content distribution capabilities of the LBRY protocol.
+
+For an example of a blockchain application that uses LBRY, check out the [block-explorer codebase](https://github.com/lbryio/block-explorer).
+
+Whether your blockchain application is a web application, desktop application, or a mobile application, the steps will be similar to those of full applications.
+
+In each case, you'll follow the typical steps to build a basic application. Then, if your app is reading data from the blockchain and presenting it to users, you'll want to [follow the steps for using chainquery](#chainquery).
+
+If your application needs to send funds, you'll want to [follow the steps for using lbrycrd](#lbrycrd). Note that it is also possible to move funds by using the [LBRY SDK](#sdk), but the SDK does not provide a full blockchain node, only an [[SPV]] wallet.
+
+#### Other Web Applications
+
+It is also possible to create a browser extension similar to Joule and Metamask. Generally there are two ways to do this:
+
+1. Have the user run a local copy of the [SDK](#sdk) on their computer and send commands from the browser that interact with the user's personal wallet.
+
+1. Run the [SDK](#sdk) on a centrally hosted server and manage keys or funds for each user. If you're doing this, you'll want to read [Full Web Applications](#full-web-applications).
+
+Going through a centralized server makes it easier on users, but comes with more responsibility to keep your user's funds secure. It also requires creating business logic on your server to associate user accounts with common types like claims and files.
+
+#### Desktop Applications
+
+Desktop applications can offer greater anonymity, better performance, and features that aren't possible with a regular web app.
+
+Regardless of the type of desktop app, you'll want to follow the steps for [using the SDK](#sdk). Once that is done you can begin building an app that allows users to be fully in control of their data. They won't have to rely on third party services keeping anything secure, and they can choose to help strengthen LBRY network through seeding.
+
+##### Electron Apps
+
+The [official LBRY desktop app](https://github.com/lbryio/lbry-desktop) is built with Electron. It is very easy to build with, and allows web developers to easily start creating "native" desktop applications. You can use a plain html document with a `<script>` tag, or build out a large web app. The official desktop app uses [React](https://reactjs.org/).
+
+If you want to write an electron app, check out the [electron-starter project](https://github.com/lbryio/electron-starter) for a bare bones setup that is very similar to how [lbry-desktop](https://github.com/lbryio/lbry-desktop) is structured. It's also a simple way to explore the [SDK API](https://lbry.tech/api/sdk).
+
+Check out [this video](https://spee.ch/6/lbry-electron-starter) for a brief overview and guide to get it running. If you just want the source code, go [here](https://github.com/lbryio/electron-starter). Or, if you really really want to see it in action _now_, just paste these commands into your terminal:
+
+```
+git clone https://github.com/lbryio/electron-starter
+cd electron-starter
+npm install
+npm run dev
+```
+
+##### Other Applications
+
+Who needs JavaScript? If performance is your number one goal, you probably won't want to use Electron. You can use any language you want to build an app on LBRY.
+
+To build a desktop application in your language or framework of choice, follow your typical steps to create a basic application and then [follow the steps for using the LBRY SDK](#sdk).
+
+### Mobile Applications
+
+#### Android Applications
+
+Creating a mobile application is slightly trickier than a desktop application, but still quite doable.
+
+For an example of a mobile application that uses LBRY, check out [LBRY for Android](https://github.com/lbryio/lbry-android).
+
+The tricky part on mobile is getting the SDK running and responding to calls. We recommend following the [build steps](https://github.com/lbryio/lbry-android/blob/master/BUILD.md) for the official mobile browser and then stripping out the parts you do not need.
+
+Once the SDK is running, follow [these steps](#sdk) to interact and make calls.
+
+#### iOS Applications
+
+We do not currently have tooling available to build LBRY apps on iOS.
+
+## Application Tooling
+
+### SDK
+
+The [LBRY SDK](https://github.com/lbryio/lbry-sdk) provides an API that enables easy access to all functionality of the LBRY network. Most applications will choose to use the SDK.
+
+You can download the latest version from the [releases page](https://github.com/lbryio/lbry-sdk/releases) or via the following URLs, which will always download the latest SDK for each operating system:
+
+| OS | URL |
+| --- | --- |
+| Linux | [lbry.com/releases/lbry.deb](https://lbry.com/releases/lbry.deb) |
+| macOS | [lbry.com/releases/lbry.dmg](https://lbry.com/releases/lbry.dmg) |
+| Windows | [lbry.com/releases/lbry.exe](https://lbry.com/releases/lbry.exe) |
+
+#### Using the SDK
+
+Once that is downloaded, there are two steps to get it integrated into your app.
+
+First, run `lbrynet start` in the directory you downloaded the SDK. This starts the API server and connects to the LBRY network.
+
+Then, use an API wrapper to talk to the SDK or write your own. There are a number of simple [API wrappers](https://lbry.tech/resources/api-wrappers) available in several different languages, created by LBRY community members! These allow you to easily send commands to the SDK in the language of your choice.
+
+If a wrapper for the language you would like to use doesn't exist, it is still fairly easy to interact with. The SDK provides a JSON-RPC server at `localhost:5279` for interaction. You can call it via `cURL` or the HTTP functionality provided by the language you are using. You can look at an existing wrapper in another language for more detail.
+
+The API provided by the SDK is documented [here](https://lbry.tech/api/sdk).
+
+### Chainquery
+
+[Chainquery](https://github.com/lbryio/chainquery) parses and syncs blockchain data in realtime to an SQL database. Applications that want to query blockchain data, whether that's transactions or [[claim]] metadata, will find it useful to use Chainquery.
+
+You can download the latest version from the [releases page](https://github.com/lbryio/chainquery/releases) or via the following URLs, which will always download the latest version for each operating system:
+
+| OS | URL |
+| --- | --- |
+| Linux | [lbry.com/releases/chainquery.deb](https://lbry.com/releases/chainquery.deb) |
+| macOS | [lbry.com/releases/chainquery.dmg](https://lbry.com/releases/chainquery.dmg) |
+| Windows | [lbry.com/releases/chainquery.exe](https://lbry.com/releases/chainquery.exe) |
+
+Note: chainquery has both 32-bit and 64-bit builds, which the redirect URLs do not handle. Check the [releases page](https://github.com/lbryio/chainquery/releases) to ensure you get the right one.
+
+#### Using Chainquery
+
+The `README` bundled with Chainquery provides the latest steps for running Chainquery.
+
+After following those steps, you'll have an SQL database that stays up to date, including [[mempool]] transactions. You can then query this database using the functionality provided by the language you're developing in.
+
+### lbrycrd
+
+[lbrycrd](https://github.com/lbryio/lbrycrd) provides a full blockchain node and a daemon for making JSON-RPC calls. Applications that require full blockchain functionality (as opposed to [[SPV]], provided by the [SDK](#sdk) will want to use lbrycrd. Most applications will not need to use lbrycrd.
+
+You can download the latest version from the [releases page](https://github.com/lbryio/lbrycrd/releases) or via the following URLs, which will always download the latest version for each operating system:
+
+| OS | URL |
+| --- | --- |
+| Linux | [lbry.com/releases/lbrycrd.deb](https://lbry.com/releases/lbrycrd.deb) |
+| macOS | [lbry.com/releases/lbrycrd.dmg](https://lbry.com/releases/lbrycrd.dmg) |
+| Windows | [lbry.com/releases/lbrycrd.exe](https://lbry.com/releases/lbrycrd.exe) |
+
+#### Using lbrycrd
+
+Run `./lbrycrdd -server -daemon` to tell the program to provide a JSON-RPC daemon.
+
+We do not provide API wrappers for `lbrycrd`, but interacting with it works similar to the [SDK](#sdk).
+
+`lbrycrd` is a fork of Bitcoin and it functions similarly to Bitcoin. [This documentation](https://en.bitcoin.it/wiki/API_reference_(JSON-RPC)) may help you understand how to make calls.
+
+A full list of methods is available [here](https://lbry.tech/api/blockchain).
+
+## Community and Support
+
+Trouble? Questions? Want to share your progress? Interact with other devs!
+
+- Join the #dev channel [in our chat](https://chat.lbry.com)
+- Introduce yourself or ask a question in [the forum](https://forum.lbry.tech).
+- Every LBRY repository on our [GitHub](https://github.com/lbryio) contains contact information for the maintainer.
--- a/src/pages/community.mdx
+++ b/src/pages/community.mdx
@ -0,0 +1,18 @@
+---
+layout: '../layouts/Markdown.astro'
+title: Community
+description: Want to talk with other LBRYians? Find out where the LBRY team hangs out. It's not _only_ shady street corners.
+---
+
+Sometimes we say that the LBRY [blockchain](/glossary#blockchain) is the foundation of the LBRY protocol, but that's not really true. The foundation of LBRY is the community of people that make it possible.
+
+* [LBRY Foundation Discord](https://chat.lbry.com/)
+* [Developer Forum](https://discourse.lbry.com/)
+* [LBRY.fund](https://lbry.fund/)
+* [Reddit r/lbry](https://lbry.fund/)
+* [X (Twitter)](https://twitter.com/LBRYcom)
+* [Facebook](https://www.facebook.com/lbryio)
+
+Get [upstream of consensus](https://spee.ch/d/consensus.png) by participating in the LBRY community.
+
+![consensus](https://spee.ch/d/consensus.png)
--- a/src/pages/glossary.md
+++ b/src/pages/glossary.md
@ -0,0 +1,241 @@
+---
+layout: '../layouts/Markdown.astro'
+title: Glossary
+description: lbry.tech sometimes uses acronyms and fancy words. This glossary converts our jargon into clarity.
+---
+
+This glossary will help you understand the exact meaning of LBRY and blockchain related terms.
+
+We encourage the submission of changes and additions to this glossary.
+
+### Blob
+
+The smallest unit of data in LBRY. Each blob is referenced by its [blob hash](#blob-hash), an SHA-384 hash of the blob contents. When files are uploaded to LBRY, they are split into blobs, which are then shared with other peers. See [Encoding](/spec#encoding) for more details.
+
+### Blob Exchange Protocol
+
+The peer-to-peer protocol that LBRY nodes use to upload and download blobs from each other. It handles data transfer, availability checking, and data price negotiation. The name is sometimes shortened to "BlobEx" or "blobex". [The spec](/spec#blob-exchange-protocol) has more info.
+
+### Block
+
+A data structure that consists of a block header and a list of transactions. Each block references one previous block, thus forming an ordered list called the blockchain.
+
+### Block Header
+
+The fields included at the top of each block. They are
+
+- block version number
+- hash of the previous block header
+- hash of the transactions in the block
+- root hash of the claimtrie, after all operations in the current block have been applied
+- current timestamp in seconds
+- current *target*
+- *nonce*
+
+### Block Height
+
+The sequence number of a block in the blockchain. The first block is at height 0, the second is at height 1, and so on. Block 0 is called the [genesis block](#genesis-block).
+
+### Blockchain
+
+An open, distributed ledger that records transactions in a verifiable and change-resistant way. The LBRY blockchain serves as an index of the content available on the network, a payment system and record of purchases for priced content, and a source of cryptographic publisher identities.
+
+### Canonical URL
+
+Similar to the [Short URL](#short-url), but will include the channel for but for claims that are signed by channels. The canonical URL is generally the recommend URL to use when linking LBRY URLs or displaying URLs to users. Note that it is rarely possible for the canonical URL to change to a shorter version when a competeting channel or claim is abandoned, but even if this happens, older canonical URLs will still work.
+
+### Chainquery
+
+A tool that stores blockchain data in an SQL database, keeps the database up-to-date as the blockchain grows, and provides an API to access the data using standard SQL queries. 
+
+[chainquery on github](https://github.com/lbryio/chainquery)
+
+### Channel
+
+The unit of identity in LBRY. A channel is established by publishing a special type of claim that contains a public key. Once a channel is created, content can be published "into" a channel by signing a piece of content with the private key that goes with a channel's public key. Channels allow publishers to build a brand and notify subscribers when new content is published. For details, see [Channels](/spec#channels).
+
+### Claim
+
+A [stake](#stake) that contains metadata about a stream or channel. Claims are stored in the claimtrie. More info at [Stake & Claims](/spec#stakes).
+
+### Claimtrie
+
+A claimtrie is a data structure used to store the set of all claims and prove the correctness of URL resolution. Full details at [Claimtrie](/spec#claimtrie).
+
+### Claim Sequence
+
+The order in which a claim for a particular name was created. Claim sequence is used in URLs to reference claims by their order. For example, the third claim for the name `hello` can be referenced by `lbry://hello:3`. See [Claim Sequence](/spec#claim-sequence) for more details.
+
+### Cold Storage
+
+A way to securely store digital information (e.g. private keys) by storing them on a medium that is not connected to the internet. This can take the form of an offline computer, USB key, hardware wallet, or even writing the data on a piece of paper.
+
+### Confirmed Transaction
+
+Transaction that has been included in the blockchain. Probability of transaction being rejected is measured in a number of confirmations. See [Confirmation](#confirmation).
+
+### Confirmation
+
+Transactions are confirmed when they have been included in a block that is part of the current "best" chain (the one with the highest total proof-of-work). A transaction in the most recent block of the chain is said to have 1 confirmation. A transaction in the previous block has 2 confirmations, and so on. A transaction that has not yet been included has zero confirmations, or is unconfirmed. Confirmation is not a guarantee that a transaction is final. Rather, the number describes the probability that a confirmation is final. Higher numbers increase the probability exponentially.
+
+### Consensus
+
+A set of rules that are used by blockchain nodes to determine whether a block is valid.
+
+### Content Blob
+
+A blob that contains part of a published file.
+
+### Dewey
+
+The name of the smallest unit of currency in LBRY. 1 LBRY Credit (LBC) is equal to 100 million deweys. The name comes from the [classification system](https://en.wikipedia.org/wiki/Dewey_Decimal_Classification) used by libraries to organize their collections.
+
+### Effective Amount
+
+The sum of the amount of an active claim and all of its active supports. The effective amount affects which claim is controlling for a name. Claims that are not active have an effective amount of 0.
+
+### Fee
+
+The price, set by the publisher, that must be paid before a piece of content can be downloaded. Free content has a fee of 0.
+
+### Full Node
+
+A node which can definitively decide whether a transaction is valid or not, without having to trust another source. Full nodes usually implement the full LBRY blockchain protocol and possess a full copy of the blockchain data. Compare with [SPV node](#simplified-payment-verification).
+
+### Genesis Block
+
+The first block in the blockchain. The genesis block is not mined, but is hard-coded into the protocol. It has no reference to a previous block. The LBRY genesis block was released on [28 Oct 2015](https://explorer.lbry.com/blocks/0). The first real block was mined was on [23 Jun 2016](https://explorer.lbry.com/blocks/1).
+
+
+#### Hard Fork 
+
+A change to the consensus rules such that a block that would have been considered invalid under the old rules is now considered valid under the new rules. Nodes that choose to adopt the hard fork will have to upgrade to the new rules in order to stay on the network. Nodes that refuse to adopt the new rules may continue to use the old rules. If a significant number of nodes are running both versions of the rules at once, the chain may split into two incompatible chains.
+
+### Hashrate
+
+A measure of mining hardware performance expressed in hashes per second (H/s). Click [here](https://www.tokens24.com/cryptopedia/basics/bitcoin-hash-rate) for more details.
+
+### LBC
+
+The currency code for [LBRY Credit](#lbry-credits).
+
+### lbrycrd
+
+lbrycrd is the authoritative implementation of the LBRY [blockchain](#blockchain) protocol. See [the source code](https://github.com/lbryio/lbrycrd), [the API](/api/blockchain), or [the formal specification](/spec).
+
+### lbry-sdk
+
+The SDK is three things:
+
+- an implementation of the full LBRY protocol specification, except the blockchain protocol.
+- components that are not part of the spec but are useful for developing applications using the protocol
+- a daemon that participates in the LBRY data network and provides an API for interacting with the protocol
+
+See [the source code](https://github.com/lbryio/lbry-sdk) or [the API documentation](/api/sdk).
+
+### LBRY Credits
+
+LBRY Credits are the cryptocurrency used to make digital transactions on the blockchain.
+
+### Mainnet
+
+Main LBRY network and its blockchain. The term is mostly used in comparison to [testnet](#testnet).
+
+### Manifest
+
+The first blob in a stream. The manifest contains information necessary to find the content blobs and decode them into a file. See [Streams](/spec#streams) in the specification.
+
+### Mempool
+
+The collection of unconfirmed transactions stored by a node until they either expire or get included in the blockchain.
+
+### Node
+
+A node, or client, is a program that implements LBRY. LBRY has two types of nodes: blockchain node and dht nodes. A single program may be both at once.
+
+### Outpoint
+
+The combination of a transaction ID and an index which refers to a particular transaction output. An outpoint is the most specific way to refer to a version of a claim. In contrast, the claim ID is used to refer to the latest version of a claim.
+
+### Peer
+
+A node that is connected to the global network and is responding to protocol requests. LBRY is a peer-to-peer network, which means that nodes connect to each other to perform network operations. A single node may sometimes act as a client and sometimes as a server.
+
+### Permissionless
+
+A system is permissionless if it can be joined, interacted with, or used without the explicit authorization of any party, nor can any party revoke the ability to use the system. 
+
+An open system with no centralized control is permissionless. Examples include HTTP and Bitcoin.
+
+### README
+
+A file included with each LBRY project that contains basic information about that project. More in (/resources/repository-standards).
+
+### Reflector
+
+A long-running node that accepts blobs for upload and rehosts them on the network.
+
+### Resolve (or URL Resolution) {#resolve}
+
+The process of translating a URL into the associated claim ID and metadata. See [Resolution](/spec#resolution) for details.
+
+### Schema
+
+A definition of the structure of the metadata that is stored in claims in the blockchain.  See [Metadata](/spec#metadata) for more information.
+
+### Simplified Payment Verification
+
+A scheme to validate transactions without storing the whole blockchain.
+
+### Short URL
+
+The shortest [URL](https://spec.lbry.com/#urls), not including the [channel](#channel), that will [resolve](#resolve) to the correct claim (i.e. lbry://cats#c, returning lbry://cats#ca43e2b6db155177564e574b09dfedc7588816ef or lbry://@cats#0 returning lbry://@cats#0893dbed95307c4b27aadbcb1cc6cb593810b3f9). This is determined on a first come, first serve basis on claim id collisions. A short URL with more than one identifier may change to include only a single identifier if the previous claim, which had the single identifier, is deleted. 
+
+### SPV
+
+SPV is an abbreviation for [Simplified Payment Verification](#simplified-payment-verification).
+
+### Stake
+
+An entry in the blockchain that sets aside some credits and associates them with a name. [Claims](#claim) and [supports](#support) are types of stakes.
+
+### Stream
+
+A set of blobs that can be reassembled into a file. Every stream has one or more content blobs which contain the published file, and a manifest blob which contains a list of the content blob hashes.
+
+### Stream Descriptor
+
+A deprecated term that means the same thing as the [manifest](#manifest).
+
+### Stream Hash
+
+The SHA-384 hash of the stream [manifest](#manifest). The stream hash is a unique identifier for the stream.
+
+### Stream Key
+
+The cryptographic key needed to decrypt the content blobs of a stream. The stream key may be stored in the stream manifest, or may be stored by a third party and made available to a client in exchange for proof that the content was purchased.
+
+### Support
+
+A [stake](#stake) that lends its credits to bolster a claim. A support increases the *effective amount* of a claim, helping it compete for control of the claim's name. See [Supports](/spec#supports) for more on how they work.
+
+### Testnet
+
+A parallel LBRY blockchain, used for testing and development. Testnet is like [mainnet](#mainnet), but has a different genesis block and uses a slightly different address format to avoid confusion with main LBRY addresses. The testnet currency has no realworld value.
+
+### Torba
+
+An [SPV](#spv) wallet for the [blockchain](#blockchain). See the [source code](https://github.com/lbryio/lbry-sdk).
+
+### Transaction
+
+A change to the state of the blockchain. Transactions move credits from one address to another. They may also make changes to the claimtrie, such as creating or updating a claim.
+
+### Transaction Fee
+
+The fee paid to a miner for including a transaction in a block. Miners are incentivized to include transactions with higher fees. When blocks are full, lower-fee transactions may have to wait longer to be included.
+
+### Wallet
+
+An application or a service that stores private keys and generates and signs transactions. Wallets do not store LBRY Credits themselves (those are recorded as transactions in the global blockchain). "Storing LBC" usually means storing the private keys that control the credits.
+
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,21 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Hero from '../components/Hero.astro';
+import Resources from '../components/Resources.astro';
+import Featured from '../components/Featured.astro';
+import Contribute from '../components/Contribute.astro';
+import { Image } from "astro-preload/components";
+
+import '../styles/index.css';
+
+import { featured, contributions, resources, AWESOME_LBRY } from '../config';
+---
+
+<Layout>
+	<div class="wrapper">
+		<Hero/>
+		<Resources/>
+		<Featured/>
+		<Contribute/>
+	</div>
+</Layout>
--- a/src/pages/overview.mdx
+++ b/src/pages/overview.mdx
@ -0,0 +1,37 @@
+---
+layout: '../layouts/Markdown.astro'
+title: Overview
+description: What *is* LBRY? Who *is* Satoshi? In this LBRY technology overview, one of those questions is answered thoroughly.
+---
+
+## Mission
+
+What if anyone in the world could publish digital content, anyone else in the world could access it (for free or for payment), and that entire system worked without any centralized authority or point of control?
+
+
+That's a fancy sentence, so here's a plain one: we thought it'd be *damn **cool*** if there was a system that made it easy to discover and distribute as much of the world's information as possible but was owned and controlled by no one.
+
+
+[^1]: In the information theoretic sense, LBRY facilitates distribution of all data, whether it be a video or a spreadsheet.
+
+[^2]: Accessible anywhere in the world on any internet-connected device.
+
+[^3]: Not controlled by any one person, party or authority.
+
+[^4]: Resistant to censorship or attempts to control; impervious to attacks or disruptions.
+
+[^5]: In the Pareto sense, with regards to the production and distribution of information (i.e. digital information is both created and distributed in a way that could not be any more efficient from the perspectives of information producers and consumers).
+
+[^6]: The most complete collection of world’s books, films, art, games, etc. should be available via LBRY.
+
+## Ecosystem Overview
+
+Learn more about the specific components that make LBRY possible.
+
+
+## Keep Diving
+
+- Explore live metadata and add your own blockchain entry in the [Playground](/playground).
+- Read the [specification](/spec) to know more about LBRY than the person who made this website.
+- Find API specifications and other learning materials in [Resources](/resources).
+- Learn how to [contribute to LBRY](/contribute) or [build your own application](/build).
--- a/src/pages/playground.astro
+++ b/src/pages/playground.astro
@ -0,0 +1,55 @@
+---
+import Layout from '../layouts/Layout.astro';
+import '../styles/playground.css';
+
+import { features } from '../config';
+---
+
+<Layout title="Playground">
+     <!-- Tab links -->
+    <div class="tab">
+        <button class="tablinks" id="defaultOpen" onclick="openCity(event, 'London');">LBRY SDK</button>
+        <button class="tablinks" onclick="openCity(event, 'Paris');">Hub</button>
+        <button class="tablinks" onclick="openCity(event, 'Tokyo');">Tokyo</button>
+    </div>
+  
+    <!-- Tab content -->
+    <div id="London" class="tabcontent">
+        <h3>London</h3>
+        <p>London is the capital city of England.</p>
+    </div>
+
+    <div id="Paris" class="tabcontent">
+        <h3>Paris</h3>
+        <p>Paris is the capital of France.</p>
+    </div>
+
+    <div id="Tokyo" class="tabcontent">
+        <h3>Tokyo</h3>
+        <p>Tokyo is the capital of Japan.</p>
+    </div>
+
+    <script is:inline>
+        document.getElementById("defaultOpen").click();
+        function openCity(evt, cityName) {
+        // Declare all variables
+        let tabcontent, tablinks;
+
+        // Get all elements with class="tabcontent" and hide them
+        tabcontent = document.getElementsByClassName("tabcontent");
+        for (let i = 0; i < tabcontent.length; i++) {
+            tabcontent[i].style.display = "none";
+        }
+
+        // Get all elements with class="tablinks" and remove the class "active"
+        tablinks = document.getElementsByClassName("tablinks");
+        for (let i = 0; i < tablinks.length; i++) {
+            tablinks[i].className = tablinks[i].className.replace(" active", "");
+        }
+
+        // Show the current tab, and add an "active" class to the button that opened the tab
+        document.getElementById(cityName).style.display = "block";
+        evt.currentTarget.className += " active";
+        } 
+    </script>
+</Layout>
--- a/src/pages/resources.mdx
+++ b/src/pages/resources.mdx
@ -0,0 +1,20 @@
+---
+layout: '../layouts/Markdown.astro'
+title: "Resources"
+description: "Find the LBRY specification, API documentation, our Contributor's guide, and more in the Resources area."
+---
+
+## Additional Resources
+
+- [Developer Setup Intro Videos](/resources/setup-videos)
+- [LBRY Glossary](/glossary)
+- [LBRY Merkle Claim Trie](/resources/claimtrie)
+- [LBRY Consensus Algorithm](/resources/consensus)
+- [Download Overview](/resources/download-overview)
+- [API Wrappers](/resources/api-wrappers)
+- [LBRY SDK Configuration Settings](/resources/daemon-settings)
+- [Claim Signing](/resources/claim-signing)
+- [LBRY Android App Build Steps](/resources/android-build)
+- [Lighthouse (search) API](https://github.com/lbryio/lighthouse)
+- [Run Your Own Wallet Server](/resources/wallet-server)
+- [Run Your Own lbry.tv](/resources/web-instance)
--- a/src/pages/spec.astro
+++ b/src/pages/spec.astro
@ -0,0 +1,28 @@
+---
+import Markdown from '../layouts/Markdown.astro';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+
+
+
+import { markdown } from '@astropub/md'
+
+
+const content = await (await fetch('https://raw.githubusercontent.com/lbryio/spec/master/index.md')).text();
+const md = await markdown(content.replace(`---
+layout: spec
+---`, ''), {
+    rehypePlugins: [
+    [rehypeSlug as any],
+    [rehypeAutolinkHeadings as any, { behavior: 'wrap' }]
+    ]
+});
+
+---
+
+<Markdown frontmatter={{
+    title: "Spec",
+    description: "*Alex Grintsvayg (grin@lbry.com), Jeremy Kauffman (jeremy@lbry.com)*"
+}}>
+    {md}
+</Markdown>
--- a/src/pages/tutorials.mdx
+++ b/src/pages/tutorials.mdx
@ -0,0 +1,26 @@
+---
+layout: '../layouts/Markdown.astro'
+title: Tutorials
+description: Learn how to setup, use, deploy, and develop with LBRY.
+---
+# LBRY Programming Tutorials
+
+## Tutorial #1 - "Hello Satoshi!"
+Learn how to [create and modify a simple LBRY electron application](/tutorial-hellosatoshi) we'll call "[Hello Satoshi](/tutorial-hellosatoshi)".
+
+---
+
+# Setup your Development Environment
+
+## Desktop Application
+[Video tutorial](/resources/video-lbrydesktop) to setup the [Desktop app](https://github.com/lbryio/lbry-desktop) development environment.
+
+## Android Application
+[Video tutorial](/resources/video-lbryandroid) to setup the [Android app](https://github.com/lbryio/lbry-android) development environment.
+
+## LBRY SDK
+[Video tutorial](/resources/video-lbrysdk) to setup the [LBRY SDK](https://github.com/lbryio/lbry-sdk) development environment.
+
+## LBRY Blockchain
+[Video tutorial](/resources/video-lbrycrd) to setup the [LBRY Blockchain](https://github.com/lbryio/lbrycrd) development environment.
+
--- a/src/scripts/carousel.js
+++ b/src/scripts/carousel.js
@ -0,0 +1,28 @@
+let slideIndex = 1;
+showSlides(slideIndex);
+
+// Next/previous controls
+export function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+// Thumbnail image controls
+export function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+export function showSlides(n) {
+  let i;
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("dot");
+  if (n > slides.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";
+  }
+  for (i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "block";
+  dots[slideIndex-1].className += " active";
+}
--- a/src/styles/Header.css
+++ b/src/styles/Header.css
@ -0,0 +1,57 @@
+header {
+    color: var(--body-text);
+    background-color: var(--tertiary-background);
+}
+
+header nav {
+    display: flex;
+    justify-content: space-between;
+    height: 75px;
+    padding: 0 20px;
+}
+
+header .active {
+    font-weight: bold;
+    color: var(--accent);
+}
+
+header ul li:hover a {
+    color: var(--accent);
+}
+
+.left, .right {
+    display: flex;
+    align-items: center;
+}
+
+.left .logo {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.left .logo svg {
+    height: 2.5rem;
+    fill: #fff;
+}
+
+.left ul {
+    display: flex;
+    gap: 10px;
+    list-style: none;
+}
+
+header .right .menu {
+    display: none;
+}
+
+@media only screen and (max-width: 600px) {
+    header .left ul, header  .right .search {
+        display: none;
+    }
+
+    header .right .menu {
+        display: block;
+        width: 25px;
+    }
+}
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -0,0 +1,92 @@
+@import url(https://fonts.bunny.net/css?family=roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i);
+
+:root {
+    --accent: #27E4EB;
+    --background: #072A46;
+    --secondary-background: #051D31;
+    --tertiary-background: #041523;
+    --header-text: #FAFAFA;
+    --body-text: #DDDDDD;
+
+    --astro-code-color-text: white;
+    --astro-code-color-background: black;
+    --astro-code-token-constant: plum;
+    --astro-code-token-string: purple;
+    --astro-code-token-comment: tomato;
+    --astro-code-token-keyword: darkslategrey;
+    --astro-code-token-parameter: coral;
+    --astro-code-token-function: green;
+    --astro-code-token-string-expression: chartreuse;
+    --astro-code-token-punctuation: gray;
+    --astro-code-token-link: firebrick;
+}
+
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+*:target{ padding-top: 100px;margin-top: -100px}
+
+html {
+    font-family: 'Roboto', sans-serif;
+    margin-top: 75px;
+    scroll-behavior: smooth;
+}
+
+header {
+    position: fixed;
+    width: 100vw;
+    top: 0;
+    z-index: 100;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: calc(100vh);
+    color: var(--body-text);
+    background-color: var(--background);
+}
+
+main {
+    flex-grow: 1;
+}
+
+footer {
+    width: 100vw;
+    overflow: hidden;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--header-text);
+}
+
+p {
+    color: var(--body-text);
+}
+
+a {
+    color: var(--body-text);
+    text-decoration: none;
+}
+
+.button-primary {
+    user-select: none;
+    font-weight: bold;
+    width: fit-content;
+    height: fit-content;
+    transition: 0.3s;
+    margin: 10px 0;
+}
+
+.button-primary a {
+    font-size: 1.25rem;
+    border-radius: 0.5em;
+    padding: 10px 20px;
+    background-color: var(--tertiary-background);
+}
+
+.button-primary:hover {
+    transform: scale(1.1);
+}
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -0,0 +1,24 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+}
+
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 25px;
+    margin: auto;
+    max-width: 1500px;
+}
+
+section .text h2 {
+    color: var(--header-text);
+    font-size: 2rem;
+    text-align: center;
+}
+
+section .text > p {
+    font-size: 1.25rem;
+}
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
--- a/src/styles/playground.css
+++ b/src/styles/playground.css
@ -0,0 +1,44 @@
+ /* Style the tab */
+ .tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+  
+/* Style the buttons that are used to open the tab content */
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+}
+  
+/* Change background color of buttons on hover */
+.tab button:hover {
+    background-color: #ddd;
+}
+  
+/* Create an active/current tablink class */
+.tab button.active {
+    background-color: #ccc;
+}
+
+/* Style the tab content */
+.tabcontent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+} 
+.tabcontent {
+    animation: fadeEffect 1s; /* Fading effect takes 1 second */
+  }
+  
+  /* Go from zero to full opacity */
+  @keyframes fadeEffect {
+    from {opacity: 0;}
+    to {opacity: 1;}
+  }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}
				`@ -0,0 +1 @@`
				<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="1.32em" height="1em" viewBox="0 0 1856 1408"><path fill="#FFFFFF" d="m585 1143l-50 50q-10 10-23 10t-23-10L23 727q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23L192 704l393 393q10 10 10 23t-10 23zM1176 76L803 1367q-4 13-15.5 19.5T764 1389l-62-17q-13-4-19.5-15.5T680 1332L1053 41q4-13 15.5-19.5T1092 19l62 17q13 4 19.5 15.5T1176 76zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393l-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z"/></svg>