Tailwind Portfolio Website

Responsive multi-page portfolio experiment built with Tailwind CSS and vanilla JavaScript.

HTML · Tailwind CSS · JavaScript

README.txt
Tailwind portfolio exercise, preserved as a standalone static site.
The content and identity are intentionally generic; the layout and compiled Tailwind styling remain the focus.
index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mira Rowan</title>
    <link rel="stylesheet" href="assets/css/site.css">
</head>
<body class="text-black">
<header class="sticky bg-green-100 text-black shadow-lg top-0">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center space-x-4">
                <a href="index.html">
                    <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
                </a>
                <h1 class="text-xl font-bold">Mira Rowan</h1>
            </div>
            <button id="menu-toggle" class="block md:hidden p-2 rounded bg-red-100" aria-label="Open navigation">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
            <nav id="menu" class="hidden md:flex space-x-6">
                <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
                <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
                <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
                <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
                <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
                <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
            </nav>
        </div>
        <nav id="mobile-menu" class="hidden md:hidden flex flex-col space-y-2 px-6 pb-4 bg-green-100">
            <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
            <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
            <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
            <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
            <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
            <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
        </nav>
    </header>
<main>
    <section class="flex flex-col md:flex-row items-center justify-center py-8 px-8 bg-white">
        <img src="./assets/img/html_css_js.jpg" alt="A small stack of web-development symbols" class="rounded-lg shadow-md w-[580px] h-[420px] object-cover">
        <div class="text-center md:text-left md:ml-8">
            <h2 class="text-red-100 text-sm uppercase font-semibold">Interface Developer</h2>
            <h1 class="text-black text-4xl font-bold mt-2">Mira Rowan</h1>
            <p class="text-black mt-4">I make small web things: tidy interfaces, useful prototypes, and experiments that usually begin on paper.</p>
            <div class="flex flex-col md:flex-row items-center gap-4 mt-6">
                <a href="notes.html" class="bg-green-100 text-black font-bold py-2 px-4 rounded-md shadow-md">Open Notes</a>
                <a href="projects.html" class="bg-green-100 text-black font-bold py-2 px-4 rounded-md shadow-md">View Projects</a>
            </div>
        </div>
    </section>

    <section class="grid grid-cols-1 md:grid-cols-3 gap-8 bg-white px-16 py-8">
        <section class="md:col-span-2 flex flex-col">
            <div class="bg-red-100 p-4 rounded-t-lg shadow text-center"><h2 class="text-black text-2xl font-bold">Featured Projects</h2></div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 p-6 bg-white rounded-b-lg shadow mx-auto w-full">
                <a href="./project_samples/project-sample-1.html" class="block"><img src="./assets/img/phases.png" alt="Parcel project preview" class="rounded-lg shadow-md w-[300px] h-[200px] object-cover"></a>
                <a href="./project_samples/project-sample-2.html" class="block"><img src="./assets/img/classroom_teacher.jpg" alt="Streetlight project preview" class="rounded-lg shadow-md w-[300px] h-[200px] object-cover"></a>
                <a href="./project_samples/project-sample-3.html" class="block"><img src="./assets/img/user_error.jpg" alt="Finch project preview" class="rounded-lg shadow-md w-[300px] h-[200px] object-cover"></a>
                <a href="./project_samples/project-sample-4.html" class="block"><img src="./assets/img/programming.png" alt="Signal Garden project preview" class="rounded-lg shadow-md w-[300px] h-[200px] object-cover"></a>
                <a href="./project_samples/project-sample-5.html" class="block"><img src="./assets/img/html_css_js.jpg" alt="Seedbox project preview" class="rounded-lg shadow-md w-[300px] h-[200px] object-cover"></a>
                <a href="./project_samples/project-sample-6.html" class="block"><img src="./assets/img/logo-port.png" alt="Shelf Notes project preview" class="rounded-lg shadow-md w-[300px] h-[200px] object-cover"></a>
            </div>
        </section>
        <aside class="flex flex-col">
            <div class="bg-red-100 p-4 rounded-t-lg shadow text-center"><h2 class="text-black text-2xl font-bold">Loose Ends</h2></div>
            <div class="bg-white p-6 rounded-b-lg shadow text-center flex-grow flex items-center">
                <ul class="space-y-4 w-full">
                    <li><a href="about.html" class="text-black underline">Why this site exists</a></li>
                    <li><a href="notes.html" class="text-black underline">Current notebook</a></li>
                    <li><a href="projects.html" class="text-black underline">All project cards</a></li>
                    <li><a href="sample-project-api.html" class="text-black underline">Tiny interactive sample</a></li>
                </ul>
            </div>
        </aside>
    </section>
