feat: Update ascii templates to be nicer

blueprints/api.py

@@ -4,7 +4,7 @@ import datetime
 import requests
 import re
 from mail import sendEmail
-from tools import getClientIP, getGitCommit, json_response, parse_date
+from tools import getClientIP, getGitCommit, json_response, parse_date, get_tools_data
 from blueprints.sol import sol_bp
 from dateutil import parser as date_parser
 
@@ -164,6 +164,21 @@ def project():
         "status": HTTP_OK
     })
 
+@api_bp.route("/tools")
+def tools():
+    """Get a list of tools used by Nathan Woodburn."""
+    try:
+        tools = get_tools_data()
+    except Exception as e:
+        print(f"Error getting tools data: {e}")
+        return json_response(request, "500 Internal Server Error", HTTP_SERVER_ERROR)
+
+    # Remove demo and move demo_url to demo
+    for tool in tools:
+        if "demo_url" in tool:
+            tool["demo"] = tool.pop("demo_url")
+        
+    return json_response(request, {"tools": tools}, HTTP_OK)
 
 @api_bp.route("/page_date")
 def page_date():

blueprints/blog.py

@@ -10,6 +10,10 @@ blog_bp = Blueprint('blog', __name__)
 
 def list_page_files():
     blog_pages = os.listdir("data/blog")
+    # Sort pages by modified time, newest first
+    blog_pages.sort(
+        key=lambda x: os.path.getmtime(os.path.join("data/blog", x)), reverse=True)
+
     # Remove .md extension
     blog_pages = [page.removesuffix(".md")
                   for page in blog_pages if page.endswith(".md")]

blueprints/template.py

@@ -0,0 +1,9 @@
+from flask import Blueprint, request
+from tools import json_response
+
+template_bp = Blueprint('template', __name__)
+
+
+@template_bp.route("/")
+def index():
+    return json_response(request, "Success", 200)

curl.py

@@ -1,5 +1,5 @@
 from flask import render_template
-from tools import error_response, getAddress
+from tools import error_response, getAddress, get_tools_data, getClientIP
 import os
 from functools import lru_cache
 import requests
@@ -81,7 +81,7 @@ def curl_response(request):
     # Handle special cases
     if path == "index":
         # Get current project
-        return render_template("index.ascii",header=get_header(),repo=get_current_project()), 200, {'Content-Type': 'text/plain; charset=utf-8'}
+        return render_template("index.ascii",repo=get_current_project(), ip=getClientIP(request)), 200, {'Content-Type': 'text/plain; charset=utf-8'}
     if path == "projects":
         # Get projects
         return render_template("projects.ascii",header=get_header(),projects=get_projects()), 200, {'Content-Type': 'text/plain; charset=utf-8'}
@@ -101,8 +101,6 @@ def curl_response(request):
                                coins=coinList
                                ), 200, {'Content-Type': 'text/plain; charset=utf-8'}        
 
-        
-                               
     # For other donation pages, fall back to ascii if it exists
     if path.startswith("donate/"):
         coin = path.split("/")[1]
@@ -110,6 +108,10 @@ def curl_response(request):
         if address != "":
             return render_template("donate_coin.ascii",header=get_header(),coin=coin.upper(),address=address), 200, {'Content-Type': 'text/plain; charset=utf-8'}
     
+    if path == "tools":
+        tools = get_tools_data()
+        return render_template("tools.ascii",header=get_header(),tools=tools), 200, {'Content-Type': 'text/plain; charset=utf-8'}
+
 
     if os.path.exists(f"templates/{path}.ascii"):
         return render_template(f"{path}.ascii",header=get_header()), 200, {'Content-Type': 'text/plain; charset=utf-8'}

data/blog/Software_I_Use.md

@@ -1,7 +1,9 @@
 G'day,  
 Just thought it might be useful to write down some of the software I use regularly. I've no clue if you'll find any useful :)  
 
+For a more complete list, check out [/tools](/tools)
 
+<br>
 ## Overview  
 OS: Arch Linux | Because it is quick to update and has all the latest tools I can play with  
 DE: Hyprland | Feel free to check out my dotfiles if you're interested  

