ministicraft/finistdev-configuration-as-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ministicraft:15b73bead4a1065538a9421c64a092f482d1cfd4
Branches Tags
ministicraft:master ministicraft:pages
..
compare: ministicraft:86b6baa2c623ce83dbe7e2bca2f1c8e999ef5262
Branches Tags
ministicraft:master ministicraft:pages

2 Commits
15b73bead4 ... 86b6baa2c6

Author SHA1 Message Date
ministicraft
86b6baa2c6 content: add SVG illustrations and diagrams to slides 
- Slides 4-6: server scaling story (1→10→100 servers)
- Slide 8: configuration drift timeline (T0→T1→T2)
- Slide 9: code→infrastructure flow diagram
- Slide 10: Reproducible/Versionable/Auditable icons
- Slide 13: Terraform HCL→plan→apply→resources workflow
- Slide 14: .tfstate mapping diagram (config↔state↔resources)
- Slide 20: replace GIF with Ansible push-model architecture
- Slide 26: Puppet pull-model architecture with agent nodes
- Slide 28: replace GIF with drift correction cycle diagram
- Slide 31: replace GIF with complementary stack layers

Keep slide 7 GIF (snowflake hell). All SVGs use ODS colors.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
 2026-04-14 01:36:46 +02:00
ministicraft
fc3b4e365d Add 3 inline SVGs for slides 4-6 (1/10/100 servers) 
SVG1: Single server with green checkmark (slide 4)
SVG2: Laptop fan-out to 10 servers via SSH lines (slide 5)
SVG3: Chaotic grid of ~60 servers with drift indicators —
      warning triangles, snowflakes, mixed status dots (slide 6)

All use OVHcloud Design System colors, sized for 1280×720 canvas.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
 2026-04-14 01:33:01 +02:00
1 changed files with 553 additions and 10 deletions
Expand all files Collapse all files

563
index.html
View File

