<!DOCTYPE html>
<!-- saved from url=(0050)file:///C:/Users/mperi/Downloads/index-dark_1.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Michael Periu</title>
    <meta name="description" content="Michael Periu — Georgetown-educated finance professional based in Miami, Florida.">
    <meta name="author" content="Michael Periu">
    <link rel="canonical" href="https://www.periu.com/">
    <meta property="og:title" content="Michael Periu">
    <meta property="og:description" content="Michael Periu — Georgetown-educated finance professional based in Miami, Florida.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.periu.com/">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Michael Periu">
    <meta name="twitter:description" content="Michael Periu — Georgetown-educated finance professional based in Miami, Florida.">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Michael Periu",
        "url": "https://www.periu.com",
        "alumniOf": { "@type": "CollegeOrUniversity", "name": "Georgetown University" }
    }
    </script>

    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
    <link href="./Michael Periu_files/css2" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg: #111111;
            --ink: #e0ddd8;
            --muted: #9a9590;
            --faint: #3d3a36;
            --rule: #e0ddd8;
            --error: #c0392b;
        }

        html { font-size: 16px; -webkit-font-smoothing: antialiased; }

        body {
            background: var(--bg);
            color: var(--ink);
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 300;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .container {
            max-width: 520px;
            width: 100%;
            text-align: left;
        }

        .name {
            font-family: 'Libre Baskerville', serif;
            font-weight: 400;
            font-size: clamp(2rem, 5vw, 2.8rem);
            letter-spacing: -0.01em;
            color: var(--ink);
            line-height: 1.2;
            opacity: 0;
            animation: fadeIn 0.8s ease-out 0.2s forwards;
        }

        .rule {
            width: 100%;
            height: 1px;
            background: var(--rule);
            margin: 1.4rem 0;
            opacity: 0;
            animation: fadeIn 0.8s ease-out 0.4s forwards;
        }

        .contact-toggle {
            display: flex;
            justify-content: flex-end;
            opacity: 0;
            animation: fadeIn 0.8s ease-out 0.6s forwards;
        }

        .contact-toggle button {
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 300;
            font-size: 0.75rem;
            letter-spacing: 0.04em;
            color: var(--muted);
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.3s ease;
            padding: 0;
        }

        .contact-toggle button:hover { color: var(--ink); }

        .contact-form {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.5s ease;
            margin-top: 0;
        }

        .contact-form.open {
            max-height: 400px;
            opacity: 1;
            margin-top: 1.6rem;
        }

        .form-row {
            margin-bottom: 1rem;
        }

        .form-row label {
            display: block;
            font-size: 0.65rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 0.4rem;
        }

        .form-row input,
        .form-row textarea {
            width: 100%;
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 300;
            font-size: 0.8rem;
            color: var(--ink);
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--faint);
            padding: 0.5rem 0;
            outline: none;
            transition: border-color 0.3s ease;
            resize: none;
        }

        .form-row input:focus,
        .form-row textarea:focus {
            border-color: var(--ink);
        }

        .form-row textarea {
            min-height: 80px;
            line-height: 1.5;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
        }

        .form-actions button {
            font-family: 'IBM Plex Mono', monospace;
            font-weight: 400;
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink);
            background: none;
            border: 1px solid var(--ink);
            padding: 0.55rem 1.4rem;
            cursor: pointer;
            transition: background 0.3s ease, color 0.3s ease;
        }

        .form-actions button:hover {
            background: var(--ink);
            color: var(--bg);
        }

        .form-actions button:disabled {
            opacity: 0.3;
            cursor: default;
        }

        .form-status {
            font-size: 0.7rem;
            letter-spacing: 0.04em;
            margin-top: 1rem;
            text-align: right;
        }

        .form-status.success { color: var(--muted); }
        .form-status.error { color: var(--error); }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @media (max-width: 480px) {
            .container { padding: 0 0.5rem; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="name">Michael Periu</h1>
        <div class="rule"></div>
        <div class="contact-toggle">
            <button id="toggleBtn" onclick="toggleForm()">Get in touch</button>
        </div>

        <!-- Replace YOUR_FORM_ID with your Formspree form ID -->
        <div class="contact-form" id="contactForm">
            <form id="form" action="https://formspree.io/f/mlgpevla" method="POST">
                <div class="form-row">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required="" autocomplete="name">
                </div>
                <div class="form-row">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required="" autocomplete="email">
                </div>
                <div class="form-row">
                    <label for="message">Message</label>
                    <textarea id="message" name="message" required=""></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" id="submitBtn">Send</button>
                </div>
                <div class="form-status" id="formStatus"></div>
            </form>
        </div>
    </div>

    <script>
        function toggleForm() {
            const form = document.getElementById('contactForm');
            const btn = document.getElementById('toggleBtn');
            const isOpen = form.classList.contains('open');
            if (isOpen) {
                form.classList.remove('open');
                btn.textContent = 'Get in touch';
            } else {
                form.classList.add('open');
                btn.textContent = 'Close';
            }
        }

        const form = document.getElementById('form');
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            const btn = document.getElementById('submitBtn');
            const status = document.getElementById('formStatus');
            btn.disabled = true;
            btn.textContent = 'Sending...';
            status.textContent = '';
            status.className = 'form-status';
            try {
                const resp = await fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: { 'Accept': 'application/json' }
                });
                if (resp.ok) {
                    status.textContent = 'Message sent. Thank you.';
                    status.classList.add('success');
                    form.reset();
                    btn.textContent = 'Send';
                    btn.disabled = false;
                } else { throw new Error(); }
            } catch (err) {
                status.textContent = 'Something went wrong. Please try again.';
                status.classList.add('error');
                btn.textContent = 'Send';
                btn.disabled = false;
            }
        });
    </script>


</body></html>