data/tools.json

@@ -0,0 +1,170 @@
+[
+    {
+        "name":"Obsidian", 
+        "type":"Desktop Applications",
+        "url":"https://obsidian.md/",
+        "description":"Note taking app that stores everything in Markdown files"
+    },
+    {
+        "name": "Alacritty",
+        "type": "Desktop Applications",
+        "url": "https://alacritty.org/",
+        "description": "A cross-platform, GPU-accelerated terminal emulator"
+    },
+    {
+        "name": "Brave",
+        "type": "Desktop Applications",
+        "url": "https://brave.com/",
+        "description": "Privacy-focused web browser"
+    },
+    {
+        "name": "VSCode",
+        "type": "Desktop Applications",
+        "url": "https://code.visualstudio.com/",
+        "description": "Source-code editor developed by Microsoft"
+    },
+    {
+        "name": "Zellij",
+        "type": "Terminal Tools",
+        "url": "https://zellij.dev/",
+        "description": "A terminal workspace and multiplexer"
+    },
+    {
+        "name": "Fx",
+        "type": "Terminal Tools",
+        "url": "https://fx.wtf/",
+        "description": "A command-line JSON viewer and processor",
+        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/4.js\" id=\"asciicast-4\" async=\"true\"></script>",
+        "demo_url": "https://asciinema.c.woodburn.au/a/4"
+    },
+    {
+        "name": "Zoxide",
+        "type": "Terminal Tools",
+        "url": "https://github.com/ajeetdsouza/zoxide",
+        "description": "cd but with fuzzy matching and other cool features",
+        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/5.js\" id=\"asciicast-5\" async=\"true\"></script>",
+        "demo_url": "https://asciinema.c.woodburn.au/a/5"
+    },
+    {
+        "name": "Atuin",
+        "type": "Terminal Tools",
+        "url": "https://atuin.sh/",
+        "description": "A next-generation shell history manager",
+        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/6.js\" id=\"asciicast-6\" async=\"true\"></script>",
+        "demo_url": "https://asciinema.c.woodburn.au/a/6"
+    },
+    {
+        "name": "Tmate",
+        "type": "Terminal Tools",
+        "url": "https://tmate.io/",
+        "description": "Instant terminal sharing",
+        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/7.js\" id=\"asciicast-7\" async=\"true\"></script>",
+        "demo_url": "https://asciinema.c.woodburn.au/a/7"
+    },
+    {
+        "name": "Eza",
+        "type": "Terminal Tools",
+        "url": "https://eza.rocks/",
+        "description": "A modern replacement for 'ls'",
+        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/8.js\" id=\"asciicast-8\" async=\"true\"></script>",
+        "demo_url": "https://asciinema.c.woodburn.au/a/8"
+    },
+    {
+        "name": "Bat",
+        "type": "Terminal Tools",
+        "url": "https://github.com/sharkdp/bat",
+        "description": "A cat clone with syntax highlighting and Git integration",
+        "demo": "<script src=\"https://asciinema.c.woodburn.au/a/9.js\" id=\"asciicast-9\" async=\"true\"></script>",
+        "demo_url": "https://asciinema.c.woodburn.au/a/9"
+    },
+    {
+        "name": "Oh My Zsh",
+        "type": "Terminal Tools",
+        "url": "https://ohmyz.sh/",
+        "description": "A delightful community-driven framework for managing your Zsh configuration"
+    },
+    {
+        "name": "Proxmox",
+        "type": "Server Management",
+        "url": "https://www.proxmox.com/en",
+        "description": "Open-source server virtualization management solution"
+    },
+    {
+        "name": "Portainer",
+        "type": "Server Management",
+        "url": "https://www.portainer.io/",
+        "description": "Lightweight management UI which allows you to easily manage your Docker containers"
+    },
+    {
+        "name": "Coolify",
+        "type": "Server Management",
+        "url": "https://coolify.io/",
+        "description": "An open-source self-hosted Heroku alternative"
+    },
+    {
+        "name": "OpnSense",
+        "type": "Server Management",
+        "url": "https://opnsense.org/",
+        "description": "Open source, easy-to-use and easy-to-build FreeBSD based firewall and routing platform"
+    },
+    {
+        "name": "Nginx Proxy Manager",
+        "type": "Server Management",
+        "url": "https://nginxproxymanager.com/",
+        "description": "A powerful yet easy to use web interface for managing Nginx proxy hosts"
+    },
+    {
+        "name": "Tailscale",
+        "type": "Server Management",
+        "url": "https://tailscale.com/",
+        "description": "A zero-config VPN that just works"
+    },
+    {
+        "name": "Authentik",
+        "type": "Self-Hosting Services",
+        "url": "https://goauthentik.io/",
+        "description": "An open-source identity provider focused on flexibility and ease of use"
+    },
+    {
+        "name": "Uptime Kuma",
+        "type": "Self-Hosting Services",
+        "url": "https://uptime.kuma.pet/",
+        "description": "A fancy self-hosted monitoring tool"
+    },
+    {
+        "name": "Gitea",
+        "type": "Self-Hosting Services",
+        "url": "https://about.gitea.com/",
+        "description": "A painless self-hosted Git service"
+    },
+    {
+        "name": "Nextcloud",
+        "type": "Self-Hosting Services",
+        "url": "https://nextcloud.com/",
+        "description": "A suite of client-server software for creating and using file hosting services"
+    },
+    {
+        "name": "Umami",
+        "type": "Self-Hosting Services",
+        "url": "https://umami.is/",
+        "description": "A simple, fast, privacy-focused alternative to Google Analytics"
+    },
+    {
+        "name": "PhotoPrism",
+        "type": "Self-Hosting Services",
+        "url": "https://photoprism.app/",
+        "description": "AI-powered app for browsing, organizing & sharing your photo collection"
+    },
+    {
+        "name": "FreeScout",
+        "type": "Self-Hosting Services",
+        "url": "https://freescout.net/",
+        "description": "Self hosted email dashboard"
+    },
+    {
+        "name": "Vaultwarden",
+        "type": "Miscellaneous",
+        "url": "https://github.com/dani-garcia/vaultwarden",
+        "description": "Password manager server implementation compatible with Bitwarden clients"
+    }
+]

