<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<meta name="description" content="Code, science, and what holds up when the tools think back.">
<title>/devstate</title>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-TMR4LSW');</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400&display=swap" rel="stylesheet">
<style>
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  :root{--bg:#24283b;--bg-deep:#1d202f;--bg-raised:#292e42;--fg:#c0caf5;--fg-muted:#a9b1d6;--fg-dim:#545c7e;--blue:#7aa2f7;--cyan:#7dcfff;--teal:#73daca;--green:#9ece6a;--yellow:#e0af68;--orange:#ff9e64;--red:#f7768e;--magenta:#bb9af7;--selection:#2e3c64;--border:#414868;--font-mono:'JetBrains Mono','SF Mono','Fira Code',monospace;--font-body:'IBM Plex Sans',-apple-system,sans-serif;--space-xs:0.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2.5rem;--space-xl:4rem}
  html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  body{background:var(--bg-deep);color:var(--fg);font-family:var(--font-body);font-weight:400;line-height:1.7;min-height:100vh}
  .status-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-md);background:var(--bg-deep);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:0.75rem;color:var(--fg-dim);position:sticky;top:0;z-index:100}
  .status-left span{margin-right:var(--space-md)}
  .status-right a{color:var(--fg-dim);text-decoration:none;margin-left:var(--space-md);transition:color 0.2s}
  .status-right a:hover{color:var(--blue)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  :focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .subscribe-input:focus-visible{outline-offset:-2px}
  .status-indicator{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;animation:pulse-dot 3s ease-in-out infinite}
  @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.3}}
  .container{max-width:1080px;margin:0 auto;padding:0 var(--space-md)}
  .hero{padding:var(--space-xl) 0;border-bottom:1px solid var(--border)}
  .hero-prompt{font-family:var(--font-mono);font-size:0.8rem;color:var(--fg-dim);margin-bottom:var(--space-sm);letter-spacing:0.02em}
  .hero-prompt .path{color:var(--blue)}
  .hero-prompt .cursor{display:inline-block;width:8px;height:1.1em;background:var(--fg);margin-left:2px;vertical-align:text-bottom;animation:blink 1s step-end infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
  .hero h1.hero-tagline{font-family:var(--font-body);font-size:1.25rem;color:var(--fg-muted);max-width:560px;line-height:1.5;font-weight:300;letter-spacing:0}
  .hero-meta{margin-top:var(--space-lg);display:flex;gap:var(--space-lg);font-family:var(--font-mono);font-size:0.78rem;color:var(--fg-dim)}
  .hero-meta .label{color:var(--fg-dim)}
  .hero-meta .value{color:var(--fg-muted)}
  .sections-header{padding-top:var(--space-xl);padding-bottom:var(--space-md);font-family:var(--font-mono);font-size:0.75rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:0.12em}
  .sections-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:var(--space-xl)}
  .section-pane{background:var(--bg);position:relative}
  .section-link{display:block;padding:var(--space-lg) var(--space-md);text-decoration:none;color:inherit;transition:background 0.3s ease}
  a.section-link:hover{background:var(--bg-raised)}
  .section-pane::before{content:attr(data-index);position:absolute;top:var(--space-sm);right:var(--space-sm);font-family:var(--font-mono);font-size:0.65rem;color:var(--border);letter-spacing:0.05em}
  .section-name{font-family:var(--font-mono);font-size:0.95rem;font-weight:600;margin-bottom:var(--space-xs);letter-spacing:-0.01em}
  .section-pane:nth-child(1) .section-name{color:var(--blue)}
  .section-pane:nth-child(2) .section-name{color:var(--magenta)}
  .section-pane:nth-child(3) .section-name{color:var(--teal)}
  .section-pane:nth-child(4) .section-name{color:var(--yellow)}
  .section-dash{width:24px;height:1px;margin:var(--space-sm) 0}
  .section-pane:nth-child(1) .section-dash{background:var(--blue)}
  .section-pane:nth-child(2) .section-dash{background:var(--magenta)}
  .section-pane:nth-child(3) .section-dash{background:var(--teal)}
  .section-pane:nth-child(4) .section-dash{background:var(--yellow)}
  .section-desc{font-family:var(--font-body);font-size:0.88rem;color:var(--fg-muted);line-height:1.65;font-weight:300}
  .section-inactive{display:none}
  .recent-header{padding-bottom:var(--space-md);font-family:var(--font-mono);font-size:0.75rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:0.12em;border-bottom:1px solid var(--border)}
  .article-list{list-style:none}
  .article-item{border-bottom:1px solid var(--border)}
  .article-link{display:grid;grid-template-columns:1fr auto;gap:var(--space-md);align-items:start;padding:var(--space-md) var(--space-sm);margin:0 calc(-1 * var(--space-sm));text-decoration:none;color:inherit;transition:background 0.2s}
  .article-link:hover{background:var(--bg)}
  .article-section-tag{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.06em;margin-bottom:4px;text-transform:uppercase}
  .article-section-tag.build-log{color:var(--blue)}
  .article-section-tag.thinking{color:var(--magenta)}
  .article-section-tag.science{color:var(--teal)}
  .article-section-tag.field-notes{color:var(--yellow)}
  .article-title{font-family:var(--font-mono);font-size:1rem;font-weight:500;color:var(--fg);margin-bottom:4px;line-height:1.4;overflow-wrap:break-word}
  .article-excerpt{font-size:0.88rem;color:var(--fg-muted);line-height:1.55;font-weight:300;max-width:640px}
  .article-meta{font-family:var(--font-mono);font-size:0.72rem;color:var(--fg-dim);white-space:nowrap;padding-top:2px}
  .article-meta .read-time{color:var(--fg-dim)}
  .subscribe-section{margin:var(--space-xl) 0;padding:var(--space-lg) var(--space-md);border:1px solid var(--border);background:var(--bg)}
  .subscribe-prompt{font-family:var(--font-mono);font-size:0.85rem;color:var(--fg-muted);margin-bottom:var(--space-md)}
  .subscribe-prompt .cmd{color:var(--green)}
  .subscribe-form{display:flex;gap:1px;max-width:480px}
  .subscribe-input{flex:1;background:var(--bg-deep);border:1px solid var(--border);border-right:none;padding:0.7rem 1rem;font-family:var(--font-mono);font-size:0.82rem;color:var(--fg);transition:border-color 0.2s}
  .subscribe-input::placeholder{color:var(--fg-dim)}
  .subscribe-input:focus{border-color:var(--blue)}
  .subscribe-btn{background:var(--blue);color:var(--bg-deep);border:1px solid var(--blue);padding:0.7rem 1.4rem;font-family:var(--font-mono);font-size:0.82rem;font-weight:600;cursor:pointer;transition:background-color 0.2s,color 0.2s;white-space:nowrap}
  .subscribe-btn:hover{background:transparent;color:var(--blue)}
  footer{border-top:1px solid var(--border);padding:var(--space-md) 0;margin-top:var(--space-xl);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:0.72rem;color:var(--fg-dim);padding-bottom:var(--space-lg)}
  footer a{color:var(--fg-dim);text-decoration:none;transition:color 0.2s}
  footer a:hover{color:var(--blue)}
  .footer-links{display:flex;gap:var(--space-md)}
  @media(max-width:720px){.sections-grid{grid-template-columns:1fr}.article-link{grid-template-columns:1fr}.article-meta{padding-top:var(--space-xs)}.hero-meta{flex-direction:column;gap:var(--space-xs)}.subscribe-form{flex-direction:column}.subscribe-input{border-right:1px solid var(--border);border-bottom:none}.status-bar{font-size:0.68rem}.status-left span:last-child{display:none}footer{flex-direction:column;gap:var(--space-sm);text-align:center}}
  @media(prefers-reduced-motion:no-preference){.hero,.section-pane,.article-item,.subscribe-section{animation:fade-up 0.5s ease both}.hero{animation-delay:0.1s}.section-pane:nth-child(1){animation-delay:0.15s}.section-pane:nth-child(2){animation-delay:0.2s}.section-pane:nth-child(3){animation-delay:0.25s}.section-pane:nth-child(4){animation-delay:0.3s}.article-item:nth-child(1){animation-delay:0.35s}.article-item:nth-child(2){animation-delay:0.4s}.article-item:nth-child(3){animation-delay:0.45s}.subscribe-section{animation-delay:0.5s}@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
</style>
</head>
<body>
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TMR4LSW" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <nav class="status-bar" aria-label="Main navigation">
    <div class="status-left">
      <span><span class="status-indicator"></span>writing</span>
      <span>locke@devstate.de</span>
    </div>
    <div class="status-right">
      <a href="https://blog.devstate.de/archive">archive</a>
      <a href="https://blog.devstate.de/subscribe">subscribe</a>
    </div>
  </nav>
  <main class="container">
    <header class="hero">
      <div class="hero-prompt">
        <span class="path">~/devstate</span><span class="cursor"></span>
      </div>
      <h1 class="hero-tagline">Code, science, and what holds up when the tools think back.</h1>
      <div class="hero-meta">
        <div><span class="label">stack </span><span class="value">Rust, Python, TypeScript, Terraform</span></div>
        <div><span class="label">focus </span><span class="value">ML, Data Infrastructure, DevTools, DX</span></div>
      </div>
    </header>
    <h2 class="sections-header">sections</h2>
    <div class="sections-grid">
      <div class="section-pane" data-index="01">
        <a href="https://blog.devstate.de/s/build-log" class="section-link">
          <h3 class="section-name">Build Log</h3>
          <div class="section-dash"></div>
          <p class="section-desc">Projects from problem to shipped code. Architecture decisions, what broke, what actually worked. Technical &mdash; not tutorials.</p>
        </a>
      </div>
      <div class="section-pane section-inactive" data-index="02">
        <span class="section-link">
          <h3 class="section-name">Thinking Out Loud</h3>
          <div class="section-dash"></div>
          <p class="section-desc">Engineering opinions with reasoning attached. Tool choices, workflow philosophy, when to build vs. when to use what exists. The arguments behind the commits.</p>
        </span>
      </div>
      <div class="section-pane section-inactive" data-index="03">
        <span class="section-link">
          <h3 class="section-name">Science &amp; Systems</h3>
          <div class="section-dash"></div>
          <p class="section-desc">Computation meets the physical world. Patterns that cross domains &mdash; algorithms from physics, data structures that mirror biological systems, math underneath engineering.</p>
        </span>
      </div>
      <div class="section-pane section-inactive" data-index="04">
        <span class="section-link">
          <h3 class="section-name">Field Notes</h3>
          <div class="section-dash"></div>
          <p class="section-desc">Short. A bug &rarr; a wrong assumption exposed. A flag that changed a workflow. A paper that reframed a problem. Dispatches before the insight gets cleaned up.</p>
        </span>
      </div>
    </div>
    <h2 class="recent-header">recent</h2>
    <div style="padding:var(--space-lg) 0;color:var(--fg-muted);font-family:var(--font-mono);font-size:0.85rem;">
      <span style="color:var(--yellow);">$</span> ls ./posts<br>
      <span style="color:var(--fg-dim);">first post brewing &mdash; check back soon</span>
    </div>
    <div class="subscribe-section">
      <div class="subscribe-prompt">
        <span class="cmd">$</span> subscribe --format=email
      </div>
      <form class="subscribe-form" action="https://blog.devstate.de/subscribe" method="get">
        <label for="subscribe-email" class="sr-only">Email address</label>
        <input type="email" id="subscribe-email" name="email" class="subscribe-input" placeholder="email@address" autocomplete="email">
        <button type="submit" class="subscribe-btn">subscribe</button>
      </form>
    </div>
    <footer>
      <span>&copy; 2026 Locke</span>
      <div class="footer-links">
        <a href="https://github.com/LockeAG">GitHub</a>
        <a href="https://linkedin.com/in/galvezg">LinkedIn</a>
        <a href="https://x.com/LockeAG">X</a>
      </div>
    </footer>
  </main>
</body>
</html>