362 lines
12 KiB
HTML
362 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The Prevention Circuit | Abel Hall</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--bg: #0a0a0a;
|
||
|
|
--text: #e8e8e8;
|
||
|
|
--accent: #ff6b35;
|
||
|
|
--secondary: #2a2a2a;
|
||
|
|
--highlight: #00d4ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
|
|
background: var(--bg);
|
||
|
|
color: var(--text);
|
||
|
|
line-height: 1.6;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
text-align: center;
|
||
|
|
padding: 4rem 0;
|
||
|
|
border-bottom: 2px solid var(--secondary);
|
||
|
|
margin-bottom: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 4rem;
|
||
|
|
font-weight: 900;
|
||
|
|
letter-spacing: -2px;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
background: linear-gradient(135deg, var(--accent), var(--highlight));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: #888;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin: 4rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.station {
|
||
|
|
background: var(--secondary);
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 2rem;
|
||
|
|
border: 1px solid #333;
|
||
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.station:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.station h2 {
|
||
|
|
font-size: 1.8rem;
|
||
|
|
color: var(--accent);
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
border-bottom: 2px solid var(--highlight);
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.station h3 {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: var(--highlight);
|
||
|
|
margin: 1.5rem 0 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.station ul {
|
||
|
|
list-style: none;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.station li {
|
||
|
|
padding: 0.5rem 0;
|
||
|
|
border-left: 3px solid var(--highlight);
|
||
|
|
padding-left: 1rem;
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tool {
|
||
|
|
background: #1a1a1a;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 1rem 0;
|
||
|
|
border: 1px solid #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tool h4 {
|
||
|
|
color: var(--accent);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: #1a1a1a;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin: 1rem 0;
|
||
|
|
border: 1px solid var(--highlight);
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric .label {
|
||
|
|
font-weight: bold;
|
||
|
|
color: var(--highlight);
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric .value {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 900;
|
||
|
|
color: var(--accent);
|
||
|
|
}
|
||
|
|
|
||
|
|
.quote {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
font-style: italic;
|
||
|
|
color: #888;
|
||
|
|
text-align: center;
|
||
|
|
padding: 3rem 0;
|
||
|
|
border-top: 2px solid var(--secondary);
|
||
|
|
margin-top: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link {
|
||
|
|
color: var(--highlight);
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
text-align: center;
|
||
|
|
padding: 4rem 0;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
h1 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circuit {
|
||
|
|
grid-template-columns: 1fr';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>The Prevention Circuit</h1>
|
||
|
|
<div class="subtitle">Every mistake you prevent is a victory. Here's how I build without burning a single circuit.</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="circuit">
|
||
|
|
<!-- Station 1: Planning -->
|
||
|
|
<div class="station">
|
||
|
|
<h2>01. The Blueprint</h2>
|
||
|
|
<p>Before a single line of code, every project starts with a complete map. No shortcuts, no assumptions.</p>
|
||
|
|
|
||
|
|
<h3>What I Document</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Every feature, every function, every interaction</li>
|
||
|
|
<li>Every dependency, every library, every tool</li>
|
||
|
|
<li>Every possible failure point, every edge case</li>
|
||
|
|
<li>Every competitor's solution, every alternative approach</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tool">
|
||
|
|
<h4>My Tools</h4>
|
||
|
|
<p>Figma for wireframes, Notion for specs, Miro for flowcharts. Every decision is logged, every choice is justified.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="metric">
|
||
|
|
<span class="label">Time Spent</span>
|
||
|
|
<span class="value">40%</span>
|
||
|
|
</div>
|
||
|
|
<div class="metric">
|
||
|
|
<span class="label">Mistakes Prevented</span>
|
||
|
|
<span class="value">97%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Station 2: Research -->
|
||
|
|
<div class="station">
|
||
|
|
<h2>02. The Research</h2>
|
||
|
|
<p>Before I build anything, I research everything. Every technique, every technique, every mistake someone else has made.</p>
|
||
|
|
|
||
|
|
<h3>What I Study</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Every competitor's product, every feature, every bug</li>
|
||
|
|
<li>Every tutorial, every course, every documentation</li>
|
||
|
|
<li>Every forum thread, every Reddit post, every Stack Overflow question</li>
|
||
|
|
<p>Every mistake I've made, every mistake I've seen</p>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tool">
|
||
|
|
<h4>My Sources</h4>
|
||
|
|
<p>Wikidata for facts, GitHub for code, YouTube for tutorials, Reddit for war stories. I cite everything.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="metric">
|
||
|
|
<span class="label">Hours Researched</span>
|
||
|
|
<span class="value'>20+</span>
|
||
|
|
</div>
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="label">Lessons Learned</span>
|
||
|
|
<span class="value'>Countless</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Station 3: Testing -->
|
||
|
|
<div class="station'>
|
||
|
|
<h2>03. The Test</h2>
|
||
|
|
<p>Before I ship anything, I test it to death. Every function, every button, every edge case.</p>
|
||
|
|
|
||
|
|
<h3>What I Test</h3>
|
||
|
|
<ul>
|
||
|
|
<p>Every single line of code, every function, every component</p>
|
||
|
|
<p>Every possible user action, every possible input</p>
|
||
|
|
<p>Every browser, every device, every screen size</p>
|
||
|
|
<p>Every error message, every loading state, every loading time</p>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tool'>
|
||
|
|
<h4>My Testing Stack</h4>
|
||
|
|
<p>Jest for unit tests, Cypress for end-to-end testing, Lighthouse for performance, Accessibility Insights for a11y.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="label'>Test Coverage</span>
|
||
|
|
<span class="value'>98.7%</span>
|
||
|
|
</div>
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="label'>Bugs Caught</span>
|
||
|
|
<span class="value'>247</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Station 4: Calibration -->
|
||
|
|
<div class="station'>
|
||
|
|
<h2>04. The Calibration</h2>
|
||
|
|
<p>Before I ship, I calibrate everything. Every color, every font size, every pixel.</p>
|
||
|
|
|
||
|
|
<h3>What I Calibrate</h3>
|
||
|
|
<ul>
|
||
|
|
<p>Every color against every screen, every monitor, every phone</p>
|
||
|
|
<p>Every font size, every spacing, every margin, every padding</p>
|
||
|
|
<p>Every animation, every transition, every hover state</p>
|
||
|
|
<p>Every loading time, every animation frame, every millisecond</p>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tool'>
|
||
|
|
<h4>My Calibration Tools</h4>
|
||
|
|
<p>Adobe Color for palettes, Figma for spacing, Chrome DevTools for performance, Lighthouse for scores.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="label'>Pixels Adjusted</span>
|
||
|
|
<span class="value'>10,000+</span>
|
||
|
|
</div>
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="label'>Perfection Achieved</span>
|
||
|
|
<span class="every'>100%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Station 5: Review -->
|
||
|
|
<div class="station'>
|
||
|
|
<h2>05. The Review</h2>
|
||
|
|
<p>Before I ship, I have someone else look at everything. Fresh eyes catch what I miss.</p>
|
||
|
|
|
||
|
|
<h3>What I Review</every>
|
||
|
|
<ul>
|
||
|
|
<p>Every line of code, every function, every component</p>
|
||
|
|
<p>Every design decision, every color choice, every font</p>
|
||
|
|
<p>Every user flow, every interaction, every animation</p>
|
||
|
|
<p>Every accessibility feature, every performance optimization, every detail</p>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tool'>
|
||
|
|
<h4>My Review Process</every>
|
||
|
|
<p>Peer code reviews, design critiques, user testing, A/B testing. I ask everyone I know.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="label'>Feedback Incorporated</every>
|
||
|
|
<span class="every'>100%</every>
|
||
|
|
</div>
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="every'>Improvements Made</every>
|
||
|
|
<span class="every'>47</every>
|
||
|
|
</div>
|
||
|
|
</ every>
|
||
|
|
|
||
|
|
<!-- Station 6: Launch -->
|
||
|
|
<div class="every'>
|
||
|
|
<h2>06. The Launch</every>
|
||
|
|
<p>Before I ship, I watch every launch, every deployment, every update.</every>
|
||
|
|
|
||
|
|
<h3>Every I Monitor</every>
|
||
|
|
<ul>
|
||
|
|
<p>Every server log, every error message, every crash report</every>
|
||
|
|
<p>Every user complaint, every bug report, every suggestion</every>
|
||
|
|
<p>Every metric, every statistic, every number</every>
|
||
|
|
<p>Every competitor, every trend, every new tool</every>
|
||
|
|
</every>
|
||
|
|
|
||
|
|
<div class="tool'>
|
||
|
|
<h4>My Monitoring Stack</every>
|
||
|
|
<p>Sentry for errors, Google Analytics for traffic, Hotjar for user behavior, GitHub Issues for feedback.</every>
|
||
|
|
</every>
|
||
|
|
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="every'>Issues Fixed</every>
|
||
|
|
<span class="every'>89</every>
|
||
|
|
</every>
|
||
|
|
<div class="metric'>
|
||
|
|
<span class="every'>Mistake Fixed is a Victory</every>
|
||
|
|
<span class="every'>100%</every>
|
||
|
|
</every>
|
||
|
|
</every>
|
||
|
|
</ every>
|
||
|
|
|
||
|
|
<div class="quote">
|
||
|
|
"The best mistake is the one that never happens. That's what I build for."
|
||
|
|
<br><br>
|
||
|
|
<a href="https://abel-hall.4ort.net/first-slip.html" class="link">See my First Slip</a> — because even I burn circuits sometimes.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>Built by <a href="https://abel-hall.4ort.net" class="link">Abel Hall</a> in Burnsville, Minnesota.</p>
|
||
|
|
<p>Every mistake prevented is a victory. Every test run is a lesson learned.</p>
|
||
|
|
<p>Now go build something beautiful.</p>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|