83 lines
2.3 KiB
Svelte
83 lines
2.3 KiB
Svelte
<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>
|