The Svelte 5 SSG migration—we brought sexy back... or to it? Or something...

2026-01-30 23:29:39 -03:00
parent 0011f612da
commit bc32528551
93 changed files with 6409 additions and 3231 deletions
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import Logo from './Logo.svelte';
+</script>
+
+<header id="header" class="hero">
+    <div class="container">
+        <Logo />
+        <p class="headline">Software Engineering Consulting</p>
+        <p class="subhead">
+            Principal: Mike Fitzpatrick — senior full-stack engineer and architect helping
+            teams ship reliable, accessible, high-performance web products.
+        </p>
+        <div class="cta-group">
+            <a
+                href="https://cal.mifi.ventures/the-mifi"
+                class="btn btn-primary"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Schedule a 30-minute intro call (opens in new tab)"
+            >
+                Schedule a 30-minute intro call
+            </a>
+            <a
+                href="/downloads/resume.pdf"
+                class="btn btn-secondary"
+                download
+                aria-label="Download Mike Fitzpatrick's resume as PDF"
+            >
+                Download resume
+            </a>
+        </div>
+    </div>
+</header>
+
+<style>
+    .hero {
+        padding: var(--space-xxxl) 0 var(--space-xxl) 0;
+        text-align: center;
+        background-color: var(--color-bg);
+        border-bottom: 1px solid var(--color-border);
+
+        @media (max-width: 768px) {
+            padding: var(--space-xxl) 0 var(--space-xl) 0;
+        }
+
+        @media (max-width: 480px) {
+            padding: var(--space-xl) 0 var(--space-lg) 0;
+        }
+    }
+
+    .headline {
+        margin-bottom: var(--space-lg);
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xl);
+        font-weight: var(--font-weight-semibold);
+        color: var(--color-text);
+        letter-spacing: -0.02em;
+    }
+
+    .subhead {
+        max-width: var(--max-narrow-width);
+        margin: 0 auto var(--space-xl) auto;
+        font-size: var(--font-size-large);
+        font-weight: var(--font-weight-normal);
+        color: var(--color-text-secondary);
+        line-height: var(--line-height-relaxed);
+    }
+
+    .cta-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-md);
+        justify-content: center;
+        align-items: center;
+        margin-top: var(--space-lg);
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+</style>