------<section id="top" class="hero"> <div class="shell hero-grid"> <div class="hero-text"> <p class="eyebrow" data-reveal>Systems · Interfaces · Creative</p> <h1 class="display" data-reveal>Louiml</h1> <p class="tagline" data-reveal> I build tools that don't fall over under load, and the frontends people enjoy using. </p> <p class="lede" data-reveal> Most of my time is in Rust and TypeScript, with Tauri where the two meet. Right now I'm shipping Ryuzaki, an OSINT and recon tool built for people who take the work seriously, whether they're starting out or have been at it for years. </p> <div class="actions" data-reveal> <a class="btn btn-primary" href="#project"> See Ryuzaki <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg> </a> <a class="btn" href="#about">What I work on</a> </div> </div> <aside class="hero-card glass" data-reveal aria-hidden="true"> <div class="scope"> <div class="ring r1"></div> <div class="ring r2"></div> <div class="ring r3"></div> <div class="sweep"></div> <div class="blip"></div> </div> <div class="hero-card-meta"> <span class="hero-card-label">Now</span> <span class="hero-card-value">Building Ryuzaki</span> <span class="hero-card-sub">OSINT · Recon</span> </div> </aside> </div> <div class="ambient" aria-hidden="true"></div></section><style> .hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 64px); padding-bottom: 64px; overflow: hidden; } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-card { display: none; } } .eyebrow { margin-bottom: 22px; } .display { margin: 0 0 22px; } .tagline { font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.3; letter-spacing: -0.018em; font-weight: 500; color: var(--text); margin-bottom: 20px; max-width: 22ch; } .lede { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); max-width: 52ch; } .actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; } /* Decorative scope card. On-theme nod to recon work, clearly abstract. */ .hero-card { position: relative; aspect-ratio: 1 / 1.05; border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 55%), var(--bg-raise); } .scope { position: absolute; top: 28px; left: 28px; right: 28px; aspect-ratio: 1; border-radius: 50%; } .ring { position: absolute; inset: 0; margin: auto; border: 1px solid var(--stroke-bright); border-radius: 50%; } .r1 { width: 100%; height: 100%; } .r2 { width: 66%; height: 66%; border-color: var(--stroke); } .r3 { width: 33%; height: 33%; border-color: var(--stroke); } .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 220deg, transparent 0deg, var(--accent-soft) 50deg, transparent 60deg); animation: spin 6s linear infinite; } .blip { position: absolute; top: 22%; left: 64%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); } @keyframes spin { to { transform: rotate(360deg); } } .hero-card-meta { position: relative; display: flex; flex-direction: column; gap: 2px; } .hero-card-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } .hero-card-value { font-weight: 600; letter-spacing: -0.01em; } .hero-card-sub { font-size: 0.9rem; color: var(--text-3); } .ambient { position: absolute; inset: auto 0 -25% 0; height: 65%; background: radial-gradient(55% 50% at 72% 85%, var(--accent-soft), transparent 70%); filter: blur(44px); pointer-events: none; z-index: 1; } @media (prefers-reduced-motion: reduce) { .sweep { animation: none; } }</style>