index.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Fernando Lizana · Observatorio</title>
    <meta name="description" content="Construyo software. Automatizo su calidad. Ingeniería, QA automation y sistemas con IA.">
    <meta name="author" content="Fernando Lizana">
    <meta name="theme-color" content="#04050b">
    <meta property="og:title" content="Fernando Lizana · Observatorio">
    <meta property="og:description" content="Construyo software. Automatizo su calidad.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="./banner.png">
    <link rel="icon" href="./favicon.svg" type="image/svg+xml">
    <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=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./src/style.css">
  </head>
  <body>
    <a class="skip" href="#observatorio">Ir a los proyectos</a>
    <header class="nav">
      <a class="brand" href="#inicio"><span class="brand-mark" aria-hidden="true"></span>Fernando Lizana</a>
      <nav aria-label="Secciones">
        <a href="#destacados">Proyectos</a>
        <a href="#areas">Oficio</a>
        <a href="#sobre">Sobre mí</a>
        <a class="nav-cta" href="https://github.com/FernandoLizana" target="_blank" rel="noopener noreferrer">GitHub <span aria-hidden="true">↗</span></a>
      </nav>
    </header>

    <main>
      <section class="hero" id="inicio">
        <div class="hero-copy">
          <p class="kicker hero-kicker"><span class="pulse" aria-hidden="true"></span><span id="hero-count">Proyectos en órbita</span></p>
          <h1>
            <span class="line"><span class="word" style="--i:0">Construyo</span> <span class="word" style="--i:1">software.</span></span>
            <span class="line glow"><span class="word" style="--i:2">Automatizo</span> <span class="word" style="--i:3">su</span> <span class="word" style="--i:4">calidad.</span></span>
          </h1>
          <p class="lede">Ingeniería, QA automation y sistemas con IA. Cada estrella de esta galaxia es un repositorio público: gíralo, búscalo y abre su ficha.</p>
          <div class="hero-actions">
            <a class="btn btn-primary" href="#destacados">Ver proyectos <span aria-hidden="true">→</span></a>
            <a class="btn btn-ghost" href="https://github.com/FernandoLizana" target="_blank" rel="noopener noreferrer">GitHub <span aria-hidden="true">↗</span></a>
          </div>
        </div>
        <div class="stage" id="observatorio">
          <div class="stage-frame">
          <canvas id="galaxy" aria-hidden="true"></canvas>
          <div class="stage-veil" aria-hidden="true"></div>
          <div id="star-labels" class="star-labels"></div>
          <p id="hover-label" class="hover-label" role="tooltip" hidden></p>
          <p id="empty" class="empty" hidden></p>

          <section id="lista" class="list-view" hidden aria-labelledby="list-title">
            <h2 id="list-title" tabindex="-1">Lista de proyectos</h2>
            <p class="list-lead">Los mismos repositorios públicos, sin depender de WebGL.</p>
            <p id="fallback-note" class="fallback" hidden></p>
            <div id="list-items"></div>
          </section>
          </div>

          <div class="dock">
            <div class="search">
              <label class="sr" for="q">Buscar por nombre, descripción o topics</label>
              <input id="q" type="search" placeholder="Buscar en la galaxia…" autocomplete="off" enterkeyhint="search" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="search-results">
              <ul id="search-results" role="listbox" hidden></ul>
            </div>
            <div class="dock-tools">
              <div class="segmented" role="group" aria-label="Vista">
                <button type="button" id="view-galaxy" aria-pressed="true">Galaxia</button>
                <button type="button" id="view-toggle" aria-pressed="false">Lista</button>
              </div>
              <details class="pop" id="filters">
                <summary>Filtros</summary>
                <div class="pop-body">
                  <fieldset>
                    <legend>Lenguaje</legend>
                    <div id="language-filters"></div>
                  </fieldset>
                  <label>
                    Tipo
                    <select id="fork-filter">
                      <option value="all">Todos</option>
                      <option value="only">Solo bifurcaciones</option>
                      <option value="hide">Ocultar bifurcaciones</option>
                    </select>
                  </label>
                  <label>
                    Estado
                    <select id="archived-filter">
                      <option value="all">Todos</option>
                      <option value="only">Solo archivados</option>
                      <option value="hide">Ocultar archivados</option>
                    </select>
                  </label>
                </div>
              </details>
              <details class="pop" id="help">
                <summary>Ayuda</summary>
                <div class="pop-body help-body">
                  <div id="legend-body"></div>
                  <p>Arrastra para girar. En un teléfono, pellizca para acercar. La rueda del mouse sigue desplazando la página.</p>
                  <p>El color es el lenguaje principal. Una línea une repositorios con el mismo lenguaje: es una agrupación, no una dependencia.</p>
                  <p>Al elegir un proyecto, la cámara viaja hasta esa estrella. El tamaño es proporcional a la cantidad de archivos del repositorio.</p>
                  <p>El disco dorado, naranja y azul es el cielo, no una lista de repositorios. Solo las estrellas con nombre son proyectos. Un anillo marca una bifurcación; menos brillo, un repositorio archivado.</p>
                  <p id="coverage"></p>
                </div>
              </details>
              <button type="button" id="motion" aria-pressed="true">Pausar</button>
              <button type="button" id="reset-view">Restablecer vista</button>
              <p id="count" aria-live="polite">Cargando el catálogo…</p>
            </div>
          </div>
        </div>

        <a class="scroll-cue" href="#cifras" aria-label="Bajar a las cifras"><span></span></a>
      </section>

      <section class="stats" id="cifras" aria-label="Cifras">
        <div class="stat reveal"><strong data-stat="repos">0</strong><span>proyectos públicos</span></div>
        <div class="stat reveal"><strong data-stat="files">0</strong><span>archivos versionados</span></div>
        <div class="stat reveal"><strong data-stat="languages">0</strong><span>lenguajes principales</span></div>
        <div class="stat reveal"><strong data-stat="topics">0</strong><span>temas distintos</span></div>
      </section>

      <div class="marquee" aria-hidden="true"><div class="marquee-track" id="marquee"></div></div>

      <section class="band" id="destacados">
        <div class="band-head reveal">
          <p class="kicker">Selección</p>
          <h2>Proyectos <em>destacados</em></h2>
          <p>Herramientas locales, laboratorios de investigación y aplicaciones. Cada ficha dice qué hace, con qué está hecho y qué no promete.</p>
        </div>
        <div id="featured-grid" class="featured-grid"></div>
      </section>

      <section class="band" id="areas" aria-labelledby="areas-title">
        <div class="band-head reveal">
          <p class="kicker">Oficio</p>
          <h2 id="areas-title">Áreas de <em>trabajo</em></h2>
        </div>
        <div class="area-grid">
          <article class="reveal">
            <span class="area-num">01</span>
            <h3>QA y automatización</h3>
            <p>Diseño comprobaciones y herramientas que muestran qué van a hacer antes de actuar. safe-disk-cleaner clasifica destinos regenerables y, por defecto, solo simula el borrado.</p>
          </article>
          <article class="reveal">
            <span class="area-num">02</span>
            <h3>Monitoreo y confiabilidad</h3>
            <p>radio-dual-monitor escucha la salida de un transmisor de radio y guarda el envío y la recepción por separado, para revisar el intercambio completo.</p>
          </article>
          <article class="reveal">
            <span class="area-num">03</span>
            <h3>Aplicaciones e IA</h3>
            <p>Impulso es una aplicación Android de frases en español, sin cuenta y sin conexión. navier-stokes-ai-lab reúne experimentos numéricos con ayuda de IA y no afirma una solución del problema del milenio.</p>
          </article>
        </div>
      </section>

      <section class="band about" id="sobre">
        <div class="reveal">
          <p class="kicker">Sobre mí</p>
          <blockquote class="statement">Me interesa que una herramienta <em>explique qué va a hacer</em> y que se pueda <em>comprobar</em>.</blockquote>
          <p>Soy Fernando Lizana, ingeniero en telecomunicaciones. Trabajo en QA y automatización, en monitoreo y en sistemas con inteligencia artificial.</p>
        </div>
        <div class="contact reveal" id="contacto">
          <h3>Contacto</h3>
          <p>El código, los avances y las conversaciones viven en GitHub.</p>
          <ul>
            <li><a class="btn btn-primary btn-big" href="https://github.com/FernandoLizana" target="_blank" rel="noopener noreferrer">GitHub <span aria-hidden="true">↗</span></a></li>
          </ul>
        </div>
      </section>

      <footer class="colophon">
        <p class="colophon-name">Fernando Lizana</p>
        <p id="sync">Sincronización pendiente.</p>
      </footer>
    </main>

    <aside id="detail" class="detail" hidden role="dialog" aria-modal="true" aria-labelledby="detail-title">
      <div class="detail-bar">
        <p id="detail-kicker" class="kicker"></p>
        <button type="button" id="detail-close">Cerrar</button>
      </div>
      <h2 id="detail-title"></h2>
      <p id="detail-flags" class="flags" hidden></p>
      <figure id="detail-figure" hidden>
        <img id="detail-image" alt="">
      </figure>
      <p id="detail-description"></p>
      <section id="detail-does" hidden>
        <h3>Qué hace</h3>
        <p id="detail-does-text"></p>
        <ul id="detail-points"></ul>
      </section>
      <section id="detail-built" hidden>
        <h3>Cómo está construido</h3>
        <p id="detail-stack"></p>
      </section>
      <dl id="detail-meta"></dl>
      <div id="detail-topics"></div>
      <p id="detail-updated" class="quiet"></p>
      <p id="detail-role" class="quiet" hidden></p>
      <div class="detail-actions">
        <a id="detail-repo" target="_blank" rel="noopener noreferrer">Ver repositorio</a>
        <a id="detail-home" target="_blank" rel="noopener noreferrer" hidden>Visitar proyecto</a>
      </div>
    </aside>

    <noscript>
      <p class="noscript">Para explorar los proyectos hace falta JavaScript. El catálogo se publica con el sitio y no consulta GitHub desde el navegador.</p>
    </noscript>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>