ada60e8999
- CSS : theme Matrix avec pluie binaire, scanlines CRT, glow verts, animations - HTML : ajout de tous les accents francais (entites HTML) - Canvas Matrix rain en arriere-plan - Nouvelles classes : glow-card, data-bg, matrix-quote, terminal-line, tags, status-dot - Suppression des tirets em et emojis
488 lines
25 KiB
HTML
488 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Le Groupe Lazarus et le hack de Bybit (2025)</title>
|
|
|
|
<!-- Reveal.js core -->
|
|
<link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
|
|
<link rel="stylesheet" href="node_modules/reveal.js/dist/theme/black.css">
|
|
|
|
<!-- Highlight.js pour le code -->
|
|
<link rel="stylesheet" href="node_modules/reveal.js/plugin/highlight/monokai.css">
|
|
|
|
<!-- Thème personnalisé -->
|
|
<link rel="stylesheet" href="css/custom.css">
|
|
|
|
<!-- Canvas Matrix Rain -->
|
|
<style>
|
|
#matrix-rain {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100vw; height: 100vh;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.12;
|
|
}
|
|
.reveal { position: relative; z-index: 1; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="matrix-rain"></canvas>
|
|
<div class="reveal">
|
|
<div class="slides">
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 1 : Page de titre -->
|
|
<!-- ============================================ -->
|
|
<section class="title-slide data-bg">
|
|
<h1>Le Groupe Lazarus<br>& le hack de Bybit</h1>
|
|
<div class="subtitle">Février 2025 / 1,5 milliard de dollars en Ethereum</div>
|
|
<div class="authors">Présentation par [Prénom 1], [Prénom 2] et [Prénom 3]</div>
|
|
<div class="date">2025 / 2026</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 2 : Sommaire -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Sommaire</h1>
|
|
<div class="toc">
|
|
<ol>
|
|
<li>Qui est le Groupe Lazarus ?</li>
|
|
<li>Historique des attaques majeures</li>
|
|
<li>Le virage vers les cryptomonnaies</li>
|
|
<li>Bybit : la cible</li>
|
|
<li>Anatomie technique de l'attaque</li>
|
|
<li>Impact sur le marché</li>
|
|
<li>Réponse de Bybit et attribution</li>
|
|
<li>Se protéger contre ce type d'attaque</li>
|
|
<li>Enjeux géopolitiques</li>
|
|
<li>Conclusion</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 3 : Qui est le Groupe Lazarus ? -->
|
|
<!-- ============================================ -->
|
|
<section class="data-bg">
|
|
<h1>Qui est le Groupe Lazarus ?</h1>
|
|
<div class="two-cols">
|
|
<div>
|
|
<p>Groupe de hackers étatique lié à la <strong>Corée du Nord</strong>, actif depuis <strong>2009</strong>.</p>
|
|
<p>Classé comme <em>Advanced Persistent Threat</em> (APT) par les agences de renseignement occidentales.</p>
|
|
<p>Rattaché au <strong>Reconnaissance General Bureau</strong> (renseignement militaire nord-coréen) et au <strong>Bureau 121</strong>, l'unité de cyberguerre.</p>
|
|
<p>Composé de deux sous-groupes principaux :</p>
|
|
<ul>
|
|
<li><strong>BlueNorOff</strong> (APT38) : opérations financières</li>
|
|
<li><strong>AndAriel</strong> : espionnage ciblé sur la Corée du Sud</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Alias connus</h3>
|
|
<p>
|
|
<span class="tag">Hidden Cobra</span>
|
|
<span class="tag cyan">ZINC / Diamond Sleet</span>
|
|
<span class="tag">APT38</span>
|
|
<span class="tag cyan">Stardust Chollima</span>
|
|
<span class="tag">Guardians of Peace</span>
|
|
<span class="tag cyan">NICKEL ACADEMY</span>
|
|
</p>
|
|
<p class="source">Sources : MITRE ATT&CK G0032, US Treasury OFAC, Kaspersky</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 4 : Historique des attaques majeures -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Historique des attaques majeures</h1>
|
|
<ul class="timeline">
|
|
<li><span class="year">2009</span> Opération Troy : attaques DDoS contre la Corée du Sud</li>
|
|
<li><span class="year">2013</span> DarkSeoul : wiper contre banques et médias sud-coréens</li>
|
|
<li><span class="year">2014</span> Hack de Sony Pictures : vol de données, destruction de systèmes</li>
|
|
<li><span class="year">2016</span> Braquage de la Bangladesh Bank via SWIFT : <strong>81 M$</strong> volés</li>
|
|
<li><span class="year">2017</span> WannaCry : ransomware mondial, 200 000 machines dans 150 pays</li>
|
|
<li><span class="year">2022</span> Ronin Network (Axie Infinity) : <strong>620 M$</strong> en crypto</li>
|
|
<li><span class="year">2022</span> Horizon Bridge (Harmony) : <strong>100 M$</strong></li>
|
|
<li><span class="year">2023</span> Atomic Wallet : <strong>100 M$</strong>, Stake.com : <strong>41 M$</strong></li>
|
|
<li><span class="year">2024</span> WazirX (Inde) : <strong>235 M$</strong></li>
|
|
<li><span class="year">2025</span> <span class="alert">Bybit : 1,5 milliard de dollars</span></li>
|
|
</ul>
|
|
<p class="source">Sources : FBI, Chainalysis, Wikipedia</p>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 5 : Le virage crypto -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Le virage vers les cryptomonnaies</h1>
|
|
<div class="two-cols">
|
|
<div>
|
|
<h3>Pourquoi la crypto ?</h3>
|
|
<ul>
|
|
<li>Les sanctions internationales (ONU, USA, UE) bloquent les circuits financiers classiques</li>
|
|
<li>La blockchain offre un pseudo-anonymat exploitable avec des mixers et des bridges cross-chain</li>
|
|
<li>Les exchanges centralisées concentrent des milliards dans quelques wallets</li>
|
|
<li>Les smart contracts tiers représentent une surface d'attaque sous-estimée</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Estimation des vols</h3>
|
|
<div class="big-number">> 3 Md$</div>
|
|
<p style="text-align:center;">volés en cryptomonnaies depuis 2017 par des groupes liés à la Corée du Nord.</p>
|
|
<p>Selon les estimations, les revenus issus du cybercrime représentent environ <strong>50% des rentrées en devises étrangères</strong> de la RPDC.</p>
|
|
<p>Ces fonds financent directement les programmes nucléaire et balistique.</p>
|
|
<p class="source">Sources : Chainalysis 2024 Crypto Crime Report, Nations Unies</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 6 : Bybit - Contexte -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Bybit : la cible</h1>
|
|
<div class="two-cols">
|
|
<div>
|
|
<div class="glow-card">
|
|
<ul>
|
|
<li>Fondée en 2018, basée à <strong>Dubai</strong></li>
|
|
<li><span class="status-dot"></span>2e exchange mondial par volume de trading au moment de l'attaque</li>
|
|
<li>Environ <strong>16 milliards de dollars</strong> d'actifs sous gestion</li>
|
|
<li>Des millions d'utilisateurs dans le monde</li>
|
|
</ul>
|
|
</div>
|
|
<div class="matrix-quote">L'attaque a ciblé le <strong>cold wallet Ethereum</strong> de Bybit, le coffre-fort hors ligne censé être la couche de sécurité ultime.</div>
|
|
</div>
|
|
<div>
|
|
<h3>Cold wallet vs Hot wallet</h3>
|
|
<div class="diagram">
|
|
<div class="box cyan">Hot Wallet<br><small>en ligne, rapide</small></div>
|
|
<div class="arrow">←→</div>
|
|
<div class="box">Cold Wallet<br><small>hors ligne, sécurisé</small></div>
|
|
</div>
|
|
<p>Un cold wallet nécessite plusieurs signatures (multisig) pour autoriser un transfert. En théorie, même si un signataire est compromis, les fonds restent protégés.</p>
|
|
<p><strong>En théorie.</strong></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 7 : Anatomie technique 1/3 -->
|
|
<!-- ============================================ -->
|
|
<section class="data-bg">
|
|
<h1>Anatomie de l'attaque (1/3)</h1>
|
|
<h2>Vecteur initial : Safe{Wallet}</h2>
|
|
<p><strong>Safe{Wallet}</strong> (anciennement Gnosis Safe) est un service tiers utilisé par Bybit pour gérer la signature multiple (multisig) de ses cold wallets.</p>
|
|
<p>Les attaquants ont compromis l'infrastructure de Safe{Wallet} elle-même, pas directement les systèmes de Bybit.</p>
|
|
<div class="diagram">
|
|
<div class="box red">Lazarus</div>
|
|
<div class="arrow">→</div>
|
|
<div class="box red">Safe{Wallet}<br><small>compromis</small></div>
|
|
<div class="arrow">→</div>
|
|
<div class="box">Interface de<br>signature Bybit</div>
|
|
<div class="arrow">→</div>
|
|
<div class="box cyan">Signataires<br>Bybit</div>
|
|
</div>
|
|
<p>Les signataires de Bybit ont vu une interface apparemment légitime. Ils ont approuvé ce qui semblait être une transaction de routine, mais le contenu réel de la transaction avait été modifié côté serveur.</p>
|
|
<p class="source">Source : CoinTelegraph, Février 2025</p>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 8 : Anatomie technique 2/3 -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Anatomie de l'attaque (2/3)</h1>
|
|
<h2>Exploitation du smart contract</h2>
|
|
<div class="glow-card">
|
|
<p>La fausse transaction approuvée par les signataires a modifié la logique du smart contract du cold wallet :</p>
|
|
<ol>
|
|
<li>Les signataires approuvent une transaction qui semble normale</li>
|
|
<li class="fragment">La transaction réelle modifie le <em>implementation contract</em> du proxy wallet</li>
|
|
<li class="fragment">La nouvelle logique donne le contrôle total à l'attaquant</li>
|
|
<li class="fragment">L'attaquant transfère ~400 000 ETH en une seule opération</li>
|
|
</ol>
|
|
</div>
|
|
<div class="fragment">
|
|
<div class="big-number">~400 000 ETH</div>
|
|
<p style="text-align:center;">soit environ <strong>1,5 milliard de dollars</strong> au cours du jour</p>
|
|
</div>
|
|
<p class="source fragment">C'est le plus gros vol de cryptomonnaies de l'histoire.</p>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 9 : Anatomie technique 3/3 -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Anatomie de l'attaque (3/3)</h1>
|
|
<h2>Phase de blanchiment</h2>
|
|
<p>Une fois les fonds transférés, les attaquants ont lancé un processus de blanchiment sophistiqué et rapide :</p>
|
|
<div class="diagram">
|
|
<div class="box red">400K ETH<br>volés</div>
|
|
<div class="arrow">→</div>
|
|
<div class="box">Dispersion<br><small>multiples wallets</small></div>
|
|
<div class="arrow">→</div>
|
|
<div class="box">Mixers<br><small>Tornado Cash etc.</small></div>
|
|
<div class="arrow">→</div>
|
|
<div class="box">Bridges<br><small>cross-chain</small></div>
|
|
<div class="arrow">→</div>
|
|
<div class="box cyan">Conversion<br>en BTC</div>
|
|
</div>
|
|
<ul>
|
|
<li>Les fonds sont dispersés vers des centaines de wallets intermédiaires</li>
|
|
<li>Utilisation de <strong>mixers</strong> (protocoles de mélange) pour brouiller l'origine</li>
|
|
<li>Passage par des <strong>bridges cross-chain</strong> (Ethereum vers d'autres blockchains)</li>
|
|
<li>Conversion progressive en Bitcoin puis potentiellement en monnaie fiat via des exchanges non régulées</li>
|
|
<li>Utilisation de DEX (exchanges décentralisées) pour éviter le KYC</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 10 : Impact sur le marché -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Impact sur le marché</h1>
|
|
<div class="two-cols">
|
|
<div>
|
|
<h3>Chute des cours</h3>
|
|
<div class="glow-card red">
|
|
<div class="big-number" style="font-size:2em;">ETH : -20%</div>
|
|
<p>Ethereum a perdu plus de 20% de sa valeur dans les heures suivant l'annonce du hack.</p>
|
|
</div>
|
|
<div class="glow-card red">
|
|
<div class="big-number" style="font-size:2em;">BTC < 90K$</div>
|
|
<p>Le Bitcoin est passé sous la barre symbolique des 90 000 dollars.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Effets en chaîne</h3>
|
|
<ul>
|
|
<li>Ruée vers les retraits sur Bybit et d'autres exchanges</li>
|
|
<li>Plusieurs plateformes ont temporairement <strong>suspendu les retraits</strong></li>
|
|
<li>Panique généralisée sur les marchés crypto</li>
|
|
<li>Les régulateurs de plusieurs pays ont ouvert des enquêtes sur la sécurité des exchanges</li>
|
|
<li>Remise en question de la fiabilité des solutions multisig tierces</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p class="source">Sources : CNA, CoinTelegraph, Février 2025</p>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 11 : Réponse de Bybit -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Réponse de Bybit</h1>
|
|
<div class="glow-card">
|
|
<ul>
|
|
<li><span class="status-dot"></span><strong>Détection rapide</strong> : l'incident a été identifié en quelques heures</li>
|
|
<li><strong>Communication de crise</strong> : Bybit a publié des communiqués transparents dès le jour même</li>
|
|
<li><strong>Bounty program</strong> : une prime a été offerte pour aider à tracer et récupérer les fonds</li>
|
|
<li class="fragment"><strong>ZachXBT</strong>, analyste blockchain indépendant, a identifié le Groupe Lazarus comme responsable en quelques heures, via des patterns de transactions reconnaissables</li>
|
|
<li class="fragment"><strong>Arkham Intelligence</strong> a confirmé l'attribution en traçant les wallets vers des adresses liées à des opérations précédentes de Lazarus</li>
|
|
<li class="fragment">Le <strong>FBI</strong> a ensuite officiellement confirmé l'implication de la Corée du Nord</li>
|
|
</ul>
|
|
</div>
|
|
<div class="fragment">
|
|
<div class="matrix-quote">Bybit a déclaré être resté <strong>solvable</strong> tout au long de la crise et a annoncé avoir récupéré une partie des fonds volés.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 12 : Attribution à Lazarus -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Attribution à Lazarus</h1>
|
|
<h2>Comment sait-on que c'est eux ?</h2>
|
|
<div class="two-cols">
|
|
<div>
|
|
<h3>Indices techniques</h3>
|
|
<ul>
|
|
<li>Réutilisation de wallets liés à des hacks précédents (Axie Infinity, Horizon Bridge)</li>
|
|
<li>Patterns de blanchiment identiques : même séquence mixer/bridge/DEX</li>
|
|
<li>Infrastructure de commande et contrôle (C2) recoupée avec des opérations antérieures</li>
|
|
<li>Timing et méthodes cohérents avec le modus operandi de BlueNorOff</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Confirmations officielles</h3>
|
|
<div class="matrix-quote">
|
|
<ul>
|
|
<li><strong>ZachXBT</strong> : attribution publique en moins de 24h</li>
|
|
<li><strong>Arkham Intelligence</strong> : analyse on-chain confirmant les liens</li>
|
|
<li><strong>FBI</strong> : communiqué officiel confirmant l'implication de la RPDC</li>
|
|
<li><strong>Chainalysis</strong> et <strong>Elliptic</strong> : rapports détaillés de traçage des fonds</li>
|
|
</ul>
|
|
</div>
|
|
<p>L'attribution en cybersécurité est toujours délicate, mais le faisceau de preuves ici est particulièrement solide.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 13 : Comment se protéger ? -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Comment se protéger ?</h1>
|
|
<div class="two-cols">
|
|
<div>
|
|
<h3>Pour les exchanges / entreprises</h3>
|
|
<ul>
|
|
<li>Auditer régulièrement les <strong>dépendances tierces</strong> (supply chain security)</li>
|
|
<li>Implémenter une approche <strong>zero-trust</strong> pour les outils de signature</li>
|
|
<li>Vérifier les transactions au niveau du hardware, pas seulement via une interface web</li>
|
|
<li>Déployer du <strong>monitoring on-chain</strong> en temps réel pour détecter les mouvements anormaux</li>
|
|
<li>Pratiquer des exercices de <strong>red team</strong> réguliers</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3>Pour les utilisateurs individuels</h3>
|
|
<ul>
|
|
<li>Utiliser des <strong>hardware wallets</strong> (Ledger, Trezor) pour les fonds importants</li>
|
|
<li>Ne jamais laisser de grosses sommes sur un exchange</li>
|
|
<li>Activer l'authentification multi-facteurs (MFA) partout</li>
|
|
<li>Se méfier du <strong>phishing</strong> et de l'ingénierie sociale</li>
|
|
<li>Diversifier les lieux de stockage</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<hr class="matrix-hr">
|
|
<div class="matrix-quote">La leçon principale de ce hack : <strong>la sécurité d'un système dépend aussi de celle de ses prestataires</strong>.</div>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 14 : Enjeux géopolitiques -->
|
|
<!-- ============================================ -->
|
|
<section class="data-bg">
|
|
<h1>Enjeux géopolitiques</h1>
|
|
<div class="two-cols">
|
|
<div>
|
|
<h3>Financement étatique</h3>
|
|
<p>Les fonds volés ne servent pas à enrichir des individus. Ils alimentent directement les programmes <strong>nucléaire</strong> et <strong>balistique</strong> de la Corée du Nord.</p>
|
|
<div class="matrix-quote">
|
|
<ul>
|
|
<li>~50% des revenus en devises de la RPDC proviendraient du cybercrime</li>
|
|
<li>Environ 1 700 membres dans la seule unité BlueNorOff</li>
|
|
<li>Formation des hackers à l'université Kim Chaek et au Mirim College, avec un passage à Shenyang (Chine)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3>Cyberguerre asymétrique</h3>
|
|
<p>La Corée du Nord dispose de peu de ressources matérielles mais présente une <strong>menace asymétrique</strong> considérable dans le cyberespace.</p>
|
|
<ul>
|
|
<li>Coût d'une opération cyber : faible</li>
|
|
<li>Rendement potentiel : milliards de dollars</li>
|
|
<li>Risque pour les opérateurs : minimal (juridiction nord-coréenne)</li>
|
|
<li>Difficulté d'attribution et de riposte pour les victimes</li>
|
|
</ul>
|
|
<p>Les sanctions internationales sont contournées par le cyberespace.</p>
|
|
</div>
|
|
</div>
|
|
<p class="source">Sources : US Army report 2020, Nations Unies, Recorded Future</p>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 15 : Conclusion -->
|
|
<!-- ============================================ -->
|
|
<section>
|
|
<h1>Conclusion</h1>
|
|
<ul>
|
|
<li>Le Groupe Lazarus est l'une des menaces cyber les plus actives et les plus financièrement dévastatrices au monde</li>
|
|
<li>Le hack de Bybit (février 2025) est le plus gros vol de cryptomonnaies de l'histoire : <strong>1,5 milliard de dollars</strong></li>
|
|
<li>L'attaque a exploité une faiblesse dans un <strong>outil tiers</strong> (Safe{Wallet}), pas directement dans les systèmes de Bybit</li>
|
|
<li>La sécurité de la supply chain logicielle est un enjeu critique pour toute organisation</li>
|
|
<li>Le cybercrime étatique nord-coréen représente un défi géopolitique majeur, à l'intersection de la cybersécurité, de la finance et des relations internationales</li>
|
|
</ul>
|
|
<hr class="matrix-hr">
|
|
<p style="margin-top:1.5em;"><strong>En tant que futurs professionnels de l'informatique</strong>, comprendre ces attaques et les mécanismes de défense associés est essentiel, quelle que soit votre spécialisation.</p>
|
|
</section>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- SLIDE 16 : Questions -->
|
|
<!-- ============================================ -->
|
|
<section class="end-slide">
|
|
<h1>Questions ?</h1>
|
|
<p class="terminal-line">echo "Merci de votre attention"</p>
|
|
<div style="margin-top:2em; text-align:left; max-width:600px; margin-left:auto; margin-right:auto;">
|
|
<h3>Sources principales</h3>
|
|
<ul style="font-size:0.65em;">
|
|
<li>Wikipedia : Lazarus Group</li>
|
|
<li>CoinTelegraph : "How the Bybit hack happened" (mars 2025)</li>
|
|
<li>Arkham Intelligence : attribution Lazarus</li>
|
|
<li>FBI : communiqué officiel (février 2025)</li>
|
|
<li>Chainalysis : Crypto Crime Report 2024/2025</li>
|
|
<li>MITRE ATT&CK : G0032 Lazarus Group</li>
|
|
<li>US Army : "North Korean Tactics" (ATP 7-100.2, 2020)</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
</div><!-- .slides -->
|
|
</div><!-- .reveal -->
|
|
|
|
<!-- Reveal.js scripts -->
|
|
<script src="node_modules/reveal.js/dist/reveal.js"></script>
|
|
<script src="node_modules/reveal.js/plugin/highlight/highlight.js"></script>
|
|
|
|
<script>
|
|
Reveal.initialize({
|
|
hash: true,
|
|
slideNumber: true,
|
|
progress: true,
|
|
center: false,
|
|
transition: 'fade',
|
|
transitionSpeed: 'fast',
|
|
plugins: [RevealHighlight],
|
|
width: 1280,
|
|
height: 720
|
|
});
|
|
|
|
// Matrix Rain Animation
|
|
(function() {
|
|
var canvas = document.getElementById('matrix-rain');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
var chars = '01';
|
|
var fontSize = 14;
|
|
var columns = Math.floor(canvas.width / fontSize);
|
|
var drops = [];
|
|
|
|
for (var i = 0; i < columns; i++) {
|
|
drops[i] = Math.random() * canvas.height / fontSize;
|
|
}
|
|
|
|
function draw() {
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = '#00ff41';
|
|
ctx.font = fontSize + 'px monospace';
|
|
|
|
for (var i = 0; i < drops.length; i++) {
|
|
var text = chars.charAt(Math.floor(Math.random() * chars.length));
|
|
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
|
|
|
|
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
|
|
drops[i] = 0;
|
|
}
|
|
drops[i]++;
|
|
}
|
|
}
|
|
|
|
setInterval(draw, 50);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|