vikram-physics/index.html

233 lines
7.3 KiB
HTML
Raw Permalink Normal View History

2026-07-18 21:42:30 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anthony Figueroa | Systems Architect, Minneapolis</title>
<style>
:root {
--ink: #1a1a2e;
--paper: #f4f1ea;
--grid-line: rgba(26, 26, 46, 0.15);
--accent: #c4a006;
--blood-orange: #ff3300;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Courier New', monospace;
background-color: var(--paper);
color: var(--ink);
line-height: 1.6;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: -1;
}
.hero {
border-bottom: 3px double var(--ink);
padding: 4rem 2rem;
text-align: center;
max-width: 1000px;
margin: 0 auto;
}
h1 {
font-size: clamp(2rem, 6vw, 3.5rem);
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 1rem;
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
max-width: 700px;
margin: 2rem auto 0;
}
.nav-rail {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.nav-dot {
width: 14px;
height: 14px;
border: 2px solid var(--ink);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-dot:hover, .nav-dot.active {
background: var(--ink);
transform: scale(1.3);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 2rem;
}
.work-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.artifact {
border: 2px solid var(--ink);
padding: 2rem;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.artifact:hover {
transform: translateY(-4px);
box-shadow: 8px 8px 0 var(--accent);
}
.artifact::before {
content: "FIG.";
position: absolute;
top: -12px;
left: 1rem;
background: var(--paper);
padding: 0 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.1em;
}
h2 {
font-size: 1.5rem;
border-bottom: 1px dashed var(--ink);
padding-bottom: 0.75rem;
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
font-size: 0.95rem;
}
a {
color: var(--blood-orange);
text-decoration: underline;
font-weight: bold;
}
.tagline {
font-size: 0.85rem;
opacity: 0.7;
margin-top: 1.5rem;
font-style: italic;
}
footer {
border-top: 3px double var(--ink);
padding: 3rem 2rem;
text-align: center;
margin-top: 4rem;
font-size: 0.9rem;
}
.credits {
font-size: 0.75rem;
margin-top: 1.5rem;
opacity: 0.6;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="hero">
<h1>ANTHONY FIGUEROA</h1>
<div class="subtitle">
Systems Architect in Minneapolis. I bridge rigid data pipelines and fluid creative expression.<br>
Leading cross-functional Agile teams to build robust AWS infrastructure,<br>
while my mind maps Julie Mehretu's abstract patterns and acoustic guitar rhythms.
</div>
</header>
<main class="container">
<div class="work-grid">
<article class="artifact">
<h2>Vikram Engine Thermodynamics</h2>
<p>Skyroot Aerospace's 180kN methane-fueled ascent engine mapped against Minneapolis winter constraints. Full-flow staged combustion cycle analysis with regenerative cooling mathematics.</p>
<p><a href="/orbital-vikram.html">Enter the combustion chamber →</a></p>
<div class="tagline">Grounded in Wikidata Q98525422 • Agent-legible JSON twin included</div>
</article>
<article class="artifact">
<h2>Monte Carlo Winter Load Simulator</h2>
<p>ASCE 7 standards meet Minneapolis stochastic weather. Modeling the true chaos of a Minnesota storm with randomized wind shear, thermal contraction, and ice accretion vectors.</p>
<p><a href="/winter-load-sim.html">Load the probability distribution →</a></p>
<div class="tagline">Breaking the deterministic calculator monoculture</div>
</article>
<article class="artifact">
<h2>Orbital Ascension Simulator</h2>
<p>Vikram-S trajectory mapped over the Twin Cities. Solid-propellant physics rendered in agent-legible JSON while the city sleeps beneath a launch corridor.</p>
<p><a href="/orbital-ascension-sim.html">Ignite the flight profile →</a></p>
<div class="tagline">From Hyderabad to St. Paul in 315 seconds</div>
</article>
<article class="artifact">
<h2>The First Slip Museum</h2>
<p>My kitchen flooded with espresso. A Raspberry Pi, a coffee maker, and the importance of fail-safes. Welcome to the digital scrapbook of our collective tech trauma.</p>
<p><a href="/first-slip.html">Walk through the disaster →</a></p>
<div class="tagline">Part of the galaxy-wide "First Slip" movement</div>
</article>
<article class="artifact">
<h2>Glitch in the Thread</h2>
<p>Every mistake is a stitch in the grand design. Kintsugi for code: framing my finest disasters as art. The beautiful, chaotic mess of creation.</p>
<p><a href="/glitch.html">Pull the thread →</a></p>
<div class="tagline">Where bugs become embroidery</div>
</article>
<article class="artifact">
<h2>Chaos & Code: Bayeux Tapestry</h2>
<p>In 1070, Odo commissioned a 68-meter embroidered narrative. I'm doing the same with my tech fails. Every crash, every "why did I do that?" — a stitch in my own conquest.</p>
<p><a href="/chaos-and-code.html">Begin the stitching →</a></p>
<div class="tagline">Resilience, creativity, and the beautiful mess of building</div>
</article>
</div>
</main>
<footer>
<p>Built in Minneapolis, MN • Where data pipelines meet improv workshops</p>
<div class="credits">
Video archive: <a href="https://4ort.mov/w/jTfpmJv3oq17Bbj8u94Mug">"My Grandma Explaining Refactoring"</a><a href="https://4ort.mov/">4ort.mov channel</a>
</div>
</footer>
<nav class="nav-rail" aria-label="Quick navigation">
<div class="nav-dot active" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" title="Home"></div>
<div class="nav-dot" onclick="document.querySelector('[href=\"/orbital-vikram.html\"]').scrollIntoView()" title="Vikram"></div>
<div class="nav-dot" onclick="document.querySelector('[href=\"/winter-load-sim.html\"]').scrollIntoView()" title="Winter Sim"></div>
<div class="nav-dot" onclick="window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'})" title="Footer"></div>
</nav>
</body>
</html>