</main>
<footer class="grid grid-cols-1 md:grid-cols-3 items-center bg-green-100 p-4 mt-8">
        <div class="flex justify-start">
            <a href="index.html">
                <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
            </a>
        </div>
        <div class="flex flex-col items-center text-center">
            <h2 class="text-lg text-black mb-2">Site Map</h2>
            <ul class="flex flex-row items-center justify-center gap-4">
                <li><a href="index.html" class="text-black underline">Home</a></li>
                <li><a href="contact.html" class="text-black underline">Contact</a></li>
                <li><a href="about.html" class="text-black underline">About</a></li>
                <li><a href="notes.html" class="text-black underline">Notes</a></li>
                <li><a href="projects.html" class="text-black underline">Projects</a></li>
            </ul>
            <div class="text-center md:justify-self-end">
                <p class="text-black text-sm">© 2026 Mira Rowan.</p>
            </div>
        </div>
    </footer>
<script src="assets/js/main.js"></script>
</body>
</html>
about.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>About — Mira Rowan</title>
    <link rel="stylesheet" href="assets/css/site.css">
</head>
<body class="text-black">
<header class="sticky bg-green-100 text-black shadow-lg top-0">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center space-x-4">
                <a href="index.html">
                    <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
                </a>
                <h1 class="text-xl font-bold">Mira Rowan</h1>
            </div>
            <button id="menu-toggle" class="block md:hidden p-2 rounded bg-red-100" aria-label="Open navigation">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
            <nav id="menu" class="hidden md:flex space-x-6">
                <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
                <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
                <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
                <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
                <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
                <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
            </nav>
        </div>
        <nav id="mobile-menu" class="hidden md:hidden flex flex-col space-y-2 px-6 pb-4 bg-green-100">
            <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
            <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
            <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
            <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
            <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
            <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
        </nav>
    </header>
<main class="mx-auto px-4 py-8 bg-white">
    <section class="flex flex-col md:flex-row items-center md:items-center space-y-4 md:space-y-0 md:space-x-6 mb-8">
        <img src="https://plus.unsplash.com/premium_photo-1682308363802-00e87e9c2d33?q=80&w=1843&auto=format&fit=crop" alt="Desk by a bright window" class="rounded-lg shadow-md w-full md:w-[400px] object-cover mx-auto">
        <div class="flex flex-col justify-center items-center text-center md:text-left max-w-[500px]">
            <h2 class="text-2xl font-bold text-black">About Me</h2>
            <p class="text-black mt-2">Hi, I'm Mira. I build front-end prototypes and small tools, with a soft spot for plain HTML, readable layouts, and interfaces that explain themselves.</p>
            <p class="text-black mt-2">Most of my projects start as a sketch or an annoying little problem. I like keeping the solution small enough that I can still understand the whole thing a month later.</p>
        </div>
    </section>
    <section class="flex flex-col md:flex-row items-center md:items-center space-y-4 md:space-y-0 md:space-x-6 mb-8">
        <div class="flex flex-col justify-center items-center text-center md:text-left max-w-[500px]">
            <h2 class="text-2xl font-bold text-black">Off Screen</h2>
            <p class="text-black mt-2">Away from a browser I collect transit maps, read field guides, make overcomplicated tea, and take photographs of signs with unusually good lettering.</p>
            <p class="text-black mt-2">I keep this site mostly because I like the web when it feels like a place someone made, rather than a profile someone filled in.</p>
        </div>
        <img src="https://images.unsplash.com/photo-1634838037553-66f5ce322212?q=80&w=1740&auto=format&fit=crop" alt="Night sky" class="rounded-lg shadow-md w-full md:w-[400px] object-cover mx-auto">
    </section>
    <section class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <img src="./assets/img/classroom_teacher.jpg" alt="Notebook and work table" class="rounded-lg shadow-md w-full object-cover">
        <img src="./assets/img/programming.png" alt="Programming sketch" class="rounded-lg shadow-md w-full object-cover">
        <img src="./assets/img/html_css_js.jpg" alt="Web technology graphic" class="rounded-lg shadow-md w-full object-cover">
    </section>
