Merge pull request #15 from MrGuato/claude/update-about-links-avatar-VFlo6

feat: update links, rewrite about page, swap avatar to photo

Author: MrGuato

src/pages/about.astro

@@ -1,36 +1,93 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-const description = "Security engineer, GitOps practitioner, and lifelong learner based in Boston, MA.";
+const description = "Infrastructure & Security Engineer based in Massachusetts. Building, breaking, and automating since 2016.";
 ---
 
 <BaseLayout title="About" description={description}>
-  <h1 class="post-title">About</h1>
+  <h1 class="post-title">Hey, I'm Jonathan 👋</h1>
   <div class="prose">
     <p>
-      Hey, I'm <strong>Jonathan DeLeon</strong> — a security engineer based in <strong>Boston, MA</strong>,
-      fighting evil one commit at a time. I specialize in cloud security, Kubernetes, and building
-      production-minded infrastructure with a security-first mindset.
+      Infrastructure &amp; Security Engineer based out of Massachusetts. I've been in IT since 2016 —
+      started pulling cable and troubleshooting end-users at a nonprofit, worked through sysadmin and
+      cloud security roles, and gradually shifted my focus toward platform engineering, automation, and
+      security architecture. The through-line has always been the same: <strong>make it more reliable,
+      more secure, and more automated than I found it.</strong>
     </p>
+
+    <hr />
+
+    <h2>What I'm building</h2>
+
+    <h3>🖥️ <a href="https://github.com/MrGuato/pi-cluster" target="_blank" rel="noopener"><code>pi-cluster</code></a> — GitOps Homelab (Active)</h3>
     <p>
-      This blog is my build log: raw notes from the trenches of learning GitOps, k3s, FluxCD, and
-      everything in between. If it's not committed, it doesn't exist.
+      A production-minded bare-metal ARM64 k3s cluster on a Raspberry Pi 4, managed entirely with
+      <strong>FluxCD</strong>. Git is the only source of truth — if it's not in the repo, it doesn't exist.
     </p>
-
+    <ul>
+      <li><strong>Secrets:</strong> SOPS + age encryption, never plaintext in Git</li>
+      <li><strong>Ingress:</strong> Cloudflare Tunnel for zero-trust external access</li>
+      <li><strong>Apps:</strong> linkding, Ghost blog, Obsidian LiveSync (CouchDB) — all declarative, all reconciled</li>
+      <li><strong>Learned the hard way:</strong> recovered from a force-push that triggered Flux pruning and wiped my cloudflared deployment. <code>git reflog</code> is a skill.</li>
+    </ul>
     <div class="callout">
-      <strong>Currently working on</strong>
-      Preparing for Azure Security Engineer and KCNA/KCSA certifications, while deepening my GitOps
-      practice with k3s and FluxCD.
+      This is where I experiment before I deploy at work. The tooling here maps directly to what production platform engineering looks like.
     </div>
 
-    <h2>Certifications & Education</h2>
+    <h3>☁️ <a href="https://github.com/MrGuato" target="_blank" rel="noopener"><code>serverless-api</code></a> — AWS Serverless + Security</h3>
+    <p>
+      Hardened serverless API on AWS using least-privilege IAM, CORS controls, secrets management,
+      and fully automated deployment via CI/CD. No manual steps post-deploy.
+    </p>
+
+    <h3>🎮 <a href="https://github.com/MrGuato/enshrouded-docker" target="_blank" rel="noopener"><code>enshrouded-docker</code></a> — Containerized Game Server (DevOps)</h3>
+    <p>
+      Immutable container infrastructure with runtime auto-update logic, semantic versioning, CI/CD
+      publishing via GitHub Actions, and non-root execution with minimal attack surface. Built through
+      real CI/CD failures — Wine + Docker on Ubuntu 22.04 with WineHQ and Xvfb.
+    </p>
+
+    <h3>🔐 SOAR + EDR Integration — Security Automation</h3>
+    <p>
+      Automated security orchestration workflows integrating EDR with alerting pipelines — custom
+      detection rules, response playbooks, and hardened cloud VMs for telemetry analysis.
+    </p>
+
+    <hr />
+
+    <h2>On the roadmap</h2>
+    <p>Talos Linux · Cilium CNI · Kube-VIP · kube-prometheus-stack</p>
+    <p>Moving from "it works" to "it's observable, resilient, and enterprise-grade."</p>
+
+    <hr />
+
+    <h2>The journey (2016 → now)</h2>
+    <pre><code>2016 → IT Support / Helpdesk
+       Cabling, AV, break-fix, networking fundamentals
+
+2020 → Systems Administrator
+       M365 migrations, HIPAA security program, MDM at scale
+
+2022 → IT Support + Security
+       Vuln management, network config, L1 incident response
+
+2023 → Cloud Admin / Security
+       XDR rollout, CASB, IAM/Conditional Access, hybrid cloud
+
+2024 → Infrastructure Security Eng.
+       IaC, GitOps, DevSecOps, compliance frameworks</code></pre>
+    <p>The homelab is where the theory meets the metal.</p>
+
+    <hr />
+
+    <h2>Certifications &amp; Education</h2>
     <div class="badges">
       <span class="badge">CISM®</span>
       <span class="badge">CompTIA CCAP</span>
       <span class="badge">CSIS</span>
