Skip to content

fix: Populate site with real resume data and correct career arc #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nitrocode merged 2 commits into from
May 5, 2026
Merged

fix: Populate site with real resume data and correct career arc #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb0258d
Enhance site with correct career arc and cross-discipline perspective
Copilot May 4, 2026
6e430e9
Populate site with real resume data: experience, skills, OS contribut…
Copilot May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 81 additions & 18 deletions about/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,20 @@ <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">About</h1>
<!-- Bio -->
<section class="mb-16">
<p class="text-lg text-slate-300 leading-relaxed mb-5">
I'm a <strong class="text-slate-100">Full Stack Engineer</strong> who has built and
shipped production systems across every layer of the stack — backend services,
user-facing frontends, cloud infrastructure, security tooling, and the architecture
that ties it all together at scale.
I'm a <strong class="text-slate-100">Full Stack Engineer</strong> who started in QA,
moved through test automation, software development, full stack engineering, DevOps/SRE,
and security — and came out the other side having been on every side of the wall.
</p>
<p class="text-lg text-slate-400 leading-relaxed mb-5">
My career arc has taken me through QA, backend engineering, DevOps, and security —
which means I've seen how systems fail at every layer and how to build them so
they don't. I bring security thinking into every phase of the product lifecycle,
not just as a final audit.
That journey means I've personally shipped the feature, written the tests that caught
the regression, built the pipeline that deployed it, managed the incident when it
broke, and hardened the system after the post-mortem. I understand how decisions made
on one side of the stack ripple into consequences on another.
</p>
<p class="text-lg text-slate-400 leading-relaxed mb-5">
I bring security thinking into every phase of the product lifecycle — not as a final
audit, but as a design constraint from day one. Systems I build are observable,
testable, and defensible.
</p>
<p class="text-lg text-slate-400 leading-relaxed">
I leverage AI tooling to move faster across the full stack — from rapid prototyping
Expand All @@ -72,33 +76,45 @@ <h2 class="text-2xl font-bold mb-8">Career arc</h2>
<div class="relative">
<div class="absolute -left-10 top-1 w-4 h-4 rounded-full bg-sky-500 border-2 border-slate-950"></div>
<p class="font-mono text-sky-400 text-xs mb-1 uppercase tracking-widest">Start</p>
<h3 class="text-lg font-semibold mb-1">Full Stack Developer</h3>
<p class="text-slate-400 text-sm">Built web applications end-to-end. Developed intuition for how UI decisions affect backend load and how backend design shapes UX.</p>
<h3 class="text-lg font-semibold mb-1">QA Engineering</h3>
<p class="text-slate-400 text-sm">Learned to break things before users do. Developed a systematic approach to failure modes, edge cases, and regression testing. Built the habit of questioning every assumption.</p>
</div>

<div class="relative">
<div class="absolute -left-10 top-1 w-4 h-4 rounded-full bg-sky-500 border-2 border-slate-950"></div>
<h3 class="text-lg font-semibold mb-1">Test Automation</h3>
<p class="text-slate-400 text-sm">Moved from manual testing to building automated test frameworks and CI pipelines. Wrote code to validate code — which demanded thinking like a developer while keeping a QA mindset.</p>
</div>

<div class="relative">
<div class="absolute -left-10 top-1 w-4 h-4 rounded-full bg-sky-500 border-2 border-slate-950"></div>
<h3 class="text-lg font-semibold mb-1">QA &amp; Test Engineering</h3>
<p class="text-slate-400 text-sm">Learned to break things before users do. Built automated test frameworks and developed a systematic approach to failure modes.</p>
<h3 class="text-lg font-semibold mb-1">Software Developer</h3>
<p class="text-slate-400 text-sm">Crossed to the other side of the wall. Built backend services and APIs. Understood what it feels like to have a QA team file bugs against your code — and designed to prevent them.</p>
</div>

<div class="relative">
<div class="absolute -left-10 top-1 w-4 h-4 rounded-full bg-sky-500 border-2 border-slate-950"></div>
<h3 class="text-lg font-semibold mb-1">DevOps &amp; Platform Engineering</h3>
<p class="text-slate-400 text-sm">Infrastructure as code, CI/CD pipelines, container orchestration, cloud cost management. Made developer experience a first-class concern.</p>
<h3 class="text-lg font-semibold mb-1">Full Stack Development</h3>
<p class="text-slate-400 text-sm">Expanded into frontend — React, component systems, responsive UIs. Developed intuition for how UI decisions affect backend load and how backend design shapes user experience.</p>
</div>