</main>
<footer class="grid grid-cols-1 md:grid-cols-3 items-center bg-green-100 p-4 mt-8">
        <div class="flex justify-start">
            <a href="index.html">
                <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
            </a>
        </div>
        <div class="flex flex-col items-center text-center">
            <h2 class="text-lg text-black mb-2">Site Map</h2>
            <ul class="flex flex-row items-center justify-center gap-4">
                <li><a href="index.html" class="text-black underline">Home</a></li>
                <li><a href="contact.html" class="text-black underline">Contact</a></li>
                <li><a href="about.html" class="text-black underline">About</a></li>
                <li><a href="notes.html" class="text-black underline">Notes</a></li>
                <li><a href="projects.html" class="text-black underline">Projects</a></li>
            </ul>
            <div class="text-center md:justify-self-end">
                <p class="text-black text-sm">© 2026 Mira Rowan.</p>
            </div>
        </div>
    </footer>
<script src="assets/js/main.js"></script>
</body>
</html>
projects.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Projects — Mira Rowan</title>
    <link rel="stylesheet" href="assets/css/site.css">
</head>
<body class="text-black">
<header class="sticky bg-green-100 text-black shadow-lg top-0">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center space-x-4">
                <a href="index.html">
                    <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
                </a>
                <h1 class="text-xl font-bold">Mira Rowan</h1>
            </div>
            <button id="menu-toggle" class="block md:hidden p-2 rounded bg-red-100" aria-label="Open navigation">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
            <nav id="menu" class="hidden md:flex space-x-6">
                <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
                <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
                <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
                <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
                <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
                <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
            </nav>
        </div>
        <nav id="mobile-menu" class="hidden md:hidden flex flex-col space-y-2 px-6 pb-4 bg-green-100">
            <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
            <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
            <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
            <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
            <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
            <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
        </nav>
    </header>
<main class="mx-auto px-4 py-8 bg-white"><h1 class="text-4xl font-bold text-black text-center mb-8">Projects</h1><section class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"><a href="./project_samples/project-sample-1.html" class="block"><img src="./assets/img/phases.png" alt="Parcel" class="rounded-lg shadow-md w-[400px] h-[250px] object-cover mx-auto"><h2 class="text-xl font-bold text-black text-center mt-4">Parcel</h2><p class="text-black text-center mt-2">A responsive multi-stage website study built to test layout decisions from narrow screens upward.</p></a>
<a href="./project_samples/project-sample-2.html" class="block"><img src="./assets/img/classroom_teacher.jpg" alt="Streetlight" class="rounded-lg shadow-md w-[400px] h-[250px] object-cover mx-auto"><h2 class="text-xl font-bold text-black text-center mt-4">Streetlight</h2><p class="text-black text-center mt-2">A neighborhood map prototype focused on clear categories, simple filters, and legible location cards.</p></a>
<a href="./project_samples/project-sample-3.html" class="block"><img src="./assets/img/user_error.jpg" alt="Finch" class="rounded-lg shadow-md w-[400px] h-[250px] object-cover mx-auto"><h2 class="text-xl font-bold text-black text-center mt-4">Finch</h2><p class="text-black text-center mt-2">A small deployment playground for testing static releases, error pages, and predictable rollbacks.</p></a>
<a href="./project_samples/project-sample-4.html" class="block"><img src="./assets/img/programming.png" alt="Signal Garden" class="rounded-lg shadow-md w-[400px] h-[250px] object-cover mx-auto"><h2 class="text-xl font-bold text-black text-center mt-4">Signal Garden</h2><p class="text-black text-center mt-2">A compact dashboard experiment for arranging tiny bits of changing information without visual noise.</p></a>
<a href="./project_samples/project-sample-5.html" class="block"><img src="./assets/img/html_css_js.jpg" alt="Seedbox" class="rounded-lg shadow-md w-[400px] h-[250px] object-cover mx-auto"><h2 class="text-xl font-bold text-black text-center mt-4">Seedbox</h2><p class="text-black text-center mt-2">A fixture generator that produces repeatable sample data for development and interface testing.</p></a>
<a href="./project_samples/project-sample-6.html" class="block"><img src="./assets/img/logo-port.png" alt="Shelf Notes" class="rounded-lg shadow-md w-[400px] h-[250px] object-cover mx-auto"><h2 class="text-xl font-bold text-black text-center mt-4">Shelf Notes</h2><p class="text-black text-center mt-2">A reading-log prototype for notes, progress markers, and low-friction personal organization.</p></a></section></main>
<footer class="grid grid-cols-1 md:grid-cols-3 items-center bg-green-100 p-4 mt-8">
        <div class="flex justify-start">
            <a href="index.html">
                <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
            </a>
        </div>
        <div class="flex flex-col items-center text-center">
            <h2 class="text-lg text-black mb-2">Site Map</h2>
            <ul class="flex flex-row items-center justify-center gap-4">
                <li><a href="index.html" class="text-black underline">Home</a></li>
                <li><a href="contact.html" class="text-black underline">Contact</a></li>
                <li><a href="about.html" class="text-black underline">About</a></li>
                <li><a href="notes.html" class="text-black underline">Notes</a></li>
                <li><a href="projects.html" class="text-black underline">Projects</a></li>
            </ul>
            <div class="text-center md:justify-self-end">
                <p class="text-black text-sm">© 2026 Mira Rowan.</p>
            </div>
        </div>
    </footer>
