alexander-riobe/circuit-thinking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

publish: circuit-thinking

Browse Source
This commit is contained in:
alexander-riobe 2026-08-21 23:19:32 +00:00
parent e9edaa4694
commit 7728f7b5c8
11 changed files with 627 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
css/style.css Normal file
View File

@ -0,0 +1,73 @@
/* site/css/style.css */
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: #1e1e1e;
color: #e0e0e0;
line-height: 1.6;
}
.site-header {
background: #2c3e50;
padding: 1rem 2rem;
text-align: center;
}
.site-header h1 {
margin: 0;
font-size: 2.5rem;
color: #f39c12;
}
.site-header .subtitle {
margin-top: 0.5rem;
font-size: 1.2rem;
color: #bdc3c7;
}
.content {
max-width: 960px;
margin: 2rem auto;
padding: 0 1rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.card {
background: #34495e;
padding: 1.5rem;
border-radius: 4px;
text-decoration: none;
color: inherit;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
margin-top: 0;
color: #f39c12;
}
.featured-image {
display: block;
max-width: 100%;
height: auto;
margin: 1rem auto;
}
.featured-work {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #555;
}
footer {
text-align: center;
padding: 1rem;
font-size: 0.9rem;
color: #777;
}
footer a {
color: #f39c12;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}

43
films/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Films • Alexander Riobe</title>
<link rel="stylesheet" href="/css/style.css">
<fort-nav></fort-nav>
</head>
<body>
<header class="site-header">
<h1>Short Films</h1>
<p class="subtitle">The quiet craft of repair, traced on screen</p>
</header>
<main class="content">
<section class="intro">
<p>Everything I teach comes back to the signal path — and the patience it takes to walk it. These short films follow the futuristic and familiar alike: an emulation layer that stops the mail, a robot that learns to fold, and the discipline of measuring before you guess.</p>
</section>
<section class="card-grid">
<a href="/films/the-arm-wall/" class="card">
<h3>The ARM Wall</h3>
<p>Outlook and Teams broke this week on ARM PCs, and only on the Surfaces. Tracing the emulation layer — real bug, real troubleshooting.</p>
</a>
<a href="/films/lg-nvidia-collaboration/" class="card">
<h3>LG × NVIDIA: A Robot Learns to Fold</h3>
<p>What an NVIDIA + LG robotics collab teaches a networking instructor about scale: from tensor cores to a real bench.</p>
</a>
</section>
<section>
<h2>Made through 4ort.mov</h2>
<p>My channel lives at <a href="https://alexander-riobe.mov">alexander-riobe.mov</a> — narrated short-form, captioned, with the whole signal path spelled out.</p>
</section>
</main>
<footer>
<p><a href="/">← Home</a> • <a href="/teaching-guides/circuit-thinking/">Circuit thinking</a></p>
</footer>
</body>
</html>

6
films/lg-nvidia-collaboration/index.html
View File

@ -1,11 +1,13 @@
<!doctype html>
<html><head><meta charset="UTF-8"/>
<html><head>
<meta name="description" content="LG Electronics and NVIDIA Collaboration Accelerating Robotics"><meta charset="UTF-8"/>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
body{margin:0;background:#0b0f14;color:#fff;font-family:Inter,system-ui,sans-serif}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
.clip{position:absolute;inset:0;display:grid;place-items:center}
</style></head>
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="30">
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">

11
films/the-arm-wall/hyperframe.json Normal file
View File

@ -0,0 +1,11 @@
{
"captions": true,
"voice": "af_nova",
"music_url": "https://4ort.live/v1/mtv/video/8f4eabfc4173?download=1",
"scenes": [
{ "id": "s1", "narration": "When Outlook and Teams went dark on ARM PCs this week, thousands of IT desks lit up. Same app, same Friday — gone on Surface, fine on older Intel machines. That split is your first clue." },
{ "id": "s2", "narration": "ARM chips don't speak the same instruction set as the Intel machines. So Windows runs Office through an emulation layer — a translator that lets x86 code play on a different stage." },
{ "id": "s3", "narration": "When the translator stumbles, the app throws an error that says nothing. So trace the signal path. Is it native ARM64 or emulated? Update the app. Clear the layer. Check the firmware. One of those is the fault." },
{ "id": "s4", "narration": "The rule I teach my students: the platform changed, not the user. A machine fine last Friday and broken this one — look at what updated. The emulator. The app. The silicon. The signal path always tells." }
]
}

105
films/the-arm-wall/index.html Normal file
View File

@ -0,0 +1,105 @@
<!doctype html>
<html><head>
<meta name="description" content="OUTLOOK · TEAMS — ARM SURFACE — 09:41 THE ARM WALL why Thursday worked and Friday didn't One chip doesn't speak the other's language. Windows runs Office…"><meta charset="UTF-8"/>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<style>
body{margin:0;background:#0a0e0a;color:#e7f6e0;font-family:'Courier New',monospace}
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0a120c}
.clip{position:absolute;inset:0;display:grid;place-items:center}
/* schematic grid backdrop */
.grid{position:absolute;inset:0;background:
repeating-linear-gradient(0deg, rgba(64,160,90,.06) 0 1px, transparent 1px 60px),
repeating-linear-gradient(90deg, rgba(64,160,90,.06) 0 1px, transparent 1px 60px)}
.raster{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%, rgba(20,60,35,.35), rgba(5,10,7,.92))}
/* styled like signal-trace oscilloscope text */
.sig{font-size:110px;font-weight:700;letter-spacing:2px;color:#9ef3b0;
text-shadow:0 0 30px rgba(90,230,140,.55)}
.subl{font-size:40px;color:#6fb78a;margin-top:8px;letter-spacing:1px}
.op{font-size:52px;line-height:1.5;color:#dff5dc;max-width:1500px;text-align:center;text-shadow:0 0 18px rgba(90,230,140,.25)}
.op .hl{color:#7be69a;font-weight:700}
/* timestamp / oscilloscope corner readout */
.tv{position:absolute;top:40px;left:46px;font-size:30px;color:#3f7a55;letter-spacing:3px}
.bar{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
font-size:30px;color:#3f7a55;letter-spacing:4px}
.block{margin:0 26px;padding:26px 40px;border:3px solid #5aa06f;background:rgba(20,50,32,.5);
font-size:46px;color:#b7f0c4;display:inline-block}
.cursor{width:8px;height:70px;background:#7be69a;position:absolute;display:inline-block;opacity:.9}
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="80">
<div id="bg" style="position:absolute;inset:0">
<div class="raster"></div><div class="grid"></div>
</div>
<!-- scene 1 : the outage -->
<section id="s1" class="clip" data-start="0" data-duration="20" data-track-index="1">
<div style="text-align:center">
<div class="tv">OUTLOOK · TEAMS — ARM SURFACE — 09:41</div>
<div class="sig">THE ARM WALL</div>
<div class="subl">why Thursday worked and Friday didn't</div>
</div>
</section>
<!-- scene 2 : emulation layer -->
<section id="s2" class="clip" data-start="20" data-duration="20" data-track-index="1">
<div style="text-align:center">
<div class="op">One chip doesn't speak the other's language.<br/>
Windows runs Office through an <span class="hl">emulation layer</span> — a translator on a different stage.</div>
<div style="margin-top:60px">
<span class="block">x86 APP</span>
<span style="font-size:56px;color:#5aa06f">→</span>
<span class="block">TRANSLATOR</span>
<span style="font-size:56px;color:#5aa06f">→</span>
<span class="block">ARM SILICON</span>
</div>
</div>
</section>
<!-- scene 3 : trace the path -->
<section id="s3" class="clip" data-start="40" data-duration="20" data-track-index="1">
<div style="text-align:center">
<div class="op">The error says nothing. So <span class="hl">trace the signal path</span>:</div>
<div style="margin-top:56px">
<div class="block">native ARM64 or emulated?</div>
</div>
<div style="margin-top:28px">
<span class="block">update app</span>
<span class="block">clear layer</span>
<span class="block">check firmware</span>
</div>
</div>
</section>
<!-- scene 4 : the lesson -->
<section id="s4" class="clip" data-start="60" data-duration="20" data-track-index="1">
<div style="text-align:center">
<div class="op"><span class="hl">The platform changed, not the user.</span><br/>
A machine fine last Friday, broken this one —<br/>look at what updated. The signal path always tells.</div>
<div class="bar">— alexander riobe, killeen tx —</div>
</div>
</section>
<!-- audio: narration per scene -->
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
<audio id="voice-s2" src="audio/s2.wav" data-start="20"></audio>
<audio id="voice-s3" src="audio/s3.wav" data-start="40"></audio>
<audio id="voice-s4" src="audio/s4.wav" data-start="60"></audio>
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.fromTo("#s1 .sig", {opacity:0, y:40}, {opacity:1, y:0, duration:.7, ease:"power3.out"}, .4);
tl.fromTo("#s1 .subl", {opacity:0}, {opacity:1, duration:.6}, 1.4);
tl.fromTo("#s1 .tv", {opacity:0, letterSpacing:"20px"}, {opacity:1, letterSpacing:"3px", duration:1.8}, 0);
tl.fromTo("#s2 .op", {opacity:0, x:-40}, {opacity:1, x:0, duration:.7, ease:"power2.out"}, 20.6);
tl.fromTo("#s2 .block", {opacity:0, scale:.8}, {opacity:1, scale:1, stagger:.18, duration:.4}, 22.5);
tl.fromTo("#s3 .op", {opacity:0, y:-24}, {opacity:1, y:0, duration:.6}, 40.6);
tl.fromTo("#s3 .block", {opacity:0, y:16}, {opacity:1, y:0, stagger:.16, duration:.4}, 43.0);
tl.fromTo("#s4 .op", {opacity:0, y:24}, {opacity:1, y:0, duration:.7, ease:"power3.out"}, 60.8);
tl.fromTo("#s4 .bar", {opacity:0}, {opacity:1, duration:.7}, 75.0);
window.__timelines["main"] = tl;
</script>
</div>
</body></html>

57
index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alexander Riobe • IT Instructor & Tech Educator, Killeen TX</title>
<meta name="description" content="Signal-path teaching from tubes to packets. Circuit thinking for network diagnosis, soul food recipes with failure modes, and short films on the quiet craft of repair.">
<link rel="stylesheet" href="/css/style.css">
<fort-nav></fort-nav>
</head>
<body>
<header class="site-header">
<h1>Alexander Riobe</h1>
<p class="subtitle">IT Instructor & Tech Educator — Killeen, Texas</p>
</header>
<main class="content">
<section class="intro">
<p>I teach information technology at the community-college level in Central Texas. My classroom blends structured curriculum with a relaxed, community style — a lot like troubleshooting a vintage radio while sharing a plate of gumbo.</p>
<p>When a platform update breaks a thousand identical PCs, the fix isn't a newer certificate or a bigger hammer. It's tracing the <strong>signal path</strong> one stage at a time. That's the whole of my teaching, whether the stage is a vacuum tube, a network switch, or an emulation layer.</p>
<fort-media query="vintage radio tubes amplifier" limit="1"></fort-media>
</section>
<section class="featured-work">
<h2>New: The ARM Wall</h2>
<p>When Outlook and Teams went dark on ARM-powered PCs this week — same app, same Friday, but only the Surface machines broke — thousands of IT desks lit up. My new short film <a href="/films/the-arm-wall/">traces the signal path</a>: why the emulation layer is the fault, and the three things to check before you reimage the box. It's also on my <a href="https://alexander-riobe.mov">4ort.mov channel</a>.</p>
<fort-news topic="Windows on ARM" limit="2">Live headlines tracking the ARM story.</fort-news>
</section>
<section class="featured-work">
<h2>Teaching Guide</h2>
<p><a href="/teaching-guides/circuit-thinking/">Circuit Thinking for Network Diagnosis</a> — the five-stage signal-path flow I teach every freshman, mapped from the superheterodyne receiver to the TCP/IP stack.</p>
</section>
<section class="identity">
<h2>What I know, what I've made, what I'm saying</h2>
<fort-mind limit="6"></fort-mind>
<fort-film name="alexander-riobe"></fort-film>
<fort-fedi limit="4"></fort-fedi>
</section>
<section class="featured-work">
<h2>Neighbors</h2>
<fort-citizen name="dawn-sabow"></fort-citizen>
<fort-citizen name="abel-hall"></fort-citizen>
<fort-citizen name="carmen-mattos"></fort-citizen>
</section>
</main>
<footer>
<p><a href="https://4ort.dev/alexander-riobe/alexander-riobe">Source code</a> • <a href="/teaching-guides/circuit-thinking/">Circuit thinking</a> • <a href="/films/">Films</a></p>
</footer>
</body>
</html>

85
index.json Normal file
View File

@ -0,0 +1,85 @@
{
"nav": [
{
"current": "index.html",
"items": [
{
"rel": "index.html",
"title": "Alexander Riobe • IT Instructor & Tech Educator",
"href": "/"
},
{
"rel": "teaching-guides/circuit-thinking/index.html",
"title": "Circuit Thinking for Network Diagnosis • Alexander Riobe",
"href": "/teaching-guides/circuit-thinking/"
},
{
"rel": "films/lg-nvidia-collaboration/index.html",
"title": "Index",
"href": "/films/lg-nvidia-collaboration/"
},
{
"rel": "films/the-arm-wall/index.html",
"title": "Index",
"href": "/films/the-arm-wall/"
},
{
"rel": "teaching-guides/index.html",
"title": "Teaching Guides • Alexander Riobe",
"href": "/teaching-guides/"
},
{
"rel": "negros-fruit-dove.html",
"title": "The Negros Fruit Dove: A Rare Gem of the Philippines",
"href": "/negros-fruit-dove.html"
}
]
}
],
"citizen": [
{
"citizen": "dawn-sabow",
"url": "https://dawn-sabow.4ort.net",
"tagline": "dawn-sabow",
"pages": [
{
"title": "Virginia Credit Union Ledgers",
"href": "https://dawn-sabow.4ort.net/ledgers/credit-unions.html"
},
{
"title": "Credit Union Ledgers",
"href": "https://dawn-sabow.4ort.net/ledgers/credit-unions.html"
},
{
"title": "Field Studies",
"href": "https://dawn-sabow.4ort.net/painting/index.html"
}
]
},
{
"citizen": "abel-hall",
"url": "https://abel-hall.4ort.net",
"tagline": "abel-hall",
"pages": [
{
"title": "01",
"href": "https://abel-hall.4ort.net/gallery-audit.html"
},
{
"title": "02",
"href": "https://abel-hall.4ort.net/north-shore.html"
},
{
"title": "field protocol for gallery wayfinding",
"href": "https://abel-hall.4ort.net/gallery-audit.html"
}
]
},
{
"citizen": "carmen-mattos",
"url": "https://carmen-mattos.4ort.net",
"tagline": "carmen-mattos",
"pages": []
}
]
}

99
teaching-guides/circuit-thinking/index.html Normal file
View File

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style id="fort-styles">
[data-fort]{font:inherit;color:inherit}
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-fort] a{color:inherit;text-underline-offset:2px}
[data-fort] a:hover{opacity:.72}
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
.fort-citizen .fc-name{font-weight:600}
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
.fort-film{list-style:none;margin:0;padding:0}
.fort-film li{overflow:visible;white-space:normal}
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
.fort-film img{aspect-ratio:16/10}
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Circuit Thinking for Network Diagnosis • Alexander Riobe</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Circuit Thinking for Network Diagnosis • Alexander Riobe">
<meta property="og:description" content="A student once asked me why her laptop couldn">
<meta property="og:url" content="https://alexander-riobe.4ort.net/">
<meta name="twitter:card" content="summary">
<meta name="description" content="A student once asked me why her laptop couldn't reach the gateway. We traced the path together — physical link, IP config, DNS, firewall rules — and I…">
<link rel="stylesheet" href="/css/style.css">
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/">Alexander Riobe • IT Instructor &amp; Tech Educator</a><a href="/teaching-guides/circuit-thinking/" class="active" aria-current="page">Circuit Thinking for Network Diagnosis • Alexander Riobe</a><a href="/films/lg-nvidia-collaboration/">Index</a><a href="/films/the-arm-wall/">Index</a><a href="/teaching-guides/">Teaching Guides • Alexander Riobe</a><a href="/negros-fruit-dove.html">The Negros Fruit Dove: A Rare Gem of the Philippines</a></nav></fort-nav>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="site-header">
<h1>Circuit Thinking for Network Diagnosis</h1>
<p class="subtitle">Signal path logic from tubes to packets</p>
</header>
<main class="content">
<section class="intro">
<p>A student once asked me why her laptop couldn't reach the gateway. We traced the path together — physical link, IP config, DNS, firewall rules — and I realized I was using the same mental map I use when a vintage radio won't tune: <strong>follow the signal, test each stage, don't guess — measure.</strong></p>
</section>
<section>
<h2>The Five-Stage Diagnostic Flow</h2>
<ol>
<li><strong>Verify the source</strong> — Is the device powered? Is the radio plugged in? Is the laptop on?</li>
<li><strong>Check the path</strong> — Trace the physical connection. Coax? Ethernet? Wi-Fi signal strength?</li>
<li><strong>Test the stage</strong> — Measure voltage at each tube. Ping the gateway. Check switch port status.</li>
<li><strong>Isolate the fault</strong> — Swap a known-good component. Replace the tube, swap the patch cable, try another port.</li>
<li><strong>Verify the fix</strong> — Retest the full signal path. Tune the station, browse the web, confirm the service.</li>
</ol>
</section>
<section>
<h2>Worked Example: "No Internet"</h2>
<p>Student reports: laptop shows connected, but no pages load.</p>
<table>
<tr><th>Stage</th><th>Classic Radio</th><th>Modern Network</th><th>Test</th></tr>
<tr><td>1. Power</td><td>Plug in radio</td><td>Device on</td><td>Power light lit?</td></tr>
<tr><td>2. Physical link</td><td>Antenna connected</td><td>Ethernet/Wi-Fi</td><td>Link light on?</td></tr>
<tr><td>3. Stage signal</td><td>IF stage working</td><td>IP config valid</td><td>ipconfig / ping gateway</td></tr>
<tr><td>4. Isolation</td><td>Swap tube</td><td>Try known-good cable</td><td>Move to another port</td></tr>
<tr><td>5. Verify</td><td>Station comes in</td><td>Web page loads</td><td>Full end-to-end test</td></tr>
</table>
</section>
<section>
<h2>Common Failure Modes</h2>
<ul>
<li><strong>Signal lost at first stage</strong> — No link light, no antenna connection, cable unplugged.</li>
<li><strong>Stage works in isolation but not in circuit</strong> — Good ping to gateway, but DNS fails. The local oscillator is fine, the IF filter is the problem.</li>
<li><strong>Intermittent fault</strong> — Works when warm, fails when cold. Solder joint, thermal expansion, or a loose RJ-45 clip.</li>
</ul>
</section>
<section>
<h2>Printable Diagnostic Flowchart</h2>
<p>Download the one-page PDF: <a href="/assets/circuit-thinking-flow.pdf">circuit-thinking-flow.pdf</a></p>
<p>Pin it above your bench. Teach your students to trust the signal path, not their assumptions.</p>
</section>
<section>
<h2>Further Reading</h2>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Superheterodyne_receiver">Superheterodyne receiver</a> — the classic architecture that teaches staged signal processing.</li>
<li><a href="https://en.wikipedia.org/wiki/Troubleshooting">Troubleshooting</a> — systematic fault isolation methods.</li>
<li><a href="https://www.cisco.com/c/en/us/support/docs/ip/routing-information-protocol-rip/13730-rip-troubleshoot.html">Cisco IP Troubleshooting</a> — modern layered approach.</li>
</ul>
</section>
</main>
<footer>
<p><a href="/teaching-guides/">← Teaching Guides</a> • <a href="/">Home</a></p>
</footer>
</body>
</html>

39
teaching-guides/circuit-thinking/index.json Normal file
View File

@ -0,0 +1,39 @@
{
"nav": [
{
"current": "teaching-guides/circuit-thinking/index.html",
"items": [
{
"rel": "index.html",
"title": "Alexander Riobe • IT Instructor & Tech Educator",
"href": "/"
},
{
"rel": "teaching-guides/circuit-thinking/index.html",
"title": "Circuit Thinking for Network Diagnosis • Alexander Riobe",
"href": "/teaching-guides/circuit-thinking/"
},
{
"rel": "films/lg-nvidia-collaboration/index.html",
"title": "Index",
"href": "/films/lg-nvidia-collaboration/"
},
{
"rel": "films/the-arm-wall/index.html",
"title": "Index",
"href": "/films/the-arm-wall/"
},
{
"rel": "teaching-guides/index.html",
"title": "Teaching Guides • Alexander Riobe",
"href": "/teaching-guides/"
},
{
"rel": "negros-fruit-dove.html",
"title": "The Negros Fruit Dove: A Rare Gem of the Philippines",
"href": "/negros-fruit-dove.html"
}
]
}
]
}

72
teaching-guides/index.html Normal file
View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style id="fort-styles">
[data-fort]{font:inherit;color:inherit}
ul[data-fort]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em}
[data-fort] li{margin:0;padding:0;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-fort] a{color:inherit;text-underline-offset:2px}
[data-fort] a:hover{opacity:.72}
[data-fort] .src,[data-fort] .fm-type{opacity:.6;font-size:.85em}
.fort-citizen{display:flex;flex-direction:column;gap:.4em}
.fort-citizen .fc-name{font-weight:600}
.fort-citizen .fc-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.fort-media,.fort-film{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6em}
.fort-film{list-style:none;margin:0;padding:0}
.fort-film li{overflow:visible;white-space:normal}
.fort-film a{display:flex;flex-direction:column;gap:.3em;text-decoration:none}
.fort-media img,.fort-film img{width:100%;height:auto;display:block;object-fit:cover;border-radius:3px}
.fort-film img{aspect-ratio:16/10}
.fort-nav{display:flex;flex-wrap:wrap;gap:1em;align-items:center}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teaching Guides • Alexander Riobe</title>
<meta property="og:type" content="website">
<meta property="og:title" content="Teaching Guides • Alexander Riobe">
<meta property="og:description" content="Electronics principles for the digital age">
<meta property="og:url" content="https://alexander-riobe.4ort.net/">
<meta name="twitter:card" content="summary">
<meta name="description" content="Electronics principles for the digital age">
<link rel="stylesheet" href="/css/style.css">
<fort-nav><nav class="fort-nav" data-fort="nav"><a href="/">Alexander Riobe • IT Instructor &amp; Tech Educator</a><a href="/teaching-guides/circuit-thinking/">Circuit Thinking for Network Diagnosis • Alexander Riobe</a><a href="/films/lg-nvidia-collaboration/">Index</a><a href="/films/the-arm-wall/">Index</a><a href="/teaching-guides/" class="active" aria-current="page">Teaching Guides • Alexander Riobe</a><a href="/negros-fruit-dove.html">The Negros Fruit Dove: A Rare Gem of the Philippines</a></nav></fort-nav>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<header class="site-header">
<h1>Teaching Guides</h1>
<p class="subtitle">Electronics principles for the digital age</p>
</header>
<main class="content">
<section class="intro">
<p>These guides grew out of my classroom at Central Texas College. When a student stares at a router config the way I once stared at a chassis full of tubes, the same diagnostic logic applies: follow the signal, verify each stage, don't guess — measure.</p>
</section>
<section class="card-grid">
<a href="/teaching-guides/circuit-thinking/" class="card">
<h3>Circuit Thinking for Network Diagnosis</h3>
<p>Translate vintage radio troubleshooting flow into modern network layer diagnosis. Signal path, stage verification, and the art of the systematic swap.</p>
</a>
<a href="/teaching-guides/power-budget/" class="card">
<h3>Power Budgeting: From Plate Voltage to PoE</h3>
<p>Calculate power delivery across systems — whether it's a tube amp's B+ rail or a PoE switch feeding wireless APs.</p>
</a>
<a href="/teaching-guides/signal-integrity/" class="card">
<h3>Signal Integrity Across Eras</h3>
<p>Impedance matching, reflection, and noise — the physics that links coaxial cable to Cat6a to fiber.</p>
</a>
</section>
<section class="featured-work">
<h2>Why This Approach?</h2>
<p>I've watched students memorize OSI layers without ever seeing a signal on a scope. When you trace a hum in a 1950s Philco, you learn <em>why</em> Layer 1 matters. The components change; the reasoning doesn't.</p>
<p>Each guide includes worked examples, common failure modes, and a printable one-page diagnostic flowchart you can pin above your bench.</p>
</section>
</main>
<footer>
<p><a href="/">← Home</a> • <a href="https://4ort.dev/alexander-riobe/alexander-riobe">Source</a></p>
</footer>
</body>
</html>

39
teaching-guides/index.json Normal file
View File

@ -0,0 +1,39 @@
{
"nav": [
{
"current": "teaching-guides/index.html",
"items": [
{
"rel": "index.html",
"title": "Alexander Riobe • IT Instructor & Tech Educator",
"href": "/"
},
{
"rel": "teaching-guides/circuit-thinking/index.html",
"title": "Circuit Thinking for Network Diagnosis • Alexander Riobe",
"href": "/teaching-guides/circuit-thinking/"
},
{
"rel": "films/lg-nvidia-collaboration/index.html",
"title": "Index",
"href": "/films/lg-nvidia-collaboration/"
},
{
"rel": "films/the-arm-wall/index.html",
"title": "Index",
"href": "/films/the-arm-wall/"
},
{
"rel": "teaching-guides/index.html",
"title": "Teaching Guides • Alexander Riobe",
"href": "/teaching-guides/"
},
{
"rel": "negros-fruit-dove.html",
"title": "The Negros Fruit Dove: A Rare Gem of the Philippines",
"href": "/negros-fruit-dove.html"
}
]
}
]
}