Sure is a new site design

2024-11-28 00:10:56 +00:00 · 2024-11-28 00:07:08 +00:00 · 2024-11-28 00:07:08 +00:00
commit f5444a9bf6
18 changed files with 342 additions and 261 deletions
--- a/.gitignore
+++ b/.gitignore
@ -21,3 +21,4 @@ yarn-error.log
 /log
 /storage
 /tmp
+/public/pub
--- a/app/View/Components/wah.php
+++ b/app/View/Components/wah.php
@ -0,0 +1,39 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Config;
+use Illuminate\Support\Facades\Http;
+use Illuminate\View\Component;
+
+class Wah extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct() {}
+
+
+    public function getWah(): string {
+        try {
+            $response = Http::get('https://api.tinyfox.dev/img.json?animal=wah');
+            $data = $response->json();
+            return "https://tinyfox.dev".$data["loc"];
+        } catch (Exception $ex) {
+            return "";
+        }
+
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string {
+        return view('components.wah', [
+            'wah' => $this->getWah(),
+        ]);
+    }
+}
--- a/public/css/master.css
+++ b/public/css/master.css
@ -1,130 +1,237 @@
 :root {
-    --pattern: hsl(280, 63%, 81%);
-    --links: hsl(280, 50%, 57%);
-    --background: hsl(280, 20%, 88%);
-    --border: 1px solid hsl(0, 0%, 20%);
-    --foreground: hsl(0, 0%, 0%);
+    --background: #f2efbd;
+    --foreground: #2a271c;
+    --border-color: #f27405;
+    --border: var(--border-color) 2px solid;
+    --shadow-color: hsla(11, 96%, 43%, 0.4);
+    --shadow: drop-shadow(8px 8px var(--shadow-color));
+    --shadow-small: drop-shadow(3px 3px var(--shadow-color));
+    --links: hsl(183, 93%, 27%);
+    --links-hover: hsl(183, 93%, 15%);
+    --table-header: hsla(11, 96%, 43%, 0.2);
+}
+
+html {
+    height: 100%;
+    color-scheme: light;
 }

 body {
-    background-image: url("/images/background.svg");
-    background-color: var(--pattern);
-    background-size: 150px;
-    margin: 0;
-    font-family: "Gill Sans", sans-serif;
+    color: var(--foreground);
+    min-height: 100%;
+    background-color: hsla(0, 0%, 0%, 0);
+    padding: 10px;
+}
+
+/*noinspection CssUnknownTarget*/
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-image: url("/images/background.jpg");
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    opacity: 0.8;
+    background-size: cover;
+    background-attachment: fixed;
+    overflow: hidden;
 }

 h1,
 h2,
 h3,
 h4,
+h5,
+h6 {
+    margin: 20px 0 0 0;
+}
+
 p,
 ul,