<script src="assets/js/main.js"></script>
</body>
</html>
notes.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Notes — Mira Rowan</title>
    <link rel="stylesheet" href="assets/css/site.css">
</head>
<body class="text-black">
<header class="sticky bg-green-100 text-black shadow-lg top-0">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center space-x-4">
                <a href="index.html">
                    <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
                </a>
                <h1 class="text-xl font-bold">Mira Rowan</h1>
            </div>
            <button id="menu-toggle" class="block md:hidden p-2 rounded bg-red-100" aria-label="Open navigation">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
            <nav id="menu" class="hidden md:flex space-x-6">
                <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
                <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
                <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
                <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
                <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
                <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
            </nav>
        </div>
        <nav id="mobile-menu" class="hidden md:hidden flex flex-col space-y-2 px-6 pb-4 bg-green-100">
            <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
            <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
            <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
            <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
            <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
            <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
        </nav>
    </header>
<main class="mx-auto px-4 py-8 bg-white space-y-12">
    <section>
        <h2 class="text-3xl font-bold text-black mb-4">Current Notebook</h2>
        <div class="mb-8">
            <h3 class="text-2xl font-semibold text-black">Make the first screen obvious</h3>
            <p class="text-gray-600 text-sm">Interface note · revised this winter</p>
            <ul class="list-disc list-inside text-black mt-2 space-y-2">
                <li>Put the primary action where the eye lands naturally.</li>
                <li>Do not make navigation compete with the page title.</li>
                <li>Let spacing explain hierarchy before adding decoration.</li>
                <li>Test the narrow version before polishing the wide one.</li>
            </ul>
        </div>
        <div class="mb-8">
            <h3 class="text-2xl font-semibold text-black">Keep prototypes disposable</h3>
            <p class="text-gray-600 text-sm">Build note · ongoing</p>
            <ul class="list-disc list-inside text-black mt-2 space-y-2">
                <li>Start with semantic HTML and a real data shape.</li>
                <li>Add JavaScript only where the interaction earns it.</li>
                <li>Prefer a boring file tree to a clever one.</li>
                <li>Write down why the strange parts are strange.</li>
            </ul>
        </div>
    </section>

    <section class="py-8 bg-green-100 rounded-lg shadow-md mt-8">
        <h2 class="text-3xl font-bold text-center text-black mb-4">Tools I Reach For</h2>
        <div class="flex flex-wrap justify-center items-center gap-4 text-black font-medium">
            <span class="px-4 py-2 bg-white rounded-full shadow">HTML</span><span class="px-4 py-2 bg-white rounded-full shadow">CSS</span><span class="px-4 py-2 bg-white rounded-full shadow">Tailwind CSS</span><span class="px-4 py-2 bg-white rounded-full shadow">JavaScript</span><span class="px-4 py-2 bg-white rounded-full shadow">Python</span><span class="px-4 py-2 bg-white rounded-full shadow">SQLite</span><span class="px-4 py-2 bg-white rounded-full shadow">Git</span><span class="px-4 py-2 bg-white rounded-full shadow">Linux</span>
        </div>
    </section>

    <section class="py-8 bg-blue-100 rounded-lg shadow-md mt-8">
        <h2 class="text-3xl font-bold text-center text-black mb-4">Small Rules</h2>
        <div class="flex flex-wrap justify-center items-center gap-4 text-black font-medium">
            <span class="px-4 py-2 bg-white rounded-full shadow">Readable beats clever</span><span class="px-4 py-2 bg-white rounded-full shadow">Mobile first</span><span class="px-4 py-2 bg-white rounded-full shadow">Useful defaults</span><span class="px-4 py-2 bg-white rounded-full shadow">No mystery buttons</span>
        </div>
    </section>

    <section>
        <h2 class="text-3xl font-bold text-black mb-4">Things on the Desk</h2>
        <div class="mb-8"><h3 class="text-2xl font-semibold text-black">A tiny offline field guide</h3><p class="text-gray-600 text-sm">HTML · service worker · indexed data</p><p class="text-gray-700 mt-4">An experiment in making reference material pleasant to use with poor connectivity and a very small screen.</p></div>
        <div class="mb-8"><h3 class="text-2xl font-semibold text-black">A better empty state</h3><p class="text-gray-600 text-sm">Interface study · forms</p><p class="text-gray-700 mt-4">A collection of deliberately plain examples for showing what a screen can explain before a user has created anything.</p></div>
        <div class="mb-8"><h3 class="text-2xl font-semibold text-black">Printed web pages</h3><p class="text-gray-600 text-sm">CSS · paper</p><p class="text-gray-700 mt-4">Testing whether a small reference site can remain genuinely useful when printed rather than merely tolerable.</p></div>
    </section>
