skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
fe66a5a7a0ec8b96bc2a2eb28484181d7047ce15
pbakaus_impeccable/public/index.html
T
Paul BakausandClaude Opus 4.5 fe66a5a7a0 Add support and consulting sections to website 
- Add "Support the Project" section with Stripe payment tiers ($20, $100, $10k)
- Add custom amount donation option
- Add "Work with me" consulting section
- Remove redundant Open Source section (GitHub link in footer)
- Style updates for new sections

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-09 13:54:02 -08:00

561 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impeccable: The missing upgrade to Anthropic's frontend-design skill</title>
<meta name="description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
<!-- OpenGraph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://impeccable.style">
<meta property="og:title" content="Impeccable: Design skills for AI coding tools">
<meta property="og:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
<meta property="og:image" content="https://impeccable.style/og-image.svg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://impeccable.style">
<meta name="twitter:title" content="Impeccable: Design skills for AI coding tools">
<meta name="twitter:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.">
<meta name="twitter:image" content="https://impeccable.style/og-image.svg">
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body class="min-h-screen overflow-x-hidden leading-relaxed">
<!-- Skip to main content link for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Grain Overlay -->
<div class="grain-overlay" aria-hidden="true"></div>
<!-- 1. HERO -->
<section id="hero">
<!-- Shader viewport with overlayed content -->
<div class="hero-shader" id="hero-shader">
<div class="hero-overlay-content">
<h1 class="hero-title-overlay">Impeccable</h1>
<p class="hero-tagline-overlay">Design fluency for Claude Code, Codex, and more.</p>
<a href="#downloads" class="hero-cta-overlay">Get Started</a>
</div>
</div>
<!-- Content below the shader -->
<div class="hero-container">
<div class="hero-content">
<h2 class="hero-section-title" data-reveal>What's Included</h2>
<!-- Visual Equation -->
<div class="hero-equation" data-reveal>
<div class="equation-block">
<span class="equation-label">Enhanced Skill</span>
<span class="equation-title">frontend-design</span>
<ul class="equation-list">
<li>Anthropic's original skill</li>
<li>+ curated anti-patterns</li>
<li>+ 7 deep reference guides</li>
</ul>
</div>
<span class="equation-operator">+</span>
<div class="equation-block">
<span class="equation-label">Steering Commands</span>
<span class="equation-title">17 commands</span>
<ul class="equation-list">
<li>/polish, /audit, /simplify</li>
<li>/bolder, /quieter, /animate</li>
<li>and 11 more...</li>
</ul>
</div>
</div>
<!-- Bottom: Logos -->
<div class="hero-footer" data-reveal>
<div class="hero-logos">
<span class="hero-logos-label">Works with</span>
<div class="hero-logos-row">
<img src="https://img.logo.dev/cursor.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Cursor" width="30" height="30" loading="lazy">
<img src="https://img.logo.dev/claude.ai?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Claude Code" width="30" height="30" loading="lazy">
<img src="https://img.logo.dev/gemini.google.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Gemini CLI" width="24" height="24" loading="lazy">
<img src="https://img.logo.dev/openai.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Codex CLI" width="24" height="24" loading="lazy">
</div>
</div>
</div>
</div>
</div>
<div class="hero-scroll-indicator" aria-hidden="true">
<span>Scroll</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 5v14M19 12l-7 7-7-7"/>
</svg>
</div>
</header>
<main class="site-content" id="main-content">
<!-- 2. THE PROBLEM - AI Design Bias -->
<section class="problem-section" id="problem">
<div class="section-header" data-reveal>
<span class="section-number">01</span>
<h2 class="section-title">AI Has Design Bias</h2>
</div>
<div class="problem-content">
<p class="section-lead" data-reveal>Every LLM learned from the same generic templates. Without explicit guidance, they converge on the same predictable defaults.</p>
<!-- Before/After Demo - The Hero -->
<div class="split-comparison" id="lens-comparison" data-reveal>
<div class="split-container">
<!-- Before: AI Slop -->
<div class="split-before">
<div class="slop-card">
<div class="slop-header">
<div class="slop-avatar"></div>
<div class="slop-text">
<div class="slop-title">Welcome to Our Platform</div>
<div class="slop-subtitle">The best solution for your needs</div>
</div>
</div>
<p class="slop-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.</p>
<button class="slop-button">Get Started</button>
</div>
<!-- Callout labels pointing to issues -->
<div class="slop-callouts">
<span class="slop-callout" data-point="font">Inter font (again)</span>
<span class="slop-callout" data-point="gradient">Purple gradient</span>
<span class="slop-callout" data-point="copy">Generic copy</span>
<span class="slop-callout" data-point="rounded">Cards on cards</span>
</div>
</div>
<!-- After: Impeccable (shown through split) -->
<div class="split-after">
<div class="impeccable-card">
<p class="impeccable-eyebrow">Introducing</p>
<h3 class="impeccable-title">Thoughtful Design</h3>
<p class="impeccable-body">Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.</p>
<button class="impeccable-button">Explore</button>
</div>
</div>
<!-- The Divider -->
<div class="split-divider">
<span class="split-label">With Skills</span>
</div>
</div>
<div class="split-labels">
<div class="split-label-item" data-point="before">
<span class="split-label-dot"></span>
<span>Generic AI Output</span>
</div>
<div class="split-label-item" data-point="after">
<span class="split-label-dot split-label-dot--accent"></span>
<span>With Design Skills</span>
</div>
</div>
</div>
<!-- Compact Bias Tags -->
<div class="bias-tags" data-reveal>
<span class="bias-tags-label">Common AI defaults:</span>
<div class="bias-tags-list">
<span class="bias-tag">Inter/Roboto fonts</span>
<span class="bias-tag">Purple gradients</span>
<span class="bias-tag">Cards on cards</span>
<span class="bias-tag">Centered everything</span>
<span class="bias-tag">Gray text on color</span>
<span class="bias-tag">Decorative shadows</span>
</div>
</div>
</div>
</section>
<!-- 3. THE ANTIDOTE - Patterns & Anti-Patterns -->
<section class="antidote-section" id="antidote">
<div class="section-header" data-reveal>
<span class="section-number">02</span>
<h2 class="section-title">The Antidote</h2>
</div>
<div class="antidote-content">
<p class="section-lead" data-reveal>Anthropic's original frontend-design skill laid the foundation. We built on it with curated patterns and anti-patterns across typography, color, layout, motion, and more.</p>
<!-- Patterns by category with tabs -->
<div class="patterns-categories" id="patterns-categories">
<!-- Rendered by JS -->
</div>
<!-- Contribution CTA -->
<div class="contribute-cta" data-reveal>
<p class="contribute-text">Know a pattern we're missing? Help us grow the collection.</p>
<a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20" class="btn btn-secondary btn-small">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12h14"/>
</svg>
<span>Suggest a Pattern</span>
</a>
</div>
</div>
</section>
<!-- 4. THE SOLUTION - Two-part system -->
<section class="solution-section" id="solution">
<div class="section-header" data-reveal>
<span class="section-number">03</span>
<h2 class="section-title">The Framework</h2>
</div>
<div class="solution-content">
<p class="section-lead" data-reveal>One comprehensive skill with deep expertise, plus 17 commands that form the language of design.</p>
<div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
<!-- Subway map generated by JS -->
</div>
<div class="solution-result" data-reveal>
<span class="result-arrow">↓</span>
<p class="result-text">Together, they transform generic output into <em>impeccable</em> design.</p>
</div>
</div>
</section>
<!-- 4. COMMANDS - Glass Terminal -->
<section class="commands-section" id="commands-section">
<div class="section-header" data-reveal>
<span class="section-number">04</span>
<h2 class="section-title">Commands in Action</h2>
<p class="section-subtitle">See how commands transform your designs</p>
</div>
<div class="commands-gallery">
<!-- Rendered by JS -->
</div>
</section>
<!-- 5. CASE STUDIES -->
<section class="casestudies-section" id="casestudies">
<div class="section-header" data-reveal>
<span class="section-number">05</span>
<h2 class="section-title">See It In Action</h2>
<p class="section-subtitle">Sample projects transformed with Impeccable commands</p>
</div>
<div class="transformations-tabbed" data-reveal>
<!-- Tab buttons -->
<div class="transformation-tabs" role="tablist">
<button class="transformation-tab active" role="tab" aria-selected="true" data-tab="0">Landing Page</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="1">Form UX</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="2">Dashboard</button>
</div>
<!-- Tab panels -->
<div class="transformation-panels">
<article class="transformation-panel active" role="tabpanel" data-panel="0">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/landing.before.webp" alt="Landing page before transformation" loading="lazy">
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<img src="assets/landing.after.webp" alt="Landing page after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Landing Page Polish</h3>
<p class="transformation-desc">AI-generated landing page refined from generic template to memorable brand experience.</p>
<div class="transformation-commands">
<span class="transformation-command">/critique</span>
<span class="transformation-command">/polish</span>
<span class="transformation-command">/animate</span>
</div>
</div>
</article>
<article class="transformation-panel" role="tabpanel" data-panel="1">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/form.before.webp" alt="Form before transformation" loading="lazy">
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<img src="assets/form.after.webp" alt="Form after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Form UX Overhaul</h3>
<p class="transformation-desc">Complex multi-step form simplified and clarified for better completion rates.</p>
<div class="transformation-commands">
<span class="transformation-command">/simplify</span>
<span class="transformation-command">/clarify</span>
<span class="transformation-command">/harden</span>
</div>
</div>
</article>
<article class="transformation-panel" role="tabpanel" data-panel="2">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/dashboard.before.webp" alt="Dashboard before transformation" loading="lazy">
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<img src="assets/dashboard.after.webp" alt="Dashboard after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Dashboard Redesign</h3>
<p class="transformation-desc">Generic analytics dashboard transformed into a distinctive, scannable interface.</p>
<div class="transformation-commands">
<span class="transformation-command">/audit</span>
<span class="transformation-command">/normalize</span>
<span class="transformation-command">/bolder</span>
</div>
</div>
</article>
</div>
</div>
<!-- Lightbox for expanded view -->
<div class="lightbox" id="image-lightbox">
<button class="lightbox-close" aria-label="Close">&times;</button>
<img class="lightbox-image" src="" alt="">
</div>
</section>
<!-- 6. PLATFORMS -->
<section class="platforms-section" id="downloads">
<div class="section-header" data-reveal>
<span class="section-number">06</span>
<h2 class="section-title">Download for Your AI Harness</h2>
<p class="section-subtitle">Same design intelligence, adapted for your workflow. Download and start using in seconds.</p>
</div>
<div class="download-options" data-reveal>
<label class="prefix-toggle">
<input type="checkbox" id="prefix-toggle" />
<span class="prefix-toggle-slider"></span>
<span class="prefix-toggle-label">
Prefix commands with <code>/i-</code> to avoid conflicts
</span>
</label>
</div>
<div class="downloads-grid">
<article class="download-card" data-reveal>
<div class="download-card-icon">
<img src="https://img.logo.dev/cursor.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Cursor logo" width="32" height="32" loading="lazy">
</div>
<h3 class="download-card-title">Cursor</h3>
<button class="btn btn-primary" data-bundle="cursor" aria-label="Download Cursor bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
</svg>
</button>
<details class="download-card-details">
<summary>Skills require setup</summary>
<ol>
<li>Switch to Nightly channel in Settings → Beta</li>
<li>Enable Agent Skills in Settings → Rules</li>
</ol>
<a href="https://cursor.com/docs/context/skills" target="_blank" rel="noopener">Learn more</a>
</details>
</article>
<article class="download-card" data-reveal>
<div class="download-card-icon">
<img src="https://img.logo.dev/claude.ai?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Claude logo" width="32" height="32" loading="lazy">
</div>
<h3 class="download-card-title">Claude Code</h3>
<button class="btn btn-primary" data-bundle="claude-code" aria-label="Download Claude Code bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
</svg>
</button>
</article>
<article class="download-card" data-reveal>
<div class="download-card-icon">
<img src="https://img.logo.dev/gemini.google.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Gemini logo" width="32" height="32" loading="lazy">
</div>
<h3 class="download-card-title">Gemini CLI</h3>
<button class="btn btn-primary" data-bundle="gemini" aria-label="Download Gemini CLI bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
</svg>
</button>
<details class="download-card-details">
<summary>Skills require setup</summary>
<ol>
<li>Install preview: <code>npm i -g @google/gemini-cli@preview</code></li>
<li>Run <code>/settings</code> and enable "Skills"</li>
<li>Run <code>/skills list</code> to verify</li>
</ol>
<a href="https://geminicli.com/docs/cli/skills/" target="_blank" rel="noopener">Learn more</a>
</details>
</article>
<article class="download-card" data-reveal>
<div class="download-card-icon">
<img src="https://img.logo.dev/openai.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="OpenAI logo" width="32" height="32" loading="lazy">
</div>
<h3 class="download-card-title">Codex CLI</h3>
<button class="btn btn-primary" data-bundle="codex" aria-label="Download Codex CLI bundle">
<span>Download</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
</svg>
</button>
</article>
</div>
</section>
<!-- 7. FAQ -->
<section class="faq-section" id="faq">
<div class="section-header" data-reveal>
<span class="section-number">07</span>
<h2 class="section-title">Frequently Asked Questions</h2>
</div>
<div class="faq-list" data-reveal>
<details class="faq-item">
<summary class="faq-question">Where do I put the downloaded files?</summary>
<div class="faq-answer">
<p>Extract the ZIP to your <strong>project root</strong> (same level as your <code>package.json</code> or <code>src/</code> folder). The files should create a hidden folder like <code>.claude/</code>, <code>.cursor/</code>, <code>.gemini/</code>, or <code>.codex/</code>.</p>
<p>Alternatively, you can install <strong>globally</strong> to your home directory:</p>
<ul>
<li>Claude Code: <code>~/.claude/</code></li>
<li>Cursor: <code>~/.cursor/</code></li>
<li>Gemini CLI: <code>~/.gemini/</code></li>
<li>Codex CLI: <code>~/.codex/</code></li>
</ul>
<p>Project-level installation takes precedence and lets you version control your skills.</p>
</div>
</details>
<details class="faq-item">
<summary class="faq-question">Commands or skills aren't appearing. What do I do?</summary>
<div class="faq-answer">
<p><strong>For commands:</strong> Type <code>/</code> in your AI tool and look for commands like <code>/audit</code>, <code>/polish</code>, etc. If they don't appear, double-check the files are in the correct location.</p>
<p><strong>For skills:</strong> Skills are applied automatically when relevant. To verify, explicitly mention "use the frontend-design skill" in your prompt—this forces the AI to acknowledge and apply it.</p>
<p><strong>Tool-specific setup:</strong></p>
<ul>
<li><strong>Cursor:</strong> Requires Nightly channel + Agent Skills enabled in Settings → Rules</li>
<li><strong>Gemini CLI:</strong> Requires <code>@google/gemini-cli@preview</code> + Skills enabled via <code>/settings</code></li>
</ul>
</div>
</details>
<details class="faq-item">
<summary class="faq-question">I'm new to AI coding tools. Where do I start?</summary>
<div class="faq-answer">
<p>Skills and commands are intermediate features. If you're just getting started, learn the basics first:</p>
<ul>
<li><strong>Claude Code:</strong> <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" rel="noopener">Official Documentation</a></li>
<li><strong>Cursor:</strong> <a href="https://docs.cursor.com" target="_blank" rel="noopener">Cursor Docs</a></li>
<li><strong>Gemini CLI:</strong> <a href="https://geminicli.com/docs/" target="_blank" rel="noopener">Gemini CLI Docs</a></li>
<li><strong>Codex CLI:</strong> <a href="https://github.com/openai/codex" target="_blank" rel="noopener">Codex GitHub</a></li>
</ul>
<p>Once you're comfortable with basic prompting and code generation, come back and install Impeccable to level up your design output.</p>
</div>
</details>
</div>
</section>
<!-- 8. SUPPORT THE PROJECT -->
<section class="support-section" id="support">
<div class="support-content" data-reveal>
<h2 class="support-title">Support the Project</h2>
<p class="support-desc">Impeccable isn't backed by a company or VC. It's just me, building tools I wish existed. Your support keeps this independent and actively maintained.</p>
<div class="support-tiers">
<a href="https://buy.stripe.com/7sYfZi0xK8Jm5i349W8Ra00" class="support-tier" target="_blank" rel="noopener">
<span class="tier-amount">$20</span>
<span class="tier-label">Supporter</span>
</a>
<a href="https://buy.stripe.com/28E5kE4O0gbO11N6i48Ra01" class="support-tier support-tier--popular" target="_blank" rel="noopener">
<span class="tier-badge">Popular</span>
<span class="tier-amount">$100</span>
<span class="tier-label">Sponsor</span>
</a>
<a href="https://buy.stripe.com/5kQ9AUbco0cQ4dZ7m88Ra02" class="support-tier" target="_blank" rel="noopener">
<span class="tier-amount">$10k</span>
<span class="tier-label">Patron</span>
</a>
</div>
<a href="https://buy.stripe.com/aFa3cwfsEe3G25R6i48Ra03" class="support-custom" target="_blank" rel="noopener">
Or choose your own amount →
</a>
<p class="support-note">Voluntary contribution. No expectation of influence or future maintenance.</p>
</div>
</section>
<!-- 10. CONSULTING -->
<section class="consulting-section" id="consulting">
<div class="consulting-content" data-reveal>
<div class="consulting-text">
<h2 class="consulting-title">Work with me</h2>
<p class="consulting-desc">I help teams of all sizes navigate AI transformation: upleveling developers, building AI-native workflows, and shipping end-to-end products. Deep expertise in developer experience, content platforms, and creator economy. Whether it's design systems, full-stack architecture, or figuring out how AI fits into your org, I can help.</p>
</div>
<a href="mailto:paul@paulbakaus.com" class="btn btn-primary">
<span>Get in touch</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</section>
</main>
<footer class="site-footer">
<div class="footer-content">
<div class="footer-brand">
<span class="footer-logo">Impeccable</span>
<p class="footer-tagline">impeccable.style</p>
</div>
<div class="footer-links">
<a href="#antidote">Anti-Patterns</a>
<a href="#commands-section">Commands</a>
<a href="#casestudies">Case Studies</a>
<a href="#downloads">Downloads</a>
<a href="https://github.com/pbakaus/impeccable">GitHub</a>
</div>
</div>
<div class="footer-author">
<span class="footer-author-label">Created by <a href="https://x.com/pbakaus" target="_blank" rel="noopener">Paul Bakaus</a></span>
<div class="footer-author-links">
<a href="https://x.com/pbakaus" class="footer-social-link" aria-label="Follow on X" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<a href="https://linkedin.com/in/paulbakaus" class="footer-social-link" aria-label="Connect on LinkedIn" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<span class="footer-author-divider"></span>
<a href="https://www.paulbakaus.com" class="footer-newsletter" target="_blank" rel="noopener">
Renaissance Geek
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
</footer>
<script type="module" src="./app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink