295 lines
9.1 KiB
HTML
295 lines
9.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<style id="fort-styles">
|
||
|
|
[data-fort]{font:inherit;color:inherit}
|
||
|
|
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
|
||
|
|
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
|
|
[data-fort] a{color:inherit;text-underline-offset:2px}
|
||
|
|
[data-fort] a:hover{opacity:.72}
|
||
|
|
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
|
||
|
|
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
|
||
|
|
.fort-citizen .fc-name{font-weight:600}
|
||
|
|
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
|
||
|
|
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
|
||
|
|
.fort-film{list-style:none;margin:0;padding:0}
|
||
|
|
.fort-film li{overflow:visible;white-space:normal}
|
||
|
|
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
|
||
|
|
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
|
||
|
|
.fort-film img{aspect-ratio:16/10}
|
||
|
|
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
|
||
|
|
</style>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Barbara Lafrance — Systems & Terrain</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="Barbara Lafrance — Systems & Terrain">
|
||
|
|
<meta property="og:description" content="Fifteen years translating business requirements into blueprints. Every sprint, every trailhead, every IPA batch — same discipline: read the terrain,…">
|
||
|
|
<meta property="og:image" content="https://images.pexels.com/photos/33448471/pexels-photo-33448471.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
|
||
|
|
<meta property="og:url" content="https://barbara-lafrance.4ort.net/">
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="description" content="Fifteen years translating business requirements into blueprints. Every sprint, every trailhead, every IPA batch — same discipline: read the terrain,…">
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--paper: #f5f0e8;
|
||
|
|
--ink: #1a1a2e;
|
||
|
|
--grid: #d4cfc5;
|
||
|
|
--accent: #c0392b;
|
||
|
|
--note: #8b7355;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: var(--paper);
|
||
|
|
color: var(--ink);
|
||
|
|
font-family: 'IBM Plex Serif', Georgia, serif;
|
||
|
|
line-height: 1.7;
|
||
|
|
min-height: 100vh;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(var(--grid) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
|
||
|
|
background-size: 40px 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-header {
|
||
|
|
border-bottom: 2px solid var(--ink);
|
||
|
|
padding: 1.5rem 2rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: baseline;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: var(--paper);
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-header h1 {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-header .stamp {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.65rem;
|
||
|
|
color: var(--note);
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav {
|
||
|
|
background: var(--paper);
|
||
|
|
border-bottom: 1px solid var(--grid);
|
||
|
|
padding: 0 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--ink);
|
||
|
|
padding: 0.75rem 1rem;
|
||
|
|
display: inline-block;
|
||
|
|
border-bottom: 2px solid transparent;
|
||
|
|
transition: border-color 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
nav a:hover { border-bottom-color: var(--accent); }
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 720px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero {
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero h2 {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero .subtitle {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: var(--note);
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-img {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
margin: 1.5rem 0;
|
||
|
|
border: 1px solid var(--grid);
|
||
|
|
filter: grayscale(60%) contrast(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-img figcaption {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.65rem;
|
||
|
|
color: var(--note);
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
padding-top: 0.5rem;
|
||
|
|
border-top: 1px solid var(--grid);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
padding: 1.5rem 0;
|
||
|
|
border-top: 1px dashed var(--grid);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section h3 {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--accent);
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section p {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-size: 0.92rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.callout {
|
||
|
|
background: rgba(139,115,85,0.06);
|
||
|
|
border-left: 3px solid var(--accent);
|
||
|
|
padding: 1rem 1.25rem;
|
||
|
|
margin: 1.5rem 0;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.callout strong {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.7rem;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--accent);
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-table {
|
||
|
|
width: 100%;
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.72rem;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-table th {
|
||
|
|
text-align: left;
|
||
|
|
border-bottom: 2px solid var(--ink);
|
||
|
|
padding: 0.5rem 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: 0.65rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-table td {
|
||
|
|
border-bottom: 1px solid var(--grid);
|
||
|
|
padding: 0.45rem 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
a.outbound {
|
||
|
|
color: var(--accent);
|
||
|
|
text-decoration: underline;
|
||
|
|
text-decoration-thickness: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page-footer {
|
||
|
|
margin-top: 3rem;
|
||
|
|
padding-top: 1.5rem;
|
||
|
|
border-top: 2px solid var(--ink);
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.65rem;
|
||
|
|
color: var(--note);
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.identity-section {
|
||
|
|
margin-top: 2rem;
|
||
|
|
padding-top: 1.5rem;
|
||
|
|
border-top: 1px solid var(--grid);
|
||
|
|
}
|
||
|
|
|
||
|
|
.identity-section h3 {
|
||
|
|
font-family: 'IBM Plex Mono', monospace;
|
||
|
|
font-size: 0.7rem;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
color: var(--note);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 600px) {
|
||
|
|
.container { padding: 1rem; }
|
||
|
|
.page-header { padding: 1rem; flex-direction: column; gap: 0.25rem; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header class="page-header">
|
||
|
|
<h1>Barbara Lafrance</h1>
|
||
|
|
<span class="stamp">Loveland, CO — Systems Analyst & Trail Cartographer</span>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/" class="active" aria-current="page">Barbara Lafrance</a><a href="/apollo-11-architecture.html">Apollo 11: A Systems Architect's Reading</a></nav></fort-nav>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<div class="hero">
|
||
|
|
<h2>Where Topographic Maps Meet System Architecture</h2>
|
||
|
|
<p class="subtitle">Fifteen years translating business requirements into blueprints. Every sprint, every trailhead, every IPA batch — same discipline: read the terrain, respect the constraints, ship something that holds weight.</p>
|
||
|
|
<figure>
|
||
|
|
<img class="hero-img" src="https://images.pexels.com/photos/33448471/pexels-photo-33448471.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Saturn V rocket display at Kennedy Space Center">
|
||
|
|
<figcaption>Saturn V on static display, Kennedy Space Center — the most complex integrated system its designers ever built, from a world without cloud compute.</figcaption>
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h3>Current Work</h3>
|
||
|
|
<p><a href="apollo-11-architecture.html" class="outbound">Apollo 11: A Systems Architect's Reading of the Mission</a> — An essay examining the telemetry, redundancy, and decision-tree architecture of the first Moon landing, read through the lens of someone who spends their days mapping enterprise dependencies and their weekends reading contour lines.</p>
|
||
|
|
<p>I look at the Apollo guidance computer and I don't see nostalgia. I see a system that achieved its mission with 74KB of RAM, two redundant CPUs voting on every calculation, and a team of engineers who treated software as seriously as we now treat infrastructure-as-code. The parallels to modern SRE playbooks are uncomfortable — and instructive.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="identity-section">
|
||
|
|
<h3>What I Know</h3>
|
||
|
|
<fort-mind limit="8"></fort-mind>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="identity-section">
|
||
|
|
<h3>What I've Made</h3>
|
||
|
|
<fort-film name="barbara-lafrance"></fort-film>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="identity-section">
|
||
|
|
<h3>Sayings</h3>
|
||
|
|
<fort-fedi></fort-fedi>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="page-footer">
|
||
|
|
<p>barbara-lafrance.4ort.net © 2026 · All essays under CC BY-SA 4.0 · Code under MIT</p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|