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 = () => {
  • Blog
  • +
  • + Tools +
  • Threads diff --git a/src/pages/tools/index.js b/src/pages/tools/index.js new file mode 100644 index 0000000..902c442 --- /dev/null +++ b/src/pages/tools/index.js @@ -0,0 +1,93 @@ +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 = () => ( + + + +
    + + + {config.siteTitle} + +
    + +

    Tools

    +

    + A collection of tools and projects I have built. These are designed to + solve specific problems and are available for anyone to use. +

    + + +

    PDF Redaction Checker

    +

    + 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. +

    +
    + Launch Tool → + + + + + +); + +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;