spb/svgarden Public

1---2/**3 * ============================================================4 * SVGarden — https://www.svgarden.dev5 * Author : Simon-Pierre Boucher6 * Contact: contact@spboucher.ai7 * File   : src/pages/about.astro8 * Desc   : About page — what SVGarden is and how to use the snippets9 * ============================================================10 */11import Base from '../layouts/Base.astro';12import { loadSnippets, loadCategories } from '../lib/snippets.mjs';1314const snippets = await loadSnippets();15const categories = await loadCategories();16---1718<Base title="About — SVGarden" description="What SVGarden is, how the snippets work, and how to use them in your own projects.">19  <article class="sg-about">20    <h1>About SVGarden</h1>21    <p>22      SVGarden is a growing bank of <strong>{snippets.length} SVG + CSS animations</strong> across23      {categories.length} categories — loaders, stroke drawing, hover effects, gauges, animated text,24      shape morphs and backgrounds. It is built and maintained by25      <a href="mailto:contact@spboucher.ai">Simon-Pierre Boucher</a>.26    </p>2728    <h2>The rules every snippet follows</h2>29    <ul>30      <li><strong>Self-contained</strong> — paste any snippet into a blank <code>.html</code> file and it works. No frameworks, no CDNs, no fonts, no build step.</li>31      <li><strong>Scoped</strong> — every class is prefixed <code>sg-</code>, so multiple snippets coexist on one page without collisions.</li>32      <li><strong>Customizable</strong> — colors, sizes and speeds are CSS custom properties (<code>--sg-*</code>) on the root element. The customizer on each page rewrites them live.</li>33      <li><strong>Pedagogical</strong> — each snippet ships with a short “How it works” explaining the technique, not just the code.</li>34      <li><strong>Accessible</strong> — decorative SVGs are <code>aria-hidden</code>; meaningful ones get <code>role="img"</code> and a <code>&lt;title&gt;</code>.</li>35    </ul>3637    <h2>How to use a snippet</h2>38    <p>39      Open any snippet, tweak it with the customizer, then <em>Copy code</em> (or <em>Download .html</em>).40      The attribution header travels with the code — you're free to use the snippets in your projects;41      keeping the header is appreciated.42    </p>4344    <h2>Colophon</h2>45    <p>46      Built with Astro, highlighted at build time with Shiki, searched client-side with a lazy-loaded47      Fuse.js. The site itself is styled with the same vanilla CSS techniques the snippets teach —48      no CSS frameworks anywhere.49    </p>50  </article>51</Base>52