server.py

@@ -25,7 +25,7 @@ from blueprints.wellknown import wk_bp
 from blueprints.api import api_bp
 from blueprints.podcast import podcast_bp
 from blueprints.acme import acme_bp
-from tools import isCurl, isCrawler, getAddress, getFilePath, error_response, getClientIP, json_response, getHandshakeScript
+from tools import isCurl, isCrawler, getAddress, getFilePath, error_response, getClientIP, json_response, getHandshakeScript, get_tools_data
 from curl import curl_response
 
 app = Flask(__name__)
@@ -393,8 +393,6 @@ def index():
     return resp
 
 # region Donate
-
-
 @app.route("/donate")
 def donate():
     if isCurl(request):
@@ -560,7 +558,6 @@ def qrcodee(data):
 
 # endregion
 
-
 @app.route("/supersecretpath")
 def supersecretpath():
     ascii_art = ""
@@ -686,6 +683,12 @@ def resume_pdf():
         return send_file("data/resume.pdf")
     return error_response(request, message="Resume not found")
 
+@app.route("/tools")
+def tools():
+    if isCurl(request):
+        return curl_response(request)
+    return render_template("tools.html", tools=get_tools_data())
+
 # endregion
 # region Error Catching
 

templates/assets/css/styles.min.css

@@ -1 +1 @@
-:root,[data-bs-theme=light]{--bs-primary:#6E0E9C;--bs-primary-rgb:110,14,156;--bs-primary-text-emphasis:#2C063E;--bs-primary-bg-subtle:#E2CFEB;--bs-primary-border-subtle:#C59FD7;--bs-link-color:#6E0E9C;--bs-link-color-rgb:110,14,156;--bs-link-hover-color:#a41685;--bs-link-hover-color-rgb:164,22,133}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5E0C85;--bs-btn-hover-border-color:#580B7D;--bs-btn-focus-shadow-rgb:233,219,240;--bs-btn-active-color:#fff;--bs-btn-active-bg:#580B7D;--bs-btn-active-border-color:#530B75;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6E0E9C;--bs-btn-disabled-border-color:#6E0E9C}.btn-outline-primary{--bs-btn-color:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-focus-shadow-rgb:110,14,156;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6E0E9C;--bs-btn-hover-border-color:#6E0E9C;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6E0E9C;--bs-btn-active-border-color:#6E0E9C;--bs-btn-disabled-color:#6E0E9C;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6E0E9C}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}@media (min-width:992px){.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}}
+:root,[data-bs-theme=light]{--bs-primary:#6E0E9C;--bs-primary-rgb:110,14,156;--bs-primary-text-emphasis:#2C063E;--bs-primary-bg-subtle:#E2CFEB;--bs-primary-border-subtle:#C59FD7;--bs-link-color:#6E0E9C;--bs-link-color-rgb:110,14,156;--bs-link-hover-color:#a41685;--bs-link-hover-color-rgb:164,22,133}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5E0C85;--bs-btn-hover-border-color:#580B7D;--bs-btn-focus-shadow-rgb:233,219,240;--bs-btn-active-color:#fff;--bs-btn-active-bg:#580B7D;--bs-btn-active-border-color:#530B75;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6E0E9C;--bs-btn-disabled-border-color:#6E0E9C}.btn-outline-primary{--bs-btn-color:#6E0E9C;--bs-btn-border-color:#6E0E9C;--bs-btn-focus-shadow-rgb:110,14,156;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6E0E9C;--bs-btn-hover-border-color:#6E0E9C;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6E0E9C;--bs-btn-active-border-color:#6E0E9C;--bs-btn-disabled-color:#6E0E9C;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6E0E9C}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}@media (min-width:992px){.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}}

templates/donate.ascii

@@ -5,9 +5,9 @@
 
 If you’d like to support my work 💙
 
-- PayPal: [https://paypal.me/nathanwoodburn]
-- GitHub: [https://github.com/sponsors/Nathanwoodburn]
-- Stripe: [https://donate.stripe.com/8wM6pv0VD08Xe408ww]
+- PayPal: https://paypal.me/nathanwoodburn
+- GitHub: https://github.com/sponsors/Nathanwoodburn
+- Stripe: https://donate.stripe.com/8wM6pv0VD08Xe408ww
 
 HNS: nathan.woodburn  
 {{ HNS }}

templates/header.ascii

@@ -7,5 +7,6 @@
 Home     [/]
 Contact  [/contact]
 Projects [/projects]
+Tools    [/tools]
 Donate   [/donate]
 

templates/index.ascii

@@ -1,4 +1,16 @@
-{{header}}
+─────────────────────────────────────────────────────
+  .  .    , .           .  .        ..             / 
+  |\ | _.-+-|_  _.._    |  | _  _  _||_ . .._.._  /  
+  | \|(_] | [ )(_][ ) * |/\|(_)(_)(_][_)(_|[  [ )/   
+─────────────────────────────────────────────────────
+
+Home     [/]
+Contact  [/contact]
+Projects [/projects]
+Tools    [/tools]
+Donate   [/donate]
+API      [/api/v1/]
+
 ───────────────────────────────────────────────
  ABOUT ME 
 ──────────
@@ -18,7 +30,7 @@ I'm currently working on: {{ repo | safe }}
 ────────
 
 - Linux servers & CLI
-- DNS, DNSSEC, and Trustless SSL
+- DNS & DNSSEC
 - NGINX web servers
 - Programming:
   - Python 3
@@ -26,3 +38,7 @@ I'm currently working on: {{ repo | safe }}
   - Java
   - Bash
 
+
+Served to: {{ ip }}
+───────────────────────────────────────────────
+

templates/index.html

@@ -105,7 +105,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
                     <h2>Skills</h2>
                     <ul class="list-unstyled" style="font-size: 18px;">
                         <li class="programlinux">Linux Servers and CLI</li>
-                        <li>DNS, DNSSEC and Trustless SSL</li>
+                        <li>DNS and DNSSEC</li>
                         <li class="programnginx">NGINX Web Servers</li>
                         <li class="programc">Programming in<ul class="list-inline">
                                 <li class="list-inline-item">Python 3</li>
@@ -227,7 +227,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
         <div class="container text-center">
             <div class="row">
                 <div class="col">
-                    <p>Verify me with this <a href="pgp" target="_blank">long lifetime Public Key</a> or this <a href="gitpgp" target="_blank">short term one for Github commits</a></p>
+                    <p>Verify me with this <a href="pgp" target="_blank">PGP Public Key</a></p>
                 </div>
             </div>
             <div class="row">

templates/sitemap.xml

@@ -96,4 +96,7 @@
     <url>
         <loc>https://nathan.woodburn.au/resume</loc>
     </url>
+    <url>
+        <loc>https://nathan.woodburn.au/tools</loc>
+    </url>
 </urlset>

templates/tools.ascii

@@ -0,0 +1,20 @@
+{{header}}
+───────────────────────────────────────────────
+ Tools 
+────────────
+
+Here are some of the tools I use regularly — most of them are open source! 🛠️
+
+{% for type, tools_in_type in tools | groupby('type') %}
+{{type}}
+{% for tool in tools_in_type %}
+{{tool.name}}
+{{tool.description}}
+Website: {{tool.url}}
+{% if tool.demo_url %}Demo: {{tool.demo_url}}{% endif %}
+{% endfor %}
+
+───────────────────────────────────────────────
+{% endfor %}
+
+

templates/tools.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html data-bs-theme="light" lang="en-au">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Tools | Nathan.Woodburn/</title>
+    <meta name="theme-color" content="#000000">
+    <link rel="canonical" href="https://nathan.woodburn.au/tools">
+    <meta property="og:url" content="https://nathan.woodburn.au/tools">
+    <meta name="fediverse:creator" content="@nathanwoodburn@mastodon.woodburn.au">
+    <meta name="twitter:description" content="G'day, this is my personal website. You can find out about me or check out some of my projects.">
+    <meta property="og:title" content="Nathan.Woodburn/">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:image" content="https://nathan.woodburn.au/assets/img/profile.jpg">
+    <meta property="og:type" content="website">
+    <meta name="twitter:title" content="Nathan.Woodburn/">
+    <meta property="og:description" content="G'day, this is my personal website. You can find out about me or check out some of my projects.">
+    <meta property="og:image" content="https://nathan.woodburn.au/assets/img/profile.jpg">
+    <meta name="description" content="Check out some tools I use">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicon/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/img/favicon/android-chrome-512x512.png">
+    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&amp;display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&amp;display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap">
+    <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
+    <link rel="stylesheet" href="/assets/css/styles.min.css">
+    <link rel="stylesheet" href="/assets/css/brand-reveal.min.css">
+    <link rel="stylesheet" href="/assets/css/profile.min.css">
+    <link rel="stylesheet" href="/assets/css/Social-Icons.min.css">
+<link rel="me" href="https://mastodon.woodburn.au/@nathanwoodburn" />
+<script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
+</head>
+
+<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77">
+    <nav class="navbar navbar-expand-md fixed-top navbar-light" id="mainNav" style="background: var(--bs-navbar-hover-color);">
+        <div class="container-fluid"><a class="navbar-brand" href="/#">
+                <div style="padding-right: 1em;display: inline-flex;">
+                    <div class="slider"><span>/</span></div><span class="brand">Nathan.Woodburn</span>
+                </div>
+            </a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
+            <div class="collapse navbar-collapse" id="navbarResponsive">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/hosting">Hosting</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/projects">Projects</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/blog">Blog</a></li>
+                    <li class="nav-item nav-link"><a class="nav-link" href="/now">Now</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <header class="masthead" style="background: url(&quot;/assets/img/bg/projects.webp&quot;) bottom / cover no-repeat;height: auto;padding-top: 20px;">
+        <div style="margin-top: 150px;margin-bottom: 100px;">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 mx-auto">
+                        <h1 class="brand-heading">Tools</h1>
+                        <p>Here is a list of applications, tools and services I use regularly.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <section class="text-center content-section" id="tools" style="padding-bottom: 100px;">
+        <div class="container">{% for type, tools_in_type in tools | groupby('type') %}
+<h2 class="mt-4 mb-3 sticky-top bg-primary py-2 section-header" id="{{type}}">{{ type }}</h2>
+<div class="row">
+    {% for tool in tools_in_type %}
+    <div class="col-md-6 col-lg-4 mb-4">
+        <div class="card h-100 shadow-sm transition-all" style="transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 0.5rem 1rem rgba(0,0,0,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='';">
+            <div class="card-body d-flex flex-column">
+                <h4 class="card-title">{{tool.name}}</h4>
+                <p class="card-text">{{ tool.description }}</p>
+                <div class="btn-group gap-3 mt-auto" role="group">{% if tool.demo %}<button class="btn btn-primary" type="button" data-bs-target="#modal-{{tool.name}}" data-bs-toggle="modal" style="transition: transform 0.2s, background-color 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">View Demo</button>{% endif %}<a class="btn btn-primary" role="button" href="{{tool.url}}" target="_blank" style="transition: transform 0.2s, background-color 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">{{tool.name}} Website</a></div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+<!-- Modals for this type -->
+{% for tool in tools_in_type %}
+{% if tool.demo %}
+<div id="modal-{{tool.name}}" class="modal fade" role="dialog" tabindex="-1" style="z-index: 1055;">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">{{tool.name}}</h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                {{ tool.demo | safe }}
+            </div>
+            <div class="modal-footer"><button class="btn btn-light" type="button" data-bs-dismiss="modal">Close</button></div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endfor %}
+{% endfor %}
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const navbar = document.getElementById('mainNav');
+    const headers = document.querySelectorAll('.section-header');
+    
+    if (navbar) {
+        const navbarHeight = navbar.offsetHeight;
+        headers.forEach(header => {
+            header.style.top = navbarHeight + 'px';
+            header.style.zIndex = '100';
+            header.style.scrollMarginTop = navbarHeight + 'px';
+        });
+        
+        // Handle hash navigation on page load
+        if (window.location.hash) {
+            setTimeout(() => {
+                const target = document.querySelector(window.location.hash);
+                if (target) {
+                    window.scrollTo({
+                        top: target.offsetTop - navbarHeight,
+                        behavior: 'smooth'
+                    });
+                }
+            }, 0);
+        }
+    }
+});
+</script></div>
+    </section>
+    <footer>
+        <div class="container text-center">
+            <p class="copyright">Copyright ©&nbsp;Nathan.Woodburn/ 2025</p>
+        </div>
+    </footer>{{handshake_scripts | safe}}
+    <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="/assets/js/script.min.js"></script>
+    <script src="/assets/js/grayscale.min.js"></script>
+    <script src="/assets/js/hacker.min.js"></script>
+</body>
+
+</html>

tests/api.hurl

@@ -14,4 +14,7 @@ GET http://127.0.0.1:5000/api/v1/message
 HTTP 200
 GET http://127.0.0.1:5000/api/v1/project
 HTTP 200
-
+GET http://127.0.0.1:5000/api/v1/tools
+HTTP 200
+[Asserts]
+jsonpath "$.tools" count > 5

tools.py

@@ -5,6 +5,7 @@ import datetime
 from typing import Optional, Dict, Union, Tuple
 import re
 from dateutil.parser import parse
+import json
 
 # HTTP status codes
 HTTP_OK = 200
@@ -250,3 +251,7 @@ def parse_date(date_groups: list[str]) -> str | None:
 
     except (ValueError, TypeError):
         return None
+
+def get_tools_data():
+    with open("data/tools.json", "r") as f:
+        return json.load(f)