</main>
<footer class="grid grid-cols-1 md:grid-cols-3 items-center bg-green-100 p-4 mt-8">
        <div class="flex justify-start">
            <a href="index.html">
                <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
            </a>
        </div>
        <div class="flex flex-col items-center text-center">
            <h2 class="text-lg text-black mb-2">Site Map</h2>
            <ul class="flex flex-row items-center justify-center gap-4">
                <li><a href="index.html" class="text-black underline">Home</a></li>
                <li><a href="contact.html" class="text-black underline">Contact</a></li>
                <li><a href="about.html" class="text-black underline">About</a></li>
                <li><a href="notes.html" class="text-black underline">Notes</a></li>
                <li><a href="projects.html" class="text-black underline">Projects</a></li>
            </ul>
            <div class="text-center md:justify-self-end">
                <p class="text-black text-sm">© 2026 Mira Rowan.</p>
            </div>
        </div>
    </footer>
<script src="assets/js/main.js"></script>
</body>
</html>
contact.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contact — Mira Rowan</title>
    <link rel="stylesheet" href="assets/css/site.css">
</head>
<body class="text-black">
<header class="sticky bg-green-100 text-black shadow-lg top-0">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center space-x-4">
                <a href="index.html">
                    <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
                </a>
                <h1 class="text-xl font-bold">Mira Rowan</h1>
            </div>
            <button id="menu-toggle" class="block md:hidden p-2 rounded bg-red-100" aria-label="Open navigation">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
            <nav id="menu" class="hidden md:flex space-x-6">
                <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
                <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
                <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
                <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
                <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
                <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
            </nav>
        </div>
        <nav id="mobile-menu" class="hidden md:hidden flex flex-col space-y-2 px-6 pb-4 bg-green-100">
            <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
            <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
            <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
            <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
            <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
            <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
        </nav>
    </header>