<div class="relative">
<div class="absolute -left-10 top-1 w-4 h-4 rounded-full bg-sky-500 border-2 border-slate-950"></div>
<h3 class="text-lg font-semibold mb-1">DevOps / SRE</h3>
<p class="text-slate-400 text-sm">Infrastructure as code, CI/CD pipelines, container orchestration, observability, and on-call. Learned what breaks at 3 AM and how to build systems that don't.</p>
</div>

<div class="relative">
<div class="absolute -left-10 top-1 w-4 h-4 rounded-full bg-sky-500 border-2 border-slate-950"></div>
<h3 class="text-lg font-semibold mb-1">Security Engineering</h3>
<p class="text-slate-400 text-sm">AppSec, DevSecOps, threat modeling, policy as code. Shifted security left without slowing down delivery.</p>
<p class="text-slate-400 text-sm">AppSec, DevSecOps, threat modeling, policy as code, SAST/DAST. Shifted security left — not as a gatekeeper, but as a collaborator who had already been on every other side of the table.</p>
</div>

<div class="relative">
<div class="absolute -left-10 top-1 w-4 h-4 rounded-full bg-violet-500 border-2 border-slate-950"></div>
<p class="font-mono text-violet-400 text-xs mb-1 uppercase tracking-widest">Now</p>
<h3 class="text-lg font-semibold mb-1">Full Stack — all of it</h3>
<p class="text-slate-400 text-sm">Combining everything: product thinking, systems architecture, security posture, and the ability to build the whole thing.</p>
<p class="text-slate-400 text-sm">Combining everything: I can own a feature from spec to deploy to security review to on-call runbook. Having been on every side of the wall means I know how to build systems that work for everyone.</p>
</div>

</div>
Expand All @@ -124,6 +140,14 @@ <h3 class="font-semibold mb-2">Security as a feature</h3>
<h3 class="font-semibold mb-2">Own the full lifecycle</h3>
<p class="text-slate-400 text-sm">I'm comfortable owning a feature from spec to deploy to on-call runbook.</p>
</div>
<div class="bg-slate-900 border border-slate-800 rounded-xl p-5">
<h3 class="font-semibold mb-2">Test before it ships</h3>
<p class="text-slate-400 text-sm">QA roots mean I think about failure modes while I'm writing the feature, not after. Testability is a design concern.</p>
</div>
<div class="bg-slate-900 border border-slate-800 rounded-xl p-5">
<h3 class="font-semibold mb-2">Empathy across the wall</h3>
<p class="text-slate-400 text-sm">I've been QA, dev, ops, and security. I understand the friction between teams because I've felt it from every side.</p>
</div>
</div>
</section>

Expand All @@ -137,10 +161,49 @@ <h2 class="text-xl font-bold mb-3">Want to work together?</h2>
</a>
</section>

<!-- Outside of work -->
<section class="mt-16 mb-16">
<h2 class="text-2xl font-bold mb-8">Outside of work</h2>
<div class="flex flex-wrap gap-3 text-sm">
<span class="bg-slate-900 border border-slate-800 rounded-full px-4 py-2 text-slate-300">🚲 Biking</span>
<span class="bg-slate-900 border border-slate-800 rounded-full px-4 py-2 text-slate-300">🧩 Puzzles (Sudoku, Kakuro, Wordle, Nerdle, Hanjie…)</span>
<span class="bg-slate-900 border border-slate-800 rounded-full px-4 py-2 text-slate-300">📚 Reading (books, Hacker News, RSS feeds)</span>
<span class="bg-slate-900 border border-slate-800 rounded-full px-4 py-2 text-slate-300">🏙️ Code for Boston</span>
<span class="bg-slate-900 border border-slate-800 rounded-full px-4 py-2 text-slate-300">🌽 Code for Nebraska</span>
<span class="bg-slate-900 border border-slate-800 rounded-full px-4 py-2 text-slate-300">👨‍👩‍👧 Family time</span>
<span class="bg-slate-900 border border-slate-800 rounded-full px-4 py-2 text-slate-300">📵 Trying to get people off social media</span>
</div>
</section>

