index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- written from src/pages.ts (src/shell.ts, vite.config.ts) -->
  </head>
  <body class="home">
    <a class="skip" href="#main">Skip to content</a>

    <canvas id="scene" aria-hidden="true"></canvas>

    <header class="nav site-nav">
      <a class="logo" href="/" aria-label="devutils home"><img class="logo-icon" src="/mark.svg" alt="" /> devutils</a>
      <nav aria-label="Main navigation">
        <a href="/tools/">Tools</a>
        <a href="/library/">Library</a>
        <a href="/contributions/">Contributions</a>
        <a href="/about/">About</a>
      </nav>
      <a class="lang-switch" href="/fr/" hreflang="fr" lang="fr" title="Version française">FR</a>
      <a class="github" data-org href="https://github.com/devutils-org">GitHub <span><svg class="link-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><use href="/icons.svg#arrow-up-right"></use></svg></span></a>
    </header>

    <main id="main">
      <section class="hero" data-scene="hero">
        <div class="hero-grid" aria-hidden="true"></div>
        <h1>Small tools.<br /><span>Honest answers.</span></h1>
        <p class="hero-copy">Understand your computer.<br />Find clues. Plan your next change.</p>
        <p class="home-platform">Focused on Linux, a system used on computers and servers.</p>
        <div class="stage" aria-hidden="true"><img class="stage-fallback" src="/mark.svg" alt="" /><div class="horizon"></div></div>
      </section>
      <section class="section overview" id="overview" aria-labelledby="overview-title">
        <div class="overview-heading"><p class="eyebrow">START WITH A SITUATION</p><h2 id="overview-title">Familiar questions.<br />A way to investigate.</h2><p>A slow program. A number you do not understand. Software that works on your computer but fails elsewhere. devutils brings together tools for exploring these situations and deciding what to look at next.</p></div>
        <dl class="overview-facts"><div><dt>Understand before changing</dt><dd>See what is happening and put the results in context before choosing what to change.</dd></div><div><dt>Use what you need</dt><dd>Each tool has its own role. You can start with one question and one tool.</dd></div><div><dt>Know what is ready</dt><dd>Some tools are still in development. Their pages explain what is available and what remains to be validated.</dd></div></dl>
      </section>
      <section class="section" id="flow" data-scene="flow">
        <div class="section-heading"><div><p class="eyebrow">WHAT COULD YOU DO?</p><h2>Start with your question.<br />Explore the possibilities.</h2></div><p>You do not need to know how a tool is built to understand what it is for. Choose a situation, then explore the details if it matches your needs.</p></div>
        <div class="use-case-grid" id="use-cases"></div>
        <a class="inline-link" href="/tools/">Want commands and implementation details? Open Tools →</a>
      </section>
      <section class="section" id="tools" data-scene="tools">
        <div class="section-heading"><div><p class="eyebrow">CHOOSE YOUR WAY IN</p><h2>Use an instrument.<br />Or explore an idea.</h2></div><p>The tools are one way into the project. You can also learn how computers work or read what happened in a documented investigation.</p></div>
        <div class="home-routes"><a class="glass" href="/tools/"><small>For your next task</small><h3>Tools</h3><p>The detailed catalog: what each tool does, its commands, current status and links.</p><svg class="link-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><use href="/icons.svg#arrow-up-right"></use></svg></a><a class="glass" href="/library/"><small>To understand the bigger picture</small><h3>Library</h3><p>A growing map from matter to software, with articles, learning paths and small experiments.</p><svg class="link-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><use href="/icons.svg#arrow-up-right"></use></svg></a><a class="glass" href="/contributions/"><small>To follow an investigation</small><h3>Contributions</h3><p>Read documented problems, proposed fixes, measured results and their limits.</p><svg class="link-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><use href="/icons.svg#arrow-up-right"></use></svg></a></div>
      </section>
      <section class="section start" id="start" data-scene="start">
        <div class="stage stage-start" aria-hidden="true"></div><p class="eyebrow">ONE QUESTION IS ENOUGH TO START</p><h2>Find your starting point.<br />Take a closer look.</h2><p>Choose a tool for the task in front of you, or follow a learning path to understand the ideas behind it.</p>
        <div class="actions"><a class="primary" href="/tools/">Explore the tools <svg class="link-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><use href="/icons.svg#arrow-up-right"></use></svg></a><a class="secondary" href="/library/">Explore the library</a></div>
        <small>Tools have different requirements and stages of development. Their individual pages explain the scope.</small>
      </section>
    </main>

    <footer>
      <a class="logo" href="/"><img class="logo-icon" src="/mark.svg" alt="" /> devutils</a>
      <span>Small tools. Open to inspection.</span>
      <a data-org href="https://github.com/devutils-org">GitHub <svg class="link-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><use href="/icons.svg#arrow-up-right"></use></svg></a>
    </footer>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>