<main class="mx-auto px-4 py-8 bg-white">
    <section class="flex flex-col md:flex-row items-center md:items-center space-y-4 md:space-y-0 md:space-x-6 mb-8">
        <img src="https://images.unsplash.com/photo-1470836047270-6c7c229fd74b?q=80&w=2070&auto=format&fit=crop" alt="Desk and stationery" class="rounded-lg shadow-md w-full md:w-[600px] object-cover">
        <div class="flex flex-col justify-center items-center text-center md:text-left"><h2 class="text-2xl font-bold text-black">CONTACT, SORT OF</h2><p class="text-black mt-2">This little portfolio isn't wired to a mailbox. The form is here because forms are part of the interface exercise.</p></div>
    </section>
    <section class="flex flex-col md:flex-row items-center md:items-center space-y-4 md:space-y-0 md:space-x-6">
        <img src="https://images.unsplash.com/photo-1512633873111-618ff862a4f3?q=80&w=2013&auto=format&fit=crop" alt="Abstract architecture" class="rounded-lg shadow-md w-full md:w-[600px] object-cover">
        <div class="flex justify-center items-center w-full"><div class="w-full max-w-md bg-green-100 p-6 rounded-lg shadow-md space-y-4"><p class="text-center text-black font-bold">Demo form — deliberately disabled.</p><form class="space-y-4"><div><label for="name" class="block text-black font-bold">Name</label><input type="text" id="name" class="w-full px-4 py-2 border rounded-md" placeholder="Your Name" disabled></div><div><label for="email" class="block text-black font-bold">Email</label><input type="email" id="email" class="w-full px-4 py-2 border rounded-md" placeholder="Your Email" disabled></div><div><label for="message" class="block text-black font-bold">Message</label><textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-md" placeholder="Your Message" disabled></textarea></div><button type="button" class="w-full bg-gray-200 text-black font-bold py-2 px-4 rounded-md cursor-not-allowed">Submit (Disabled)</button></form></div></div>
    </section>
</main>
<footer class="grid grid-cols-1 md:grid-cols-3 items-center bg-green-100 p-4 mt-8">
        <div class="flex justify-start">
            <a href="index.html">
                <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
            </a>
        </div>
        <div class="flex flex-col items-center text-center">
            <h2 class="text-lg text-black mb-2">Site Map</h2>
            <ul class="flex flex-row items-center justify-center gap-4">
                <li><a href="index.html" class="text-black underline">Home</a></li>
                <li><a href="contact.html" class="text-black underline">Contact</a></li>
                <li><a href="about.html" class="text-black underline">About</a></li>
                <li><a href="notes.html" class="text-black underline">Notes</a></li>
                <li><a href="projects.html" class="text-black underline">Projects</a></li>
            </ul>
            <div class="text-center md:justify-self-end">
                <p class="text-black text-sm">© 2026 Mira Rowan.</p>
            </div>
        </div>
    </footer>
<script src="assets/js/main.js"></script>
</body>
</html>
sample-project-api.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pocket Lookup — Mira Rowan</title>
    <link rel="stylesheet" href="assets/css/site.css">
    <link rel="stylesheet" href="./assets/css/main-api-project.css">
</head>
<body class="text-black">
<header class="sticky bg-green-100 text-black shadow-lg top-0">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center space-x-4">
                <a href="index.html">
                    <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
                </a>
                <h1 class="text-xl font-bold">Mira Rowan</h1>
            </div>
            <button id="menu-toggle" class="block md:hidden p-2 rounded bg-red-100" aria-label="Open navigation">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
            <nav id="menu" class="hidden md:flex space-x-6">
                <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
                <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
                <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
                <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
                <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
                <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
            </nav>
        </div>
        <nav id="mobile-menu" class="hidden md:hidden flex flex-col space-y-2 px-6 pb-4 bg-green-100">
            <a href="index.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Home</a>
            <a href="contact.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Contact</a>
            <a href="about.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">About</a>
            <a href="notes.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Notes</a>
            <a href="projects.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Projects</a>
            <a href="sample-project-api.html" class="text-black font-bold py-2 px-4 rounded-md bg-red-100">Sample</a>
        </nav>
    </header>