<!-- Favorite quotes -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-8">Guiding principles</h2>
<div class="space-y-6">
<blockquote class="border-l-4 border-sky-500 pl-5">
<p class="text-slate-300 italic mb-1">"The important thing is not to stop questioning."</p>
<footer class="text-slate-500 text-sm">— Albert Einstein</footer>
</blockquote>
<blockquote class="border-l-4 border-sky-500 pl-5">
<p class="text-slate-300 italic mb-1">"Done is better than perfect — because perfect never gets done."</p>
<footer class="text-slate-500 text-sm">— Sheryl Sandberg</footer>
</blockquote>
<blockquote class="border-l-4 border-sky-500 pl-5">
<p class="text-slate-300 italic mb-1">"Don't reinvent the wheel, just realign it."</p>
<footer class="text-slate-500 text-sm">— Anthony J. D'Angelo</footer>
</blockquote>
<blockquote class="border-l-4 border-sky-500 pl-5">
<p class="text-slate-300 italic mb-1">"Feedback is the breakfast of champions."</p>
<footer class="text-slate-500 text-sm">— Ken Blanchard</footer>
</blockquote>
<blockquote class="border-l-4 border-sky-500 pl-5">
<p class="text-slate-300 italic mb-1">"Unwritten words are forgotten."</p>
<footer class="text-slate-500 text-sm">On codifying decisions and documentation.</footer>
</blockquote>
</div>
</section>

</div>
</main>

<!-- Footer -->
<footer class="py-10 px-6 border-t border-slate-800">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-slate-500 text-sm">
<p class="font-mono">&gt; nitrocode</p>
Expand Down
112 changes: 81 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,12 @@ <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight mb-6">
<span class="block gradient-text mt-1">end&#8209;to&#8209;end.</span>
</h1>
<p class="text-xl sm:text-2xl text-slate-400 max-w-2xl mb-4 leading-relaxed">
Backend &middot; Frontend &middot; Infrastructure &middot; Security &middot; Scale
QA &middot; Automation &middot; Backend &middot; Frontend &middot; DevOps/SRE &middot; Security
</p>
<p class="text-lg text-slate-500 max-w-2xl mb-10 leading-relaxed">
I bring security thinking into every layer of the stack and leverage AI tooling to
move faster — from rapid prototyping to infra automation to threat modeling.
I've been on every side of the wall — which means I build systems that hold up under
scrutiny from QA, ops, and security alike. I bring that breadth to every layer of
the stack, from rapid prototyping to production hardening.
</p>
<div class="flex flex-wrap gap-4">
<a href="/projects/"
Expand All @@ -83,24 +84,37 @@ <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight mb-6">
</div>
</section>

<!-- Five-Pillar Skills -->
<!-- Skills Pillars -->
<section id="skills" class="py-24 px-6">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl font-bold mb-3">What I build</h2>
<p class="text-slate-400 mb-14 text-lg">Five pillars, one engineer.</p>
<p class="text-slate-400 mb-14 text-lg">Every layer of the stack — from day one.</p>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-5">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">

<!-- QA & Testing -->
<div class="pillar-card bg-slate-900 border border-slate-800 rounded-2xl p-6 transition-transform duration-200">
<div class="text-3xl mb-4">🧪</div>
<h3 class="text-lg font-bold mb-3 text-slate-100">QA &amp; Testing</h3>
<ul class="space-y-1 text-sm text-slate-400">
<li>Jasmine, Siesta, mocha</li>
<li>Terratest, OPA Rego</li>
<li>Scapy (packet testing)</li>
<li>Integration &amp; E2E</li>
<li>Failure mode analysis</li>
</ul>
</div>

<!-- Backend -->
<div class="pillar-card bg-slate-900 border border-slate-800 rounded-2xl p-6 transition-transform duration-200">
<div class="text-3xl mb-4">⚙️</div>
<h3 class="text-lg font-bold mb-3 text-slate-100">Backend</h3>
<ul class="space-y-1 text-sm text-slate-400">
<li>REST &amp; GraphQL APIs</li>
<li>Microservices</li>
<li>Data pipelines</li>
<li>Auth &amp; identity</li>
<li>Python, Go, Node</li>
<li>Python (Flask, Falcon, Django)</li>
<li>Go</li>
<li>Node.js / TypeScript (koa, Hapi)</li>
<li>Java (Spring Boot)</li>
<li>REST APIs, Microservices</li>
</ul>
</div>

Expand All @@ -109,24 +123,24 @@ <h3 class="text-lg font-bold mb-3 text-slate-100">Backend</h3>
<div class="text-3xl mb-4">🎨</div>
<h3 class="text-lg font-bold mb-3 text-slate-100">Frontend</h3>
<ul class="space-y-1 text-sm text-slate-400">
<li>React / SPAs</li>
<li>Responsive UI</li>
<li>React / TypeScript</li>
<li>jQuery, Bootstrap</li>
<li>Tailwind CSS</li>
<li>D3.js</li>
<li>Component systems</li>
<li>Performance</li>
<li>Accessibility</li>
</ul>
</div>