-ol {
+ol,
+dl,
+menu,
+dir {
    margin: 0;
 }

+hr {
+    border: none;
+    border-top: var(--border);
+}
+
 a {
    color: var(--links);
    text-decoration: underline dotted;
 }

 a:hover {
-    opacity: 80%;
+    color: var(--links-hover);
    text-decoration: underline solid;
 }

-a.button,
-a.button:hover {
-    text-decoration: none;
-}
-
-a.button:hover img {
-    opacity: 80%;
-}
-
-img.pixel {
-    image-rendering: pixelated;
-}
-
 div.page-container {
-    color: var(--foreground);
-    height: calc(100vh - 20px);
-    width: calc(100vw - 20px);
-    display: grid;
-    grid-template-columns: minmax(auto, 400px) minmax(50vw, auto);
-    grid-template-rows: 1fr;
-    grid-column-gap: 1vw;
-    grid-row-gap: 0px;
+    width: 800px;
+    margin: 5px auto;
 }

-div.page-container > div:first-child > div:first-child {
-    margin-top: 0;
+div.page-container > div {
+    background-color: var(--background);
+    filter: var(--shadow);
+    padding: 10px;
+    border: var(--border);
+    margin-bottom: 20px;
+    /* temporary */
+    /* height: 600px; */
 }

-div.page-container > div:first-child > div:last-child {
+div.page-container > div:last-child {
    margin-bottom: 0;
 }

-div.page-container {
-    margin: 10px;
-}
-div.page-container > div:first-child > div {
-    margin: 10px 0;
+div#header h1 {
+    margin: 0;
+    font-style: italic;
 }

-div.page-container > div:nth-child(2),
-div.page-container > div:first-child > div,
-div.page-container > div:last-child {
-    padding: 10px;
-    height: auto;
-    background-color: var(--background);
+div#header h1,
+div#header p {
+    display: inline;
+}
+
+div#content {
+    position: relative;
+}
+
+div#content::after {
+    display: block;
+    content: "";
+    clear: both;
+}
+
+div.wah {
+    float: right;
    border: var(--border);
+    padding: 5px;
+    filter: var(--shadow-small);
+    background-color: var(--background);
 }

-div.page-container > div:first-child {
-    height: fit-content;
-    height: auto;
+div.wah img {
+    display: block;
 }

-div.page-container > div:first-child,
-div.page-container > div:nth-child(2) {
-    overflow: scroll;
+div.wah h3,
+div.wah p {
+    text-align: center;
+    margin: 5px 0;
+    font-style: italic;
 }

-div.page-container > div.footer {
-    grid-area: 2 / 1 / 3 / 3;
-    margin-top: 10px;
+div.wah p {
+    margin-bottom: 0;
+}
+
+div.wah img {
+    width: 250px;
+}
+
+div#footer {
    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
-    grid-column-gap: 0;
-    grid-row-gap: 0;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    align-items: center;
 }

-div.footer > div:first-child {
-    margin-left: 5px;
-}
-
-div.footer > div:last-child {
+div#footer div:last-child {
    text-align: right;
 }

-div.footer > div {
-    vertical-align: middle;
-    height: fit-content;
-    width: 100%;
-    margin: auto;
+div#footer div:last-child img {
+    image-rendering: pixelated;
+    margin: 0;
+    padding: 0;
+    width: 88px;
+    height: 31px;
 }

-div.pa .navlinks {
-    padding-left: 10px;
+/** Guestbook **/
+table.form input,
+table.form textarea,
+table.form button {
+    background-color: var(--background);
+    border: var(--border);
+    filter: var(--shadow-small);
 }

-.navbar-icon {
-    margin-right: 0.25em;
+table.form input,
+table.form textarea {
+    width: 250px;
 }

-.online-status {
-    display: inline;
+table.form button:hover {
+    background-color: var(--border-color);
+    color: var(--background);
+    filter: none;
+}
+
+table.form tr td,
+table.gb-entry-form-container td:last-child {
+    vertical-align: top;
+}
+
+div.gb-entry {
+    border: var(--border);
+    filter: var(--shadow-small);
+    background-color: var(--background);
+    width: 75%;
+    padding: 10px;
+}
+
+/** Music **/
+table.music-top10 {
+    border: var(--border);
+    filter: var(--shadow-small);
+    background-color: var(--background);
+    border-collapse: collapse;
+}
+
+table.music-top10 th,
+table.music-top10 td {
+    padding: 2px 5px;
+}
+
+table.music-top10 th:first-child {
+    text-align: left;
+}
+
+table.music-top10 tr:first-child th {
+    border-right: var(--border);
+    border-bottom: var(--border);
+}
+
+table.music-top10 tr:first-child th:last-child {
+    border-right: none;
+}
+
+table.music-top10 tr td {
+    border-right: var(--border);
+}
+
+table.music-top10 tr td:last-child {
+    border-right: none;
+}
+table.music-top10 tr:first-child th,
+table.music-top10 tr td:first-child {
+    background-color: var(--table-header);
+}
+
+
+/** Bookmarks **/
+div.bookmark-category:first-child h2 {
+    margin: 0;
 }
--- a/public/images/background.jpg
+++ b/public/images/background.jpg
--- a/public/images/buttons/csshard.gif
+++ b/public/images/buttons/csshard.gif
--- a/public/images/buttons/thnlqd.png
+++ b/public/images/buttons/thnlqd.png
--- a/public/pub
+++ b/public/pub
@ -1 +0,0 @@
-/srv/pubfiles
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@ -3,37 +3,27 @@
 		<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
 	<loc>https://www.diskfloppy.me/</loc>
-	<lastmod>2024-09-01T17:44:54+01:00</lastmod>
+	<lastmod>2024-11-27T23:59:26+00:00</lastmod>
 	<priority>1.0</priority>
 </url>
 <url>
 	<loc>https://www.diskfloppy.me/pub/</loc>
-	<lastmod>2024-09-01T17:44:54+01:00</lastmod>
+	<lastmod>2024-11-27T23:59:26+00:00</lastmod>
 	<priority>0.8</priority>
 </url>
-<url>
-	<loc>https://www.diskfloppy.me/computers</loc>
-	<lastmod>2024-09-01T17:44:56+01:00</lastmod>
-	<priority>1.0</priority>
-</url>
-<url>
-	<loc>https://www.diskfloppy.me/calculators</loc>
-	<lastmod>2024-09-01T17:44:56+01:00</lastmod>
-	<priority>1.0</priority>
-</url>
 <url>
 	<loc>https://www.diskfloppy.me/bookmarks</loc>
-	<lastmod>2024-09-01T17:44:57+01:00</lastmod>
+	<lastmod>2024-11-27T23:59:26+00:00</lastmod>
 	<priority>1.0</priority>
 </url>
 <url>
 	<loc>https://www.diskfloppy.me/guestbook</loc>
-	<lastmod>2024-09-01T17:44:57+01:00</lastmod>
+	<lastmod>2024-11-27T23:59:26+00:00</lastmod>
 	<priority>1.0</priority>
 </url>
 <url>
 	<loc>https://www.diskfloppy.me/music</loc>
-	<lastmod>2024-09-01T17:44:58+01:00</lastmod>
+	<lastmod>2024-11-27T23:59:26+00:00</lastmod>
 	<priority>1.0</priority>
 </url>
-</urlset>
+</urlset>
--- a/resources/views/bookmarks.blade.php
+++ b/resources/views/bookmarks.blade.php
@ -1,7 +1,7 @@
 <x-layout>
    <x-slot:title>Bookmarks</x-slot:title>
    @foreach($categories as $category)
-        <div class="section">
+        <div class="bookmark-category">
            <h2>{{ $category->name }}</h2>
            @if($category->id == 1)
                <p><em>(These are shuffled every load)</em></p>
--- a/resources/views/components/current-track.blade.php
+++ b/resources/views/components/current-track.blade.php
@ -1,4 +1,4 @@
-<div class="section current-track">
+<div class="current-track">
    <h2>Last/Current Track:</h2>
    <a href="{{ $track["url"] }}">{{ $track["title"] }} • {{ $track["artist"] }}</a><br>
 </div>
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@ -1,6 +1,3 @@
-@php // Get colorscheme from cookie and apply immediately
-    $colorscheme = request()->cookie('colorscheme', 'catppuccin-macchiato');
-@endphp
 <!DOCTYPE html>
 <html lang="en">
 <head>
@ -8,13 +5,10 @@
    <meta charset="utf-8">
    <meta property="og:type" content="website">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="theme-color" content="#333333">
-    <link rel="stylesheet" href="{{ asset("/css/colorschemes/$colorscheme.css") }}" id="css-colorscheme"/>
+    <meta name="theme-color" content="#f27405">
    <link rel="stylesheet" href="{{ asset('/css/master.css') }}"/>
    <link rel="icon" type="image/png" href="{{ asset('/favicon-32x32.png') }}" sizes="32x32"/>
    <link rel="icon" type="image/png" href="{{ asset('/favicon-16x16.png') }}" sizes="16x16"/>
-    <script src="{{ asset('/js/schemeSwap.js') }}"></script>
-    <script src="{{ asset('/js/liveClock.js') }}"></script>
    {!! (intval(date('n')) == 12) ? '<script src="/js/christmas/snow.js"></script>' : '' !!}

    <!-- Page-specific -->
@ -23,110 +17,40 @@
    <meta property="og:image" content="/favicon-128x128.png">
 </head>
 <body>
-<div class="page-container">
-    <div>
-        <div id="site-header">
-            <h1>niko's site</h1>
+    <div class="page-container">
+        <div id="header">
+            <h1>wah!</h1>
+            <p>
+                (dot moe)
+            </p>
+            <x-navigation></x-navigation>
        </div>
-        <div><x-navigation/></div>
-        <div class="section centerbox"><x-discord-status/></div>
-        <div class="section"><x-weather/></div>
-    </div>
-    <div>
-        {{ $slot }}
-    </div>
-    <div class="footer">
-        <div>
-            (c) floppydisk 2021-{{ date('Y') }}<br>
-            v{{ config('app.version') }},
-            <a href="https://git.frzn.dev/fwoppydwisk/diskfloppy.me/releases/latest">Source</a><br>
-            Served by {{ gethostname() }}
+        <div id="content">
+            {{ $slot }}
        </div>
-        <div>
-            <a href="https://confusionunknown.nekoweb.org/" class="button">
-                <img src="{{ URL::asset('images/buttons/cnfunknown.gif') }}" width="88" height="31"
-                     class="pixel" alt="confusionunknown">
-            </a>
-            <a href="https://julimiro.eu/" class="button">
-                <img src="{{ URL::asset('images/buttons/juli.gif') }}" width="88" height="31"
-                     class="pixel" alt="julimiro">
-            </a>
-            <a href="https://x86.breadtf.com/" class="button">
-                <img src="{{ URL::asset('images/buttons/x86.gif') }}" width="88" height="31"
-                     class="pixel" alt="x86Overflow">
-            </a>
-            <img src="{{ URL::asset('images/buttons/transrights.gif') }}" width="88" height="31"
-                 class="pixel" alt="Trans rights now!">
-            <img src="{{ URL::asset('images/buttons/yuri.gif') }}" width="88" height="31"
-                 class="pixel" alt="Catgirl yuri now!">
-            <img src="{{ URL::asset('images/buttons/brokenimage.gif') }}" width="88" height="31"
-                 class="pixel" alt="Made with my own two paws"><br>
-            <a href="https://dimden.dev/" class="button">
-                <img src="https://dimden.dev/services/images/88x31.gif" width="88" height="31"
-                     class="pixel" alt="dimden.dev">
-            </a>
-            <a href="https://www.linux.org/" class="button">
-                <img src="{{ URL::asset('images/buttons/linuxnow.gif') }}" width="88"
-                     class="pixel" height="31" alt="Linux NOW!">
-            </a>
-            <a href="https://www.vim.org/" class="button">
-                <img src="{{ URL::asset('images/buttons/vim.gif') }}" width="88" height="31"
-                     class="pixel" alt="vim">
-            </a>
-            <a href="https://wave.webaim.org/" class="button">
-                <img src="{{ URL::asset('images/buttons/evaluatedWAVE.png') }}" width="88" height="31"
-                     class="pixel" alt="Evaluated to be accessible!">
-            </a>
-            <img src="{{ URL::asset('images/buttons/aliasing.png') }}" width="88" height="31"
-                 class="pixel" alt="I heart aliasing!">
-            <img src="{{ URL::asset('images/buttons/paws.gif') }}" width="88" height="31"
-                 class="pixel" alt="Made with my own two paws">
+        <div id="footer">
+            <div>
+                <span>
+                    &copysr; floppydisk 2021-{{ date('Y') }}<br>
+                    v{{ config('app.version') }}, <a href="https://git.frzn.dev/fwoppydwisk/diskfloppy.me/releases/latest">Source</a><br>
+                    Served by {{ gethostname() }}
+                </span>
+            </div>
+            <div>
+                <img src="{{ URL::asset('images/buttons/cnfunknown.gif') }}">
+                <img src="{{ URL::asset('images/buttons/juli.gif') }}">
+                <img src="{{ URL::asset('images/buttons/x86.gif') }}">
+                <img src="{{ URL::asset('images/buttons/thnlqd.png') }}">
+                <img src="https://dimden.dev/services/images/88x31.gif">
+                <img src="{{ URL::asset('images/buttons/csshard.gif') }}"><br>
+                <img src="{{ URL::asset('images/buttons/linuxnow.gif') }}">
+                <img src="{{ URL::asset('images/buttons/paws.gif') }}">
+                <img src="{{ URL::asset('images/buttons/transrights.gif') }}">
+                <img src="{{ URL::asset('images/buttons/debian.gif') }}">
+                <img src="{{ URL::asset('images/buttons/vim.gif') }}">
+                <img src="{{ URL::asset('images/buttons/aliasing.png') }}">
+            </div>
        </div>
    </div>
-</div>
-
 </body>
 </html>
-
-{{--<div class="container">--}}
-{{--    <div class="page">--}}
-{{--        <header>--}}
-{{--            <h1>{{ str_replace("www.", "", Request::getHost()) }}</h1>--}}
-{{--        </header>--}}
-{{--        <div class="navbar">--}}
-{{--            <p>--}}
-{{--                <strong>Current Path:</strong>--}}
-{{--                @if(Request::getRequestUri() == "/")--}}
-{{--                    /--}}
-{{--                @else--}}
-{{--                    {{ str_replace("/", " / ", rtrim(Request::getRequestUri(), "/")) }}--}}
-{{--                @endif--}}
-{{--            </p>--}}
-{{--        </div>--}}
-{{--        <div class="content">--}}
-{{--            <main>--}}
-{{--                {{ $slot }}--}}
-{{--            </main>--}}
-{{--            <div class="sidebar">--}}
-{{--                <div class="section"><nav><x-navigation/></nav></div>--}}
-{{--                <div class="section"><x-settings/></div>--}}
-{{--                <div class="section centerbox"><x-discord-status/></div>--}}
-{{--                <div class="section"><x-weather/></div>--}}
-{{--            </div>--}}
-{{--        </div>--}}
-{{--        <footer>--}}
-{{--            <div>--}}
-{{--                (c) floppydisk 2021-{{ date('Y') }}<br>--}}
-{{--                v{{ config('app.version') }},--}}
-{{--                <a href="https://git.frzn.dev/fwoppydwisk/diskfloppy.me/releases/latest">Source</a>,--}}
-{{--                <a href="/privacy">Privacy Policy?</a><br>--}}
-{{--                Served by {{ gethostname() }}--}}
-{{--            </div>--}}
-{{--            <div>--}}
-
-{{--            </div>--}}
-{{--        </footer>--}}
-{{--    </div>--}}
-{{--</div>--}}
-{{--</body>--}}
-{{--</html>--}}
--- a/resources/views/components/minimal.blade.php
+++ b/resources/views/components/minimal.blade.php
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta property="og:type" content="website">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#f27405">
+    <link rel="stylesheet" href="{{ asset('/css/master.css') }}"/>
+    <link rel="icon" type="image/png" href="{{ asset('/favicon-32x32.png') }}" sizes="32x32"/>
+    <link rel="icon" type="image/png" href="{{ asset('/favicon-16x16.png') }}" sizes="16x16"/>
+    <title>{{ $title ?? 'Unknown' }}</title>
+</head>
+<body>
+{{ $slot }}
+</body>
+</html>
--- a/resources/views/components/navigation.blade.php
+++ b/resources/views/components/navigation.blade.php
@ -1,14 +1,9 @@
 <nav>
-    <p><strong>Navigation:</strong></p>
-    <div class="navlinks">
-        <a href="/">/home/niko</a><br>
-        <a href="//git.diskfloppy.me/">~/git</a><br>
-        <a href="/pub/">~/pub</a><br>
-        <a href="/computers/">~/computers</a><br>
-        <a href="/calculators/">~/calculators</a><br>
-        <a href="/bookmarks/">~/bookmarks</a><br>
-        <a href="/guestbook/">~/guestbook</a><br>
-        <a href="//weather.diskfloppy.me/">~/weather</a><br>
-        <a href="/music/">~/music</a><br>
-    </div>
+    <strong>Pages:</strong>
+    <a href="/">home</a> |
+    <a href="//git.wah.moe">git</a> |
+    <a href="/pub">files</a> |
+    <a href="/bookmarks">bookmarks</a> |
+    <a href="/guestbook">guestbook</a> |
+    <a href="/music">music</a>
 </nav>
--- a/resources/views/components/top-tracks.blade.php
+++ b/resources/views/components/top-tracks.blade.php
@ -1,4 +1,3 @@
-<div class="section">
 <table class="music-top10">
    <caption>
        <h2 style="margin-bottom: 5px">Top 10 Tracks (Last 30 days):</h2>
@ -15,4 +14,3 @@
        <x-track :track="$track" :count="$count"/>
    @endforeach
 </table>
-</div>
--- a/resources/views/components/wah.blade.php
+++ b/resources/views/components/wah.blade.php
@ -0,0 +1,5 @@
+<div class="wah">
+    <h3>Random Wah!</h3>
+    <img src="{{ $wah }}">
+    <p>Image "stolen" from <a href="https://tinyfox.dev/">tinyfox.dev</a></p>
+</div>
--- a/resources/views/errors/guestbook-ratelimit.blade.php
+++ b/resources/views/errors/guestbook-ratelimit.blade.php
@ -1,9 +1,13 @@
 <x-minimal>
    <x-slot:title>Error 429: Overclocking Detected!</x-slot:title>
-    <h1>Error 429: Overclocking Detected!</h1>
-    <hr>
-    <p>Whoa there! Your submissions are going at warp speed.</p>
-    <p>Remember you can only submit an entry <u>once every hour</u>!</p>
-    <br>
-    Click <a href="/guestbook">here</a> to go back to the guestbook.
+    <div class="page-container">
+        <div>
+            <h1 style="margin-top: 0">Error 429: Overclocking Detected!</h1>
+            <hr>
+            <p>Whoa there! Your submissions are going at warp speed.</p>
+            <p>Remember you can only submit an entry <u>once every hour</u>!</p>
+            <br>
+            Click <a href="/guestbook">here</a> to go back to the guestbook.
+        </div>
+    </div>
 </x-minimal>
--- a/resources/views/guestbook.blade.php
+++ b/resources/views/guestbook.blade.php
@ -56,7 +56,7 @@
        @php
            $user_agent = $parser->parse($entry->agent);
        @endphp
-        <div class="section">
+        <div class="gb-entry">
            Submitted by <strong>{{ $entry->name }}</strong>
            on <strong>{{ $entry->created_at->format('Y-m-d') }}</strong>
            at <strong>{{ $entry->created_at->format('h:i:s A (e)') }}</strong>
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@ -1,42 +1,45 @@
 <x-layout>
    <x-slot:title>Home</x-slot:title>

-    <div class="section">
-        <h2>About Me</h2>
-        <hr>
-        <p>Hi! This is my personal homepage on the <strong>W</strong>orld <strong>W</strong>ide <strong>W</strong>eb.</p>
-        <br>
-        <p>QuickFacts&trade;:</p>
-        <ul>
-            <li>{{ $age }} y/o, he/him, British</li>
-            <li>Theatre Technician, &quot;Web Developer&quot; and NixOS User</li>
-            <li>Loves ETC desks, prefers Generics to LEDs for some reason</li>
-            <li>Has a crippling Soundcraft addiction</li>
-            <li>Spends way too much time on his computer</li>
-            <li>Favorite games: <a href="https://steamcommunity.com/id/fwoppydwisk/recommended/420530/">OneShot</a>, Minecraft, Stardew Valley, N++ and Starbound</li>
-            <li><a href="http://wxqa.com/">CWOP</a> member</li>
-        </ul>
-        <br>
-        <p>Interests:</p>
-        <ul>
-            <li><strong>Tech Theatre</strong> - Lighting, Stage Management, etc. (<a href="https://www.controlbooth.com/members/floppydisk.28673/">ControlBooth</a>)</li>
-            <li><strong>Programming</strong> - HTML, CSS, JavaScript, C#, Java, PHP, Ruby, Python (<a href="https://github.com/floppydisk05">GitHub</a>)</li>
-            <li><strong>Photography</strong> - <a href="https://www.flickr.com/photos/floppydisk/">Flickr</a></li>
-            <li><strong>Gaming</strong> - <a href="https://steamcommunity.com/id/fwoppydwisk/">Steam Profile</a></li>
-        </ul>
-    </div>
-    <div class="section">
-        <h2>Random Quote</h2>
-        <hr>
-        <x-toh-quote/>
-    </div>
-    <div class="section">
-        <h2>Contact</h2>
-        <hr>
-        <p>
-            <strong>E-mail:</strong> <a href="mailto:contact@diskfloppy.me">contact@diskfloppy.me</a><br>
-            <strong>Mastodon:</strong> <a rel="me" href="https://c.im/@floppydisk">@floppydisk@c.im</a><br>
-            <strong>Matrix:</strong> <a href="https://matrix.to/#/@floppydisk:arcticfoxes.net">@floppydisk:arcticfoxes.net</a>
-        </p>
-    </div>
+    <x-wah></x-wah>
+    <p>Hi! This is my personal homepage on the <strong>W</strong>orld <strong>W</strong>ide
+        <strong>W</strong>eb.
+    </p>
+    <br>
+    <p>Some quick facts about me:</p>
+    <ul>
+        <li>19 y/o, he/him, British</li>
+        <li>Theatre Technician and &quot;Web Developer&quot;</li>
+        <li>Loves ETC desks, prefers Generics to LEDs for some reason</li>
+        <li>Spends way too much time on his computer</li>
+        <li>Favorite games: <a href="https://steamcommunity.com/id/fwoppydwisk/recommended/420530/">OneShot</a>,
+            Minecraft, Stardew Valley, N++ and Starbound</li>
+        <li><a href="http://wxqa.com/">CWOP</a> member</li>
+    </ul>
+    <br>
+    <p>Interests:</p>
+    <ul>
+        <li><strong>Tech Theatre</strong> - Lighting, Stage Management, etc. (<a
+                href="https://www.controlbooth.com/members/floppydisk.28673/">ControlBooth</a>)</li>
+        <li><strong>Programming</strong> - HTML, CSS, JavaScript, C#, Java, PHP, Ruby, Python (<a
+                href="https://github.com/floppydisk05">GitHub</a>)</li>
+        <li><strong>Photography</strong> - <a href="https://www.flickr.com/photos/floppydisk/">Flickr</a></li>
+        <li><strong>Gaming</strong> - <a href="https://steamcommunity.com/id/fwoppydwisk/">Steam Profile</a>
+        </li>
+    </ul>
+
+{{--    <div class="section">--}}
+{{--        <h2>Random Quote</h2>--}}
+{{--        <hr>--}}
+{{--        <x-toh-quote/>--}}
+{{--    </div>--}}
+{{--    <div class="section">--}}
+{{--        <h2>Contact</h2>--}}
+{{--        <hr>--}}
+{{--        <p>--}}
+{{--            <strong>E-mail:</strong> <a href="mailto:contact@diskfloppy.me">contact@diskfloppy.me</a><br>--}}
+{{--            <strong>Mastodon:</strong> <a rel="me" href="https://c.im/@floppydisk">@floppydisk@c.im</a><br>--}}
+{{--            <strong>Matrix:</strong> <a href="https://matrix.to/#/@floppydisk:arcticfoxes.net">@floppydisk:arcticfoxes.net</a>--}}
+{{--        </p>--}}
+{{--    </div>--}}
 </x-layout>