Test

2026-02-19 02:51:54 -05:00
parent d3fc283450
commit 40c0443168
44 changed files with 374 additions and 25 deletions
@@ -0,0 +1,3 @@
+.DS_Store
+.htaccess
+/.idea
@@ -0,0 +1,20 @@
+<?php
+$title = 'About';
+include $_SERVER['DOCUMENT_ROOT'] . '/includes/head.php';
+?>
+<body class="bg-[#0a0a0a] text-white min-h-screen">
+<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'; ?>
+
+<main class="pt-16">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 py-12">
+        <h1 class="text-2xl font-semibold mb-12">About</h1>
+        <div class="space-y-5 text-neutral-300 leading-relaxed text-sm">
+            <p><!-- Who you are --></p>
+            <p><!-- What you do / what you're into --></p>
+            <p><!-- Anything else --></p>
+        </div>
+    </div>
+</main>
+
+</body>
+</html>
@@ -0,0 +1,22 @@
+{
+  "categories": [
+    {
+      "name": "Interesting",
+      "links": [
+        { "title": "Example", "url": "https://example.com", "note": "optional description" }
+      ]
+    },
+    {
+      "name": "Tools",
+      "links": [
+        { "title": "Example", "url": "https://example.com" }
+      ]
+    },
+    {
+      "name": "Reading",
+      "links": [
+        { "title": "Example", "url": "https://example.com" }
+      ]
+    }
+  ]
+}
@@ -0,0 +1,13 @@
+{
+  "entries": [
+    {
+      "title": "Entry title",
+      "date": "2026-02-19",
+      "listening": "",
+      "watching": "",
+      "reading": "",
+      "working on": "",
+      "thinking": ""
+    }
+  ]
+}
@@ -0,0 +1,18 @@
+<?php
+$title = 'Contact';
+include $_SERVER['DOCUMENT_ROOT'] . '/includes/head.php';
+?>
+<body class="bg-[#0a0a0a] text-white min-h-screen">
+<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'; ?>
+
+<main class="pt-16">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 py-12">
+        <h1 class="text-2xl mb-3">Contact</h1>
+        <p class="text-neutral-400 text-sm mb-12">Get in touch.</p>
+        <a href="mailto:admin@sistav.com" class="text-neutral-300 hover:text-white transition-colors text-sm">
+            admin@sistav.com
+        </a>
+    </div>
+</main>
+</body>
+</html>
@@ -0,0 +1,5 @@
+<footer class="border-t border-[#1c1c1c] mt-20">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 py-8 text-neutral-700 text-xs">
+        sistav.com
+    </div>
+</footer>
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= isset($title) ? htmlspecialchars($title) . ' — sistav.com' : 'sistav.com' ?></title>
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: { cream: '#e0d5c0' }
+                }
+            }
+        }
+    </script>
+    <style>
+        /* Global text softening */
+        body { color: #e6dfd8 !important; }
+
+        /* Headings */
+        h1 {
+            font-family: 'DM Serif Display', Georgia, serif !important;
+            font-weight: 400 !important;
+            font-size: 2.25rem !important;
+            color: #e6dfd8;
+            letter-spacing: -0.01em;
+            text-align: center;
+        }
+        article h2 {
+            font-family: inherit !important;
+            font-weight: 400 !important;
+            font-size: 0.75rem !important;
+            color: #d4d4d4 !important;
+            letter-spacing: 0.1em !important;
+            text-transform: uppercase !important;
+            text-align: left !important;
+        }
+
+        /* Gif frame */
+        #gif-frame {
+            display: inline-block;
+            padding: 14px;
+            border: 2px solid #6b6b6b;
+            box-shadow:
+                inset 0 1px 0 rgba(255,255,255,0.05),
+                0 4px 8px  rgba(0,0,0,0.55),
+                0 16px 40px rgba(0,0,0,0.75),
+                0 40px 90px rgba(0,0,0,0.35);
+        }
+
+        /* Grain overlay */
+        body::after {
+            content: '';
+            position: fixed;
+            inset: 0;
+            z-index: 9998;
+            pointer-events: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+            opacity: 0.04;
+        }
+
+        /* Custom cursor */
+        * { cursor: none !important; }
+        #site-cursor {
+            position: fixed;
+            top: 0; left: 0;
+            width: 5px;
+            height: 5px;
+            background: #ffffff;
+            border-radius: 50%;
+            pointer-events: none;
+            z-index: 99999;
+            transform: translate(-50%, -50%);
+            transition: width .2s ease, height .2s ease, opacity .2s ease;
+            opacity: 0;
+        }
+        #site-cursor.visible  { opacity: 1; }
+        #site-cursor.expanded { width: 22px; height: 22px; opacity: 0.3; }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var cursor = document.getElementById('site-cursor');
+            if (!cursor || !window.matchMedia('(hover: hover)').matches) return;
+
+            document.addEventListener('mousemove', function (e) {
+                cursor.style.left = e.clientX + 'px';
+                cursor.style.top  = e.clientY + 'px';
+                cursor.classList.add('visible');
+            });
+
+            document.addEventListener('mouseleave', function () {
+                cursor.classList.remove('visible');
+            });
+
+            document.addEventListener('mouseover', function (e) {
+                if (e.target.closest('a, button, [role="button"]'))
+                    cursor.classList.add('expanded');
+                else
+                    cursor.classList.remove('expanded');
+            });
+        });
+    </script>
+</head>
@@ -0,0 +1,61 @@
+<?php
+$_nav_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+
+function _nav_active(string $href): bool {
+    global $_nav_path;
+    return $href === '/'
+        ? ($_nav_path === '/' || $_nav_path === '/index.php')
+        : strpos($_nav_path, $href) === 0;
+}
+
+$_nav_pages = [
+    '/about/'   => 'About',
+    '/log/'     => 'Log',
+    '/links/'   => 'Links',
+    '/contact/' => 'Contact',
+];
+?>
+<nav class="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0a] border-b border-[#1c1c1c]">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 flex items-center justify-between h-16">
+        <a href="/" class="text-base font-semibold tracking-wide">sistav.com</a>
+
+        <div class="hidden md:flex items-center gap-8 text-base">
+            <?php foreach ($_nav_pages as $href => $label): ?>
+            <a href="<?= $href ?>" class="<?= _nav_active($href) ? '' : 'text-neutral-400 hover:text-[#e6dfd8]' ?> transition-colors duration-150"><?= $label ?></a>
+            <?php endforeach; ?>
+        </div>
+
+        <button id="nav-toggle" class="md:hidden text-neutral-400 hover:text-white p-1" aria-label="Toggle menu" aria-expanded="false">
+            <svg id="nav-icon-open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>
+            </svg>
+            <svg id="nav-icon-close" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+        </button>
+    </div>
+
+    <div id="nav-mobile" class="hidden border-t border-[#1c1c1c] bg-[#0a0a0a]">
+        <div class="max-w-5xl mx-auto px-4 py-5 flex flex-col gap-5 text-sm">
+            <?php foreach ($_nav_pages as $href => $label): ?>
+            <a href="<?= $href ?>" class="<?= _nav_active($href) ? '' : 'text-neutral-300 hover:text-[#e6dfd8]' ?> transition-colors text-base"><?= $label ?></a>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</nav>
+<div id="site-cursor"></div>
+
+<script>
+(function () {
+    var toggle   = document.getElementById('nav-toggle');
+    var mobile   = document.getElementById('nav-mobile');
+    var iconOpen = document.getElementById('nav-icon-open');
+    var iconClose = document.getElementById('nav-icon-close');
+    toggle.addEventListener('click', function () {
+        var justHid = mobile.classList.toggle('hidden');
+        iconOpen.classList.toggle('hidden', !justHid);
+        iconClose.classList.toggle('hidden', justHid);
+        toggle.setAttribute('aria-expanded', String(!justHid));
+    });
+})();
+</script>
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>sistav.com</title>
-    <style>
-        body {
-            margin: 0;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: #000;
-        }
-        img {
-            max-width: 90vw;
-            max-height: 90vh;
-        }
-    </style>
-</head>
-<body>
-    <img src="gif.gif" alt="gif">
-</body>
-</html>
@@ -0,0 +1,35 @@
+<?php
+$gif_files = glob($_SERVER['DOCUMENT_ROOT'] . '/assets/gifs/*.gif');
+$gifs = array_map(fn($f) => '/assets/gifs/' . basename($f), $gif_files);
+$default = !empty($gifs) ? $gifs[0] : '';
+include $_SERVER['DOCUMENT_ROOT'] . '/includes/head.php';
+?>
+<body class="bg-[#0a0a0a] text-white min-h-screen">
+<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'; ?>
+
+<main class="h-screen flex items-center justify-center pt-16">
+    <div id="gif-frame">
+        <img id="main-gif" src="<?= htmlspecialchars($default) ?>" alt="" style="display:block;opacity:0;transition:opacity 0.4s ease">
+    </div>
+</main>
+
+<script>
+    var gifs = <?= json_encode($gifs) ?>;
+    var img  = document.getElementById('main-gif');
+
+    function sizeGif() {
+        if (!img.naturalWidth) return;
+        var maxPx = Math.min(window.innerWidth, window.innerHeight) * 0.65;
+        var scale = Math.min(maxPx / img.naturalWidth, maxPx / img.naturalHeight);
+        img.style.width  = Math.round(img.naturalWidth  * scale) + 'px';
+        img.style.height = Math.round(img.naturalHeight * scale) + 'px';
+        img.style.opacity = '1';
+    }
+
+    img.src = gifs[Math.floor(Math.random() * gifs.length)];
+    img.addEventListener('load', sizeGif);
+    if (img.complete && img.naturalWidth) sizeGif();
+</script>
+
+</body>
+</html>
@@ -0,0 +1,44 @@
+<?php
+$title = 'Links';
+include $_SERVER['DOCUMENT_ROOT'] . '/includes/head.php';
+
+$data       = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/assets/data/links.json'), true);
+$categories = $data['categories'] ?? [];
+?>
+<body class="bg-[#0a0a0a] text-white min-h-screen">
+<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'; ?>
+
+<main class="pt-16">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 py-12">
+        <h1 class="text-2xl font-semibold mb-3">Links</h1>
+        <p class="text-neutral-400 text-sm mb-16">Things worth sharing.</p>
+
+        <div class="space-y-12">
+            <?php foreach ($categories as $cat): ?>
+            <section>
+                <h2 class="text-xs text-neutral-300 uppercase tracking-widest mb-5"><?= htmlspecialchars($cat['name']) ?></h2>
+                <ul class="space-y-4">
+                    <?php foreach ($cat['links'] as $link):
+                        $domain = preg_replace('/^www\./', '', parse_url($link['url'], PHP_URL_HOST));
+                    ?>
+                    <li>
+                        <a href="<?= htmlspecialchars($link['url']) ?>" target="_blank" rel="noopener" class="group">
+                            <span class="flex items-baseline gap-2">
+                                <span class="text-neutral-300 text-sm group-hover:text-white transition-colors"><?= htmlspecialchars($link['title']) ?></span>
+                                <span class="text-neutral-500 text-xs"><?= $domain ?></span>
+                            </span>
+                            <?php if (!empty($link['note'])): ?>
+                            <span class="block text-neutral-500 text-xs mt-0.5"><?= htmlspecialchars($link['note']) ?></span>
+                            <?php endif; ?>
+                        </a>
+                    </li>
+                    <?php endforeach; ?>
+                </ul>
+            </section>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</main>
+
+</body>
+</html>
@@ -0,0 +1,43 @@
+<?php
+$title = 'Log';
+include $_SERVER['DOCUMENT_ROOT'] . '/includes/head.php';
+
+$data    = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/assets/data/log.json'), true);
+$entries = $data['entries'] ?? [];
+$fields  = ['listening', 'watching', 'reading', 'working on', 'thinking'];
+?>
+<body class="bg-[#0a0a0a] text-white min-h-screen">
+<?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/nav.php'; ?>
+
+<main class="pt-16">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 py-12">
+        <h1 class="text-2xl font-semibold mb-3">Log</h1>
+        <p class="text-neutral-300 text-sm mb-16">What I'm into lately. Updated whenever.</p>
+
+        <div class="space-y-12">
+            <?php if (empty($entries)): ?>
+            <p class="text-neutral-700 text-sm">Nothing yet.</p>
+            <?php endif; ?>
+
+            <?php foreach ($entries as $entry): ?>
+            <article>
+                <h2 class="mb-5"><?= htmlspecialchars($entry['title']) ?></h2>
+                <p class="text-[#a3a3a3] text-xs font-mono mb-6"><?= date('F j, Y', strtotime($entry['date'])) ?></p>
+                <dl class="space-y-3">
+                    <?php foreach ($fields as $field): ?>
+                    <?php if (!empty($entry[$field])): ?>
+                    <div class="grid grid-cols-[90px_1fr] gap-4">
+                        <dt class="text-neutral-500 text-xs"><?= $field ?></dt>
+                        <dd class="text-neutral-200 text-sm"><?= htmlspecialchars($entry[$field]) ?></dd>
+                    </div>
+                    <?php endif; ?>
+                    <?php endforeach; ?>
+                </dl>
+            </article>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</main>
+
+</body>
+</html>