Resources
Codebases & Tooling
This is a curated collection of the hardware, software, and repositories I use to build and maintain my technical ecosystem.
π» Code & Repositories
I share my projects and code whenever possible.
- GitHub: github.com/jondepalma
- Codebase: Python, Node.js, React, PostgreSQL
ποΈ The Tech Stack
Hardware
- Development: Lenovo ThinkStation (local LLM and application development)
- Home Lab Cluster: 3x Raspberry Pi 5 (8GB)
- Storage: QNAP NAS (NFS 4.1 Storage Classes)
Software & Orchestration
- OS: Raspberry Pi OS and Ubuntu (Headless)
- Orchestration: K3s (Lightweight Kubernetes), kind, Terraform, GKE, n8n
- Ingress: Traefik & Cloudflare Zero-Trust Tunnels
- VPN: Tailscale (Secure Subnet Router)
- Cloud: Google Cloud Platform
π οΈ Consulting & Services
I support my open-source utilities and this site through my company Forjic Technology.
I execute through a three-step framework designed to get your roadmap moving:
- Align: We define the specific business outcomes and KPIs that determine success for your organization.
- Architect: I build a technical roadmap and solution strategy designed specifically to hit those marks by transforming People, Process, and Technology.
- Accelerate: I work directly with your team to implement the architectural and process changes required to turn your technology into value-add ROI.
Stop translating and start scaling. If your tech stack feels disconnected from your business goals, letβs fix it.
Ghost Theme Snippet Library
This library contains the specific overrides and logic used to transform the Source theme into a technical-first knowledge platform.
1. Global Site Header (Injection)
This block handles the visual foundation: the Terracotta (#B7410E) accent, Fira Code for technical precision, Series navigation, and the Table of Contents toggle.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.css">
<style>
/* 2. Professional Code Blocks (Using Fira Code) */
pre[class*="language-"] {
background: #18181b !important; /* Muted dark grey */
border: 1px solid #27272a !important;
border-radius: 8px !important;
padding: 1.5em !important;
margin: 2em 0 !important;
}
code {
font-family: 'Fira Code', monospace !important;
font-size: 0.9em !important;
}
/* 3. TOGGLEABLE TABLE OF CONTENTS */
/* The Container Box */
.gh-toc-container {
background: #18181b;
border: 1px solid #27272a;
border-radius: 8px;
padding: 1.2rem;
margin-bottom: 2.5rem;
}
/* The Clickable Toggle Header */
.gh-toc-container summary {
cursor: pointer;
font-weight: 700;
font-size: 1.0rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #ffffff;
list-style: none;
display: flex;
align-items: center;
}
/* Custom Arrow (Terracotta Accent) */
.gh-toc-container summary::before {
content: "βΆ";
display: inline-block;
margin-right: 12px;
color: #B7410E; /* Your specific accent code */
font-size: 0.7rem;
transition: transform 0.2s ease;
}
.gh-toc-container[open] summary::before {
transform: rotate(90deg);
}
/* The List Container */
.gh-toc {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #27272a;
}
/* Inner Link Styling (Your Existing Logic) */
.toc-list {
list-style: none !important;
padding-left: 10px !important;
}
.toc-link {
color: #a1a1aa !important; /* Muted zinc grey */
text-decoration: none !important;
font-size: 0.95rem;
line-height: 1.8;
}
.is-active-link {
color: #B7410E !important; /* Matches your accent */
font-weight: bold !important;
}
html {
/* Adjust '80px' to match the height of your specific header */
scroll-padding-top: 60px;
scroll-behavior: smooth;
}
/* 4. Series Navigation Box (Optional but handy) */
.series-nav {
background: #18181b !important;
border: 1px solid #27272a !important;
border-left: 4px solid var(--ghost-accent-color) !important;
padding: 1.5rem !important;
margin: 2rem 0 !important;
border-radius: 4px !important;
}
/* Selective hide featured image in post */
/* Only hides the image if the post has the #hide-image tag */
.tag-hash-hide-image .gh-article-image { display: none !important; }
</style>2. Global Site Footer (Injection)
This script initializes the syntax highlighting and the automated Table of Contents.
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-toml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js"></script>
<script>
/* 3. Initialize Table of Contents */
if (document.querySelector('.gh-toc')) {
tocbot.init({
tocSelector: '.gh-toc',
contentSelector: '.gh-content',
headingSelector: 'h2, h3',
hasInnerContainers: true,
scrollSmooth: true,
});
}
/* 4. Keep Dark Mode Attribute Active */
document.documentElement.setAttribute('data-color-scheme', 'dark');
</script>3. Reusable Page Elements (HTML Cards)
Use these snippets within HTML Cards inside the Ghost editor when creating or migrating posts.
Table of Contents Card
<details class="gh-toc-container">
<summary>Table of Contents</summary>
<aside class="gh-toc"></aside>
</details>Series Navigation Card
<div class="series-nav">
<div class="series-nav-title">Part of a Series: [Series Name]</div>
<ul>
<li><a href="/part-1/">Part 1: Title</a></li>
<li class="active">Part 2: Title (Active)</li>
<li><a href="/part-3/">Part 3: Title</a></li>
</ul>
</div>4. Migration Redirects (redirects.json)
The Regex rule used to map Hugo date-paths to clean Ghost URLs.
[
{
"from": "^/posts/\\d{4}/\\d{2}/(.*)/",
"to": "/$1/",
"permanent": true
},
{
"from": "^/posts/\\d{4}/\\d{2}/(.*)$",
"to": "/$1/",
"permanent": true
}
]