memoirs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Salim Oyinlola - Memoirs</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;400;600;700&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/png" href="assets/img/favicon-32x32.png" />
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body { 
            font-family: 'Overpass Mono', monospace; 
            color: #0c5ebc; 
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); 
            min-height: 100vh;
            line-height: 1.6;
        }

        .site-header { 
            background: white; 
            padding: 1rem 0; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
            position: sticky; 
            top: 0; 
            z-index: 100; 
        }

        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            padding: 0 1.5rem; 
        }

        .flex-wrap { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap;
        }

        .logo a { color: #0a5d80; text-decoration: none; font-weight: 700; font-size: 1.5rem; }
        .navbar { display: flex; list-style: none; gap: 20px; }
        .navbar a { text-decoration: none; color: #0c5ebc; font-weight: 600; }

        .page-title-area {
            text-align: center;
            padding: 4rem 1rem 2rem 1rem;
        }
        
        .page-title-area h1 { 
            color: #0a5d80; 
            font-size: 2.5rem;
            margin-bottom: 0.5rem; 
            letter-spacing: -1px;
        }
        
        .poetic-subtitle { color: #666; font-size: 1rem; line-height: 1.8; }

        .memoir-feed { 
            margin: 2rem 0 5rem 0;
        }

        .hub-section { 
            background: white; 
            border-radius: 20px; 
            padding: 2.5rem; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-bottom: 2rem;
        }

        .hub-section h2 { 
            color: #0a5d80; 
            margin-bottom: 1rem; 
            font-size: 1.8rem;
            line-height: 1.3;
        }

        .blog-cover-img {
            width: 100%;
            height: 350px;
            background: #eee;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            object-fit: cover;
            display: block;
        }

        .date-tag {
            display: inline-block;
            background: #eef2f7;
            color: #764ba2;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .preview-text {
            color: #444;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }

        .preview-text strong {
            color: #0a5d80;
        }

        .recommend-btn { 
            display: inline-block; 
            background: #0c5ebc; 
            color: white; 
            text-align: center; 
            padding: 12px 30px; 
            border-radius: 10px; 
            text-decoration: none; 
            font-weight: 700;
            transition: 0.3s ease;
        }
        .recommend-btn:hover { background: #0a5d80; transform: translateY(-2px); }

        @media (max-width: 600px) {
            .page-title-area h1 { font-size: 2rem; }
            .blog-cover-img { height: 200px; }
        }
    </style>
</head>
<body>

    <header class="site-header">
        <nav class="nav container flex-wrap">
            <h1 class="logo"><a href="index.html">Salim Oyinlọlá</a></h1>
            <ul class="navbar">
                <li><a href="news.html">News</a></li>
                <li><a href="registry.html">Registry</a></li>
                <li><a href="memoirs.html">Memoirs</a></li>
            </ul>
        </nav>
    </header>

    <div class="page-title-area">
        <div class="container">
            <h1>Memoirs</h1>
            <p class="poetic-subtitle">
                Here's to that random dreamer-kid curating his autobiography in real-time;<br> 
                one story at a time. Perhaps, this is my public journal.<br>
            </p>
        </div>
    </div>

    <main class="container">
        <div class="memoir-feed">
            <article class="hub-section">
                <img src="assets/img/first-time-speaking.jpg" alt="My first time speaking at a physical tech event="blog-cover-img">
                
                <span class="date-tag">Mar 17, 2023</span>
                
                <h2>My first time speaking at a physical tech event</h2>            
                <div class="preview-text">
                    <p>First times are beautiful. I cannot quite explain it, but I think there is something magical about doing/experiencing something for the first time. Like a child walking for the first time, once we make that first leap... </p>
                </div>
                <a href="memoirs/first-time-speaking.html" class="recommend-btn">Keep Reading</a>
            </article>

            <article class="hub-section">
                <img src="assets/img/because-i-can.jpg" alt="Why a month late? Because I can" class="blog-cover-img">
                
                <span class="date-tag">Jan 30, 2023</span>
                
                <h2>Why a month late? Because I can</h2>            
                <div class="preview-text">
                    <p>A year in review piece for 2022, written in the quiet of last December. Although it didn’t feel right to publish then, I woke up this morning with a sudden longing to put it out there. It is finally time to share. So here goes: </p>
                </div>
                <a href="memoirs/because-i-can.html" class="recommend-btn">Keep Reading</a>
            </article>

            <article class="hub-section">
                <img src="assets/img/year-20.jpg" alt="Year 20 Lab Records" class="blog-cover-img">
                
                <span class="date-tag">Jul 31, 2022</span>
                
                <h2>Year 20 — Lab Records of the Experiment that is Teenage Life</h2>
                
                <div class="preview-text">
                    <p><strong>Test:</strong> A thirteen-year old + seven awesome years</p>
                    <p><strong>Observation:</strong> Dynamic changes in his physical, social and emotional domains...</p>
                    <p><strong>Inference:</strong> Adulthood sucks. Year twenty starts with some random kid in some random shop in a Nigerian suburb struggling to contain his excitement...</p>
                </div>

                <a href="memoirs/year-20.html" class="recommend-btn">Keep Reading</a>
            </article>
        </div>
    </main>

</body>
</html>