<main>
    <section class="aside-section aside-section-position-one">
        <header class="aside-section-header"><h3>Pocket Lookup</h3></header>
        <div class="aside-image-wrapper"><img src="./assets/img/programming.png" class="aside-images" alt="Programming sketch"><p class="aside-images-caption">A tiny local-data interaction.</p></div>
        <section class="aside-section-content"><div class="api-section"><header><h4>Select a lookup:</h4></header><div class="api-checkbox-area"><label><input type="checkbox" id="dictionary-checkbox" name="lookup" value="dictionary"> Word</label><label><input type="checkbox" id="quotes-checkbox" name="lookup" value="quotes"> Note</label></div><div class="api-input-area"><label for="parameter-input">Enter a word or category:</label><input type="text" id="parameter-input" placeholder="orbit, paper, quiet..."></div><button id="api-request-button">Submit</button><div id="api-response-text"></div><div id="api-error-message">Nothing matched that entry. Try orbit, paper, quiet, build, or night.</div></div></section>
    </section>
</main>
<footer class="grid grid-cols-1 md:grid-cols-3 items-center bg-green-100 p-4 mt-8">
        <div class="flex justify-start">
            <a href="index.html">
                <img src="assets/img/logo-port.png" alt="Mira Rowan mark" class="rounded-full w-12 h-12">
            </a>
        </div>
        <div class="flex flex-col items-center text-center">
            <h2 class="text-lg text-black mb-2">Site Map</h2>
            <ul class="flex flex-row items-center justify-center gap-4">
                <li><a href="index.html" class="text-black underline">Home</a></li>
                <li><a href="contact.html" class="text-black underline">Contact</a></li>
                <li><a href="about.html" class="text-black underline">About</a></li>
                <li><a href="notes.html" class="text-black underline">Notes</a></li>
                <li><a href="projects.html" class="text-black underline">Projects</a></li>
            </ul>
            <div class="text-center md:justify-self-end">
                <p class="text-black text-sm">© 2026 Mira Rowan.</p>
            </div>
        </div>
    </footer>
<script src="assets/js/main.js"></script>
</body>
</html>
assets/js/main.js
document.addEventListener("DOMContentLoaded", () => {
    const menuToggle = document.getElementById("menu-toggle");
    const mobileMenu = document.getElementById("mobile-menu");
    if (!menuToggle || !mobileMenu) return;
    menuToggle.addEventListener("click", () => mobileMenu.classList.toggle("hidden"));
});
assets/js/api.js
const dictionaryCheckbox = document.getElementById('dictionary-checkbox');
const quotesCheckbox = document.getElementById('quotes-checkbox');
const parameterInput = document.getElementById('parameter-input');
const responseText = document.getElementById('api-response-text');
const errorMessage = document.getElementById('api-error-message');

const words = {
  orbit: 'A path repeated around something; also a useful reminder that not every loop is a bug.',
  paper: 'A remarkably durable interface with no loading state.',
  quiet: 'The part of a layout that lets the important thing be noticed.',
  build: 'To make something small enough that you can still explain how it works.',
  night: 'Excellent conditions for noticing that one margin is three pixels off.'
};
const notes = {
  orbit: 'Repetition becomes structure when the return is intentional.',
  paper: 'Print the page once. It will reveal things the browser politely hid.',
  quiet: 'Not every empty space is waiting to be filled.',
  build: 'A boring second version is often better than a clever first one.',
  night: 'Stop fixing typography after midnight.'
};

function clearResults() {
  responseText.style.display = 'none';
  errorMessage.style.display = 'none';
}

dictionaryCheckbox.addEventListener('change', () => {
  if (dictionaryCheckbox.checked) quotesCheckbox.checked = false;
  clearResults();
});
quotesCheckbox.addEventListener('change', () => {
  if (quotesCheckbox.checked) dictionaryCheckbox.checked = false;
  clearResults();
});

document.getElementById('api-request-button').addEventListener('click', () => {
  clearResults();
  const key = parameterInput.value.trim().toLowerCase();
  if (!key || (!dictionaryCheckbox.checked && !quotesCheckbox.checked)) {
    errorMessage.style.display = 'block';
    return;
  }
  const value = dictionaryCheckbox.checked ? words[key] : notes[key];
  if (!value) {
    errorMessage.style.display = 'block';
    return;
  }
  responseText.textContent = value;
  responseText.style.display = 'block';
});

Back to Home