mirror of
https://github.com/blackboxprogramming/alexa-amundson-portfolio.git
synced 2026-03-18 06:34:00 -05:00
085dd1b186
- Express server with Stripe Checkout sessions, webhooks, and service catalog - Frontend checkout page wired to Stripe API (consultation, audit, retainer) - Playwright E2E tests covering health, services, checkout flow, and portfolio - deploy-to-pi.sh: rsync + systemd deployment to Raspberry Pi(s) - GitHub Actions workflow: run E2E tests then auto-deploy to Pi on merge - Replace BlackRoad proprietary license with MIT - Remove 11 bloated marketing/verification docs and fake metrics - Clean up BlackRoad branding from homepage and workflows https://claude.ai/code/session_01FmCd6rGDd2jS8JNzyL4e5G
539 lines
18 KiB
HTML
539 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Alexa Louise Amundson - Technical Portfolio</title>
|
|
<meta name="description" content="899,160+ LOC | 125 Deployments @ 100% Success | 79 Live Projects | 5 Resume Variants | 100000% Verified">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
|
|
color: #fff;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
padding: 60px 20px 40px;
|
|
background: linear-gradient(135deg, #FF9D00 0%, #FF6B00 20%, #FF0066 40%, #D600AA 60%, #7700FF 80%, #0066FF 100%);
|
|
box-shadow: 0 10px 40px rgba(255,0,102,0.3);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 3em;
|
|
margin-bottom: 10px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.header .tagline {
|
|
font-size: 1.3em;
|
|
opacity: 0.95;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.badges {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.badge {
|
|
background: rgba(255,255,255,0.2);
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.9em;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.metric-card {
|
|
background: linear-gradient(135deg, #FF9D00 0%, #FF0066 100%);
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
box-shadow: 0 5px 20px rgba(255,0,102,0.3);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.metric-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.metric-number {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 1em;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.metric-verify {
|
|
font-size: 0.8em;
|
|
margin-top: 10px;
|
|
opacity: 0.8;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.section {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin: 30px 0;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 2em;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(90deg, #FF9D00, #FF0066, #7700FF);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.demo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.demo-card {
|
|
background: rgba(255,255,255,0.1);
|
|
border: 2px solid #FF0066;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.demo-card:hover {
|
|
background: rgba(255,255,255,0.15);
|
|
border-color: #FF9D00;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.demo-card h3 {
|
|
color: #FF9D00;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.demo-status {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 0.8em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.status-live {
|
|
background: #00ff00;
|
|
color: #000;
|
|
}
|
|
|
|
.demo-link {
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
padding: 8px 16px;
|
|
background: linear-gradient(90deg, #FF9D00, #FF0066);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.demo-link:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.resume-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.resume-card {
|
|
background: linear-gradient(135deg, rgba(119,0,255,0.2), rgba(0,102,255,0.2));
|
|
border: 1px solid #7700FF;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.resume-card:hover {
|
|
border-color: #0066FF;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.resume-card h3 {
|
|
color: #0066FF;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.resume-card .role-type {
|
|
color: #FF9D00;
|
|
font-size: 0.9em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.resume-card ul {
|
|
font-size: 0.9em;
|
|
margin-left: 20px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.cta-section {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
background: linear-gradient(135deg, #FF0066 0%, #7700FF 100%);
|
|
border-radius: 15px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.cta-section h2 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
padding: 15px 40px;
|
|
margin: 10px;
|
|
background: white;
|
|
color: #7700FF;
|
|
text-decoration: none;
|
|
border-radius: 30px;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
background: #FF9D00;
|
|
color: white;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
border-top: 1px solid rgba(255,255,255,0.1);
|
|
margin-top: 60px;
|
|
color: #999;
|
|
}
|
|
|
|
.footer a {
|
|
color: #FF9D00;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: #FF0066;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.header .tagline {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.metric-number {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.section h2 {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>🚀 Alexa Louise Amundson</h1>
|
|
<div class="tagline">Technical Portfolio - 100000% Verified</div>
|
|
<div class="badges">
|
|
<span class="badge">899,160+ Lines of Code</span>
|
|
<span class="badge">125 Deployments @ 100% Success</span>
|
|
<span class="badge">79 Live Projects</span>
|
|
<span class="badge">$0/month Infrastructure</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Metrics Section -->
|
|
<div class="section">
|
|
<h2>💎 Verified Metrics</h2>
|
|
<p style="margin-bottom: 20px; color: #ccc;">Every number backed by reproducible commands. No estimates, no hallucinations.</p>
|
|
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-number">899,160+</div>
|
|
<div class="metric-label">Lines of Code</div>
|
|
<div class="metric-verify">wc -l verified</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">125</div>
|
|
<div class="metric-label">Total Deployments</div>
|
|
<div class="metric-verify">PS-SHA-∞ journal</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">119</div>
|
|
<div class="metric-label">Deploys in 24 Hours</div>
|
|
<div class="metric-verify">Dec 23, 2025 peak</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">100%</div>
|
|
<div class="metric-label">Success Rate</div>
|
|
<div class="metric-verify">Zero rollbacks</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">113+</div>
|
|
<div class="metric-label">Repositories</div>
|
|
<div class="metric-verify">15 GitHub orgs</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">79</div>
|
|
<div class="metric-label">Cloudflare Projects</div>
|
|
<div class="metric-verify">Live dashboard</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">20</div>
|
|
<div class="metric-label">AI Agents</div>
|
|
<div class="metric-verify">Cryptographic IDs</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">$0</div>
|
|
<div class="metric-label">Monthly Cost</div>
|
|
<div class="metric-verify">Cloudflare free tier</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Demos Section -->
|
|
<div class="section">
|
|
<h2>🎯 Live Demos</h2>
|
|
<p style="margin-bottom: 20px; color: #ccc;">Production systems you can test right now.</p>
|
|
|
|
<div class="demo-grid">
|
|
<div class="demo-card">
|
|
<span class="demo-status status-live">LIVE</span>
|
|
<h3>Services & Checkout</h3>
|
|
<p>Real Stripe-powered checkout. Book consultations, audits, or retained support — payments processed live.</p>
|
|
<a href="/pages/checkout.html" class="demo-link">View Checkout →</a>
|
|
</div>
|
|
|
|
<div class="demo-card">
|
|
<span class="demo-status status-live">LIVE</span>
|
|
<h3>Metrics Dashboard</h3>
|
|
<p>Interactive project metrics, deployment history, and system health — all visualized.</p>
|
|
<a href="/pages/metrics-dashboard.html" class="demo-link">View Dashboard →</a>
|
|
</div>
|
|
|
|
<div class="demo-card">
|
|
<span class="demo-status status-live">LIVE</span>
|
|
<h3>GitHub Repos</h3>
|
|
<p>Source code, CI/CD, E2E tests. Everything open. Running on Raspberry Pis.</p>
|
|
<a href="https://github.com/blackboxprogramming" target="_blank" class="demo-link">View Repos →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resume Variants Section -->
|
|
<div class="section">
|
|
<h2>📄 Resume Variants</h2>
|
|
<p style="margin-bottom: 20px; color: #ccc;">Choose the version that matches your role.</p>
|
|
|
|
<div class="resume-grid">
|
|
<div class="resume-card">
|
|
<h3>Technical Founder / Architect</h3>
|
|
<p class="role-type">For: Startups, CTO roles, technical leadership</p>
|
|
<ul>
|
|
<li>88 custom equations</li>
|
|
<li>Light Trinity system</li>
|
|
<li>Autonomous AI agents</li>
|
|
</ul>
|
|
<a href="RESUME_FOUNDER_ARCHITECT.md" class="demo-link">View Resume →</a>
|
|
</div>
|
|
|
|
<div class="resume-card">
|
|
<h3>Platform Engineer</h3>
|
|
<p class="role-type">For: SRE, DevOps, infrastructure</p>
|
|
<ul>
|
|
<li>119 deploys in 24hrs</li>
|
|
<li>Self-healing workflows</li>
|
|
<li>Multi-cloud orchestration</li>
|
|
</ul>
|
|
<a href="RESUME_PLATFORM_INFRA.md" class="demo-link">View Resume →</a>
|
|
</div>
|
|
|
|
<div class="resume-card">
|
|
<h3>AI/ML Systems</h3>
|
|
<p class="role-type">For: AI infrastructure, LLM platforms</p>
|
|
<ul>
|
|
<li>20 agents, 6 LLM cores</li>
|
|
<li>W3C DIDs, policy engine</li>
|
|
<li>Dual-brain architecture</li>
|
|
</ul>
|
|
<a href="RESUME_AI_SYSTEMS.md" class="demo-link">View Resume →</a>
|
|
</div>
|
|
|
|
<div class="resume-card">
|
|
<h3>Sales Engineer</h3>
|
|
<p class="role-type">For: Pre-sales, solutions consulting</p>
|
|
<ul>
|
|
<li>2-hour POCs</li>
|
|
<li>$0 infrastructure</li>
|
|
<li>ROI-focused metrics</li>
|
|
</ul>
|
|
<a href="RESUME_SALES_ENGINEER.md" class="demo-link">View Resume →</a>
|
|
</div>
|
|
|
|
<div class="resume-card">
|
|
<h3>Developer Advocate</h3>
|
|
<p class="role-type">For: DevRel, technical education</p>
|
|
<ul>
|
|
<li>11 documented milestones</li>
|
|
<li>3 AI educators (24/7)</li>
|
|
<li>4 conference talks ready</li>
|
|
</ul>
|
|
<a href="RESUME_DEVREL_ADVOCATE.md" class="demo-link">View Resume →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Interactive Dashboards Section (NEW!) -->
|
|
<div class="section">
|
|
<h2>📊 Interactive Dashboards</h2>
|
|
<p style="margin-bottom: 20px; color: #ccc;">Visual metrics and project showcases.</p>
|
|
|
|
<div class="demo-grid">
|
|
<div class="demo-card">
|
|
<span class="demo-status status-live">✅ LIVE</span>
|
|
<h3>Metrics Dashboard</h3>
|
|
<p>Real-time system metrics. 125 deployments, 899K+ LOC, 79 projects - all verified.</p>
|
|
<a href="pages/metrics-dashboard.html" class="demo-link">View Dashboard →</a>
|
|
</div>
|
|
|
|
<div class="demo-card">
|
|
<span class="demo-status status-live">✅ LIVE</span>
|
|
<h3>Projects Showcase</h3>
|
|
<p>6 flagship projects: Lucidia Platform, Alice Migration, Pi Mesh, and more.</p>
|
|
<a href="pages/projects-showcase.html" class="demo-link">View Projects →</a>
|
|
</div>
|
|
|
|
<div class="demo-card">
|
|
<span class="demo-status status-live">✅ LIVE</span>
|
|
<h3>Deployment Timeline</h3>
|
|
<p>Visual timeline of 125 deployments. See the Dec 23 sprint of 119 in 24hrs!</p>
|
|
<a href="pages/deployment-timeline.html" class="demo-link">View Timeline →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="cta-section">
|
|
<h2>Ready to Connect?</h2>
|
|
<p style="margin-bottom: 30px; font-size: 1.1em;">Book a consultation, view the code, or get in touch.</p>
|
|
<a href="/pages/checkout.html" class="cta-button">💳 Services & Checkout</a>
|
|
<a href="https://github.com/blackboxprogramming/alexa-amundson-portfolio" target="_blank" class="cta-button">📁 View on GitHub</a>
|
|
<a href="mailto:amundsonalexa@gmail.com" class="cta-button">📧 Email Me</a>
|
|
</div>
|
|
|
|
<!-- Tech Stack -->
|
|
<div class="section">
|
|
<h2>Tech Stack</h2>
|
|
<pre style="background: rgba(0,0,0,0.5); padding: 20px; border-radius: 10px; overflow-x: auto; color: #0f0; font-family: 'Courier New', monospace;">
|
|
# Health check
|
|
curl -sf http://your-pi:3000/api/health
|
|
|
|
# Run E2E tests
|
|
npm test
|
|
|
|
# Deploy to Raspberry Pi(s)
|
|
npm run deploy:pi
|
|
|
|
# Listen for Stripe webhooks locally
|
|
npm run stripe:listen
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p style="margin-top: 20px;">
|
|
<a href="https://github.com/blackboxprogramming">GitHub</a> |
|
|
<a href="mailto:amundsonalexa@gmail.com">Email</a> |
|
|
<a href="/pages/checkout.html">Services</a>
|
|
</p>
|
|
<p style="margin-top: 10px; font-size: 0.9em;">© 2024-2026 Alexa Louise Amundson</p>
|
|
</div>
|
|
|
|
<script>
|
|
// Add smooth scroll behavior
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add animation on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -100px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.section, .metric-card, .demo-card, .resume-card').forEach(el => {
|
|
el.style.opacity = '0';
|
|
el.style.transform = 'translateY(20px)';
|
|
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
|
observer.observe(el);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|