<link>https://virzzu.github.io/</link></image><item><title>Machine Learning & AI</h1> <article> <h1>Machine Learning & AI</h1> <p>Sat, 10 Feb 2024 00:00:00 +0000</p> <p>Machine learning models for biological prediction and classification tasks, including neural networks and statistical learning approaches.</p> </article> <article> <h1>Data Analysis & Visualization</h1> <p>Mon, 15 Jan 2024 00:00:00 +0000</p> <p>Data wrangling, statistical analysis, and visualization projects using Python and R for biological datasets.</p> </article> <article> <h1>Example Talk: Recent Work</h1> <p>Mon, 01 Jan 2024 00:00:00 +0000</p>  <h1 id="example-talk">Example Talk</h1> <h3 id="dr-alex-johnson--meta-ai">Dr. Alex Johnson · Meta AI</h3> <hr> <h2 id="research-overview">Research Overview</h2> <ul> <li>Multimodal LLMs</li> <li>Efficient training</li> <li>Responsible AI</li> </ul> <hr> <h2 id="code--math">Code & Math</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">score</span><span class="p">(</span><span class="n">x</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-></span> <span class="nb">int</span><span class="p">:</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="n">x</span> <span class="o">*</span> <span class="n">x</span> </span></span></code></pre></div>$$ E = mc^2 $$<hr> <h2 id="dual-column-layout">Dual Column Layout</h2> <div class="r-hstack"> <div style="flex: 1; padding-right: 1rem;"> <h3 id="left-column">Left Column</h3> <ul> <li>Point A</li> <li>Point B</li> <li>Point C</li> </ul> </div> <div style="flex: 1; padding-left: 1rem;"> <h3 id="right-column">Right Column</h3> <ul> <li>Detail 1</li> <li>Detail 2</li> <li>Detail 3</li> </ul> </div> </div> <hr>  <div style="display: flex; gap: 2rem;"> <div style="flex: 2;"> <h3 id="main-content-23-width">Main Content (2/3 width)</h3> <p>This column takes up twice the space of the right column.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">example</span><span class="p">():</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s2">"code works too"</span> </span></span></code></pre></div></div> <div style="flex: 1;"> <h3 id="sidebar-13-width">Sidebar (1/3 width)</h3> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><strong>Note</strong><br> Key points in smaller column</p> </blockquote> </div> </div> <hr> <h2 id="image--text-layout">Image + Text Layout</h2> <div class="r-hstack" style="align-items: center;"> <div style="flex: 1;"> <p> <figure > <div class="flex justify-center "> <div class="w-full" ></div> </div></figure> </p> </div> <div style="flex: 1; padding-left: 2rem;"> <h3 id="results">Results</h3> <ul> <li>95% accuracy</li> <li>10x faster inference</li> <li>Lower memory usage</li> </ul> <span class="fragment " > <strong>Breakthrough!</strong> </span> </div> </div> <hr> <h2 id="speaker-notes">Speaker Notes</h2> <p>Press <strong>S</strong> to open presenter view with notes!</p> <p>This slide has hidden speaker notes below.</p> <p>Note:</p> <ul> <li>This is a <strong>speaker note</strong> (only visible in presenter view)</li> <li>Press <code>S</code> key to open presenter console</li> <li>Perfect for remembering key talking points</li> <li>Can include reminders, timing, references</li> <li>Supports <strong>Markdown</strong> formatting too!</li> </ul> <hr> <h2 id="progressive-reveals">Progressive Reveals</h2> <p>Content appears step-by-step:</p> <span class="fragment " > First point appears </span> <span class="fragment " > Then the second point </span> <span class="fragment " > Finally the conclusion </span> <span class="fragment highlight-red" > This one can be <strong>highlighted</strong>! </span> <p>Note: Use fragments to control pacing and maintain audience attention. Each fragment appears on click.</p> <hr> <h2 id="diagrams-with-mermaid">Diagrams with Mermaid</h2> <div class="mermaid">graph LR A[Research Question] --> B{Hypothesis} B -->|Valid| C[Experiment] B -->|Invalid| D[Revise] C --> E[Analyze Data] E --> F{Significant?} F -->|Yes| G[Publish] F -->|No| D </div> <p>Perfect for: Workflows, architectures, processes</p> <p>Note: Mermaid diagrams are created from simple text. They’re version-controllable and edit anywhere!</p> <hr> <h2 id="research-results">Research Results</h2> <table> <thead> <tr> <th>Model</th> <th>Accuracy</th> <th>Speed</th> <th>Memory</th> </tr> </thead> <tbody> <tr> <td>Baseline</td> <td>87.3%</td> <td>1.0x</td> <td>2GB</td> </tr> <tr> <td>Ours (v1)</td> <td>92.1%</td> <td>1.5x</td> <td>1.8GB</td> </tr> <tr> <td><strong>Ours (v2)</strong></td> <td><strong>95.8%</strong></td> <td><strong>2.3x</strong></td> <td><strong>1.2GB</strong></td> </tr> </tbody> </table> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><strong>Key Finding:</strong> 8.5% improvement over baseline with 40% memory reduction</p> </blockquote> <p>Note: Tables are perfect for comparative results. Markdown tables are simple and version-control friendly.</p> <hr> <section data-noprocess data-shortcode-slide data-background-color="#1e3a8a" > <h2 id="custom-backgrounds">Custom Backgrounds</h2> <p>This slide has a <strong>blue background</strong>!</p> <p>You can customize:</p> <ul> <li>Background colors</li> <li>Background images</li> <li>Gradients</li> <li>Videos (yes, really!)</li> </ul> <p>Use <code>{{< slide background-color="#hex" >}}</code></p> <hr> <h2 id="vertical-navigation">Vertical Navigation</h2> <p><strong>There’s more content below! ⬇️</strong></p> <p>Press the <strong>Down Arrow</strong> to see substeps.</p> <p>Note: This demonstrates Reveal.js’s vertical slide feature. Great for optional details or deep dives.</p> <hr> <section data-noprocess data-shortcode-slide id="substep-1" > <h3 id="substep-1-details">Substep 1: Details</h3> <p>This is additional content in a vertical stack.</p> <p>Navigate down for more, or right to skip to next topic →</p> <hr> <section data-noprocess data-shortcode-slide id="substep-2" > <h3 id="substep-2-more-details">Substep 2: More Details</h3> <p>Even more detailed information.</p> <p>Press <strong>Up Arrow</strong> to go back, or <strong>Right Arrow</strong> to continue.</p> <hr> <h2 id="citations--quotes">Citations & Quotes</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>“The best way to predict the future is to invent it.”</p> <p>— Alan Kay</p> </blockquote> <p>Or reference research:</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>Recent work by Smith et al. (2024) demonstrates that Markdown-based slides improve reproducibility by 78% compared to proprietary formats<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p> </blockquote> <hr> <h2 id="media-youtube-videos">Media: YouTube Videos</h2> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> </div> <p>Note: Embed YouTube videos with just the video ID. Perfect for demos, tutorials, or interviews.</p> <hr> <h2 id="media-all-options">Media: All Options</h2> <p>Embed various media types with simple shortcodes:</p> <ul> <li><strong>YouTube</strong>: <code>{{< youtube VIDEO_ID >}}</code></li> <li><strong>Bilibili</strong>: <code>{{< bilibili id="BV1..." >}}</code></li> <li><strong>Local videos</strong>: <code>{{< video src="file.mp4" controls="yes" >}}</code></li> <li><strong>Audio</strong>: <code>{{< audio src="file.mp3" >}}</code></li> </ul> <p>Perfect for demos, interviews, tutorials, or podcasts!</p> <p>Note: All media types work seamlessly in slides. Just use the appropriate shortcode.</p> <hr> <h2 id="interactive-elements">Interactive Elements</h2> <p>Try these keyboard shortcuts:</p> <ul> <li><code>→</code> <code>←</code> : Navigate slides</li> <li><code>↓</code> <code>↑</code> : Vertical navigation</li> <li><code>S</code> : Speaker notes</li> <li><code>F</code> : Fullscreen</li> <li><code>O</code> : Overview mode</li> <li><code>/</code> : Search</li> <li><code>ESC</code> : Exit modes</li> </ul> <hr>  <h2 id="hidden-slide-demo-inline-comment">Hidden Slide Demo (Inline Comment)</h2> <p>This slide is hidden using the <code></code> comment method.</p> <p>Perfect for:</p> <ul> <li>Speaker-only content</li> <li>Backup slides</li> <li>Work-in-progress content</li> </ul> <p>Note: This slide won’t appear in the presentation but remains in source for reference.</p> <hr> <h2 id="thanks">Thanks</h2> <h3 id="questions">Questions?</h3> <ul> <li>🌐 Website: </li> <li>🐦 X/Twitter: </li> <li>💬 Discord: </li> <li>⭐ GitHub: </li> </ul> <p><strong>All slides created with Markdown</strong> • No vendor lock-in • Edit anywhere</p> <p>Note: Thank you for your attention! Feel free to reach out with questions or contributions.</p> <hr> <h2 id="-branding-your-slides">🎨 Branding Your Slides</h2> <p>Add your identity to every slide with simple configuration!</p> <p><strong>What you can add:</strong></p> <table> <thead> <tr> <th>Element</th> <th>Position Options</th> </tr> </thead> <tbody> <tr> <td>Logo</td> <td>top-left, top-right, bottom-left, bottom-right</td> </tr> <tr> <td>Title</td> <td>Same as above</td> </tr> <tr> <td>Author</td> <td>Same as above</td> </tr> <tr> <td>Footer Text</td> <td>Same + bottom-center</td> </tr> </tbody> </table> <p>Edit the <code>branding:</code> section in your slide’s front matter (top of file).</p> <hr> <h2 id="-adding-your-logo">📁 Adding Your Logo</h2> <ol> <li>Place your logo in <code>assets/media/</code> folder</li> <li>Use SVG format for best results (auto-adapts to any theme!)</li> <li>Add to front matter:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">branding</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">logo</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">filename</span><span class="p">:</span><span class="w"> </span><span class="s2">"your-logo.svg"</span><span class="w"> </span><span class="c"># Must be in assets/media/</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"top-right"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">width</span><span class="p">:</span><span class="w"> </span><span class="s2">"60px"</span><span class="w"> </span></span></span></code></pre></div><p><strong>Tip:</strong> SVGs with <code>fill="currentColor"</code> automatically match theme colors!</p> <hr> <h2 id="-title--author-overlays">📝 Title & Author Overlays</h2> <p>Show presentation title and/or author on every slide:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">branding</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">show</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"bottom-left"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">text</span><span class="p">:</span><span class="w"> </span><span class="s2">"Short Title"</span><span class="w"> </span><span class="c"># Optional: override long page title</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">author</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">show</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"bottom-right"</span><span class="w"> </span></span></span></code></pre></div><p>Author is auto-detected from page front matter (<code>author:</code> or <code>authors:</code>).</p> <hr> <h2 id="-footer-text">📄 Footer Text</h2> <p>Add copyright, conference name, or any persistent text:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">branding</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">footer</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">text</span><span class="p">:</span><span class="w"> </span><span class="s2">"© 2024 Your Name · ICML 2024"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"bottom-center"</span><span class="w"> </span></span></span></code></pre></div><p><strong>Tip:</strong> Supports Markdown! Use <code>[Link](url)</code> for clickable links.</p> <hr>  <h2 id="-hiding-branding-per-slide">🔇 Hiding Branding Per-Slide</h2> <p>Sometimes you want a clean slide (title slides, full-screen images).</p> <p>Add this comment at the <strong>start</strong> of your slide content:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="gu">## My Clean Slide </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">Content here... </span></span></code></pre></div><p>☝️ <strong>This slide uses <code></code></strong> — notice no logo or overlays!</p> <hr>  <h2 id="-selective-hiding">🔇 Selective Hiding</h2> <p>Hide just the header (logo + title):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"> </span></span></code></pre></div><p>Or just the footer (author + footer text):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"> </span></span></code></pre></div><p>☝️ <strong>This slide uses <code></code></strong> — footer still visible below!</p> <hr>  <h2 id="-quick-reference">✅ Quick Reference</h2> <table> <thead> <tr> <th>Comment</th> <th>Hides</th> </tr> </thead> <tbody> <tr> <td><code></code></td> <td>Everything (logo, title, author, footer)</td> </tr> <tr> <td><code></code></td> <td>Logo + Title overlay</td> </tr> <tr> <td><code></code></td> <td>Author + Footer text</td> </tr> </tbody> </table> <p>☝️ <strong>This slide uses <code></code></strong> — logo still visible above!</p> <hr> <h2 id="-get-started">🚀 Get Started</h2> <ol> <li>Copy this example’s front matter as a starting point</li> <li>Replace logo with yours in <code>assets/media/</code></li> <li>Customize positions and text</li> <li>Use <code></code> for special slides</li> </ol> <p><strong>Pro tip:</strong> Set site-wide defaults in <code>config/_default/params.yaml</code> under <code>slides.branding</code>!</p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p>Smith, J. et al. (2024). <em>Open Science Presentations</em>. Nature Methods. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> </article> <article> <h1>scikit-learn</h1> <p>Thu, 26 Oct 2023 00:00:00 +0000</p> <p>scikit-learn is a Python module for machine learning built on top of SciPy and is distributed under the 3-Clause BSD license.</p> </article> <article> <h1>Experience</h1> <p>Tue, 24 Oct 2023 00:00:00 +0000</p> </article> <article> <h1>An example preprint / working paper</h1> <p>Sun, 07 Apr 2019 00:00:00 +0000</p> <p>This work is driven by the results in my on LLMs.</p> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>Create your slides in Markdown - click the <em>Slides</em> button to check out the example.</p></div> </div> </div> <p>Add the publication’s <strong>full text</strong> or <strong>supplementary notes</strong> here. You can use rich formatting such as including .</p> </article> <article> <h1>Create Beautiful Presentations with Markdown</h1> <p>Sun, 01 Jan 2017 00:00:00 +0000</p> <h2 id="-why-markdown-slides">🎯 Why Markdown Slides?</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500" data-callout="success" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">True Presentation Freedom</div> <div class="callout-body"><p>Unlike PowerPoint or Keynote, your presentations are <strong>future-proof</strong>, <strong>portable</strong>, and completely <strong>under your control</strong>. No proprietary formats, no vendor lock-in, no subscription fees.</p></div> </div> </div> <h3 id="the-problem-with-traditional-slides">The Problem with Traditional Slides</h3> <p><strong>PowerPoint & Keynote:</strong></p> <ul> <li>💸 Expensive licenses or subscriptions</li> <li>🔒 Proprietary file formats (<code>.pptx</code>, <code>.key</code>)</li> <li>💻 Platform-specific (Windows/Mac only)</li> <li>📦 Large binary files</li> <li>🚫 Difficult to version control</li> <li>😰 Lost formatting when sharing</li> </ul> <p><strong>Google Slides:</strong></p> <ul> <li>☁️ Requires internet connection</li> <li>🔐 Data stored on Google’s servers</li> <li>📱 Limited offline editing</li> <li>🎨 Formatting breaks when exporting</li> <li>🔗 Dependency on Google’s platform</li> </ul> <h3 id="the-hugo-blox-solution">The Hugo Blox Solution</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Markdown Changes Everything</strong></div> <div class="callout-body"><p>Write your presentations in simple, human-readable Markdown. Edit anywhere, present anywhere, own forever.</p></div> </div> </div> <hr> <h2 id="-what-you-get">✨ What You Get</h2> <h3 id="-professional-design-zero-effort">🎨 Professional Design, Zero Effort</h3> <ul> <li><strong>15+ Built-in Themes</strong> — Black, white, sky, league, and more</li> <li><strong>Syntax Highlighting</strong> — Beautiful code blocks with 50+ languages</li> <li><strong>Math Support</strong> — LaTeX equations render perfectly: $E = mc^2$</li> <li><strong>Responsive</strong> — Looks great on any screen size</li> </ul> <h3 id="-write-in-plain-text">📝 Write in Plain Text</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="gu">## My Slide Title </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">-</span> Point one </span></span><span class="line"><span class="cl"><span class="k">-</span> Point two </span></span><span class="line"><span class="cl"><span class="k">-</span> Point three </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="s">```python </span></span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">hello</span><span class="p">():</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s2">"World!"</span> </span></span><span class="line"><span class="cl"><span class="s">```</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">--- </span></span></code></pre></div><p>That’s it! No complex UI, no formatting headaches.</p> <h3 id="-edit-anywhere-anytime">🔄 Edit Anywhere, Anytime</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="important" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Zero Lock-In</strong></div> <div class="callout-body"><p>Your slides are just Markdown files. Edit them in:</p> <ul> <li><strong>HugoBlox Studio</strong> — Visual editing with live preview</li> <li><strong>VS Code</strong> — With Markdown extensions</li> <li><strong>Obsidian</strong> — Note-taking app that speaks Markdown</li> <li><strong>Typora</strong> — Minimal distraction writing</li> <li><strong>Any text editor</strong> — Even Notepad works!</li> </ul></div> </div> </div> <div class="text-left"> <a id="button-ff5434c33e7f3eab1e3e4dedf86c1c6e" href="https://docs.hugoblox.com/guides/studio/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-xl" role="button" aria-label="Try HugoBlox Studio" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.53 16.122a3 3 0 0 0-5.78 1.128a2.25 2.25 0 0 1-2.4 2.245a4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128m0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.764m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/></svg> </span> <span>Try HugoBlox Studio</span> </a> </div> <h3 id="-advanced-features">🎯 Advanced Features</h3> <p><strong>Dual Column Layouts:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><div style="display: flex; gap: 2rem;"> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Column 1</div> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Column 2</div> </span></span><span class="line"><span class="cl"></div> </span></span></code></pre></div><p><strong>Fragment Animations:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< fragment >}}Appear on click!{{< /fragment >}} </span></span></code></pre></div><p><strong>Speaker Notes:</strong></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">Note: Your private notes here </span></span><span class="line"><span class="cl">(visible in presenter view only) </span></span></code></pre></div><p><strong>Vertical Slide Stacks:</strong> Navigate down for sub-topics!</p> <hr> <h2 id="-getting-started-is-easy">🚀 Getting Started is Easy</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="example" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21a48.25 48.25 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Create Your First Slide Deck in 3 Steps</strong></div> <div class="callout-body"></div> </div> </div> <h3 id="step-1-create-your-slides">Step 1: Create Your Slides</h3> <p>Create <code>content/slides/my-talk/index.md</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">"My Amazing Talk"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">type</span><span class="p">:</span><span class="w"> </span><span class="l">slides</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">slides</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">theme</span><span class="p">:</span><span class="w"> </span><span class="l">black</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c"># My Amazing Talk</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c">### Your Name</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c">## Main Points</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl">- <span class="l">Point 1</span><span class="w"> </span></span></span><span class="line"><span class="cl">- <span class="l">Point 2</span><span class="w"> </span></span></span><span class="line"><span class="cl">- <span class="l">Point 3</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="c">## Thank You!</span><span class="w"> </span></span></span></code></pre></div><h3 id="step-2-link-to-your-event">Step 2: Link to Your Event</h3> <p>In your event page (<code>content/events/my-event/index.md</code>):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">"My Conference Presentation"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nt">slides</span><span class="p">:</span><span class="w"> </span><span class="s2">"my-talk"</span><span class="w"> </span><span class="c"># References the slides folder name</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="nn">---</span><span class="w"> </span></span></span></code></pre></div><h3 id="step-3-present">Step 3: Present!</h3> <p>Your slides are automatically:</p> <ul> <li>✅ Embedded on the event page</li> <li>✅ Available in fullscreen mode (click <span class="inline-block pr-1"> <span style="height: 1em; transform: translateY(0.1em);">arrows-expand</span> </span> button)</li> <li>✅ Accessible at a direct URL</li> <li>✅ Keyboard-navigatable (→ ← keys)</li> </ul> <div class="text-center"> <a id="button-3f098d62b17fdd4113898a5c7822d589" href="https://docs.hugoblox.com/guides/slides/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Read Full Documentation" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/></svg> </span> <span>Read Full Documentation</span> </a> </div> <hr> <h2 id="-why-academics--researchers-love-it">💎 Why Academics & Researchers Love It</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-500" data-callout="quote" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-gray-600 dark:text-gray-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193c-.34.027-.68.052-1.02.072v3.091l-3-3a49.5 49.5 0 0 1-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095a48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402c-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235c.577.075 1.157.14 1.74.194V21l4.155-4.155"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Quote</div> <div class="callout-body"><p>“I can finally version control my presentations with Git, collaborate using GitHub, and never worry about formatting breaking again. Game changer for reproducible research!” — <em>Dr. Xin Liu, MIT</em></p></div> </div> </div> <h3 id="perfect-for-research">Perfect for Research</h3> <ul> <li><strong>Version Control</strong> — Track every change with Git</li> <li><strong>Collaboration</strong> — Use GitHub pull requests for slide reviews</li> <li><strong>Reproducibility</strong> — Slides are plain text, commit them with your code</li> <li><strong>Open Science</strong> — Share presentations on GitHub, no barriers</li> <li><strong>Citations</strong> — Include BibTeX references easily</li> <li><strong>Jupyter Integration</strong> — Embed notebooks and visualizations</li> </ul> <h3 id="perfect-for-teaching">Perfect for Teaching</h3> <ul> <li><strong>Reusable Content</strong> — Mix and match slides across courses</li> <li><strong>Student Contributions</strong> — Students can submit slide PRs</li> <li><strong>Live Coding</strong> — Syntax highlighting for all languages</li> <li><strong>Interactive Examples</strong> — Embed interactive visualizations</li> <li><strong>Accessible</strong> — Keyboard navigation, screen reader friendly</li> </ul> <hr> <h2 id="-see-it-in-action">🎬 See It In Action</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p><strong>Try it now!</strong> The slides embedded above demonstrate all these features:</p> <ul> <li>Code highlighting with Python</li> <li>Mathematical equations with LaTeX</li> <li>Dual column layouts (slides 4-6)</li> <li>Fragment animations</li> <li>Multiple themes</li> </ul> <p>Click the <span class="inline-block pr-1"> <span style="height: 1em; transform: translateY(0.1em);">arrows-expand</span> </span> <strong>fullscreen button</strong> (top right) to experience presentation mode!</p></div> </div> </div> <h3 id="live-features-to-try">Live Features to Try</h3> <ol> <li><strong>Navigate</strong>: Use arrow keys (→ ←) or click controls</li> <li><strong>Fullscreen</strong>: Click the expand button to go fullscreen</li> <li><strong>Speaker Notes</strong>: Press <code>S</code> to open presenter view (try it!)</li> <li><strong>Overview</strong>: Press <code>ESC</code> to see all slides at once</li> <li><strong>Search</strong>: Press <code>/</code> to search slide content</li> <li><strong>Zoom</strong>: <code>Alt+Click</code> to zoom into details</li> </ol> <div class="text-left"> <a id="button-7519dfcc27cf03dd985a63a0b9a6155b" href="https://virzzu.github.io/slides/example/" target="_blank" rel="noopener" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 active:bg-primary-100 dark:active:bg-primary-950 hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Open Slides in New Tab" > <span class="flex-shrink-0"> <span class="flex items-center justify-center leading-none text-lg">external-link</span> </span> <span>Open Slides in New Tab</span> </a> </div> <hr> <h2 id="-comparison">🆚 Comparison</h2> <table> <thead> <tr> <th>Feature</th> <th>PowerPoint</th> <th>Google Slides</th> <th><strong>Hugo Blox</strong></th> </tr> </thead> <tbody> <tr> <td><strong>Cost</strong></td> <td>$159.99/year</td> <td>Free*</td> <td><strong>Free Forever</strong></td> </tr> <tr> <td><strong>Format</strong></td> <td>Binary (<code>.pptx</code>)</td> <td>Proprietary</td> <td><strong>Plain Markdown</strong></td> </tr> <tr> <td><strong>Version Control</strong></td> <td>❌ Difficult</td> <td>❌ Limited</td> <td><strong>✅ Git Native</strong></td> </tr> <tr> <td><strong>Offline Editing</strong></td> <td>✅ Yes</td> <td>⚠️ Limited</td> <td><strong>✅ Fully Offline</strong></td> </tr> <tr> <td><strong>Platform Lock-in</strong></td> <td>⚠️ Microsoft</td> <td>⚠️ Google</td> <td><strong>✅ None</strong></td> </tr> <tr> <td><strong>Code Highlighting</strong></td> <td>⚠️ Basic</td> <td>⚠️ Limited</td> <td><strong>✅ 50+ Languages</strong></td> </tr> <tr> <td><strong>Math Equations</strong></td> <td>⚠️ Clunky</td> <td>⚠️ Basic</td> <td><strong>✅ Full LaTeX</strong></td> </tr> <tr> <td><strong>Portability</strong></td> <td>❌ Poor</td> <td>❌ Requires Google</td> <td><strong>✅ Works Anywhere</strong></td> </tr> <tr> <td><strong>Future-Proof</strong></td> <td>❌ Format changes</td> <td>⚠️ API changes</td> <td><strong>✅ Plain Text Forever</strong></td> </tr> <tr> <td><strong>Open Source</strong></td> <td>❌ No</td> <td>❌ No</td> <td><strong>✅ Yes</strong></td> </tr> </tbody> </table> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500" data-callout="success" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Success</div> <div class="callout-body"><p><strong>Hugo Blox wins on freedom, portability, and long-term sustainability.</strong></p></div> </div> </div> <hr> <h2 id="-advanced-capabilities">🛠️ Advanced Capabilities</h2> <h3 id="code-blocks-with-syntax-highlighting">Code Blocks with Syntax Highlighting</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">torch</span> </span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">torch.nn</span> <span class="k">as</span> <span class="nn">nn</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="k">class</span> <span class="nc">Transformer</span><span class="p">(</span><span class="n">nn</span><span class="o">.</span><span class="n">Module</span><span class="p">):</span> </span></span><span class="line"><span class="cl"> <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">d_model</span><span class="o">=</span><span class="mi">512</span><span class="p">,</span> <span class="n">nhead</span><span class="o">=</span><span class="mi">8</span><span class="p">):</span> </span></span><span class="line"><span class="cl"> <span class="nb">super</span><span class="p">()</span><span class="o">.</span><span class="fm">__init__</span><span class="p">()</span> </span></span><span class="line"><span class="cl"> <span class="bp">self</span><span class="o">.</span><span class="n">attention</span> <span class="o">=</span> <span class="n">nn</span><span class="o">.</span><span class="n">MultiheadAttention</span><span class="p">(</span><span class="n">d_model</span><span class="p">,</span> <span class="n">nhead</span><span class="p">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"> <span class="k">def</span> <span class="nf">forward</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span> <span class="n">x</span><span class="p">):</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="bp">self</span><span class="o">.</span><span class="n">attention</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">x</span><span class="p">,</span> <span class="n">x</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span> </span></span></code></pre></div><h3 id="mathematical-equations">Mathematical Equations</h3> <p>Display equations with LaTeX:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="nv">\nabla</span><span class="nb"> </span><span class="nv">\times</span><span class="nb"> </span><span class="nv">\vec</span><span class="nb">{E} </span><span class="o">=</span><span class="nb"> </span><span class="o">-</span><span class="nv">\frac</span><span class="nb">{</span><span class="nv">\partial</span><span class="nb"> </span><span class="nv">\vec</span><span class="nb">{B}}{</span><span class="nv">\partial</span><span class="nb"> t} </span></span></span><span class="line"><span class="cl"><span class="s">$$</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="nv">\int</span><span class="nb">_{</span><span class="o">-</span><span class="nv">\infty</span><span class="nb">}^{</span><span class="nv">\infty</span><span class="nb">} e^{</span><span class="o">-</span><span class="nb">x^</span><span class="m">2</span><span class="nb">} dx </span><span class="o">=</span><span class="nb"> </span><span class="nv">\sqrt</span><span class="nb">{</span><span class="nv">\pi</span><span class="nb">} </span></span></span><span class="line"><span class="cl"><span class="s">$$</span> </span></span></code></pre></div><h3 id="dual-column-layouts">Dual Column Layouts</h3> <p>Perfect for before/after comparisons, code + explanation, or image + text:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><div style="display: flex; gap: 2rem;"> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Left content</div> </span></span><span class="line"><span class="cl"> <div style="flex: 1;">Right content</div> </span></span><span class="line"><span class="cl"></div> </span></span></code></pre></div><p>See slides 4-6 in the embedded presentation above for live examples!</p> <hr> <h2 id="-for-educators-teach-the-future">🎓 For Educators: Teach the Future</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Empower Your Students</strong></div> <div class="callout-body"><p>Teaching with Hugo Blox means teaching modern, transferable skills:</p> <ul> <li>Markdown (used everywhere: GitHub, Notion, Obsidian)</li> <li>Version control (essential for careers)</li> <li>Web technologies (HTML, CSS)</li> <li>Reproducible science practices</li> </ul></div> </div> </div> <h3 id="course-integration">Course Integration</h3> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">courses/ </span></span><span class="line"><span class="cl">├── ml-101/ </span></span><span class="line"><span class="cl">│ ├── lecture-1/ </span></span><span class="line"><span class="cl">│ │ ├── index.md (slides) </span></span><span class="line"><span class="cl">│ │ └── notes.md </span></span><span class="line"><span class="cl">│ ├── lecture-2/ </span></span><span class="line"><span class="cl">│ │ └── index.md </span></span><span class="line"><span class="cl">│ └── _index.md </span></span></code></pre></div><p>Each lecture gets its own slide deck, all version controlled, all editable by students as PRs.</p> <hr> <h2 id="-join-the-community">🌍 Join the Community</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="important" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Built by Academics, for Academics</strong></div> <div class="callout-body"><p>Hugo Blox is used by researchers at:</p> <ul> <li>🎓 Stanford, MIT, Harvard, Oxford, Cambridge</li> <li>🏢 Google Research, Meta AI, OpenAI</li> <li>🔬 CERN, NASA, NIH</li> <li>🌐 Thousands of universities worldwide</li> </ul></div> </div> </div> <div class="text-center"> <a id="button-308ee88d3551ad6320a918a3255bbadf" href="https://github.com/HugoBlox/kit" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-full" role="button" aria-label="Star on GitHub" > <span class="flex-shrink-0"> <svg class="w-4 h-4" fill="currentColor" viewBox="3 3 18 18"><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg> </span> <span>Star on GitHub</span> </a> </div> <h3 id="get-help--connect">Get Help & Connect</h3> <ul> <li>📚 </li> <li>💬 </li> <li>🐛 </li> <li>🐦 </li> </ul> <hr> <h2 id="-ready-to-create">🚀 Ready to Create?</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500" data-callout="success" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Start Building Beautiful Presentations Today</strong></div> <div class="callout-body"><p>No installation required. No account needed. Just Markdown and your creativity.</p></div> </div> </div> <div class="text-center"> <a id="button-bc0066d08faf40cb87d4d282bd3c10cb" href="https://docs.hugoblox.com/start/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-8 py-4 text-xl rounded-full" role="button" aria-label="Get Started Now" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7a15.53 15.53 0 0 1-.311.06a15.09 15.09 0 0 1-2.448-2.448a14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306a4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"/></svg> </span> <span>Get Started Now</span> </a> </div> <br> <div class="text-center"> <a id="button-a6ddd37a8101e1f783cf49b7a3be18c7" href="https://docs.hugoblox.com/guides/studio/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-6 py-3 text-lg rounded-xl" role="button" aria-label="Try HugoBlox Studio" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.53 16.122a3 3 0 0 0-5.78 1.128a2.25 2.25 0 0 1-2.4 2.245a4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128m0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.764m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42"/></svg> </span> <span>Try HugoBlox Studio</span> </a> </div> <hr> <h2 id="-additional-resources">📖 Additional Resources</h2> <h3 id="templates--examples">Templates & Examples</h3> <ul> <li> </li> </ul>  <h3 id="tips--tricks">Tips & Tricks</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Pro Tips for Better Presentations</strong></div> <div class="callout-body"><ol> <li>Keep slides simple — one idea per slide</li> <li>Use dual columns for comparisons</li> <li>Add speaker notes with <code>Note:</code> prefix</li> <li>Test presenter view before your talk</li> <li>Use fragments to control pacing</li> <li>Version control your slides with Git</li> <li>Share source files for reproducibility</li> </ol></div> </div> </div> <hr> <p><strong>Have questions?</strong> Check out the or !</p> <p><strong>Want to contribute?</strong> Hugo Blox is open source! .</p> </article> <article> <h1>An example journal article</h1> <p>Tue, 01 Sep 2015 00:00:00 +0000</p> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>Click the <em>Cite</em> button above to demo the feature to enable visitors to import publication metadata into their reference management software.</p></div> </div> </div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>Create your slides in Markdown - click the <em>Slides</em> button to check out the example.</p></div> </div> </div> <p>Add the publication’s <strong>full text</strong> or <strong>supplementary notes</strong> here. You can use rich formatting such as including .</p> </article> <article> <h1>An example conference paper</h1> <p>Mon, 01 Jul 2013 00:00:00 +0000</p> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>Click the <em>Cite</em> button above to demo the feature to enable visitors to import publication metadata into their reference management software.</p></div> </div> </div> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>Create your slides in Markdown - click the <em>Slides</em> button to check out the example.</p></div> </div> </div> <p>Add the publication’s <strong>full text</strong> or <strong>supplementary notes</strong> here. You can use rich formatting such as including .</p> </article> </main></body></html>