@@ -139,18 +139,249 @@
<section>
<h2>You have a server. It works.</h2>
<p><em>Great.</em></p>
<!-- SVG1 — single server, green check -->
<svg width="700" height="250" viewBox="0 0 700 250" style="margin-top:0.5em;" xmlns="http://www.w3.org/2000/svg">
<!-- Server body -->
<rect x="270" y="30" width="160" height="140" rx="12" ry="12" fill="#f0f2f8" stroke="#00185e" stroke-width="2.5"/>
<!-- Rack lines -->
<line x1="290" y1="65" x2="410" y2="65" stroke="#4d5592" stroke-width="1.5" stroke-linecap="round"/>
<line x1="290" y1="100" x2="410" y2="100" stroke="#4d5592" stroke-width="1.5" stroke-linecap="round"/>
<line x1="290" y1="135" x2="410" y2="135" stroke="#4d5592" stroke-width="1.5" stroke-linecap="round"/>
<!-- Drive bays / LEDs -->
<circle cx="298" cy="50" r="4" fill="#0050d7"/>
<circle cx="298" cy="85" r="4" fill="#0050d7"/>
<circle cx="298" cy="120" r="4" fill="#0050d7"/>
<!-- Power button -->
<circle cx="402" cy="155" r="5" fill="#00185e"/>
<!-- Server legs -->
<rect x="290" y="170" width="14" height="10" rx="2" fill="#666666"/>
<rect x="396" y="170" width="14" height="10" rx="2" fill="#666666"/>
<!-- Green checkmark circle -->
<circle cx="350" cy="215" r="22" fill="#2ecc71"/>
<polyline points="339,215 347,224 363,207" fill="none" stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</section>
<!-- ─── SLIDE 5 ──────────────────────────────────────────────────── -->
<section>
<h2>You have 10 servers.</h2>
<p><em>Still manageable… but every small change means 10 SSH sessions, 10 vim edits, 10 chances to make a mistake.</em></p>
<!-- SVG2 — laptop + 10 servers fan-out -->
<svg width="720" height="260" viewBox="0 0 720 260" style="margin-top:0.5em;" xmlns="http://www.w3.org/2000/svg">
<!-- Laptop body -->
<rect x="20" y="60" width="120" height="80" rx="8" ry="8" fill="#f0f2f8" stroke="#00185e" stroke-width="2"/>
<!-- Screen inner -->
<rect x="30" y="68" width="100" height="56" rx="3" fill="#00185e"/>
<!-- Terminal prompt on screen -->
<text x="38" y="88" font-family="monospace" font-size="10" fill="#2ecc71">$</text>
<text x="48" y="88" font-family="monospace" font-size="9" fill="#aab4d5">ssh root@…</text>
<text x="38" y="103" font-family="monospace" font-size="10" fill="#2ecc71">$</text>
<text x="48" y="103" font-family="monospace" font-size="9" fill="#aab4d5">vim /etc/…</text>
<!-- Laptop base -->
<path d="M10,140 L150,140 L140,155 L20,155 Z" fill="#d8dce8" stroke="#00185e" stroke-width="1.5"/>
<!-- Keyboard hinge -->
<rect x="40" y="140" width="80" height="3" rx="1" fill="#666666"/>
<!-- 10 server icons on right, 2 columns of 5 -->
<!-- Dashed lines from laptop to each server -->
<!-- Column 1 (x=460) -->
<line x1="150" y1="100" x2="460" y2="18" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="460" y2="66" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="460" y2="114" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="460" y2="162" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="460" y2="210" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<!-- Column 2 (x=590) -->
<line x1="150" y1="100" x2="590" y2="18" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="590" y2="66" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="590" y2="114" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="590" y2="162" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<line x1="150" y1="100" x2="590" y2="210" stroke="#0050d7" stroke-width="1" stroke-dasharray="5,3" opacity="0.6"/>
<!-- Arrow tips (small triangles) on server end -->
<polygon points="458,16 458,20 463,18" fill="#0050d7" opacity="0.7"/>
<polygon points="458,64 458,68 463,66" fill="#0050d7" opacity="0.7"/>
<polygon points="458,112 458,116 463,114" fill="#0050d7" opacity="0.7"/>
<polygon points="458,160 458,164 463,162" fill="#0050d7" opacity="0.7"/>
<polygon points="458,208 458,212 463,210" fill="#0050d7" opacity="0.7"/>
<polygon points="588,16 588,20 593,18" fill="#0050d7" opacity="0.7"/>
<polygon points="588,64 588,68 593,66" fill="#0050d7" opacity="0.7"/>
<polygon points="588,112 588,116 593,114" fill="#0050d7" opacity="0.7"/>
<polygon points="588,160 588,164 593,162" fill="#0050d7" opacity="0.7"/>
<polygon points="588,208 588,212 593,210" fill="#0050d7" opacity="0.7"/>
<!-- Column 1 servers -->
<rect x="465" y="5" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="465" y="53" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="465" y="101" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="465" y="149" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="465" y="197" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<!-- Column 1 rack lines -->
<line x1="475" y1="18" x2="555" y2="18" stroke="#4d5592" stroke-width="1"/>
<line x1="475" y1="66" x2="555" y2="66" stroke="#4d5592" stroke-width="1"/>
<line x1="475" y1="114" x2="555" y2="114" stroke="#4d5592" stroke-width="1"/>
<line x1="475" y1="162" x2="555" y2="162" stroke="#4d5592" stroke-width="1"/>
<line x1="475" y1="210" x2="555" y2="210" stroke="#4d5592" stroke-width="1"/>
<!-- Column 1 LEDs -->
<circle cx="473" cy="12" r="2.5" fill="#0050d7"/>
<circle cx="473" cy="60" r="2.5" fill="#0050d7"/>
<circle cx="473" cy="108" r="2.5" fill="#0050d7"/>
<circle cx="473" cy="156" r="2.5" fill="#0050d7"/>
<circle cx="473" cy="204" r="2.5" fill="#0050d7"/>
<!-- Column 2 servers -->
<rect x="595" y="5" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="595" y="53" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="595" y="101" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="595" y="149" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<rect x="595" y="197" width="100" height="26" rx="5" fill="#f0f2f8" stroke="#00185e" stroke-width="1.5"/>
<!-- Column 2 rack lines -->
<line x1="605" y1="18" x2="685" y2="18" stroke="#4d5592" stroke-width="1"/>
<line x1="605" y1="66" x2="685" y2="66" stroke="#4d5592" stroke-width="1"/>
<line x1="605" y1="114" x2="685" y2="114" stroke="#4d5592" stroke-width="1"/>
<line x1="605" y1="162" x2="685" y2="162" stroke="#4d5592" stroke-width="1"/>
<line x1="605" y1="210" x2="685" y2="210" stroke="#4d5592" stroke-width="1"/>
<!-- Column 2 LEDs -->
<circle cx="603" cy="12" r="2.5" fill="#0050d7"/>
<circle cx="603" cy="60" r="2.5" fill="#0050d7"/>
<circle cx="603" cy="108" r="2.5" fill="#0050d7"/>
<circle cx="603" cy="156" r="2.5" fill="#0050d7"/>
<circle cx="603" cy="204" r="2.5" fill="#0050d7"/>
<!-- "ssh" labels floating near lines -->
<text x="260" y="65" font-family="monospace" font-size="9" fill="#0050d7" opacity="0.7" transform="rotate(-8,260,65)">ssh</text>
<text x="280" y="115" font-family="monospace" font-size="9" fill="#0050d7" opacity="0.7">ssh</text>
<text x="260" y="160" font-family="monospace" font-size="9" fill="#0050d7" opacity="0.7" transform="rotate(6,260,160)">ssh</text>
</svg>
</section>
<!-- ─── SLIDE 6 ──────────────────────────────────────────────────── -->
<section>
<h2>Now you have 100 servers.</h2>
<p><em>Some 2 years old. Some a couple of months. Some freshly provisioned.<br>None of them are exactly alike.</em></p>
<!-- SVG3 — 100-server chaos grid with drift indicators -->
<svg width="700" height="260" viewBox="0 0 700 260" style="margin-top:0.5em;" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Warning triangle symbol -->
<symbol id="warn" viewBox="0 0 16 16">
<polygon points="8,1 15,15 1,15" fill="#e00034" stroke="#fff" stroke-width="0.5"/>
<text x="8" y="13" text-anchor="middle" font-size="10" font-weight="bold" fill="#fff">!</text>
</symbol>
<!-- Snowflake symbol -->
<symbol id="snow" viewBox="0 0 16 16">
<text x="8" y="14" text-anchor="middle" font-size="14" fill="#0050d7">❄</text>
</symbol>
</defs>
<!-- Generate a 10×6 grid of servers (60 shown, suggests ~100) -->
<!-- Row 0 -->
<rect x="10" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="78" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="146" y="5" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="214" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="282" y="5" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="350" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="418" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<rect x="486" y="5" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="554" y="5" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="622" y="5" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<!-- Row 1 -->
<rect x="10" y="45" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="78" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="146" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="214" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<rect x="282" y="45" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="350" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="418" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="486" y="45" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="554" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="622" y="45" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<!-- Row 2 -->
<rect x="10" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="78" y="85" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="146" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<rect x="214" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="282" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="350" y="85" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="418" y="85" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="486" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="554" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="622" y="85" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<!-- Row 3 -->
<rect x="10" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<rect x="78" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="146" y="125" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="214" y="125" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="282" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="350" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="418" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="486" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<rect x="554" y="125" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="622" y="125" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<!-- Row 4 -->
<rect x="10" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="78" y="165" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="146" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="214" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="282" y="165" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="350" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<rect x="418" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="486" y="165" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="554" y="165" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="622" y="165" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<!-- Row 5 (partial — fades into "...more") -->
<rect x="10" y="205" width="58" height="30" rx="4" fill="#e8edf8" stroke="#0050d7" stroke-width="1.2"/>
<rect x="78" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="146" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#666666" stroke-width="1.2"/>
<rect x="214" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="282" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<rect x="350" y="205" width="58" height="30" rx="4" fill="#fce8ec" stroke="#e00034" stroke-width="1.2"/>
<rect x="418" y="205" width="58" height="30" rx="4" fill="#f0f2f8" stroke="#00185e" stroke-width="1.2"/>
<!-- Ellipsis to suggest more -->
<text x="510" y="226" font-family="sans-serif" font-size="22" fill="#666666" letter-spacing="4">· · ·</text>
<!-- Rack lines on every server (subtle) -->
<g stroke="#4d5592" stroke-width="0.6" opacity="0.4">
<!-- Just add a mid-line to each server for texture -->
<line x1="18" y1="20" x2="60" y2="20"/> <line x1="86" y1="20" x2="128" y2="20"/>
<line x1="18" y1="60" x2="60" y2="60"/> <line x1="86" y1="60" x2="128" y2="60"/>
<line x1="18" y1="100" x2="60" y2="100"/> <line x1="86" y1="100" x2="128" y2="100"/>
<line x1="18" y1="140" x2="60" y2="140"/> <line x1="86" y1="140" x2="128" y2="140"/>
<line x1="18" y1="180" x2="60" y2="180"/> <line x1="86" y1="180" x2="128" y2="180"/>
<line x1="18" y1="220" x2="60" y2="220"/> <line x1="86" y1="220" x2="128" y2="220"/>
</g>
<!-- Warning triangles on red-tinted servers -->
<use href="#warn" x="50" y="7" width="14" height="14"/>
<use href="#warn" x="528" y="7" width="14" height="14"/>
<use href="#warn" x="324" y="47" width="14" height="14"/>
<use href="#warn" x="120" y="87" width="14" height="14"/>
<use href="#warn" x="460" y="87" width="14" height="14"/>
<use href="#warn" x="256" y="127" width="14" height="14"/>
<use href="#warn" x="324" y="167" width="14" height="14"/>
<use href="#warn" x="528" y="167" width="14" height="14"/>
<use href="#warn" x="392" y="207" width="14" height="14"/>
<!-- Snowflakes on blue-tinted servers (drift / unique configs) -->
<use href="#snow" x="324" y="6" width="14" height="14"/>
<use href="#snow" x="664" y="6" width="14" height="14"/>
<use href="#snow" x="52" y="46" width="14" height="14"/>
<use href="#snow" x="528" y="46" width="14" height="14"/>
<use href="#snow" x="392" y="86" width="14" height="14"/>
<use href="#snow" x="188" y="126" width="14" height="14"/>
<use href="#snow" x="596" y="126" width="14" height="14"/>
<use href="#snow" x="120" y="166" width="14" height="14"/>
<use href="#snow" x="664" y="166" width="14" height="14"/>
<use href="#snow" x="52" y="206" width="14" height="14"/>
<!-- Small status dots (mixed: green OK, amber, red) scattered -->
<circle cx="18" cy="12" r="2.5" fill="#2ecc71"/> <circle cx="86" cy="12" r="2.5" fill="#2ecc71"/>
<circle cx="154" cy="12" r="2.5" fill="#e00034"/> <circle cx="222" cy="12" r="2.5" fill="#2ecc71"/>
<circle cx="494" cy="12" r="2.5" fill="#e00034"/> <circle cx="562" cy="12" r="2.5" fill="#2ecc71"/>
<circle cx="18" cy="52" r="2.5" fill="#f39c12"/> <circle cx="86" cy="52" r="2.5" fill="#2ecc71"/>
<circle cx="154" cy="52" r="2.5" fill="#2ecc71"/> <circle cx="290" cy="52" r="2.5" fill="#e00034"/>
<circle cx="358" cy="52" r="2.5" fill="#2ecc71"/> <circle cx="426" cy="52" r="2.5" fill="#2ecc71"/>
<circle cx="18" cy="92" r="2.5" fill="#2ecc71"/> <circle cx="86" cy="92" r="2.5" fill="#e00034"/>
<circle cx="222" cy="92" r="2.5" fill="#2ecc71"/> <circle cx="290" cy="92" r="2.5" fill="#f39c12"/>
<circle cx="426" cy="92" r="2.5" fill="#e00034"/> <circle cx="494" cy="92" r="2.5" fill="#2ecc71"/>
<circle cx="18" cy="132" r="2.5" fill="#f39c12"/> <circle cx="86" cy="132" r="2.5" fill="#2ecc71"/>
<circle cx="222" cy="132" r="2.5" fill="#e00034"/> <circle cx="290" cy="132" r="2.5" fill="#2ecc71"/>
<circle cx="494" cy="132" r="2.5" fill="#f39c12"/>
<circle cx="18" cy="172" r="2.5" fill="#2ecc71"/> <circle cx="290" cy="172" r="2.5" fill="#e00034"/>
<circle cx="358" cy="172" r="2.5" fill="#f39c12"/> <circle cx="494" cy="172" r="2.5" fill="#e00034"/>
<circle cx="562" cy="172" r="2.5" fill="#2ecc71"/>
<circle cx="86" cy="212" r="2.5" fill="#2ecc71"/> <circle cx="222" cy="212" r="2.5" fill="#f39c12"/>
<circle cx="290" cy="212" r="2.5" fill="#2ecc71"/> <circle cx="358" cy="212" r="2.5" fill="#e00034"/>
</svg>
</section>
<!-- ─── SLIDE 7 ──────────────────────────────────────────────────── -->
@@ -166,19 +397,112 @@
<section>
<h2>Configuration drift is silent… until it isn't.</h2>
<p><em>Prod breaks on a Tuesday. You can't reproduce the bug locally. You can't scale reliably. You can't onboard a new server without fear.</em></p>
<svg width="750" height="220" style="margin-top:0.5em;" viewBox="0 0 750 220" xmlns="http://www.w3.org/2000/svg">
<line x1="60" y1="180" x2="700" y2="180" stroke="#666666" stroke-width="2.5"/>
<polygon points="700,174 720,180 700,186" fill="#666666"/>
<text x="140" y="210" text-anchor="middle" font-family="system-ui,sans-serif" font-size="14" fill="#4d5592" font-weight="600">T0</text>
<text x="390" y="210" text-anchor="middle" font-family="system-ui,sans-serif" font-size="14" fill="#4d5592" font-weight="600">T1</text>
<text x="630" y="210" text-anchor="middle" font-family="system-ui,sans-serif" font-size="14" fill="#4d5592" font-weight="600">T2</text>
<line x1="140" y1="175" x2="140" y2="185" stroke="#666666" stroke-width="2"/>
<line x1="390" y1="175" x2="390" y2="185" stroke="#666666" stroke-width="2"/>
<line x1="630" y1="175" x2="630" y2="185" stroke="#666666" stroke-width="2"/>
<!-- T0: identical servers -->
<rect x="90" y="70" width="28" height="36" rx="4" fill="#0050d7" opacity="0.9"/>
<rect x="122" y="70" width="28" height="36" rx="4" fill="#0050d7" opacity="0.9"/>
<rect x="154" y="70" width="28" height="36" rx="4" fill="#0050d7" opacity="0.9"/>
<rect x="186" y="70" width="28" height="36" rx="4" fill="#0050d7" opacity="0.9"/>
<text x="140" y="55" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#00a344" font-weight="600">ALL IDENTICAL</text>
<!-- T1: drifting -->
<rect x="340" y="70" width="28" height="36" rx="4" fill="#0050d7" opacity="0.9"/>
<rect x="372" y="68" width="28" height="36" rx="4" fill="#0050d7" opacity="0.7"/>
<rect x="404" y="72" width="28" height="36" rx="4" fill="#4d5592" opacity="0.85"/>
<rect x="436" y="70" width="28" height="36" rx="4" fill="#0050d7" opacity="0.9"/>
<text x="390" y="55" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#4d5592" font-weight="600">DRIFTING…</text>
<!-- T2: chaos -->
<rect x="580" y="74" width="28" height="36" rx="4" fill="#e00034" opacity="0.85"/>
<rect x="612" y="66" width="28" height="36" rx="4" fill="#4d5592" opacity="0.8"/>
<rect x="644" y="78" width="28" height="36" rx="4" fill="#00185e" opacity="0.9"/>
<rect x="676" y="70" width="28" height="36" rx="4" fill="#e00034" opacity="0.7"/>
<polygon points="594,68 600,58 606,68" fill="#e00034" stroke="white" stroke-width="1"/>
<text x="600" y="67" text-anchor="middle" font-family="system-ui,sans-serif" font-size="8" fill="white" font-weight="bold">!</text>
<polygon points="654,72 660,62 666,72" fill="#e00034" stroke="white" stroke-width="1"/>
<text x="660" y="71" text-anchor="middle" font-family="system-ui,sans-serif" font-size="8" fill="white" font-weight="bold">!</text>
<polygon points="684,64 690,54 696,64" fill="#e00034" stroke="white" stroke-width="1"/>
<text x="690" y="63" text-anchor="middle" font-family="system-ui,sans-serif" font-size="8" fill="white" font-weight="bold">!</text>
<text x="630" y="48" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#e00034" font-weight="700">CHAOS</text>
</svg>
</section>
<!-- ─── SLIDE 9 ──────────────────────────────────────────────────── -->
<section>
<h2>What if your infrastructure was just… code?</h2>
<p><em>Yes, even your AI assistant can write it. But you still need to understand what it deploys.</em></p>
<svg width="750" height="220" style="margin-top:0.5em;" viewBox="0 0 750 220" xmlns="http://www.w3.org/2000/svg">
<!-- Code file icon -->
<rect x="80" y="35" width="120" height="150" rx="6" fill="none" stroke="#0050d7" stroke-width="2.5"/>
<path d="M165,35 L200,35 L200,70 L165,70 Z" fill="white" stroke="white" stroke-width="3"/>
<path d="M165,35 L200,70" stroke="#0050d7" stroke-width="2.5" fill="none"/>
<line x1="165" y1="35" x2="165" y2="70" stroke="#0050d7" stroke-width="2.5"/>
<line x1="165" y1="70" x2="200" y2="70" stroke="#0050d7" stroke-width="2.5"/>
<text x="140" y="108" text-anchor="middle" font-family="monospace" font-size="30" fill="#0050d7" font-weight="700">{ }</text>
<line x1="105" y1="128" x2="175" y2="128" stroke="#4d5592" stroke-width="2" opacity="0.4"/>
<line x1="112" y1="140" x2="168" y2="140" stroke="#4d5592" stroke-width="2" opacity="0.3"/>
<line x1="108" y1="152" x2="172" y2="152" stroke="#4d5592" stroke-width="2" opacity="0.4"/>
<!-- Arrow -->
<line x1="260" y1="110" x2="420" y2="110" stroke="#0050d7" stroke-width="4" stroke-linecap="round"/>
<polygon points="420,98 448,110 420,122" fill="#0050d7"/>
<text x="340" y="95" text-anchor="middle" font-family="system-ui,sans-serif" font-size="13" fill="#4d5592" font-weight="600">deploy</text>
<!-- Cloud with servers -->
<path d="M530,160 Q470,160 480,120 Q470,80 510,75 Q525,45 570,50 Q610,40 630,65 Q680,60 685,95 Q710,105 700,135 Q705,165 670,160 Z" fill="none" stroke="#0050d7" stroke-width="2.5" opacity="0.8"/>
<rect x="520" y="90" width="36" height="44" rx="5" fill="#0050d7" opacity="0.15" stroke="#0050d7" stroke-width="1.5"/>
<circle cx="548" cy="124" r="3" fill="#00a344"/>
<rect x="572" y="90" width="36" height="44" rx="5" fill="#0050d7" opacity="0.15" stroke="#0050d7" stroke-width="1.5"/>
<circle cx="600" cy="124" r="3" fill="#00a344"/>
<rect x="624" y="90" width="36" height="44" rx="5" fill="#0050d7" opacity="0.15" stroke="#0050d7" stroke-width="1.5"/>
<circle cx="652" cy="124" r="3" fill="#00a344"/>
</svg>
</section>
<!-- ─── SLIDE 10 ──────────────────────────────────────────────────── -->
<section>
<h2>Configuration as Code</h2>
<p>Managing infrastructure through machine-readable files, stored in version control.</p>
<p><small style="color:var(--ods-neutral-600);">Reproducible &nbsp;·&nbsp; Versionable &nbsp;·&nbsp; Auditable</small></p>
<svg width="750" height="220" style="margin-top:0.5em;" viewBox="0 0 750 220" xmlns="http://www.w3.org/2000/svg">
<!-- Reproducible -->
<g transform="translate(125,80)">
<path d="M0,-32 A32,32 0 1,1 -22,22" fill="none" stroke="#0050d7" stroke-width="3" stroke-linecap="round"/>
<polygon points="-28,14 -22,26 -14,16" fill="#0050d7"/>
<path d="M0,32 A32,32 0 1,1 22,-22" fill="none" stroke="#0050d7" stroke-width="3" stroke-linecap="round"/>
<polygon points="28,-14 22,-26 14,-16" fill="#0050d7"/>
</g>
<text x="125" y="145" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" fill="#00185e" font-weight="700">Reproducible</text>
<text x="125" y="165" text-anchor="middle" font-family="system-ui,sans-serif" font-size="12" fill="#4d5592">Same input → same result</text>
<line x1="250" y1="40" x2="250" y2="180" stroke="#4d5592" stroke-width="0.5" opacity="0.3"/>
<!-- Versionable -->
<g transform="translate(375,80)">
<line x1="0" y1="-35" x2="0" y2="35" stroke="#0050d7" stroke-width="3" stroke-linecap="round"/>
<path d="M0,-5 Q20,-5 25,-25" fill="none" stroke="#0050d7" stroke-width="3" stroke-linecap="round"/>
<circle cx="0" cy="-30" r="5" fill="#0050d7"/>
<circle cx="0" cy="-5" r="5" fill="#0050d7"/>
<circle cx="0" cy="20" r="5" fill="#0050d7"/>
<circle cx="25" cy="-25" r="5" fill="#0050d7" opacity="0.7"/>
<path d="M25,-25 Q30,-10 0,20" fill="none" stroke="#0050d7" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="4,3"/>
</g>
<text x="375" y="145" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" fill="#00185e" font-weight="700">Versionable</text>
<text x="375" y="165" text-anchor="middle" font-family="system-ui,sans-serif" font-size="12" fill="#4d5592">Track every change</text>
<line x1="500" y1="40" x2="500" y2="180" stroke="#4d5592" stroke-width="0.5" opacity="0.3"/>
<!-- Auditable -->
<g transform="translate(625,72)">
<circle cx="-8" cy="-8" r="22" fill="none" stroke="#0050d7" stroke-width="3"/>
<line x1="8" y1="8" x2="24" y2="24" stroke="#0050d7" stroke-width="4" stroke-linecap="round"/>
<polyline points="-18,-14 -14,-10 -6,-18" fill="none" stroke="#0050d7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="-2" y1="-14" x2="8" y2="-14" stroke="#0050d7" stroke-width="1.5" opacity="0.5"/>
<polyline points="-18,-2 -14,2 -6,-6" fill="none" stroke="#0050d7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="-2" y1="-2" x2="8" y2="-2" stroke="#0050d7" stroke-width="1.5" opacity="0.5"/>
</g>
<text x="625" y="145" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" fill="#00185e" font-weight="700">Auditable</text>
<text x="625" y="165" text-anchor="middle" font-family="system-ui,sans-serif" font-size="12" fill="#4d5592">Who changed what &amp; when</text>
</svg>
</section>
<!-- ─── SLIDE 11 ──────────────────────────────────────────────────── -->
@@ -198,6 +522,43 @@
<h2>HCL: HashiCorp Configuration Language.</h2>
<p>Declarative, human-readable — and pure JSON works too.<br>
<code>terraform plan</code> previews &nbsp;·&nbsp; <code>terraform apply</code> creates &nbsp;·&nbsp; <code>terraform destroy</code> removes.</p>
<svg width="800" height="180" style="margin-top:0.5em;" viewBox="0 0 800 180" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="wf-arrow" viewBox="0 0 10 7" refX="10" refY="3.5" markerWidth="10" markerHeight="7" orient="auto-start-auto">
<path d="M0,0 L10,3.5 L0,7z" fill="#7B42BC"/>
</marker>
</defs>
<rect x="10" y="30" width="150" height="120" rx="14" fill="none" stroke="#7B42BC" stroke-width="2.2"/>
<g transform="translate(60,50)">
<path d="M0,4 L0,30 Q0,33 3,33 L27,33 Q30,33 30,30 L30,10 L20,0 L3,0 Q0,0 0,4z" fill="none" stroke="#7B42BC" stroke-width="1.6"/>
<path d="M20,0 L20,7 Q20,10 23,10 L30,10" fill="none" stroke="#7B42BC" stroke-width="1.4"/>
<line x1="7" y1="15" x2="23" y2="15" stroke="#7B42BC" stroke-width="1.2"/>
<line x1="7" y1="20" x2="20" y2="20" stroke="#7B42BC" stroke-width="1.2"/>
<line x1="7" y1="25" x2="17" y2="25" stroke="#7B42BC" stroke-width="1.2"/>
</g>
<text x="85" y="115" text-anchor="middle" font-family="system-ui,sans-serif" font-size="16" font-weight="600" fill="#00185e">HCL Code</text>
<line x1="168" y1="90" x2="210" y2="90" stroke="#7B42BC" stroke-width="2" marker-end="url(#wf-arrow)"/>
<rect x="218" y="30" width="150" height="120" rx="14" fill="none" stroke="#7B42BC" stroke-width="2.2"/>
<g transform="translate(268,48)">
<ellipse cx="15" cy="15" rx="18" ry="12" fill="none" stroke="#7B42BC" stroke-width="1.6"/>
<circle cx="15" cy="15" r="6" fill="none" stroke="#7B42BC" stroke-width="1.6"/>
<circle cx="15" cy="15" r="2.5" fill="#7B42BC"/>
</g>
<text x="293" y="110" text-anchor="middle" font-family="monospace" font-size="15" font-weight="600" fill="#00185e">plan</text>
<line x1="376" y1="90" x2="418" y2="90" stroke="#7B42BC" stroke-width="2" marker-end="url(#wf-arrow)"/>
<rect x="426" y="30" width="150" height="120" rx="14" fill="none" stroke="#7B42BC" stroke-width="2.2"/>
<g transform="translate(476,48)">
<polygon points="5,2 30,15 5,28" fill="none" stroke="#7B42BC" stroke-width="1.8" stroke-linejoin="round"/>
</g>
<text x="501" y="110" text-anchor="middle" font-family="monospace" font-size="15" font-weight="600" fill="#00185e">apply</text>
<line x1="584" y1="90" x2="626" y2="90" stroke="#7B42BC" stroke-width="2" marker-end="url(#wf-arrow)"/>
<rect x="634" y="30" width="156" height="120" rx="14" fill="none" stroke="#7B42BC" stroke-width="2.2"/>
<g transform="translate(678,44)">
<path d="M12,28 Q0,28 0,20 Q0,14 6,12 Q6,4 15,2 Q24,0 28,6 Q29,5 32,5 Q38,5 38,11 Q44,12 44,18 Q44,24 38,25 Q38,28 34,28z" fill="none" stroke="#7B42BC" stroke-width="1.6"/>
</g>
<text x="712" y="110" text-anchor="middle" font-family="system-ui,sans-serif" font-size="15" font-weight="600" fill="#00185e">Resources</text>
<text x="400" y="18" text-anchor="middle" font-family="system-ui,sans-serif" font-size="12" fill="#666666" letter-spacing="1">WRITE → PLAN → APPLY</text>
</svg>
</section>
<!-- ─── SLIDE 14 : Terraform state ──────────────────────────────── -->
@@ -206,6 +567,66 @@
<p>The <code>.tfstate</code> file maps code to real-world resources. Store it remotely.<br>
Depending on what you manage, it can contain plaintext sensitive values — credentials, tokens, secrets.<br>
<em>Handle it with care. Don't feed it to your LLM.</em></p>
<svg width="750" height="220" style="margin-top:0.5em;" viewBox="0 0 750 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="st-arrow" viewBox="0 0 8 6" refX="8" refY="3" markerWidth="8" markerHeight="6" orient="auto-start-auto">
<path d="M0,0 L8,3 L0,6z" fill="#7B42BC"/>
</marker>
</defs>
<!-- Left: HCL files -->
<g transform="translate(30,18)">
<rect width="80" height="48" rx="6" fill="#f6f0ff" stroke="#7B42BC" stroke-width="1.5"/>
<text x="40" y="44" text-anchor="middle" font-family="monospace" font-size="9" fill="#4d5592">main.tf</text>
</g>
<g transform="translate(30,85)">
<rect width="80" height="48" rx="6" fill="#f6f0ff" stroke="#7B42BC" stroke-width="1.5"/>
<text x="40" y="44" text-anchor="middle" font-family="monospace" font-size="9" fill="#4d5592">network.tf</text>
</g>
<g transform="translate(30,152)">
<rect width="80" height="48" rx="6" fill="#f6f0ff" stroke="#7B42BC" stroke-width="1.5"/>
<text x="40" y="44" text-anchor="middle" font-family="monospace" font-size="9" fill="#4d5592">dns.tf</text>
</g>
<text x="70" y="215" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#666666">Configuration</text>
<!-- Lines to center -->
<line x1="115" y1="42" x2="280" y2="88" stroke="#7B42BC" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#st-arrow)"/>
<line x1="115" y1="109" x2="280" y2="108" stroke="#7B42BC" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#st-arrow)"/>
<line x1="115" y1="176" x2="280" y2="128" stroke="#7B42BC" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#st-arrow)"/>
<!-- Center: .tfstate cylinder -->
<g transform="translate(285,42)">
<rect y="18" width="180" height="100" fill="#f6f0ff" stroke="#7B42BC" stroke-width="2"/>
<ellipse cx="90" cy="18" rx="90" ry="18" fill="#f6f0ff" stroke="#7B42BC" stroke-width="2"/>
<path d="M0,118 Q0,136 90,136 Q180,136 180,118" fill="#f6f0ff" stroke="#7B42BC" stroke-width="2"/>
<rect x="1" y="100" width="178" height="19" fill="#f6f0ff" stroke="none"/>
<line x1="0" y1="18" x2="0" y2="118" stroke="#7B42BC" stroke-width="2"/>
<line x1="180" y1="18" x2="180" y2="118" stroke="#7B42BC" stroke-width="2"/>
<text x="90" y="78" text-anchor="middle" font-family="monospace" font-size="20" font-weight="700" fill="#00185e">.tfstate</text>
<text x="90" y="98" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#4d5592">state mapping</text>
<g transform="translate(72,-8)">
<rect x="8" y="12" width="20" height="15" rx="3" fill="#FFD54F" stroke="#E65100" stroke-width="1.3"/>
<path d="M12,12 L12,7 Q12,1 18,1 Q24,1 24,7 L24,12" fill="none" stroke="#E65100" stroke-width="1.5"/>
<circle cx="18" cy="19" r="2" fill="#E65100"/>
</g>
</g>
<text x="375" y="215" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#666666">Source of Truth</text>
<!-- Lines to right -->
<line x1="470" y1="88" x2="595" y2="42" stroke="#00a344" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#st-arrow)"/>
<line x1="470" y1="108" x2="595" y2="109" stroke="#00a344" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#st-arrow)"/>
<line x1="470" y1="128" x2="595" y2="176" stroke="#00a344" stroke-width="1.4" stroke-dasharray="4,3" marker-end="url(#st-arrow)"/>
<!-- Right: cloud resources -->
<g transform="translate(600,18)">
<rect width="80" height="48" rx="6" fill="#e8f5e9" stroke="#00a344" stroke-width="1.5"/>
<text x="40" y="42" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#00185e">VM</text>
</g>
<g transform="translate(600,85)">
<rect width="80" height="48" rx="6" fill="#e8f5e9" stroke="#00a344" stroke-width="1.5"/>
<text x="40" y="42" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#00185e">VNet</text>
</g>
<g transform="translate(600,152)">
<rect width="80" height="48" rx="6" fill="#e8f5e9" stroke="#00a344" stroke-width="1.5"/>
<text x="40" y="42" text-anchor="middle" font-family="system-ui,sans-serif" font-size="10" font-weight="600" fill="#00185e">DNS Zone</text>
</g>
<text x="640" y="215" text-anchor="middle" font-family="system-ui,sans-serif" font-size="11" fill="#666666">Real Resources</text>
</svg>
</section>
<!-- ─── SLIDE 15 : Terraform providers ──────────────────────────── -->
@@ -274,9 +695,41 @@ resource "ovh_domain_zone_record" "web" {
<p>YAML playbooks run tasks in order, across any number of hosts.<br>
No daemon. No certificate authority. Just Python + SSH.<br>
<em>Idempotent modules ensure the same playbook can run safely again and again.</em></p>
<img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"
alt="It just works"
style="height:180px; margin-top:0.5em; border-radius:6px;">
<svg width="750" height="250" viewBox="0 0 750 250" xmlns="http://www.w3.org/2000/svg" style="margin-top:0.5em;">
<defs>
<marker id="a-push" viewBox="0 0 10 7" refX="9" refY="3.5" markerWidth="9" markerHeight="7" orient="auto">
<polygon points="0 0,10 3.5,0 7" fill="#CC0000"/>
</marker>
</defs>
<!-- Laptop -->
<rect x="50" y="68" width="100" height="65" rx="6" fill="#2b2b3a"/>
<rect x="56" y="73" width="88" height="48" rx="3" fill="#14142a"/>
<text x="100" y="103" text-anchor="middle" fill="#5cf" font-family="monospace" font-size="13">&gt;_</text>
<rect x="38" y="135" width="124" height="9" rx="4" fill="#444"/>
<text x="100" y="164" text-anchor="middle" fill="#4d5592" font-size="13" font-weight="bold" font-family="sans-serif">Control Node</text>
<!-- PUSH badge -->
<rect x="310" y="10" width="80" height="28" rx="14" fill="#CC0000"/>
<text x="350" y="30" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold" font-family="sans-serif">PUSH</text>
<!-- Arrows -->
<line x1="170" y1="100" x2="548" y2="30" stroke="#CC0000" stroke-width="2" marker-end="url(#a-push)"/>
<line x1="170" y1="100" x2="548" y2="72" stroke="#CC0000" stroke-width="2" marker-end="url(#a-push)"/>
<line x1="170" y1="100" x2="548" y2="117" stroke="#CC0000" stroke-width="2" marker-end="url(#a-push)"/>
<line x1="170" y1="100" x2="548" y2="162" stroke="#CC0000" stroke-width="2" marker-end="url(#a-push)"/>
<line x1="170" y1="100" x2="548" y2="207" stroke="#CC0000" stroke-width="2" marker-end="url(#a-push)"/>
<!-- SSH label -->
<rect x="310" y="46" width="42" height="18" rx="3" fill="#fff" fill-opacity="0.85"/>
<text x="331" y="59" text-anchor="middle" fill="#CC0000" font-size="11" font-weight="bold" font-family="monospace">SSH</text>
<!-- Servers -->
<g fill="#f2f2f8" stroke="#aaa">
<g transform="translate(555,16)"><rect width="120" height="28" rx="4"/><circle cx="105" cy="19" r="3" fill="#5cf"/></g>
<g transform="translate(555,58)"><rect width="120" height="28" rx="4"/><circle cx="105" cy="19" r="3" fill="#5cf"/></g>
<g transform="translate(555,103)"><rect width="120" height="28" rx="4"/><circle cx="105" cy="19" r="3" fill="#5cf"/></g>
<g transform="translate(555,148)"><rect width="120" height="28" rx="4"/><circle cx="105" cy="19" r="3" fill="#5cf"/></g>
<g transform="translate(555,193)"><rect width="120" height="28" rx="4"/><circle cx="105" cy="19" r="3" fill="#5cf"/></g>
</g>
<text x="615" y="245" text-anchor="middle" fill="#4d5592" font-size="12" font-family="sans-serif">Managed Hosts</text>
<text x="615" y="12" text-anchor="middle" fill="#999" font-size="10" font-style="italic" font-family="sans-serif">no agent required</text>
</svg>
</section>
<!-- ─── SLIDE 21 : Ansible code ──────────────────────────────────── -->
@@ -344,6 +797,40 @@ resource "ovh_domain_zone_record" "web" {
<h2>Pull, not push. Agents, not SSH.</h2>
<p>Every 30 minutes, each puppet-agent polls the Puppet Server, compiles a catalog, and enforces it.<br>
<em>Drift is corrected automatically — without anyone lifting a finger.</em></p>
<svg width="750" height="250" viewBox="0 0 750 250" xmlns="http://www.w3.org/2000/svg" style="margin-top:0.5em;">
<defs>
<marker id="a-pull" viewBox="0 0 10 7" refX="9" refY="3.5" markerWidth="9" markerHeight="7" orient="auto">
<polygon points="0 0,10 3.5,0 7" fill="#A06010"/>
</marker>
</defs>
<!-- Puppet Server -->
<rect x="290" y="10" width="170" height="60" rx="8" fill="#fdf4e8" stroke="#A06010" stroke-width="2"/>
<rect x="300" y="22" width="36" height="36" rx="4" fill="#f5e6d0" stroke="#A06010"/>
<line x1="306" y1="32" x2="324" y2="32" stroke="#c08030"/><line x1="306" y1="39" x2="324" y2="39" stroke="#c08030"/><line x1="306" y1="46" x2="324" y2="46" stroke="#c08030"/>
<rect x="346" y="24" width="24" height="30" rx="2" fill="#fff" stroke="#A06010"/>
<text x="380" y="35" fill="#A06010" font-size="9" font-family="sans-serif">catalog</text>
<text x="375" y="88" text-anchor="middle" fill="#4d5592" font-size="13" font-weight="bold" font-family="sans-serif">Puppet Server</text>
<!-- Clock -->
<circle cx="540" cy="40" r="18" fill="none" stroke="#A06010" stroke-width="1.5"/>
<line x1="540" y1="40" x2="540" y2="28" stroke="#A06010" stroke-width="1.5"/>
<line x1="540" y1="40" x2="550" y2="40" stroke="#A06010" stroke-width="1.5"/>
<text x="540" y="72" text-anchor="middle" fill="#A06010" font-size="10" font-family="sans-serif">every 30 min</text>
<!-- Pull arrows -->
<line x1="95" y1="160" x2="330" y2="74" stroke="#A06010" stroke-width="1.8" stroke-dasharray="6,4" marker-end="url(#a-pull)"/>
<line x1="225" y1="160" x2="350" y2="74" stroke="#A06010" stroke-width="1.8" stroke-dasharray="6,4" marker-end="url(#a-pull)"/>
<line x1="375" y1="160" x2="375" y2="74" stroke="#A06010" stroke-width="1.8" stroke-dasharray="6,4" marker-end="url(#a-pull)"/>
<line x1="525" y1="160" x2="400" y2="74" stroke="#A06010" stroke-width="1.8" stroke-dasharray="6,4" marker-end="url(#a-pull)"/>
<line x1="655" y1="160" x2="420" y2="74" stroke="#A06010" stroke-width="1.8" stroke-dasharray="6,4" marker-end="url(#a-pull)"/>
<rect x="420" y="112" width="38" height="17" rx="3" fill="#fff" fill-opacity="0.9"/>
<text x="439" y="124" text-anchor="middle" fill="#A06010" font-size="11" font-weight="bold" font-style="italic" font-family="sans-serif">pull</text>
<!-- Agent nodes -->
<g transform="translate(50,160)"><rect width="90" height="34" rx="4" fill="#f2f2f8" stroke="#aaa"/><circle cx="76" cy="22" r="3" fill="#5cf"/><rect x="26" y="36" width="38" height="14" rx="3" fill="#A06010"/><text x="45" y="47" text-anchor="middle" fill="#fff" font-size="8" font-family="sans-serif">agent</text></g>
<g transform="translate(180,160)"><rect width="90" height="34" rx="4" fill="#f2f2f8" stroke="#aaa"/><circle cx="76" cy="22" r="3" fill="#5cf"/><rect x="26" y="36" width="38" height="14" rx="3" fill="#A06010"/><text x="45" y="47" text-anchor="middle" fill="#fff" font-size="8" font-family="sans-serif">agent</text></g>
<g transform="translate(330,160)"><rect width="90" height="34" rx="4" fill="#f2f2f8" stroke="#aaa"/><circle cx="76" cy="22" r="3" fill="#5cf"/><rect x="26" y="36" width="38" height="14" rx="3" fill="#A06010"/><text x="45" y="47" text-anchor="middle" fill="#fff" font-size="8" font-family="sans-serif">agent</text></g>
<g transform="translate(480,160)"><rect width="90" height="34" rx="4" fill="#f2f2f8" stroke="#aaa"/><circle cx="76" cy="22" r="3" fill="#5cf"/><rect x="26" y="36" width="38" height="14" rx="3" fill="#A06010"/><text x="45" y="47" text-anchor="middle" fill="#fff" font-size="8" font-family="sans-serif">agent</text></g>
<g transform="translate(610,160)"><rect width="90" height="34" rx="4" fill="#f2f2f8" stroke="#aaa"/><circle cx="76" cy="22" r="3" fill="#5cf"/><rect x="26" y="36" width="38" height="14" rx="3" fill="#A06010"/><text x="45" y="47" text-anchor="middle" fill="#fff" font-size="8" font-family="sans-serif">agent</text></g>
<text x="375" y="240" text-anchor="middle" fill="#4d5592" font-size="12" font-family="sans-serif">Managed Nodes</text>
</svg>
</section>
<!-- ─── SLIDE 27 : Puppet code ──────────────────────────────────── -->
@@ -375,9 +862,37 @@ class webserver {
<p>Puppet noticed. Puppet fixed it.<br>
<em>Continuous compliance — not just at deploy time. Every. 30. Minutes.</em><br>
No more gardening your servers by hand.</p>
<img src="https://media.giphy.com/media/l3q2K5jinAlChoCLS/giphy.gif"
alt="Automated maintenance"
style="height:180px; margin-top:0.5em; border-radius:6px;">
<svg width="750" height="200" viewBox="0 0 750 200" xmlns="http://www.w3.org/2000/svg" style="margin-top:0.5em;">
<defs>
<marker id="a-cycle" viewBox="0 0 10 7" refX="9" refY="3.5" markerWidth="9" markerHeight="7" orient="auto">
<polygon points="0 0,10 3.5,0 7" fill="#4d5592"/>
</marker>
</defs>
<!-- 1: Drift detected -->
<rect x="30" y="50" width="190" height="80" rx="12" fill="#fde8ec" stroke="#e00034" stroke-width="1.5"/>
<polygon points="70,68 80,88 60,88" fill="none" stroke="#e00034" stroke-width="2" stroke-linejoin="round"/>
<text x="70" y="84" text-anchor="middle" fill="#e00034" font-size="11" font-weight="bold" font-family="sans-serif">!</text>
<text x="135" y="84" text-anchor="middle" fill="#e00034" font-size="13" font-weight="bold" font-family="sans-serif">Drift</text>
<text x="135" y="100" text-anchor="middle" fill="#e00034" font-size="13" font-weight="bold" font-family="sans-serif">detected</text>
<circle cx="42" cy="56" r="10" fill="#e00034"/><text x="42" y="60" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold" font-family="sans-serif">1</text>
<!-- 2: Agent applies catalog -->
<rect x="520" y="50" width="200" height="80" rx="12" fill="#fdf4e8" stroke="#A06010" stroke-width="1.5"/>
<circle cx="565" cy="85" r="13" fill="none" stroke="#A06010" stroke-width="2"/>
<circle cx="565" cy="85" r="5" fill="#A06010"/>
<text x="632" y="84" text-anchor="middle" fill="#A06010" font-size="13" font-weight="bold" font-family="sans-serif">Agent</text>
<text x="632" y="100" text-anchor="middle" fill="#A06010" font-size="13" font-weight="bold" font-family="sans-serif">applies catalog</text>
<circle cx="532" cy="56" r="10" fill="#A06010"/><text x="532" y="60" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold" font-family="sans-serif">2</text>
<!-- 3: Compliant -->
<rect x="275" y="140" width="200" height="50" rx="12" fill="#e6f7ee" stroke="#00a344" stroke-width="1.5"/>
<polyline points="310,164 318,174 332,156" fill="none" stroke="#00a344" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<text x="395" y="171" text-anchor="middle" fill="#00a344" font-size="15" font-weight="bold" font-family="sans-serif">Compliant</text>
<circle cx="287" cy="146" r="10" fill="#00a344"/><text x="287" y="150" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold" font-family="sans-serif">3</text>
<!-- Curved arrows -->
<path d="M 220,72 C 330,20 420,20 518,72" fill="none" stroke="#4d5592" stroke-width="2" marker-end="url(#a-cycle)"/>
<path d="M 600,132 C 580,155 530,168 477,165" fill="none" stroke="#4d5592" stroke-width="2" marker-end="url(#a-cycle)"/>
<path d="M 275,165 C 210,168 140,155 120,132" fill="none" stroke="#4d5592" stroke-width="2" marker-end="url(#a-cycle)"/>
<text x="375" y="42" text-anchor="middle" fill="#4d5592" font-size="10" font-family="sans-serif">continuous enforcement loop</text>
</svg>
</section>
<!-- ─── SLIDE 29 : Puppet platforms ────────────────────────────── -->
@@ -401,9 +916,37 @@ class webserver {
<section>
<h2>They're not competing. They're complementary.</h2>
<p>Each one solves a different layer of the same problem.</p>
<img src="https://media.giphy.com/media/j2pWZpr5RlpCodOB0d/giphy.gif"
alt="Assembling"
style="height:200px; margin-top:0.5em; border-radius:6px;">
<svg width="800" height="280" viewBox="0 0 800 280" xmlns="http://www.w3.org/2000/svg" style="margin-top:0.5em;">
<defs>
<marker id="a-down" viewBox="0 0 10 10" refX="5" refY="10" markerWidth="10" markerHeight="10" orient="auto">
<polygon points="0 0,10 0,5 10" fill="#4d5592"/>
</marker>
</defs>
<!-- Terraform layer -->
<rect x="120" y="10" width="560" height="64" rx="10" fill="#7B42BC" fill-opacity="0.12" stroke="#7B42BC" stroke-width="2"/>
<text x="220" y="38" fill="#7B42BC" font-size="18" font-weight="bold" font-family="sans-serif">Terraform</text>
<text x="338" y="38" fill="#5a2e8c" font-size="16" font-family="sans-serif">— Provision</text>
<text x="220" y="56" fill="#8855cc" font-size="11" font-style="italic" font-family="sans-serif">VMs, networks, cloud resources</text>
<text x="100" y="42" text-anchor="end" fill="#7B42BC" font-size="11" font-weight="bold" font-family="sans-serif">Day 0</text>
<!-- Arrow -->
<line x1="400" y1="76" x2="400" y2="94" stroke="#4d5592" stroke-width="2.5" marker-end="url(#a-down)"/>
<!-- Ansible layer -->
<rect x="120" y="104" width="560" height="64" rx="10" fill="#CC0000" fill-opacity="0.1" stroke="#CC0000" stroke-width="2"/>
<text x="220" y="132" fill="#CC0000" font-size="18" font-weight="bold" font-family="sans-serif">Ansible</text>
<text x="306" y="132" fill="#a00" font-size="16" font-family="sans-serif">— Configure</text>
<text x="220" y="150" fill="#cc3333" font-size="11" font-style="italic" font-family="sans-serif">packages, services, app deployment</text>
<text x="100" y="136" text-anchor="end" fill="#CC0000" font-size="11" font-weight="bold" font-family="sans-serif">Day 1</text>
<!-- Arrow -->
<line x1="400" y1="170" x2="400" y2="188" stroke="#4d5592" stroke-width="2.5" marker-end="url(#a-down)"/>
<!-- Puppet layer -->
<rect x="120" y="198" width="560" height="64" rx="10" fill="#A06010" fill-opacity="0.1" stroke="#A06010" stroke-width="2"/>
<path d="M172,210 L188,216 L188,234 C188,244 172,250 172,250 C172,250 156,244 156,234 L156,216 Z" fill="none" stroke="#A06010" stroke-width="2"/>
<polyline points="164,232 170,238 180,224" fill="none" stroke="#A06010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="220" y="228" fill="#A06010" font-size="18" font-weight="bold" font-family="sans-serif">Puppet</text>
<text x="298" y="228" fill="#8a5010" font-size="16" font-family="sans-serif">— Enforce</text>
<text x="220" y="246" fill="#b07020" font-size="11" font-style="italic" font-family="sans-serif">continuous compliance, drift correction</text>
<text x="100" y="230" text-anchor="end" fill="#A06010" font-size="11" font-weight="bold" font-family="sans-serif">Day 2+</text>
</svg>
</section>
<!-- ─── SLIDE 32 : Real-world stack ─────────────────────────────── -->