From d0c009d017f348d95bf7ebac2c63dad73124653b Mon Sep 17 00:00:00 2001
From: Jon Gear <jon@gear.dev>
Date: Thu, 1 Jan 2026 14:06:33 -0800
Subject: [PATCH 1/2] feat: add tools section with PDF redaction checker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create a dedicated tools page to showcase projects and utilities.
The first tool featured is the PDF Redaction Checker, accessible
via client-side redirect at /tools/redact-check.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/index.js              |  3 ++
 src/pages/tools/index.js        | 89 +++++++++++++++++++++++++++++++++
 src/pages/tools/redact-check.js | 11 ++++
 3 files changed, 103 insertions(+)
 create mode 100644 src/pages/tools/index.js
 create mode 100644 src/pages/tools/redact-check.js

diff --git a/src/pages/index.js b/src/pages/index.js
index 8d60379..3ea7ed7 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -190,6 +190,9 @@ const IndexPage = () => {
               <li>
                 <a href="/blog">Blog</a>
               </li>
+              <li>
+                <a href="/tools">Tools</a>
+              </li>
               <li>
                 <a href="https://www.threads.com/@jongeardev" target="_blank">
                   Threads
diff --git a/src/pages/tools/index.js b/src/pages/tools/index.js
new file mode 100644
index 0000000..015829c
--- /dev/null
+++ b/src/pages/tools/index.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import { Link } from 'gatsby';
+import styled from 'styled-components';
+import { Layout, Wrapper, Header } from '../../components';
+const logo = '/images/logo.svg';
+import config from '../../config/website';
+
+const Content = styled.div`
+  grid-column: 2;
+  box-shadow: 0 4px 120px rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+  padding: 3rem 6rem;
+  background-color: ${(props) => props.theme.colors.bg};
+  @media (max-width: ${(props) => props.theme.breakpoints.tablet}) {
+    padding: 3rem 2rem;
+  }
+  @media (max-width: ${(props) => props.theme.breakpoints.phone}) {
+    padding: 2rem 1.5rem;
+  }
+`;
+
+const ToolCard = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.grey.light};
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+  }
+
+  h3 {
+    margin-top: 0;
+    color: ${(props) => props.theme.colors.primary};
+  }
+
+  p {
+    margin-bottom: 1rem;
+    color: ${(props) => props.theme.colors.grey.dark};
+  }
+
+  a {
+    color: ${(props) => props.theme.colors.primary};
+    text-decoration: none;
+    font-weight: 600;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const Tools = () => (
+  <Layout>
+    <Wrapper>
+      <Helmet title={`Tools | ${config.siteTitle}`} />
+      <Header>
+        <Link to="/">
+          <img src={logo} style={{ height: '25px', paddingRight: '10px' }} />
+          {config.siteTitle}
+        </Link>
+      </Header>
+      <Content>
+        <h1>Tools</h1>
+        <p>
+          A collection of tools and projects I have built. These are designed to solve
+          specific problems and are available for anyone to use.
+        </p>
+
+        <ToolCard>
+          <h3>PDF Redaction Checker</h3>
+          <p>
+            A tool for finding and removing bad redactions in PDF documents. This helps
+            identify text that appears redacted visually but is still accessible in the
+            document, which can be a security risk.
+          </p>
+          <a href="/tools/redact-check" target="_blank" rel="noopener noreferrer">
+            Launch Tool →
+          </a>
+        </ToolCard>
+      </Content>
+    </Wrapper>
+  </Layout>
+);
+
+export default Tools;
diff --git a/src/pages/tools/redact-check.js b/src/pages/tools/redact-check.js
new file mode 100644
index 0000000..9730987
--- /dev/null
+++ b/src/pages/tools/redact-check.js
@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+
+const RedactCheckRedirect = () => {
+  useEffect(() => {
+    window.location.replace('https://jongear.github.io/redact-check/');
+  }, []);
+
+  return null;
+};
+
+export default RedactCheckRedirect;

From 5424ffd67345cba077fcd721fe2d1ae11c691176 Mon Sep 17 00:00:00 2001
From: Jon Gear <jon@gear.dev>
Date: Sat, 3 Jan 2026 15:46:02 -0800
Subject: [PATCH 2/2] fix: lint

---
 src/pages/tools/index.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/pages/tools/index.js b/src/pages/tools/index.js
index 015829c..902c442 100644
--- a/src/pages/tools/index.js
+++ b/src/pages/tools/index.js
@@ -66,18 +66,22 @@ const Tools = () => (
       <Content>
         <h1>Tools</h1>
         <p>
-          A collection of tools and projects I have built. These are designed to solve
-          specific problems and are available for anyone to use.
+          A collection of tools and projects I have built. These are designed to
+          solve specific problems and are available for anyone to use.
         </p>
 
         <ToolCard>
           <h3>PDF Redaction Checker</h3>
           <p>
-            A tool for finding and removing bad redactions in PDF documents. This helps
-            identify text that appears redacted visually but is still accessible in the
-            document, which can be a security risk.
+            A tool for finding and removing bad redactions in PDF documents.
+            This helps identify text that appears redacted visually but is still
+            accessible in the document, which can be a security risk.
           </p>
-          <a href="/tools/redact-check" target="_blank" rel="noopener noreferrer">
+          <a
+            href="/tools/redact-check"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Launch Tool →
           </a>
         </ToolCard>