6e7d01234e
- Replace Three.js canvas with anime.js magic background layers (aurora, runes, orbs, sparkles, cursor glow) - Update script tags to anime.js v4 UMD via jsDelivr CDN - Add magic background CSS to style.css - Update main.js with 6-layer anime.js v4 background implementation - Update blog pages with same magic background - Removed Three.js dependency Co-Authored-By: Paperclip <noreply@paperclip.ing>
81 lines
3.7 KiB
HTML
81 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blog — Hatch</title>
|
|
<meta name="description" content="Blog posts about Hatch, a self-hostable HTTP request inspector and mocker.">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="Blog — Hatch">
|
|
<meta property="og:description" content="Blog posts about Hatch, a self-hostable HTTP request inspector and mocker.">
|
|
<meta property="og:image" content="https://hatch.surf/brand/og/default.png">
|
|
<meta property="og:url" content="https://hatch.surf/blog/">
|
|
<meta property="og:type" content="website">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Blog — Hatch">
|
|
<meta name="twitter:description" content="Blog posts about Hatch, a self-hostable HTTP request inspector and mocker.">
|
|
<meta name="twitter:image" content="https://hatch.surf/brand/og/default.png">
|
|
|
|
<link rel="canonical" href="https://hatch.surf/blog/">
|
|
<link rel="icon" type="image/png" href="/brand/favicon/favicon.png">
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Anime.js magical background layers -->
|
|
<div id="magic-bg" aria-hidden="true">
|
|
<div class="magic-aurora"></div>
|
|
<div class="magic-aurora magic-aurora--2"></div>
|
|
<div class="magic-aurora magic-aurora--3"></div>
|
|
<svg class="magic-runes" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
|
|
<circle class="rune rune-outer" cx="400" cy="400" r="350" />
|
|
<circle class="rune rune-mid" cx="400" cy="400" r="260" />
|
|
<circle class="rune rune-inner" cx="400" cy="400" r="170" />
|
|
<circle class="rune rune-core" cx="400" cy="400" r="80" />
|
|
</svg>
|
|
<div class="magic-orbs" id="magic-orbs"></div>
|
|
<svg class="magic-connections" id="magic-connections"></svg>
|
|
<div class="magic-sparkles" id="magic-sparkles"></div>
|
|
<div class="magic-cursor-glow" id="magic-cursor-glow"></div>
|
|
</div>
|
|
|
|
<header>
|
|
<div class="container">
|
|
<a href="/" class="logo">Hatch</a>
|
|
<nav>
|
|
<a href="https://github.com/elfoundation/hatch">GitHub</a>
|
|
<a href="/blog/">Blog</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="blog-index">
|
|
<div class="container">
|
|
<h1>Blog</h1>
|
|
|
|
<article class="post-preview">
|
|
<header>
|
|
<h2><a href="/blog/why-we-are-building-hatch/">Why we are building Hatch</a></h2>
|
|
<time datetime="2026-06-23">June 23, 2026</time>
|
|
</header>
|
|
<p>Every team that integrates with a third-party API ends up needing a webhook inspector. The hosted tools work fine. They also send your payloads to someone else's server, which is a non-starter for the compliance-, privacy-, and "we'd rather not" set.</p>
|
|
<a href="/blog/why-we-are-building-hatch/" class="read-more">Read more →</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2026 El Foundation. <a href="https://github.com/elfoundation/hatch">Hatch</a> is released under the <a href="https://github.com/elfoundation/hatch/blob/main/LICENSE">MIT License</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Anime.js v4 (UMD) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs@4/dist/bundles/anime.umd.min.js"></script>
|
|
<script src="/main.js" defer></script>
|
|
</body>
|
|
</html> |