-      <span class="badge">WGU — Network Engineering & Cybersecurity</span>
+      <span class="badge">WGU — Network Engineering &amp; Cybersecurity</span>
     </div>
 
-    <h2>Tools & Stack</h2>
+    <h2>Tools &amp; Stack</h2>
     <div class="badges">
       <span class="badge">Kubernetes / k3s</span>
       <span class="badge">FluxCD</span>
@@ -48,7 +105,7 @@ const description = "Security engineer, GitOps practitioner, and lifelong learne
     <ul>
       <li><a href="https://github.com/MrGuato" target="_blank" rel="noopener">GitHub — MrGuato</a></li>
       <li><a href="https://www.linkedin.com/in/jonathan-deleon-cism/" target="_blank" rel="noopener">LinkedIn — jonathan-deleon-cism</a></li>
-      <li><a href="https://hashnode.com/@mrcyberleon" target="_blank" rel="noopener">Hashnode — @mrcyberleon</a></li>
+      <li><a href="https://cloud.mrcyberleon.org" target="_blank" rel="noopener">Cloud Site — cloud.mrcyberleon.org</a></li>
     </ul>
   </div>
 </BaseLayout>

src/pages/index.astro

@@ -11,7 +11,7 @@ const recent = posts.slice(1, 4);
 <BaseLayout title="GitOps Notes">
   <!-- Profile / README-style header -->
   <section class="profile-header">
-    <div class="profile-avatar">JD</div>
+    <img class="profile-avatar" src={`${base}/avatar.png`} alt="Jonathan DeLeon" />
     <div class="profile-info">
       <h1 class="profile-name">Jonathan DeLeon <span class="profile-handle">@MrGuato</span></h1>
       <p class="profile-bio">
@@ -31,9 +31,9 @@ const recent = posts.slice(1, 4);
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M0 1.146C0 .514.53 0 1.183 0h13.634C15.47 0 16 .514 16 1.146v13.708c0 .632-.53 1.146-1.183 1.146H1.183C.53 16 0 15.486 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/></svg>
           LinkedIn
         </a>
-        <a class="profile-link" href="https://hashnode.com/@mrcyberleon" target="_blank" rel="noopener">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="8"/></svg>
-          Hashnode
+        <a class="profile-link" href="https://cloud.mrcyberleon.org" target="_blank" rel="noopener">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5h-2v-2a.5.5 0 0 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2a.5.5 0 0 0 0-1z"/></svg>
+          Cloud Site
         </a>
       </div>
     </div>

src/pages/writing/[slug].astro

@@ -34,7 +34,7 @@ const readingTime = Math.max(1, Math.ceil(wordCount / 200));
   <!-- Meta bar -->
   <div class="post-meta-bar">
     <div class="post-meta-author">
-      <div class="author-avatar">JD</div>
+      <img class="author-avatar" src={`${base}/avatar.png`} alt="Jonathan DeLeon" style="object-fit:cover;" />
       <div>
         <div class="author-name">Jonathan DeLeon</div>
         <div class="author-sub">
@@ -53,14 +53,14 @@ const readingTime = Math.max(1, Math.ceil(wordCount / 200));
 
   <!-- Author card at bottom -->
   <div class="author-card">
-    <div class="author-card-avatar">JD</div>
+    <img class="author-card-avatar" src={`${base}/avatar.png`} alt="Jonathan DeLeon" style="object-fit:cover;" />
     <div class="author-card-info">
       <div class="author-card-name">Jonathan DeLeon <span class="author-card-handle">@MrGuato</span></div>
       <p class="author-card-bio">Security Engineer based in Boston, MA. Building production-minded infrastructure with a security-first mindset. If it's not committed, it doesn't exist.</p>
       <div class="author-card-links">
         <a href="https://github.com/MrGuato" target="_blank" rel="noopener">GitHub</a>
         <a href="https://www.linkedin.com/in/jonathan-deleon-cism/" target="_blank" rel="noopener">LinkedIn</a>
-        <a href="https://hashnode.com/@mrcyberleon" target="_blank" rel="noopener">Hashnode</a>
+        <a href="https://cloud.mrcyberleon.org" target="_blank" rel="noopener">Cloud Site</a>
       </div>
     </div>
   </div>

src/styles/global.css

@@ -131,15 +131,9 @@ a:hover{ text-decoration:underline; text-underline-offset:4px; }
   width: 72px;
   height: 72px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
-  color: #fff;
-  font-size: 22px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  object-fit: cover;
   flex: none;
-  letter-spacing: -0.02em;
+  border: 2px solid var(--border);
 }
 .profile-name {
   margin: 0 0 6px;
@@ -477,15 +471,9 @@ a:hover{ text-decoration:underline; text-underline-offset:4px; }
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  object-fit: cover;
   flex: none;
-  letter-spacing: -0.02em;
+  border: 1px solid var(--border);
 }
 .author-name {
   font-size: 14px;
@@ -512,15 +500,9 @@ a:hover{ text-decoration:underline; text-underline-offset:4px; }
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
-  color: #fff;
-  font-size: 17px;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  object-fit: cover;
   flex: none;
-  letter-spacing: -0.02em;
+  border: 1px solid var(--border);
 }
 .author-card-name {
   font-size: 16px;