<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SS Keddy | Digital Log</title>
    
    <!-- Google Fonts -->
    <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=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,600;1,400&display=swap" rel="stylesheet">

    <style>
        :root {
            --sailcloth: #F9F6F0;
            --deep-ocean: #1C2D37;
            --brass: #C89B3C;
            --signal-red: #AA3A3A;
        }

        body {
            background-color: var(--sailcloth);
            color: var(--deep-ocean);
            font-family: 'Inter', sans-serif;
            line-height: 1.7;
            margin: 0;
            padding: 0;
        }

        /* Container to keep things narrow and readable */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        /* Nautical Serif Headings */
        h1, h2, h3 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            color: var(--deep-ocean);
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 5px;
            letter-spacing: -0.5px;
        }

        .subtitle {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            color: var(--brass);
            font-size: 1.2rem;
            margin-top: 0;
            margin-bottom: 40px;
            border-bottom: 1px solid rgba(28, 45, 55, 0.1);
            padding-bottom: 20px;
        }

        /* Navigation */
        nav {
            margin-bottom: 50px;
        }
        
        nav a {
            color: var(--deep-ocean);
            text-decoration: none;
            text-transform: uppercase;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 1px;
            margin-right: 20px;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s ease;
        }

        nav a:hover {
            border-bottom: 2px solid var(--signal-red);
        }

        /* Project Cards / Log Entries */
        .log-entry {
            margin-bottom: 50px;
        }

        .log-entry h2 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        .log-meta {
            font-size: 0.85rem;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
            display: block;
        }

        .read-more {
            color: var(--signal-red);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .read-more:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <div class="container">
        <header>
            <h1>SS Keddy</h1>
            <p class="subtitle">Engineering, Code, and Coastal Logs from St. Petersburg, FL.</p>
            
            <nav>
                <a href="#">The Logbook</a>
                <a href="#">Hardware</a>
                <a href="#">Software</a>
            </nav>
        </header>

        <main>
            <!-- Example: A Nautical/Maker Post -->
            <article class="log-entry">
                <span class="log-meta">Expedition Prep • August 2026</span>
                <h2>Modifying the Tandem Island for the Everglades Challenge</h2>
                <p>Dialing in the spinnaker upgrade on the Hobie and testing out the new rigging lines. The goal is to optimize the layout so adjustments can be made quickly in heavy weather without shifting weight off the trampolines...</p>
                <a href="#" class="read-more">Read Full Log →</a>
            </article>

            <!-- Example: A Hardware Post -->
            <article class="log-entry">
                <span class="log-meta">Hardware Fabrication • July 2026</span>
                <h2>Building a 1.5m Daytona Scoring Pylon</h2>
                <p>A deep dive into wiring the P8 HUB75 LED panels and writing the custom Python WebSocket scripts to pull live NASCAR lap telemetry straight to the living room display...</p>
                <a href="#" class="read-more">View Build Specs →</a>
            </article>

            <!-- Example: A Software Post -->
            <article class="log-entry">
                <span class="log-meta">Web Development • Active</span>
                <h2>Roshambo Dojo</h2>
                <p>An hourly, high-stakes rock-paper-scissors tournament. Built on a Node.js backend using WebSockets for real-time combat and an SQLite database to track global honor.</p>
                <a href="https://roshambodojo.com" class="read-more">Enter the Dojo →</a>
            </article>
        </main>
    </div>

</body>
</html>