<!-- Infrastructure -->
<!-- Infrastructure / DevOps -->
<div class="pillar-card bg-slate-900 border border-slate-800 rounded-2xl p-6 transition-transform duration-200">
<div class="text-3xl mb-4">🏗️</div>
<h3 class="text-lg font-bold mb-3 text-slate-100">Infrastructure</h3>
<h3 class="text-lg font-bold mb-3 text-slate-100">DevOps / SRE</h3>
<ul class="space-y-1 text-sm text-slate-400">
<li>Terraform / OpenTofu</li>
<li>AWS / GCP</li>
<li>CI/CD pipelines</li>
<li>Docker &amp; Kubernetes</li>
<li>GitOps</li>
<li>AWS (EKS, ECS, Lambda, SSO, WAF…)</li>
<li>Packer, Atlantis, Spacelift</li>
<li>GitHub Actions, Buildkite, Jenkins</li>
<li>Docker, Kubernetes, Helm</li>
</ul>
</div>

Expand All @@ -135,10 +149,10 @@ <h3 class="text-lg font-bold mb-3 text-slate-100">Infrastructure</h3>
<div class="text-3xl mb-4">🔐</div>
<h3 class="text-lg font-bold mb-3 text-slate-100">Security</h3>
<ul class="space-y-1 text-sm text-slate-400">
<li>AppSec &amp; DevSecOps</li>
<li>Threat modeling</li>
<li>SAST / DAST</li>
<li>Policy as code</li>
<li>OPA / Conftest / Gatekeeper</li>
<li>CloudCustodian, SCPs</li>
<li>tflint, tfsec / trivy, checkov</li>
<li>Burp Suite, SAST / DAST</li>
<li>Secrets management</li>
</ul>
</div>
Expand All @@ -148,20 +162,35 @@ <h3 class="text-lg font-bold mb-3 text-slate-100">Security</h3>
<div class="text-3xl mb-4">📈</div>
<h3 class="text-lg font-bold mb-3 text-slate-100">Scale</h3>
<ul class="space-y-1 text-sm text-slate-400">
<li>System architecture</li>
<li>Reliability / SLOs</li>
<li>Observability</li>
<li>Cost optimization</li>
<li>On-call / incidents</li>
<li>Datadog, ELK stack</li>
<li>ADRs &amp; runbooks</li>
<li>SLOs, cost optimization</li>
<li>Incident response</li>
<li>150M+ req/mo systems</li>
</ul>
</div>

</div>
</div>
</section>

<!-- AI -->
<!-- Cross-discipline -->
<section class="py-16 px-6 border-y border-slate-800 bg-slate-900/40">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-6">
<div class="text-5xl">🧱</div>
<div>
<h2 class="text-xl font-bold mb-2">Every side of the wall</h2>
<p class="text-slate-400 max-w-2xl">
QA → automation → dev → full stack → DevOps/SRE → security. That full arc means
I understand the friction between teams because I've felt it from every seat.
I build systems that hold up under scrutiny from all of them.
</p>
</div>
</div>
</section>

<!-- AI -->
<section class="py-16 px-6 border-b border-slate-800 bg-slate-900/20">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-6">
<div class="text-5xl">🤖</div>
<div>
Expand All @@ -175,6 +204,27 @@ <h2 class="text-xl font-bold mb-2">AI-augmented engineering</h2>
</div>
</section>

<!-- Favorite tools -->
<section class="py-12 px-6 border-b border-slate-800">
<div class="max-w-6xl mx-auto">
<p class="font-mono text-sky-400 text-xs uppercase tracking-widest mb-5">Daily tools</p>
<div class="flex flex-wrap gap-2 text-xs font-mono text-slate-400">
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">terraform</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">awscli</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">github actions</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">spacelift</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">datadog</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">pre-commit</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">Makefile</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">atmos</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">geodesic</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">vscode / github.dev</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">ADRs</span>
<span class="bg-slate-900 border border-slate-800 px-3 py-1 rounded">linters</span>
</div>
</div>
</section>

<!-- Latest from Blog -->
<section class="py-24 px-6">
<div class="max-w-6xl mx-auto">
Expand Down
Loading