<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Dr. Mauricio Zambrano-Bigiarini</title>
    <link>https://hzambran.github.io/</link>
      <atom:link href="https://hzambran.github.io/index.xml" rel="self" type="application/rss+xml" />
    <description>Dr. Mauricio Zambrano-Bigiarini</description>
    <generator>HugoBlox Kit (https://hugoblox.com)</generator><language>en-us</language><lastBuildDate>Sat, 07 Feb 2026 00:00:00 +0000</lastBuildDate>
    <image>
      <url>https://hzambran.github.io/media/icon_hu_982c5d63a71b2961.png</url>
      <title>Dr. Mauricio Zambrano-Bigiarini</title>
      <link>https://hzambran.github.io/</link>
    </image>
    
    <item>
      <title>Getting Started</title>
      <link>https://hzambran.github.io/courses/hugo-blox/getting-started/</link>
      <pubDate>Sat, 17 Feb 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/getting-started/</guid>
      <description>&lt;h2 id=&#34;quick-start-from-template&#34;&gt;Quick Start from Template&lt;/h2&gt;
&lt;div class=&#34;hb-steps&#34;&gt;
&lt;h3 id=&#34;create-a-site&#34;&gt;Create a site&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id=&#34;configure-your-new-site&#34;&gt;Configure your new site&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id=&#34;add-your-content&#34;&gt;Add your content&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id=&#34;publish-your-site&#34;&gt;Publish your site&lt;/h3&gt;
&lt;p&gt;Your site will automatically publish ~1-5 minutes after you commit (save) changes to files in your GitHub repository.&lt;/p&gt;
&lt;/div&gt;
&lt;h2 id=&#34;next&#34;&gt;Next&lt;/h2&gt;
&lt;p&gt;Let&amp;rsquo;s customize your new site:&lt;/p&gt;




&lt;div class=&#34;hb-cards mt-4 grid gap-4 not-prose&#34; style=&#34;--hb-cols: 1;&#34;&gt;
  
  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../guide/project-structure&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75&#34;/&gt;&lt;/svg&gt;Project Structure&lt;/span&gt;&lt;/a&gt;

  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../guide/configuration&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5&#34;/&gt;&lt;/svg&gt;Configuration&lt;/span&gt;&lt;/a&gt;

  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../guide/formatting&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75&#34;/&gt;&lt;/svg&gt;Create content&lt;/span&gt;&lt;/a&gt;


&lt;/div&gt;

</description>
    </item>
    
    <item>
      <title>Getting Started</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/getting-started/</link>
      <pubDate>Sat, 17 Feb 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/getting-started/</guid>
      <description>&lt;h2 id=&#34;quick-start-from-template&#34;&gt;Quick Start from Template&lt;/h2&gt;
&lt;div class=&#34;hb-steps&#34;&gt;
&lt;h3 id=&#34;create-a-site&#34;&gt;Create a site&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id=&#34;configure-your-new-site&#34;&gt;Configure your new site&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id=&#34;add-your-content&#34;&gt;Add your content&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id=&#34;publish-your-site&#34;&gt;Publish your site&lt;/h3&gt;
&lt;p&gt;Your site will automatically publish ~1-5 minutes after you commit (save) changes to files in your GitHub repository.&lt;/p&gt;
&lt;/div&gt;
&lt;h2 id=&#34;next&#34;&gt;Next&lt;/h2&gt;
&lt;p&gt;Let&amp;rsquo;s customize your new site:&lt;/p&gt;




&lt;div class=&#34;hb-cards mt-4 grid gap-4 not-prose&#34; style=&#34;--hb-cols: 1;&#34;&gt;
  
  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../guide/project-structure&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75&#34;/&gt;&lt;/svg&gt;Project Structure&lt;/span&gt;&lt;/a&gt;

  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../guide/configuration&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5&#34;/&gt;&lt;/svg&gt;Configuration&lt;/span&gt;&lt;/a&gt;

  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../guide/formatting&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75&#34;/&gt;&lt;/svg&gt;Create content&lt;/span&gt;&lt;/a&gt;


&lt;/div&gt;

</description>
    </item>
    
    <item>
      <title>Customizing Hugo</title>
      <link>https://hzambran.github.io/courses/hugo-blox/reference/customization/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/reference/customization/</guid>
      <description>&lt;p&gt;View the full docs at 
&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Customizing Hugo</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/reference/customization/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/reference/customization/</guid>
      <description>&lt;p&gt;View the full docs at 
&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Project Structure</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/project-structure/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/project-structure/</guid>
      <description>&lt;h2 id=&#34;folder-structure&#34;&gt;Folder Structure&lt;/h2&gt;
&lt;p&gt;There are &lt;strong&gt;4 main folders for Hugo-based sites&lt;/strong&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;content/&lt;/code&gt; for your Markdown-formatted content files (homepage, etc.)
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;_index.md&lt;/code&gt; the homepage (&lt;strong&gt;Hugo requires that the homepage and archive pages have an underscore prefix&lt;/strong&gt;)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code&gt;assets/&lt;/code&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;media/&lt;/code&gt; for your media files (images, videos)
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;icons/custom/&lt;/code&gt; upload any custom SVG icons you want to use&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code&gt;config/_default/&lt;/code&gt; for your site configuration files
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;hugo.yaml&lt;/code&gt; to configure Hugo (site title, URL, Hugo options, setup per-folder page features)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;module.yaml&lt;/code&gt; to install or uninstall Hugo themes and plugins&lt;/li&gt;
&lt;li&gt;&lt;code&gt;params.yaml&lt;/code&gt; to configure Hugo Blox options (SEO, analytics, site features)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;menus.yaml&lt;/code&gt; to configure your menu links (if the menu is enabled in &lt;code&gt;params.yaml&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;languages.yaml&lt;/code&gt; to configure your site&amp;rsquo;s language or to set language-specific options in a multilingual site&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code&gt;static/uploads/&lt;/code&gt; for any files you want visitors to download, such as a PDF&lt;/li&gt;
&lt;li&gt;&lt;code&gt;go.mod&lt;/code&gt; sets the version of Hugo themes/plugins which your site uses&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;hugo-file-naming-convention&#34;&gt;Hugo File Naming Convention&lt;/h2&gt;
&lt;p&gt;Hugo gives us two options to name standard page files: as &lt;code&gt;TITLE/index.md&lt;/code&gt; or &lt;code&gt;TITLE.md&lt;/code&gt; where &lt;code&gt;TITLE&lt;/code&gt; is your page name.&lt;/p&gt;
&lt;p&gt;The page name should be lowercase and using hyphens (&lt;code&gt;-&lt;/code&gt;) instead of spaces.&lt;/p&gt;
&lt;p&gt;Both approaches result in the same output, so you can choose your preferred approach to naming and organizing files. A benefit to the folder-based approach is that all your page&amp;rsquo;s files (such as images) are self-contained within the page&amp;rsquo;s folder, so it&amp;rsquo;s more portable if you wish to share the original Markdown page with someone.&lt;/p&gt;
&lt;p&gt;The homepage is a special case as &lt;strong&gt;Hugo requires the homepage and listing pages to be named&lt;/strong&gt; &lt;code&gt;_index.md&lt;/code&gt;.&lt;/p&gt;
&lt;h2 id=&#34;docs-navigation&#34;&gt;Docs Navigation&lt;/h2&gt;
&lt;p&gt;The docs navigation is automatically generated based on the content in the &lt;code&gt;docs/&lt;/code&gt; folder and is sorted alphabetically.&lt;/p&gt;
&lt;p&gt;The order of pages can be changed by adding the &lt;code&gt;weight&lt;/code&gt; parameter in the front matter of your Markdown files.&lt;/p&gt;
&lt;p&gt;In the example below, the &lt;code&gt;example.md&lt;/code&gt; page will appear before the &lt;code&gt;test.md&lt;/code&gt; page as it has a lower &lt;code&gt;weight&lt;/code&gt;:&lt;/p&gt;
&lt;p&gt;Page &lt;code&gt;example.md&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;My Example&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Page &lt;code&gt;test.md&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;My Test&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>Project Structure</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/project-structure/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/project-structure/</guid>
      <description>&lt;h2 id=&#34;folder-structure&#34;&gt;Folder Structure&lt;/h2&gt;
&lt;p&gt;There are &lt;strong&gt;4 main folders for Hugo-based sites&lt;/strong&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;content/&lt;/code&gt; for your Markdown-formatted content files (homepage, etc.)
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;_index.md&lt;/code&gt; the homepage (&lt;strong&gt;Hugo requires that the homepage and archive pages have an underscore prefix&lt;/strong&gt;)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code&gt;assets/&lt;/code&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;media/&lt;/code&gt; for your media files (images, videos)
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;icons/custom/&lt;/code&gt; upload any custom SVG icons you want to use&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code&gt;config/_default/&lt;/code&gt; for your site configuration files
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;hugo.yaml&lt;/code&gt; to configure Hugo (site title, URL, Hugo options, setup per-folder page features)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;module.yaml&lt;/code&gt; to install or uninstall Hugo themes and plugins&lt;/li&gt;
&lt;li&gt;&lt;code&gt;params.yaml&lt;/code&gt; to configure Hugo Blox options (SEO, analytics, site features)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;menus.yaml&lt;/code&gt; to configure your menu links (if the menu is enabled in &lt;code&gt;params.yaml&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;languages.yaml&lt;/code&gt; to configure your site&amp;rsquo;s language or to set language-specific options in a multilingual site&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code&gt;static/uploads/&lt;/code&gt; for any files you want visitors to download, such as a PDF&lt;/li&gt;
&lt;li&gt;&lt;code&gt;go.mod&lt;/code&gt; sets the version of Hugo themes/plugins which your site uses&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;hugo-file-naming-convention&#34;&gt;Hugo File Naming Convention&lt;/h2&gt;
&lt;p&gt;Hugo gives us two options to name standard page files: as &lt;code&gt;TITLE/index.md&lt;/code&gt; or &lt;code&gt;TITLE.md&lt;/code&gt; where &lt;code&gt;TITLE&lt;/code&gt; is your page name.&lt;/p&gt;
&lt;p&gt;The page name should be lowercase and using hyphens (&lt;code&gt;-&lt;/code&gt;) instead of spaces.&lt;/p&gt;
&lt;p&gt;Both approaches result in the same output, so you can choose your preferred approach to naming and organizing files. A benefit to the folder-based approach is that all your page&amp;rsquo;s files (such as images) are self-contained within the page&amp;rsquo;s folder, so it&amp;rsquo;s more portable if you wish to share the original Markdown page with someone.&lt;/p&gt;
&lt;p&gt;The homepage is a special case as &lt;strong&gt;Hugo requires the homepage and listing pages to be named&lt;/strong&gt; &lt;code&gt;_index.md&lt;/code&gt;.&lt;/p&gt;
&lt;h2 id=&#34;docs-navigation&#34;&gt;Docs Navigation&lt;/h2&gt;
&lt;p&gt;The docs navigation is automatically generated based on the content in the &lt;code&gt;docs/&lt;/code&gt; folder and is sorted alphabetically.&lt;/p&gt;
&lt;p&gt;The order of pages can be changed by adding the &lt;code&gt;weight&lt;/code&gt; parameter in the front matter of your Markdown files.&lt;/p&gt;
&lt;p&gt;In the example below, the &lt;code&gt;example.md&lt;/code&gt; page will appear before the &lt;code&gt;test.md&lt;/code&gt; page as it has a lower &lt;code&gt;weight&lt;/code&gt;:&lt;/p&gt;
&lt;p&gt;Page &lt;code&gt;example.md&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;My Example&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Page &lt;code&gt;test.md&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;My Test&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>Configuration</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/configuration/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/configuration/</guid>
      <description>&lt;p&gt;The configuration of your site can be found in &lt;code&gt;config/_default/&lt;/code&gt;.&lt;/p&gt;
&lt;h2 id=&#34;full-documentation&#34;&gt;Full Documentation&lt;/h2&gt;
&lt;p&gt;See 
&lt;/p&gt;
&lt;h2 id=&#34;navigation&#34;&gt;Navigation&lt;/h2&gt;
&lt;h3 id=&#34;menu&#34;&gt;Menu&lt;/h3&gt;
&lt;p&gt;See 
&lt;/p&gt;
&lt;h2 id=&#34;left-sidebar&#34;&gt;Left Sidebar&lt;/h2&gt;
&lt;p&gt;Links are automatically generated from the structure of your content directory. Simply add a folder to nest a page.&lt;/p&gt;
&lt;h3 id=&#34;extra-links&#34;&gt;Extra Links&lt;/h3&gt;
&lt;p&gt;Additional links can be added under the &lt;code&gt;sidebar&lt;/code&gt; section of your &lt;code&gt;config/_default/menus.yaml&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;menu&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;sidebar&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;- &lt;span class=&#34;nt&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Need help?&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;params&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;        &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;type&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;separator&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;- &lt;span class=&#34;nt&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;A page&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;pageRef&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;/page-filename-here&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;- &lt;span class=&#34;nt&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;An external link ↗&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;https://hugoblox.com&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;3&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;right-sidebar&#34;&gt;Right Sidebar&lt;/h2&gt;
&lt;p&gt;A table of contents is automatically generated from the headings your Markdown file.&lt;/p&gt;
&lt;p&gt;It can optionally be disabled by setting &lt;code&gt;toc: false&lt;/code&gt; in the front matter of a page:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;My Page&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;toc&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;kc&#34;&gt;false&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>Configuration</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/configuration/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/configuration/</guid>
      <description>&lt;p&gt;The configuration of your site can be found in &lt;code&gt;config/_default/&lt;/code&gt;.&lt;/p&gt;
&lt;h2 id=&#34;full-documentation&#34;&gt;Full Documentation&lt;/h2&gt;
&lt;p&gt;See 
&lt;/p&gt;
&lt;h2 id=&#34;navigation&#34;&gt;Navigation&lt;/h2&gt;
&lt;h3 id=&#34;menu&#34;&gt;Menu&lt;/h3&gt;
&lt;p&gt;See 
&lt;/p&gt;
&lt;h2 id=&#34;left-sidebar&#34;&gt;Left Sidebar&lt;/h2&gt;
&lt;p&gt;Links are automatically generated from the structure of your content directory. Simply add a folder to nest a page.&lt;/p&gt;
&lt;h3 id=&#34;extra-links&#34;&gt;Extra Links&lt;/h3&gt;
&lt;p&gt;Additional links can be added under the &lt;code&gt;sidebar&lt;/code&gt; section of your &lt;code&gt;config/_default/menus.yaml&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;menu&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;sidebar&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;- &lt;span class=&#34;nt&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Need help?&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;params&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;        &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;type&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;separator&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;- &lt;span class=&#34;nt&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;A page&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;pageRef&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;/page-filename-here&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;- &lt;span class=&#34;nt&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;An external link ↗&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;https://hugoblox.com&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;      &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;weight&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;3&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;right-sidebar&#34;&gt;Right Sidebar&lt;/h2&gt;
&lt;p&gt;A table of contents is automatically generated from the headings your Markdown file.&lt;/p&gt;
&lt;p&gt;It can optionally be disabled by setting &lt;code&gt;toc: false&lt;/code&gt; in the front matter of a page:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;My Page&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;toc&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;kc&#34;&gt;false&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>From grid to ground: how well do gridded products represent soil moisture dynamics in natural ecosystems during precipitation events?</title>
      <link>https://hzambran.github.io/publications/2026-nezibarra-from-grid/</link>
      <pubDate>Thu, 02 Apr 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2026-nezibarra-from-grid/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .author-card, .share-box, .article-widget.content-widget-hr { 
      display: none !important; 
  }
  .featured-img-container {
      margin-top: 30px;
      text-align: center;
  }
  .featured-img-container img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Núñez-Ibarra, D. A., Zambrano-Bigiarini, M., &amp; Galleguillos, M. (2026). From grid to ground: how well do gridded products represent soil moisture dynamics in natural ecosystems during precipitation events?. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;30&lt;/i&gt;, 1813--1847. &lt;a href=&#39;https://doi.org/10.5194/hess-30-1813-2026&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-30-1813-2026&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#39;featured-img-container&#39;&gt;&lt;img src=&#39;featured.jpg&#39; alt=&#39;Featured Publication Image&#39;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    var publicationFound = false;
    var projectsText = &#39;ANID-Fondecyt Regular 1212071, ANID-NSFC 190018, ANID-FONDAP 1523A0002&#39;;

    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }

    // Dynamically bold the target author&#39;s name
    var authorElements = document.querySelectorAll(&#39;.article-metadata a, .article-metadata span, .author-card .card-title&#39;);
    authorElements.forEach(function(el) {
        if (el.textContent.includes(&#39;Mauricio Zambrano-Bigiarini&#39;)) {
            el.style.fontWeight = &#39;bold&#39;;
        }
    });

    // Dynamically insert Projects field immediately after the Journal field
    if (projectsText !== &#39;&#39;) {
        var headings = document.querySelectorAll(&#39;.pub-row-heading&#39;);
        headings.forEach(function(heading) {
            if (heading.textContent.trim() === &#39;Journal&#39;) {
                publicationFound = true;
                var parentRow = heading.parentElement;
                
                var newRow = document.createElement(&#39;div&#39;);
                newRow.className = &#39;row&#39;;
                newRow.style.paddingTop = &#39;10px&#39;;
                newRow.innerHTML = &#39;&lt;div class=&#34;col-12 col-md-3 pub-row-heading&#34;&gt;Projects&lt;/div&gt;&lt;div class=&#34;col-12 col-md-9&#34;&gt;&#39; + projectsText + &#39;&lt;/div&gt;&#39;;
                
                parentRow.parentNode.insertBefore(newRow, parentRow.nextSibling);
            }
        });
        
        // Fallback: If &#39;Journal&#39; isn&#39;t found, safely place it at the top of the manual content
        if (!publicationFound) {
            var manualContent = document.querySelector(&#39;.manual-content&#39;);
            if (manualContent) {
                var fallbackDiv = document.createElement(&#39;div&#39;);
                fallbackDiv.style.marginBottom = &#39;15px&#39;;
                fallbackDiv.innerHTML = &#39;&lt;strong&gt;Projects:&lt;/strong&gt; &#39; + projectsText;
                manualContent.insertBefore(fallbackDiv, manualContent.firstChild);
            }
        }
    }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>2025-HESS</title>
      <link>https://hzambran.github.io/publications/2026-hess/</link>
      <pubDate>Sun, 01 Feb 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2026-hess/</guid>
      <description>


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Click the &lt;em&gt;Cite&lt;/em&gt; button above to demo the feature to enable visitors to import publication metadata into their reference management software.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Create your slides in Markdown - click the &lt;em&gt;Slides&lt;/em&gt; button to check out the example.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Add the publication&amp;rsquo;s &lt;strong&gt;full text&lt;/strong&gt; or &lt;strong&gt;supplementary notes&lt;/strong&gt; here. You can use rich formatting such as including 
.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Pulliko: Gridded soil moisture for Chile</title>
      <link>https://hzambran.github.io/web-platforms/pulliko/</link>
      <pubDate>Fri, 30 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/web-platforms/pulliko/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h3 id=&#34;context-and-motivation&#34;&gt;Context and motivation&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Reliable monitoring of soil moisture&lt;/strong&gt; is essential for understanding water availability, managing drought risk, and supporting sustainable water resources management. Soil moisture regulates key hydrological processes such as infiltration, runoff, evaporation, and plant water uptake, and plays a central role in land–atmosphere interactions. Conditions in the surface soil layer (&lt;strong&gt;SSM&lt;/strong&gt;; 0–10 cm) respond rapidly to rainfall events, while moisture in the deeper root zone (&lt;strong&gt;RZSM&lt;/strong&gt;; 0–100 cm) evolves more slowly and sustains vegetation during dry periods, influencing the onset and persistence of extreme events such as droughts and intense rainfall.&lt;/p&gt;
&lt;p&gt;Accurate representation of these dynamics requires spatially continuous information derived from multiple data sources. Ground-based measurements provide high-quality observations but are geographically sparse, particularly in the Southern Hemisphere. Satellite observations offer broad and frequent coverage, yet they primarily capture near-surface conditions and can be affected by vegetation and environmental factors. Therefore, &lt;strong&gt;integrating diverse datasets within a unified monitoring framework&lt;/strong&gt; is therefore critical for delivering timely, reliable information on soil moisture conditions across large and climatically diverse regions such as Chile, where environmental conditions range from the hyper-arid north to the humid south.&lt;/p&gt;
&lt;h3 id=&#34;description&#34;&gt;Description&lt;/h3&gt;
&lt;p&gt;In response to this need, during her undergraduate thesis, &lt;strong&gt;Rocío Muñoz Neira&lt;/strong&gt; developed under my supervision an operational web platform designed to provide near real-time monitoring of soil moisture and its anomalies across continental Chile. The platform integrates multiple high-quality datasets to deliver timely, spatially consistent information that can support decision-making in agriculture, water resources management, environmental monitoring, and scientific research.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Four state-of-the-art gridded soil moisture products&lt;/strong&gt; were selected based on their long-term data availability, spatial and temporal resolution, and operational reliability. These products provide volumetric soil moisture estimates for both the &lt;strong&gt;surface soil layer&lt;/strong&gt; (0–10 cm) and the &lt;strong&gt;root zone soil layer&lt;/strong&gt; (0–100 cm). The four available gridded soil moisture products are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;ERA5&lt;/strong&gt; (0.25° spatial resolution, hourly updates, approximately 6-day latency),&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;ERA5-Land&lt;/strong&gt; (0.1°, hourly, approximately 6-day latency),&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;GLDAS-Noah&lt;/strong&gt; (0.25°, three-hourly, approximately 4-month latency), and&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;SMAP-L4&lt;/strong&gt; (9 km resolution, three-hourly, approximately 2.5-day latency).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The following article evalautes the four previous soil moisture datasets against in situ measurements:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Núñez-Ibarra, D. A.; &lt;strong&gt;Zambrano-Bigiarini, M.&lt;/strong&gt;; Galleguillos, M. (2026). 
. Hydrology and Earth System Sciences, 30, 1813&amp;ndash;1847. 
.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Together, these complementary soil moisture datasets offer robust coverage across a wide range of climatic and hydrological conditions.&lt;/p&gt;
&lt;p&gt;To enhance the interpretation of soil moisture conditions, the platform also computes &lt;strong&gt;two standardised drought indicators&lt;/strong&gt; of soil moisture anomalies:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;The &lt;strong&gt;Standardized Soil Moisture Index&lt;/strong&gt; (&lt;strong&gt;SSMI&lt;/strong&gt;) is a parametric indicator based on the gamma probability distribution, while&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;the &lt;strong&gt;Empirical Standardized Soil Moisture Index&lt;/strong&gt; (&lt;strong&gt;ESSMI&lt;/strong&gt;) is a non-parametric indicator derived using kernel density estimation techniques.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;These indices are calculated automatically on a daily basis at multiple temporal aggregation scales (1, 3, 6, 12, and 24 months), allowing users to assess short-term variability as well as longer-term hydrological trends.&lt;/p&gt;
&lt;p&gt;The system operates through a fully automated data pipeline. External data servers are queried regularly to identify the most recent observations, which are then downloaded, processed, and stored on the internal infrastructure of the 
 of the Department of Civil Engineering at the Universidad de La Frontera. The processed soil moisture fields and derived anomaly indicators are subsequently displayed through the 
, meaning &amp;ldquo;water in the soil&amp;rdquo; in mapuzungun, interactive web interface, enabling users to explore current conditions and historical patterns in an intuitive and accessible manner.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/web-platforms/pulliko/pulliko-main_screen.jpg&#34;
    alt=&#34;Pulliko web platform&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Main screen of 
 web platform&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;By combining reliable data sources, automated processing, and interactive visualization tools, this platform provides a practical and scientifically robust resource for monitoring soil moisture dynamics across Chile. Its near real-time capabilities support informed decision-making, improve situational awareness during hydrological extremes, and contribute to a better understanding of the country&amp;rsquo;s evolving water and climate conditions.&lt;/p&gt;
&lt;p&gt;Additional information about the development of this platform can be found in the 
.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Curvas IDF Chile</title>
      <link>https://hzambran.github.io/web-platforms/curvas_idf/</link>
      <pubDate>Thu, 15 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/web-platforms/curvas_idf/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h2 id=&#34;context-and-motivation&#34;&gt;Context and motivation&lt;/h2&gt;
&lt;p&gt;Extreme precipitation events are expected to intensify under global warming, particularly at sub-daily time scales, increasing the risk of flash floods and infrastructure failure. Reliable estimation of these extremes is therefore essential for hydraulic design, urban drainage planning, and flood risk management. &lt;strong&gt;Intensity–Duration–Frequency (IDF) curves&lt;/strong&gt; remain the standard engineering tool for quantifying the relationship between rainfall intensity, duration, and frequency of occurrence.&lt;/p&gt;
&lt;p&gt;Traditionally, IDF curves have been derived from rain gauge observations under the assumption of stationarity and often based on relatively short sub-daily records. These limitations can lead to biased estimates of extreme rainfall, particularly in regions with sparse monitoring networks, complex topography, or strong climatic variability. Moreover, ongoing climate change challenges the validity of stationary assumptions commonly used in engineering practice.&lt;/p&gt;
&lt;p&gt;Recent advances in gridded precipitation datasets provide spatially continuous and temporally consistent information that complements conventional observations and improves the representation of precipitation extremes. Integrating these datasets with modern statistical approaches enables the development of more robust and spatially consistent IDF estimates, particularly in countries such as Chile, where climatic gradients and terrain complexity strongly influence rainfall patterns.&lt;/p&gt;
&lt;p&gt;To operationalise these advances, the 
 web platform was developed by the former student &lt;strong&gt;Cristóbal Soto Escobar&lt;/strong&gt; and I with the support of the 
 and the 
, by providing standardised, nationally consistent estimates of extreme rainfall across continental Chile. By combining multiple datasets and updated statistical methodologies within an accessible web environment, the platform supports evidence-based infrastructure design and risk assessment under evolving climatic conditions.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;description&#34;&gt;Description&lt;/h2&gt;
&lt;p&gt;
 is a web platform designed to support the computation and visualization of &lt;strong&gt;Intensity–Duration–Frequency (IDF)&lt;/strong&gt; curves across continental Chile. The platform integrates modern datasets and statistical methodologies to provide robust estimates of extreme precipitation across diverse climatic and topographic regions, including areas with limited observational coverage.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/web-platforms/curvas_idf/curvasIDF-main_screen.jpg&#34;
    alt=&#34;curvasIDF web platform&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Main screen of 
 web platform&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;By delivering nation-wide, spatially consistent IDF information, the platform supports infrastructure design, flood risk assessment, urban drainage planning, and climate resilience studies. It also promotes transparent and reproducible analyses, reducing the technical burden traditionally associated with extreme value modeling and facilitating the practical use of advanced statistical methods in engineering and applied hydrology.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;curvas-idf-functionality&#34;&gt;Curvas IDF functionality&lt;/h2&gt;
&lt;p&gt;
 provides a set of operational tools designed to support engineering design, hydrological analysis, and climate risk evaluation.&lt;/p&gt;
&lt;p&gt;Core capabilities include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Computation of IDF curves&lt;/strong&gt; for any location in continental Chile using statistically consistent methodologies.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Interactive visualization&lt;/strong&gt; of rainfall intensity estimates for multiple durations and return periods.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Implementation of stationary and non-stationary statistical models&lt;/strong&gt;, enabling users to evaluate the potential influence of changing climatic conditions on extreme precipitation.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Access to annual maximum precipitation intensities (Imax)&lt;/strong&gt; derived from both gridded datasets and in-situ rain gauge observations.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Spatial exploration of extreme rainfall patterns&lt;/strong&gt;, facilitating comparison of intensity values across regions with contrasting climates and topography.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Download of computed intensity values and associated parameters&lt;/strong&gt; for use in engineering design studies, hydrological modeling, and risk assessments.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These functionalities streamline workflows that traditionally required specialized statistical expertise and extensive data processing, thereby broadening access to reliable extreme rainfall information for both technical and operational users.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;methodological-framework&#34;&gt;Methodological framework&lt;/h2&gt;
&lt;p&gt;The methodology implemented in 
 is fully documented in a 2026 scientific article published in the journal &lt;em&gt;Hydrology and Earth System Sciences&lt;/em&gt;. This study represents one of the most comprehensive national-scale analyses of precipitation extremes in Chile, combining multiple gridded datasets with quality-controlled rain gauge observations to characterize rainfall intensity under both stationary and non-stationary climate assumptions.&lt;/p&gt;
&lt;p&gt;The platform is based on a rigorous statistical framework that integrates observational and model-derived precipitation data to estimate extreme rainfall intensities across the country. Annual maximum precipitation intensities are computed using both &lt;strong&gt;stationary&lt;/strong&gt; and &lt;strong&gt;non-stationary Gumbel probability distributions&lt;/strong&gt;, covering the range of durations and return periods commonly required in hydrological and hydraulic design.&lt;/p&gt;
&lt;p&gt;The analysis incorporates:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Five high-resolution hourly gridded precipitation datasets&lt;/strong&gt;, representing different methodological approaches to precipitation estimation.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;More than 160 quality-controlled rain gauge stations&lt;/strong&gt;, providing reference observations for validation and bias correction.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Bias-adjusted precipitation intensities&lt;/strong&gt;, ensuring consistency between gridded and in-situ estimates.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Trend detection techniques&lt;/strong&gt;, including the modified Mann–Kendall test, to evaluate long-term changes in extreme rainfall behavior.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The resulting intensity estimates are calculated for durations ranging from &lt;strong&gt;1 to 72 hours&lt;/strong&gt; and for return periods between &lt;strong&gt;2 and 100 years&lt;/strong&gt;, covering the range typically required for hydraulic and hydrologic design standards. This integrated methodology captures regional differences in precipitation extremes and reflects the strong spatial variability associated with Chile’s climatic and topographic diversity.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;data-sources&#34;&gt;Data sources&lt;/h2&gt;
&lt;p&gt;
 combines information from both observational and gridded precipitation datasets to ensure broad spatial coverage and statistical robustness.&lt;/p&gt;
&lt;h3 id=&#34;gridded-precipitation-datasets&#34;&gt;Gridded precipitation datasets&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;IMERG v06B&lt;/li&gt;
&lt;li&gt;IMERG v07B&lt;/li&gt;
&lt;li&gt;ERA5&lt;/li&gt;
&lt;li&gt;ERA5-Land&lt;/li&gt;
&lt;li&gt;CMORPH-CDR&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;in-situ-observations&#34;&gt;In-situ observations&lt;/h3&gt;
&lt;p&gt;Hourly precipitation records from quality-controlled rain gauge stations distributed across continental Chile.&lt;/p&gt;
&lt;p&gt;These complementary datasets enable reliable estimation of extreme rainfall intensities in both data-rich and data-sparse regions, improving the spatial consistency and practical applicability of IDF curves nationwide.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;relevance-and-applications&#34;&gt;Relevance and applications&lt;/h2&gt;
&lt;p&gt;Reliable estimates of extreme precipitation are essential for the safe design and operation of critical infrastructure. The &lt;strong&gt;Curvas IDF&lt;/strong&gt; platform provides a standardized, transparent, and nationally consistent reference for evaluating rainfall extremes in Chile, particularly in the context of increasing climate variability and the prolonged drought conditions observed since 2010.&lt;/p&gt;
&lt;p&gt;By integrating advanced statistical methods, multiple data sources, and an accessible web interface, the platform supports evidence-based decision-making in:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Hydraulic and hydrologic engineering design&lt;/li&gt;
&lt;li&gt;Flood risk and hazard assessment&lt;/li&gt;
&lt;li&gt;Urban stormwater management&lt;/li&gt;
&lt;li&gt;Climate adaptation planning&lt;/li&gt;
&lt;li&gt;Environmental and infrastructure resilience studies&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;In operational terms, the platform transforms complex statistical analyses into accessible, decision-ready information that can be directly applied in engineering practice, scientific research, and public-sector planning.&lt;/p&gt;
&lt;h2 id=&#34;reference&#34;&gt;Reference&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Soto-Escobar, C., &lt;strong&gt;Zambrano-Bigiarini, M.&lt;/strong&gt;, Tolorza, V., &amp;amp; Garreaud, R. (2026). 
. Hydrology and Earth System Sciences, 30(1), 91&amp;ndash;117. 
.&lt;/li&gt;
&lt;/ul&gt;
</description>
    </item>
    
    <item>
      <title>hydroMOPSO</title>
      <link>https://hzambran.github.io/rpackages/hydromopso/</link>
      <pubDate>Thu, 15 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/rpackages/hydromopso/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/rpackages/hydromopso/hydroMOPSO-logo.jpg&#34;
    alt=&#34;hydroMOPSO R package.&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;R package.&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;h2 id=&#34;description&#34;&gt;Description&lt;/h2&gt;
&lt;p&gt;
 is an R package designed to support robust multi-objective optimisation of complex environmental and engineering models. It implements a state-of-the-art &lt;strong&gt;Multi-Objective Particle Swarm Optimisation (MOPSO)&lt;/strong&gt; algorithm, tailored to address the practical challenges commonly encountered in hydrological modelling, such as non-linearity, non-smooth response surfaces, computationally intensive simulations, and competing performance criteria.&lt;/p&gt;
&lt;p&gt;
 is built to integrate seamlessly with real-world modelling workflows. It can optimise models written in R as well as external simulation models executed from the system console—such as distributed hydrological or water quality models—by communicating through standard input and output files. This architecture allows users to perform advanced optimisation without modifying model source code, preserving model integrity while enabling systematic calibration across multiple parameters, variables, and time periods.&lt;/p&gt;
&lt;p&gt;Designed with flexibility and computational efficiency in mind, 
 supports parallel execution on multi-core machines and computing clusters, making it suitable for large-scale calibration and decision-support applications. Its configurable optimisation settings and multi-objective capabilities enable users to explore trade-offs among performance metrics and identify parameter sets that balance competing modelling goals.&lt;/p&gt;
&lt;p&gt;
 is widely applicable to hydrology and other environmental sciences, providing a technically rigorous and operationally practical framework for global optimisation. It is particularly well suited for researchers and practitioners who require transparent, reproducible, and scalable tools to calibrate complex models and support evidence-based analysis.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>The Past 3 Years Have Been the Three Hottest</title>
      <link>https://hzambran.github.io/blog/2026-01-14-past_3_years_have_been_the_hottest/</link>
      <pubDate>Wed, 14 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2026-01-14-past_3_years_have_been_the_hottest/</guid>
      <description>&lt;p&gt;The recent analysis published by &lt;strong&gt;Berkeley Earth&lt;/strong&gt;, corroborated by the &lt;strong&gt;National Oceanic and Atmospheric Administration (NOAA)&lt;/strong&gt;, confirms that &lt;strong&gt;2025 was the third-warmest year on record&lt;/strong&gt;. This year follows 2024 and 2023, collectively forming a three-year &amp;ldquo;warming spike&amp;rdquo; that deviates significantly from long-term linear trends and poses critical questions regarding the acceleration of anthropogenic climate change.&lt;/p&gt;
&lt;h3 id=&#34;statistical-overview-and-record-benchmarks&#34;&gt;Statistical Overview and Record Benchmarks&lt;/h3&gt;
&lt;p&gt;In 2025, global average temperatures were estimated to be between &lt;strong&gt;1.35°C and 1.53°C&lt;/strong&gt; above the 1850–1900 pre-industrial baseline. While slightly lower than the peaks seen in 2024 ($1.46\text{--}1.62\text{°C}$) and 2023 ($1.48\text{--}1.60\text{°C}$), the data underscores a persistent breach of, or proximity to, the &lt;strong&gt;1.5°C threshold&lt;/strong&gt; established by the Paris Agreement.&lt;/p&gt;
&lt;p&gt;NOAA-NCEI’s independent methodology, which utilizes a 20th-century average as its benchmark, reached a consistent conclusion, placing 2025 at &lt;strong&gt;1.17°C&lt;/strong&gt; above that mean. This inter-agency consensus reinforces the reliability of current global thermometry despite varying analytical frameworks.&lt;/p&gt;
&lt;h3 id=&#34;dynamics-of-the-warming-spike&#34;&gt;Dynamics of the &amp;ldquo;warming spike&amp;rdquo;&lt;/h3&gt;
&lt;p&gt;Chief Scientist Robert Rohde and other researchers suggest that the 2023–2025 period represents a potential shift in climate velocity. The magnitude of this spike exceeds what is typically attributed to greenhouse gas (GHG) forcing and internal natural variability alone. Several exogenous and feedback factors are under investigation:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Aerosol Forcing:&lt;/strong&gt; Post-2020 regulations reducing sulfur emissions from maritime shipping have inadvertently decreased the &amp;ldquo;parasol effect,&amp;rdquo; where sulfate aerosols reflect incoming solar radiation.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Volcanic Forcing:&lt;/strong&gt; The 2022 &lt;strong&gt;Hunga Tonga-Hunga Ha&amp;rsquo;apai&lt;/strong&gt; eruption injected massive quantities of water vapor (a potent GHG) into the stratosphere, though its precise radiative forcing impact is still being quantified.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;ENSO Transitions:&lt;/strong&gt; While 2023 and 2024 were amplified by a strong El Niño, 2025 saw a transition to &lt;strong&gt;weak La Niña&lt;/strong&gt; conditions. Typically, La Niña exerts a cooling influence; the fact that 2025 remained the third-hottest year despite this suggests that the underlying warming signal is increasingly dominant.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;sociopolitical-and-regional-impacts&#34;&gt;Sociopolitical and regional impacts&lt;/h3&gt;
&lt;p&gt;The human cost of this thermal trend is concentrated: in 2025, approximately &lt;strong&gt;770 million people&lt;/strong&gt;, primarily in Asia, experienced their hottest local year on record. Notably, no region on Earth recorded a record-cold year, highlighting the global scale of the imbalance.&lt;/p&gt;
&lt;p&gt;Furthermore, data from the Rhodium Group indicates a &lt;strong&gt;2.4% increase&lt;/strong&gt; in U.S. greenhouse gas emissions in 2025, complicating international mitigation efforts. As the U.S. recorded its fourth-hottest year, the disconnect between climate reality and emissions trajectories remains a primary concern for policymakers.&lt;/p&gt;
&lt;h3 id=&#34;future-projections&#34;&gt;Future projections&lt;/h3&gt;
&lt;p&gt;Berkeley Earth projects that 2026 will likely be the fourth-warmest year on record. The transition of the 2023–2025 spike from an anomaly into a potential new &amp;ldquo;baseline&amp;rdquo; suggests that historical warming rates may no longer serve as reliable predictors for future climate modeling. This underscores the urgent need for robust, open-source climate data to inform evidence-based adaptation and mitigation strategies.&lt;/p&gt;
&lt;p&gt;For more information please visit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2026-01-14-past_3_years_have_been_the_hottest/featured.jpg&#34;
    alt=&#34;exceptional warming observed in the past 3 years&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Scientists say the exceptional warming observed in the past 3 years could be evidence of accelerating warming. Credit: Berkeley Earth, CC BY-NC 4.0&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Developing Intensity-Duration-Frequency (IDF) curves using sub-daily gridded and in situ datasets: characterising precipitation extremes in a drying climate</title>
      <link>https://hzambran.github.io/publications/2026-sotoescobar-developing-intensitydurationfrequency/</link>
      <pubDate>Mon, 12 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2026-sotoescobar-developing-intensitydurationfrequency/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .author-card, .share-box, .article-widget.content-widget-hr { 
      display: none !important; 
  }
  .featured-img-container {
      margin-top: 30px;
      text-align: center;
  }
  .featured-img-container img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Soto-Escobar, C., Zambrano-Bigiarini, M., Tolorza, V., &amp; Garreaud, R. (2026). Developing Intensity-Duration-Frequency (IDF) curves using sub-daily gridded and in situ datasets: characterising precipitation extremes in a drying climate. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;30&lt;/i&gt;(1), 91--117. &lt;a href=&#39;https://doi.org/10.5194/hess-30-91-2026&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-30-91-2026&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#39;featured-img-container&#39;&gt;&lt;img src=&#39;featured.jpg&#39; alt=&#39;Featured Publication Image&#39;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    var publicationFound = false;
    var projectsText = &#39;ANID-Fondecyt Regular 1212071, ANID-PCI NSFC 190018, ANID-FONDAP 1523A0002&#39;;

    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }

    // Dynamically bold the target author&#39;s name
    var authorElements = document.querySelectorAll(&#39;.article-metadata a, .article-metadata span, .author-card .card-title&#39;);
    authorElements.forEach(function(el) {
        if (el.textContent.includes(&#39;Mauricio Zambrano-Bigiarini&#39;)) {
            el.style.fontWeight = &#39;bold&#39;;
        }
    });

    // Dynamically insert Projects field immediately after the Journal field
    if (projectsText !== &#39;&#39;) {
        var headings = document.querySelectorAll(&#39;.pub-row-heading&#39;);
        headings.forEach(function(heading) {
            if (heading.textContent.trim() === &#39;Journal&#39;) {
                publicationFound = true;
                var parentRow = heading.parentElement;
                
                var newRow = document.createElement(&#39;div&#39;);
                newRow.className = &#39;row&#39;;
                newRow.style.paddingTop = &#39;10px&#39;;
                newRow.innerHTML = &#39;&lt;div class=&#34;col-12 col-md-3 pub-row-heading&#34;&gt;Projects&lt;/div&gt;&lt;div class=&#34;col-12 col-md-9&#34;&gt;&#39; + projectsText + &#39;&lt;/div&gt;&#39;;
                
                parentRow.parentNode.insertBefore(newRow, parentRow.nextSibling);
            }
        });
        
        // Fallback: If &#39;Journal&#39; isn&#39;t found, safely place it at the top of the manual content
        if (!publicationFound) {
            var manualContent = document.querySelector(&#39;.manual-content&#39;);
            if (manualContent) {
                var fallbackDiv = document.createElement(&#39;div&#39;);
                fallbackDiv.style.marginBottom = &#39;15px&#39;;
                fallbackDiv.innerHTML = &#39;&lt;strong&gt;Projects:&lt;/strong&gt; &#39; + projectsText;
                manualContent.insertBefore(fallbackDiv, manualContent.firstChild);
            }
        }
    }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>An example preprint / working paper</title>
      <link>https://hzambran.github.io/publications/preprint/</link>
      <pubDate>Wed, 07 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/preprint/</guid>
      <description>&lt;p&gt;This work is driven by the results in my 
 on LLMs.&lt;/p&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Create your slides in Markdown - click the &lt;em&gt;Slides&lt;/em&gt; button to check out the example.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Add the publication&amp;rsquo;s &lt;strong&gt;full text&lt;/strong&gt; or &lt;strong&gt;supplementary notes&lt;/strong&gt; here. You can use rich formatting such as including 
.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>hydroMOPSO: A flexible and model-independent multi-objective optimisation R package for environmental and hydrological models</title>
      <link>https://hzambran.github.io/publications/2026-marinao-hydromopso-a/</link>
      <pubDate>Fri, 02 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2026-marinao-hydromopso-a/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .author-card, .share-box, .article-widget.content-widget-hr { 
      display: none !important; 
  }
  .featured-img-container {
      margin-top: 30px;
      text-align: center;
  }
  .featured-img-container img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Marinao, R., Zambrano-Bigiarini, M., &amp; Baez-Villanueva, O. M. (2026). hydroMOPSO: A flexible and model-independent multi-objective optimisation R package for environmental and hydrological models. &lt;i&gt;Environmental Modelling &amp; Software&lt;/i&gt;, &lt;i&gt;198&lt;/i&gt;, 106851. &lt;a href=&#39;https://doi.org/10.1016/j.envsoft.2025.106851&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.envsoft.2025.106851&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#39;featured-img-container&#39;&gt;&lt;img src=&#39;featured.jpg&#39; alt=&#39;Featured Publication Image&#39;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    var publicationFound = false;
    var projectsText = &#39;ANID-Fondecyt Regular 1212071, ANID-PCI NSFC 190018, ANID-FONDAP 1523A0002&#39;;

    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }

    // Dynamically bold the target author&#39;s name
    var authorElements = document.querySelectorAll(&#39;.article-metadata a, .article-metadata span, .author-card .card-title&#39;);
    authorElements.forEach(function(el) {
        if (el.textContent.includes(&#39;Mauricio Zambrano-Bigiarini&#39;)) {
            el.style.fontWeight = &#39;bold&#39;;
        }
    });

    // Dynamically insert Projects field immediately after the Journal field
    if (projectsText !== &#39;&#39;) {
        var headings = document.querySelectorAll(&#39;.pub-row-heading&#39;);
        headings.forEach(function(heading) {
            if (heading.textContent.trim() === &#39;Journal&#39;) {
                publicationFound = true;
                var parentRow = heading.parentElement;
                
                var newRow = document.createElement(&#39;div&#39;);
                newRow.className = &#39;row&#39;;
                newRow.style.paddingTop = &#39;10px&#39;;
                newRow.innerHTML = &#39;&lt;div class=&#34;col-12 col-md-3 pub-row-heading&#34;&gt;Projects&lt;/div&gt;&lt;div class=&#34;col-12 col-md-9&#34;&gt;&#39; + projectsText + &#39;&lt;/div&gt;&#39;;
                
                parentRow.parentNode.insertBefore(newRow, parentRow.nextSibling);
            }
        });
        
        // Fallback: If &#39;Journal&#39; isn&#39;t found, safely place it at the top of the manual content
        if (!publicationFound) {
            var manualContent = document.querySelector(&#39;.manual-content&#39;);
            if (manualContent) {
                var fallbackDiv = document.createElement(&#39;div&#39;);
                fallbackDiv.style.marginBottom = &#39;15px&#39;;
                fallbackDiv.innerHTML = &#39;&lt;strong&gt;Projects:&lt;/strong&gt; &#39; + projectsText;
                manualContent.insertBefore(fallbackDiv, manualContent.firstChild);
            }
        }
    }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Hydropedological clustering: improving the representation of low streamflows in a semi-distributed hydrological model</title>
      <link>https://hzambran.github.io/publications/2026-gimeno-hydropedological-clustering/</link>
      <pubDate>Thu, 01 Jan 2026 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2026-gimeno-hydropedological-clustering/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Low streamflows are critical for sustaining water supply in Mediterranean regions, yet their simulation remains challenging due to the complex influence of soils on subsurface water storage and release. This study evaluates how different soil datasets and classification approaches affect the performance of the semi-distributed, physically based SWAT+ model in simulating low streamflows and soil water content (SWC). Using the Mediterranean Cauquenes catchment in central Chile, we compared two global soil datasets (HWSDv1.2, DSOLMap) and two locally derived products (CLSoilMapsTex, CLSoilMapsCl). The latter implements a new hydropedological clustering approach based on , , and . Results show that CLSoilMapsCl substantially improved low streamflow simulations ( = 0.67, 44 % higher than HWSDv1.2) and reproduced hydrological signatures more accurately. These findings highlight that integrating hydropedological information enhances the representation of soil–water interactions in SWAT+, supporting more reliable low streamflow modeling and water-resource assessments in Mediterranean catchments.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Low streamflows are critical for sustaining water supply in Mediterranean regions, yet their simulation remains challenging due to the complex influence of soils on subsurface water storage and release. This study evaluates how different soil datasets and classification approaches affect the performance of the semi-distributed, physically based SWAT+ model in simulating low streamflows and soil water content (SWC). Using the Mediterranean Cauquenes catchment in central Chile, we compared two global soil datasets (HWSDv1.2, DSOLMap) and two locally derived products (CLSoilMapsTex, CLSoilMapsCl). The latter implements a new hydropedological clustering approach based on , , and . Results show that CLSoilMapsCl substantially improved low streamflow simulations ( = 0.67, 44 % higher than HWSDv1.2) and reproduced hydrological signatures more accurately. These findings highlight that integrating hydropedological information enhances the representation of soil–water interactions in SWAT+, supporting more reliable low streamflow modeling and water-resource assessments in Mediterranean catchments.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Gimeno, F., Zambrano-Bigiarini, M., Alvarez-Garreton, C., &amp; Galleguillos, M. (2026). Hydropedological clustering: improving the representation of low streamflows in a semi-distributed hydrological model. &lt;i&gt;Journal of Hydrology&lt;/i&gt;, &lt;i&gt;667&lt;/i&gt;, 134787. &lt;a href=&#39;https://doi.org/10.1016/j.jhydrol.2025.134787&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.jhydrol.2025.134787&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Hydropedological clustering: improving the representation of low streamflows in a semi-distributed hydrological model</title>
      <link>https://hzambran.github.io/publications/2025-gimeno-hydropedological-clustering/</link>
      <pubDate>Fri, 19 Dec 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2025-gimeno-hydropedological-clustering/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .author-card, .share-box, .article-widget.content-widget-hr { 
      display: none !important; 
  }
  .featured-img-container {
      margin-top: 30px;
      text-align: center;
  }
  .featured-img-container img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Gimeno, F., Zambrano-Bigiarini, M., Alvarez-Garreton, C., &amp; Galleguillos, M. (2025). Hydropedological clustering: improving the representation of low streamflows in a semi-distributed hydrological model. &lt;i&gt;Journal of Hydrology&lt;/i&gt;, &lt;i&gt;667&lt;/i&gt;, 134787. &lt;a href=&#39;https://doi.org/10.1016/j.jhydrol.2025.134787&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.jhydrol.2025.134787&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#39;featured-img-container&#39;&gt;&lt;img src=&#39;featured.jpg&#39; alt=&#39;Featured Publication Image&#39;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    var publicationFound = false;
    var projectsText = &#39;ANID-Fondecyt Regular 1212071, ANID-PCI NSFC 190018, ANID-FONDAP 1523A0002, ANID-Fondecyt Regular 1210932&#39;;

    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }

    // Dynamically bold the target author&#39;s name
    var authorElements = document.querySelectorAll(&#39;.article-metadata a, .article-metadata span, .author-card .card-title&#39;);
    authorElements.forEach(function(el) {
        if (el.textContent.includes(&#39;Mauricio Zambrano-Bigiarini&#39;)) {
            el.style.fontWeight = &#39;bold&#39;;
        }
    });

    // Dynamically insert Projects field immediately after the Journal field
    if (projectsText !== &#39;&#39;) {
        var headings = document.querySelectorAll(&#39;.pub-row-heading&#39;);
        headings.forEach(function(heading) {
            if (heading.textContent.trim() === &#39;Journal&#39;) {
                publicationFound = true;
                var parentRow = heading.parentElement;
                
                var newRow = document.createElement(&#39;div&#39;);
                newRow.className = &#39;row&#39;;
                newRow.style.paddingTop = &#39;10px&#39;;
                newRow.innerHTML = &#39;&lt;div class=&#34;col-12 col-md-3 pub-row-heading&#34;&gt;Projects&lt;/div&gt;&lt;div class=&#34;col-12 col-md-9&#34;&gt;&#39; + projectsText + &#39;&lt;/div&gt;&#39;;
                
                parentRow.parentNode.insertBefore(newRow, parentRow.nextSibling);
            }
        });
        
        // Fallback: If &#39;Journal&#39; isn&#39;t found, safely place it at the top of the manual content
        if (!publicationFound) {
            var manualContent = document.querySelector(&#39;.manual-content&#39;);
            if (manualContent) {
                var fallbackDiv = document.createElement(&#39;div&#39;);
                fallbackDiv.style.marginBottom = &#39;15px&#39;;
                fallbackDiv.innerHTML = &#39;&lt;strong&gt;Projects:&lt;/strong&gt; &#39; + projectsText;
                manualContent.insertBefore(fallbackDiv, manualContent.firstChild);
            }
        }
    }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>SICA: Integrated Climate and Water System in Chile (TA25I10030. )</title>
      <link>https://hzambran.github.io/projects/2025-2029-ta25i10030/</link>
      <pubDate>Mon, 01 Dec 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/projects/2025-2029-ta25i10030/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h3 id=&#34;context-and-motivation&#34;&gt;Context and motivation&lt;/h3&gt;
&lt;p&gt;Climate change is intensifying hydrological extremes; such as droughts, floods, and heatwaves; posing growing challenges for water resources management and risk reduction. Addressing these challenges requires &lt;strong&gt;reliable, spatially consistent hydrological simulations at the catchment scale&lt;/strong&gt;, capable of linking atmospheric processes with surface water responses across diverse climatic and physiographic conditions. High-quality, integrated climate–hydrology information is therefore essential to support robust scientific analysis and evidence-based decision-making.&lt;/p&gt;
&lt;h3 id=&#34;project-description&#34;&gt;Project description&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;SICLO&lt;/strong&gt; is a four-year research project (December 2025–November 2029) funded by the Chilean National Agency for Research and Development (
) under the &lt;em&gt;Concurso IDeA I+D Tecnologías Avanzadas 2025&lt;/em&gt; call. The project aims to develop an &lt;strong&gt;integrated climate service for continental Chile&lt;/strong&gt; by coupling satellite-based observations, regional climate modeling, and distributed surface hydrological modeling.&lt;/p&gt;
&lt;p&gt;The SICLO framework will generate physically consistent estimates of key atmospheric and hydrological variables across &lt;strong&gt;historical, near-real-time, and future climate scenarios&lt;/strong&gt;, with a particular emphasis on catchment-scale processes. The resulting datasets and modeling tools are designed to support hydrological analysis, impact assessment, and the evaluation of climate-driven changes in water availability and extremes.&lt;/p&gt;
&lt;p&gt;The project (&lt;em&gt;ANID-TA25I10030: SICA – Integrated Climate and Water System in Chile&lt;/em&gt;) is led by the Center for Climate and Resilience Research (CR2) and brings together a multidisciplinary team of researchers and professionals, including Juan P. Boisier (Director, PI), Camila Alvarez-Garreton (Co-Director, PI), Mauricio Galleguillos, &lt;strong&gt;Mauricio Zambrano-Bigiarini&lt;/strong&gt;, Francisca Muñoz, René Garreaud, and Pilar Barría.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Hidrodesafios 2025 Seminar</title>
      <link>https://hzambran.github.io/dissemination/2025-11-26-iii_seminario_hidrodesafios_chile_2025/</link>
      <pubDate>Wed, 26 Nov 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2025-11-26-iii_seminario_hidrodesafios_chile_2025/</guid>
      <description>&lt;p&gt;On Wednesday, November 26th 2025, I participated as a speaker at the seminar &amp;ldquo;
&amp;rdquo; organized by the Sanitation Services Concessionaire Company S.A. (ECONSSA Chile) with sponsorship from the Chilean Association for Water Rights (AChDA) and Fundación Chile.&lt;/p&gt;
&lt;p&gt;This event took place from 8:30 hrs at the Ritz-Carlton Hotel in the Las Condes district, with the objective of addressing the future of the sanitation sector in a context of water scarcity and climate change, and analyzing the role of seawater desalination and wastewater reuse in confronting the water crisis.&lt;/p&gt;
&lt;p&gt;My presentation was entitled &amp;ldquo;
&amp;rdquo;, in which I addressed three key challenges for water resources in the Araucanía Region:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;changes in the hydrological regime of mountain catchments and their impact on projected spring and summer streamflows,&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;selection of indices and timescales used to monitor droughts and the importance of linking them with droughts impacts on the territory,&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;the role of soil moisture in peak streamflows generated by intense storms, and preliminary results from an early flood warning system currently developed for critical basins of the Araucanía Region.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;At the end of the day, representatives from the two presidential candidates debated the future of the healthcare sector in the context of water scarcity and climate change.&lt;/p&gt;
&lt;p&gt;More information and the program for the event can be found at 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-11-26-iii_seminario_hidrodesafios_chile_2025/Debate_sanitario.jpg&#34;
    alt=&#34;Dr. Zambrano-Bigiarini at the Hidrodesafios 2025 Seminar&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Debate on proposals for the water and sanitary sector in Chile&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>III Regional Climate Change Seminar</title>
      <link>https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/</link>
      <pubDate>Fri, 21 Nov 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/</guid>
      <description>&lt;p&gt;On Friday, November 21 2025, I participated as a speaker at the III Regional Climate Change Seminar, organized by the Regional Environmental Secretariat (SEREMI) of the Araucanía Region, the Regional Government of the Araucanía Region, the Catholic University of Temuco, and EBP.&lt;/p&gt;
&lt;p&gt;The seminar aimed to share the contents of the 
 with key stakeholders in the region, strengthening regional understanding, ownership, and commitment to addressing the challenges of climate change.&lt;/p&gt;
&lt;p&gt;Through a participatory, informative, and cultural forum, the seminar sought to highlight the actions being implemented in the region, promote the exchange of experiences, and raise awareness about the importance of local climate action to move towards a more resilient and sustainable region. The event included the participation of regional experts and professionals from public institutions who presented studies, projects, and public policy developments with an applied focus on case studies.&lt;/p&gt;
&lt;p&gt;Dr. Zambrano-Bigiarini&amp;rsquo;s presentation, titled 
 showcased the progress of the 
 (
) on three key issues related to water resources in the Araucanía Region:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Changes in the hydrological regime of mountain basins and their impact on projected spring and summer flows,&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Trends towards increased droughts and water scarcity,&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;increased risk of floods and mudslides, with damage to communities and infrastructure.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;A panel discussion followed.&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;
          &lt;img alt=&#34;MZB_speaking&#34; 
               srcset=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_speaking_hu_fe7518c28a80b352.webp 320w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_speaking_hu_d1f3d4861ef3c785.webp 480w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_speaking_hu_cee733e63d013609.webp 570w&#34;
               sizes=&#34;(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px&#34;
               src=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_speaking_hu_fe7518c28a80b352.webp&#34;
               width=&#34;570&#34;
               height=&#34;760&#34;
               loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;

















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;
          &lt;img alt=&#34;MZB_presentation&#34; 
               srcset=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_presentation_hu_fc2504e4ecd563c3.webp 320w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_presentation_hu_7335dc7a29a68431.webp 480w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_presentation_hu_4c1a5f5003393cb8.webp 760w&#34;
               sizes=&#34;(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px&#34;
               src=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/MZB_presentation_hu_fc2504e4ecd563c3.webp&#34;
               width=&#34;760&#34;
               height=&#34;424&#34;
               loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;

















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;
          &lt;img alt=&#34;Discussion_Panel&#34; 
               srcset=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/featured_hu_68e20e80f16b55d6.webp 320w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/featured_hu_de44885b3f6064e5.webp 480w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/featured_hu_d8a52476d5cb49d1.webp 760w&#34;
               sizes=&#34;(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px&#34;
               src=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/featured_hu_68e20e80f16b55d6.webp&#34;
               width=&#34;760&#34;
               height=&#34;557&#34;
               loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;

















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;
          &lt;img alt=&#34;Audience&#34; 
               srcset=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/Audience_hu_a808445b89e36f27.webp 320w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/Audience_hu_7aa7a95ec05f7bb.webp 480w, https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/Audience_hu_2051562c3199adfd.webp 760w&#34;
               sizes=&#34;(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1024px) 80vw, 760px&#34;
               src=&#34;https://hzambran.github.io/dissemination/2025-11-21-iii_seminario_regional_de_cc/Audience_hu_a808445b89e36f27.webp&#34;
               width=&#34;760&#34;
               height=&#34;570&#34;
               loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>SICyR 2025: Sessions HC2 and HC7</title>
      <link>https://hzambran.github.io/dissemination/2025-11-07-sicyr_2025/</link>
      <pubDate>Fri, 07 Nov 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2025-11-07-sicyr_2025/</guid>
      <description>&lt;p&gt;Members of the 
 participated in the 
, an event that brought together leading researchers, academics, and professionals from the social and natural sciences. The symposium took place on November 3-4 in Santiago, where the plenary sessions and workshops were held, and continued from November 5-7 in Viña del Mar, where the thematic scientific sessions took place.&lt;/p&gt;
&lt;h1 id=&#34;scientific-sessions&#34;&gt;Scientific Sessions&lt;/h1&gt;
&lt;p&gt;Between November 5th and 7th, I organized two thematic sessions. The first, &lt;strong&gt;HC7. Droughts: Monitoring, Propagation, and Impacts in a Changing Climate&lt;/strong&gt;, was co-organized by &lt;strong&gt;Dr. Pablo Spennemann&lt;/strong&gt;, an Argentinian professor with whom I have maintained an active collaboration since the 
, an initiative aimed at strengthening scientific exchange on drought in South America. The second session was &lt;strong&gt;HC2. Hydrological Processes in a Changing Climate&lt;/strong&gt;, which I co-organized with &lt;strong&gt;Dr. Mauricio Galleguillos&lt;/strong&gt; from Adolfo Ibáñez University, fostering interdisciplinary dialogue on hydrological processes in a changing climate context.&lt;/p&gt;
&lt;p&gt;Furthermore, I gave an oral presentation titled &amp;ldquo;&lt;strong&gt;Understanding soil memory: how antecedent moisture modulates streamflow responses to precipitation events&lt;/strong&gt;,&amp;rdquo; a collaborative work with Dr. Oscar Báez-Villanueva (University of Ghent, Belgium), Dr. Violeta Tolorza (formerly of UFRO), and student Héctor Garcés-Figueroa. This study addresses the influence of antecedent soil moisture on the hydrological response to precipitation events and is part of the Fondecyt Regular Project No. 1212071.&lt;/p&gt;
&lt;p&gt;Similarly, some members of the 
 presented the following work:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Héctor Garcés-Figueroa, a research assistant on the Fondecyt Regular project 1212071, gave an oral presentation on the work &amp;ldquo;&lt;strong&gt;Ahead of the Flood: Medium-Range Hydrological Forecasting for Southern Chilean Catchments&lt;/strong&gt;&amp;rdquo; which explores the use of medium-range hydrological forecasts to improve flood anticipation in basins in southern Chile. He also co-authored the presentation by Dr. Zambrano-Bigiarini.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Rocío Muñoz, a member of the Observatory and a Civil Engineer from the University of La Frontera, presented a poster titled &amp;ldquo;&lt;strong&gt;Operational Monitoring of Soil Moisture Anomalies for Continental Chile&lt;/strong&gt;&amp;rdquo;. This work makes a significant contribution to the development of tools for monitoring and analyzing soil moisture at a national scale, and is part of his doctoral thesis project.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Fernando Gimeno Molina, a doctoral candidate in the Doctoral Program in Natural Resources Sciences at the University of La Frontera, presented his research in poster format, titled &amp;ldquo;&lt;strong&gt;Soil Mapping Matters: Changes in High Streamflow Simulations through Spatial Soil Information&lt;/strong&gt;&amp;rdquo;. His study highlighted the relevance of spatial soil information in modeling high-flow events, a key issue for flood risk management.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The presentations by the Kimün-Ko team generated considerable interest among the attendees, receiving positive and insightful feedback from researchers at various national and international universities. The quality of the work, along with the approach applied to the current challenges of climate change and water resource management, was widely recognized by the scientific community.&lt;/p&gt;
&lt;p&gt;The Observatory&amp;rsquo;s participation in this symposium reaffirms its commitment to cutting-edge research and interdisciplinary collaboration, contributing relevant knowledge to build a more resilient society in the face of the impacts of climate change.&lt;/p&gt;
&lt;h1 id=&#34;drought-propagation&#34;&gt;Drought Propagation&lt;/h1&gt;
&lt;p&gt;Finally, this international symposium allowed me to meet for the first time with Dr. Pablo Spennemann, an Argentinian researcher with whom I am investigating the mechanisms and timescales that control drought propagation in four Chilean river basins (Petorca, Mapocho, Cauquenes, and Trancura), from precipitation deficits to decreased soil moisture and flow rates, and the impact on vegetation.&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/2025/2025-11-07-SICyR_2025/KimunKo_y_Equipo_Propagacion_Sequia.jpg&#34; alt=&#34;KimunKo_y_Equipo_Propagacion_Sequia&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-11-07-sicyr_2025/featured.jpg&#34;
    alt=&#34;Kimuün-Ko and Drought progpagation teams&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Former and current Kimün-Ko members along with Dr. Mauricio Gellguillos (UAI), Giancarlo Casanova, DR(c) Emilia Figueiras (AR) y Dr. Pablo Spennemann&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>SICyR 2025: R course</title>
      <link>https://hzambran.github.io/dissemination/2025-10-21-cchih_2025-curso_de_r/</link>
      <pubDate>Tue, 04 Nov 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2025-10-21-cchih_2025-curso_de_r/</guid>
      <description>&lt;h1 id=&#34;r-course-spatiotemporal-data-analysis&#34;&gt;R Course: Spatiotemporal Data Analysis&lt;/h1&gt;
&lt;p&gt;On November 4, I taught the course &lt;strong&gt;Using R for Spatiotemporal Data Analysis: Application to Precipitation from CR2Met2.5&lt;/strong&gt;, which was attended by undergraduate and graduate students, as well as public and private sector professionals.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-10-21-cchih_2025-curso_de_r/featured.jpg&#34;
    alt=&#34;R Course&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Course &lt;strong&gt;Using R for Spatiotemporal Data Analysis: Application to Precipitation from CR2Met2.5&lt;/strong&gt;&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>SICyR 2025: R course</title>
      <link>https://hzambran.github.io/dissemination/2025-11-07-sicyr_2025-curso_de_r/</link>
      <pubDate>Tue, 04 Nov 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2025-11-07-sicyr_2025-curso_de_r/</guid>
      <description>&lt;h1 id=&#34;r-course-spatiotemporal-data-analysis&#34;&gt;R Course: Spatiotemporal Data Analysis&lt;/h1&gt;
&lt;p&gt;On November 4, I taught the course &lt;strong&gt;Using R for Spatiotemporal Data Analysis: Application to Precipitation from CR2Met2.5&lt;/strong&gt;, which was attended by undergraduate and graduate students, as well as public and private sector professionals.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-11-07-sicyr_2025-curso_de_r/featured.jpg&#34;
    alt=&#34;R Course&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Course &lt;strong&gt;Using R for Spatiotemporal Data Analysis: Application to Precipitation from CR2Met2.5&lt;/strong&gt;&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Hyperdroughts in central Chile: drivers, impacts, and projections</title>
      <link>https://hzambran.github.io/publications/2025-garreaud-hyperdroughts-in/</link>
      <pubDate>Sat, 25 Oct 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2025-garreaud-hyperdroughts-in/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .author-card, .share-box, .article-widget.content-widget-hr { 
      display: none !important; 
  }
  .featured-img-container {
      margin-top: 30px;
      text-align: center;
  }
  .featured-img-container img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Garreaud, R., Boisier, J. P., Alvarez-Garreton, C., Christie, D. A., Carrasco-Escaff, T., Vergara, I., Chávez, R. O., Aldunce, P., Camus, P., Suazo-Álvarez, M., Masiokas, M., Castro, G., Muñoz, A., Zambrano-Bigiarini, M., Fuster, R., &amp; Godoy, L. (2025). Hyperdroughts in central Chile: drivers, impacts, and projections. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;29&lt;/i&gt;(20), 5347--5369. &lt;a href=&#39;https://doi.org/10.5194/hess-29-5347-2025&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-29-5347-2025&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#39;featured-img-container&#39;&gt;&lt;img src=&#39;featured.jpg&#39; alt=&#39;Featured Publication Image&#39;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    var publicationFound = false;
    var projectsText = &#39;ANID-Fondecyt Regular 1212071, ANID-PCI NSFC 190018, ANID-FONDAP 1523A0002&#39;;

    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }

    // Dynamically bold the target author&#39;s name
    var authorElements = document.querySelectorAll(&#39;.article-metadata a, .article-metadata span, .author-card .card-title&#39;);
    authorElements.forEach(function(el) {
        if (el.textContent.includes(&#39;Mauricio Zambrano-Bigiarini&#39;)) {
            el.style.fontWeight = &#39;bold&#39;;
        }
    });

    // Dynamically insert Projects field immediately after the Journal field
    if (projectsText !== &#39;&#39;) {
        var headings = document.querySelectorAll(&#39;.pub-row-heading&#39;);
        headings.forEach(function(heading) {
            if (heading.textContent.trim() === &#39;Journal&#39;) {
                publicationFound = true;
                var parentRow = heading.parentElement;
                
                var newRow = document.createElement(&#39;div&#39;);
                newRow.className = &#39;row&#39;;
                newRow.style.paddingTop = &#39;10px&#39;;
                newRow.innerHTML = &#39;&lt;div class=&#34;col-12 col-md-3 pub-row-heading&#34;&gt;Projects&lt;/div&gt;&lt;div class=&#34;col-12 col-md-9&#34;&gt;&#39; + projectsText + &#39;&lt;/div&gt;&#39;;
                
                parentRow.parentNode.insertBefore(newRow, parentRow.nextSibling);
            }
        });
        
        // Fallback: If &#39;Journal&#39; isn&#39;t found, safely place it at the top of the manual content
        if (!publicationFound) {
            var manualContent = document.querySelector(&#39;.manual-content&#39;);
            if (manualContent) {
                var fallbackDiv = document.createElement(&#39;div&#39;);
                fallbackDiv.style.marginBottom = &#39;15px&#39;;
                fallbackDiv.innerHTML = &#39;&lt;strong&gt;Projects:&lt;/strong&gt; &#39; + projectsText;
                manualContent.insertBefore(fallbackDiv, manualContent.firstChild);
            }
        }
    }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>RcamelsCL</title>
      <link>https://hzambran.github.io/rpackages/rcamelscl/</link>
      <pubDate>Wed, 27 Aug 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/rpackages/rcamelscl/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h2 id=&#34;description&#34;&gt;Description&lt;/h2&gt;
&lt;p&gt;
 is an R package developed to provide streamlined and reliable access to the Catchment Attributes and Meteorology for Large Sample Studies – Chile dataset (
), a widely used benchmark resource for large-sample hydrology and comparative catchment analysis. This package focuses on simplifying the acquisition, organisation, and handling of both spatial and temporal data required for hydrological research and modelling across diverse climatic and physiographic regions of Chile.&lt;/p&gt;
&lt;p&gt;Designed to support reproducible scientific workflows, 
 offers a consistent interface for downloading and managing hydrometeorological time series and catchment attributes directly from the official data repository. By standardising data access and preprocessing steps, the package reduces the time and effort typically required to prepare datasets for analysis, allowing users to focus on model development, hypothesis testing, and large-sample hydrological investigations.&lt;/p&gt;
&lt;p&gt;Importantly, 
 preserves the integrity of the original dataset by providing direct access to the original raw data, without altering their content. This approach ensures transparency and traceability in scientific applications, which is particularly relevant for studies involving benchmarking, model intercomparison, and regional hydrological assessment.&lt;/p&gt;
&lt;p&gt;Well suited for research, teaching, and operational analysis, 
 provides a technically sound and efficient gateway to one of the most comprehensive hydrological datasets available for Chile. It is especially valuable for users seeking a reliable foundation for data-driven hydrological studies and reproducible environmental research.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/rpackages/rcamelscl/RcamelsCL-logo.jpg&#34;
    alt=&#34;RcamelsCL R package.&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;R package.&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Two works at EGU 2025</title>
      <link>https://hzambran.github.io/dissemination/2025-04-29-egu2025/</link>
      <pubDate>Tue, 29 Apr 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2025-04-29-egu2025/</guid>
      <description>&lt;p&gt;During the week of April 28th to May 2nd, 2025, I participated in the 2025 European Geosciences Union (
) Conference, held in Vienna, Austria. This is the most important European conference in the field of Earth Sciences, held annually and attracting researchers from all over the world.&lt;/p&gt;
&lt;p&gt;On this occasion, I presented a poster and participated as a co-author in an oral presentation:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
. This works presents the first South American evaluation of various gridded soil moisture products, which were compared with in situ measurements available in four Chilean watersheds since 2021. The poster is available at 
. This collaboration was only possible thanks to funding provided by ANID through the Fondecyt Regular project 1212071, which allowed the colaboration with 
 (U. Adolfo Ibañez) and Daniel Nuñez, a student from the 
 in U. de Chile.&lt;/li&gt;
&lt;/ol&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-04-29-egu2025/Foto1-MZB.jpg&#34;
    alt=&#34;Poster at EGU 2025&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Dr. Zambrano-Bigiarini at EGU 2025&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;ol start=&#34;2&#34;&gt;
&lt;li&gt;
. In this work, Héctor Garcés, a thesis student of the Civil Engineering degree at Universidad de La Frontera, presented to the international community the development of a prototype flood early warning system, applied to critical catchments in the Araucanía region. This prototype was developed by the student as part of his undergraduate thesis and during a professional internship at the General Water Directorate of the Araucanía Region. It should be noted that this work was an oral presentation, which is an important exception at this very prestigious international event. Normally, only academics, doctoral students, postdocs, and master&amp;rsquo;s thesis students present at this conference. This reflects the high quality of the work being conducted by thesis student Héctor Garcés. This work also received ANID funding through the Chile-China international collaboration project 
 and the Fondecyt Regular project 1212071.&lt;/li&gt;
&lt;/ol&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-04-29-egu2025/Foto2a-HGF.jpg&#34;
    alt=&#34;Héctor Garcés F. at EGU 2025&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Héctor Garcés F. at EGU 2025&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-04-29-egu2025/Foto2b-HGF.jpg&#34;
    alt=&#34;Héctor Garcés F. at EGU 2025&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Héctor Garcés F. at EGU 2025&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;Finally, during this conference I was able to discuss possibilities of collaboration with 
 from the Univeridad Diego Portales, and to talk about a joint article with 
 from Ghent University (Belgium), and with 
 from Sun Yat-sen University (China, co-PI of the international collaboration project NSFC190018), among others.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/dissemination/2025-04-29-egu2025/MZB_AP_italiano.jpg&#34;
    alt=&#34;EGU 2025&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Dr. Zambrano-Bigiarini, Dr. Pizarro and an Italian colleague at EGU 2025&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;&lt;img src=&#34;featured.jpeg&#34;
    alt=&#34;EGU 2025&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Héctor Garcés F., a Chilean student in Europe, Dr. Zambrano-Bigiarini, Dr. Pizarro at EGU 2025&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Technical note: What does the Standardized Streamflow Index actually reflect? Insights and implications for hydrological drought analysis</title>
      <link>https://hzambran.github.io/publications/2025-lema-technical-note/</link>
      <pubDate>Tue, 22 Apr 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2025-lema-technical-note/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .author-card, .share-box, .article-widget.content-widget-hr { 
      display: none !important; 
  }
  .featured-img-container {
      margin-top: 30px;
      text-align: center;
  }
  .featured-img-container img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Lema, F., Mendoza, P. A., Vásquez, N. A., Mizukami, N., Zambrano-Bigiarini, M., &amp; Vargas, X. (2025). Technical note: What does the Standardized Streamflow Index actually reflect? Insights and implications for hydrological drought analysis. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;29&lt;/i&gt;(8), 1981--2002. &lt;a href=&#39;https://doi.org/10.5194/hess-29-1981-2025&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-29-1981-2025&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#39;featured-img-container&#39;&gt;&lt;img src=&#39;featured.jpg&#39; alt=&#39;Featured Publication Image&#39;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    var publicationFound = false;
    var projectsText = &#39;ANID-Fondecyt Regular 1212071, ANID-FONDAP 15110009&#39;;

    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }

    // Dynamically bold the target author&#39;s name
    var authorElements = document.querySelectorAll(&#39;.article-metadata a, .article-metadata span, .author-card .card-title&#39;);
    authorElements.forEach(function(el) {
        if (el.textContent.includes(&#39;Mauricio Zambrano-Bigiarini&#39;)) {
            el.style.fontWeight = &#39;bold&#39;;
        }
    });

    // Dynamically insert Projects field immediately after the Journal field
    if (projectsText !== &#39;&#39;) {
        var headings = document.querySelectorAll(&#39;.pub-row-heading&#39;);
        headings.forEach(function(heading) {
            if (heading.textContent.trim() === &#39;Journal&#39;) {
                publicationFound = true;
                var parentRow = heading.parentElement;
                
                var newRow = document.createElement(&#39;div&#39;);
                newRow.className = &#39;row&#39;;
                newRow.style.paddingTop = &#39;10px&#39;;
                newRow.innerHTML = &#39;&lt;div class=&#34;col-12 col-md-3 pub-row-heading&#34;&gt;Projects&lt;/div&gt;&lt;div class=&#34;col-12 col-md-9&#34;&gt;&#39; + projectsText + &#39;&lt;/div&gt;&#39;;
                
                parentRow.parentNode.insertBefore(newRow, parentRow.nextSibling);
            }
        });
        
        // Fallback: If &#39;Journal&#39; isn&#39;t found, safely place it at the top of the manual content
        if (!publicationFound) {
            var manualContent = document.querySelector(&#39;.manual-content&#39;);
            if (manualContent) {
                var fallbackDiv = document.createElement(&#39;div&#39;);
                fallbackDiv.style.marginBottom = &#39;15px&#39;;
                fallbackDiv.innerHTML = &#39;&lt;strong&gt;Projects:&lt;/strong&gt; &#39; + projectsText;
                manualContent.insertBefore(fallbackDiv, manualContent.firstChild);
            }
        }
    }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>WMO confirms 2024 as warmest year on record at about 1.55°C above pre-industrial level</title>
      <link>https://hzambran.github.io/blog/2025-01-10-2024_was_warmest_year_on_record/</link>
      <pubDate>Fri, 10 Jan 2025 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2025-01-10-2024_was_warmest_year_on_record/</guid>
      <description>&lt;p&gt;The World Meteorological Organization (WMO) has released a consolidated report confirming that 2024 was the warmest calendar year on record. By synthesizing six leading international datasets, the WMO provides a high-confidence assessment of global thermal anomalies, the state of oceanic heat reservoirs, and the current standing of international climate targets.&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&#34;1-temperature-anomalies-and-statistical-significance&#34;&gt;1. Temperature anomalies and statistical significance&lt;/h3&gt;
&lt;p&gt;The global mean surface temperature in 2024 was calculated at &lt;strong&gt;$1.55 \text{°C}$ above the 1850–1900 pre-industrial baseline&lt;/strong&gt;, with a margin of uncertainty of &lt;strong&gt;$\pm 0.13 \text{°C}$&lt;/strong&gt;. This marks the first time a single calendar year has likely exceeded the 1.5°C threshold.&lt;/p&gt;
&lt;p&gt;To ensure authoritative results, the WMO integrated data from the following institutions:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Atmospheric/Satellite Agencies:&lt;/strong&gt; ECMWF (Europe), Japan Meteorological Agency, NASA (USA).&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Surface Instrumental Records:&lt;/strong&gt; NOAA (USA), Berkeley Earth, and the UK Met Office (HadCRUT).&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;While all six datasets identified 2024 as the warmest year, slight methodological variations mean that not every individual agency placed the anomaly above 1.5°C. However, the consolidated mean provides a robust signal of unprecedented global heating.&lt;/p&gt;
&lt;h3 id=&#34;2-the-paris-agreement-vs-annual-spikes&#34;&gt;2. The Paris agreement vs. annual spikes&lt;/h3&gt;
&lt;p&gt;A critical technical distinction made in the report concerns the &lt;strong&gt;Paris Agreement&lt;/strong&gt;. WMO experts clarify that a single-year breach of 1.5°C does not constitute a failure to meet the treaty’s long-term goals. The Paris Agreement targets are measured over multi-decadal averages (typically 20–30 years).&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Current Long-Term Warming:&lt;/strong&gt; As of 2024, the assessed long-term global warming trend stands at approximately &lt;strong&gt;1.3°C&lt;/strong&gt; above the baseline.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Transient Forcing:&lt;/strong&gt; The 2024 spike was amplified by a strong &lt;strong&gt;El Niño&lt;/strong&gt; event that persisted from mid-2023 through May 2024.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Despite this distinction, WMO Secretary-General Celeste Saulo emphasized that &lt;em&gt;every fraction of a degree matters&lt;/em&gt;, as incremental increases correlate directly with the frequency and intensity of extreme weather events, cryosphere loss, and sea-level rise.&lt;/p&gt;
&lt;h3 id=&#34;3-marine-thermodynamics-and-ocean-heat-content-ohc&#34;&gt;3. Marine thermodynamics and Ocean Heat Content (OHC)&lt;/h3&gt;
&lt;p&gt;While surface temperatures capture public attention, the report highlights that &lt;strong&gt;90% of excess heat&lt;/strong&gt; from anthropogenic warming is absorbed by the oceans. A study in &lt;em&gt;Advances in Atmospheric Sciences&lt;/em&gt; cited by the WMO indicates that ocean temperatures have reached record highs in both surface and sub-surface layers (down to 2,000 meters).&lt;/p&gt;



  
  &lt;blockquote class=&#34;border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6&#34;&gt;
    &lt;p&gt;&lt;strong&gt;Energy Benchmark:&lt;/strong&gt; Between 2023 and 2024, the upper 2,000 meters of the ocean gained &lt;strong&gt;16 Zettajoules&lt;/strong&gt; ($10^{21}$ Joules) of heat. For context, this energy increase is approximately &lt;strong&gt;140 times&lt;/strong&gt; the total global electricity generation for the year 2023.&lt;/p&gt;
  &lt;/blockquote&gt;

&lt;p&gt;This massive thermal inertia in the marine system ensures that sea-level rise and glacier retreat will continue for centuries, regardless of short-term surface temperature fluctuations.&lt;/p&gt;
&lt;h3 id=&#34;4-policy-implications-and-future-monitoring&#34;&gt;4. Policy implications and future monitoring&lt;/h3&gt;
&lt;p&gt;UN Secretary-General António Guterres utilized the report to call for &lt;em&gt;trail-blazing climate action&lt;/em&gt;, urging governments to submit revised national climate action plans. The data serves as a technical foundation for the UN Climate Change negotiating process, providing the empirical evidence required for global decarbonization strategies. The WMO will release a comprehensive &amp;ldquo;State of the Global Climate 2024&amp;rdquo; report in March 2025, detailing further indicators such as greenhouse gas concentrations and sea-ice extent.&lt;/p&gt;
&lt;p&gt;For more information please visit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Xie, SP., Miyamoto, A., Zhang, P. et al. What made 2023 and 2024 the hottest years in a row?. npj Clim Atmos Sci 8, 117 (2025). 
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2025-01-10-2024_was_warmest_year_on_record/featured.jpg&#34;
    alt=&#34;Global heating is a cold, hard fact&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;“Today&amp;rsquo;s assessment from the World Meteorological Organization (WMO) proves yet again – global heating is a cold, hard fact,” said UN Secretary-General Antóno Guterres. Source: WMO&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Mawün-NRT: Near real-time gridded precipitation for Chile</title>
      <link>https://hzambran.github.io/web-platforms/mawun-nrt/</link>
      <pubDate>Wed, 12 Jun 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/web-platforms/mawun-nrt/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h3 id=&#34;motivation&#34;&gt;Motivation&lt;/h3&gt;
&lt;p&gt;In an era characterized by increasing climate variability and the intensification of extreme weather events, the need for accurate and timely precipitation data has never been more critical. While several websites and applications offer weather forecasts that are improving every day, there is a critical gap in readily available post-event precipitation data.&lt;/p&gt;
&lt;h3 id=&#34;description&#34;&gt;Description&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Mawün-NRT&lt;/strong&gt; (in Mapuzungun, &amp;ldquo;mawün&amp;rdquo; means &amp;ldquo;rain”) is a free and publicly accessible web platform (
) that provides a user-friendly visualisation of the spatio-temporal distribution of precipitation events for continental Chile in near real-time.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/web-platforms/mawun-nrt/mawun-NRT-main_screen.jpg&#34;
    alt=&#34;Mawün-NRT web platform&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Main screen of 
 web platform&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;p&gt;&lt;strong&gt;Mawün-NRT&lt;/strong&gt; was developed by the former student &lt;strong&gt;Rodrigo Marinao&lt;/strong&gt; and I with the support of the 
 and the 
, to supplement the existing web platform &lt;strong&gt;Mawün&lt;/strong&gt; (
, which is focused on historical precipitation data.&lt;/p&gt;
&lt;p&gt;Three state-of-the-art precipitation products are included in this first version of Mawün-NRT:&lt;/p&gt;
&lt;p&gt;i) the near-real-time Multi-Source Weather (&lt;strong&gt;MSWX-NRT&lt;/strong&gt;, 3-hourly, 0.1°),&lt;/p&gt;
&lt;p&gt;ii) PERSIANN Dynamic Infrared–Rain Rate (&lt;strong&gt;PDIR-Now&lt;/strong&gt;, hourly and 0.04°) and&lt;/p&gt;
&lt;p&gt;iii) the Integrated Multi-satellitE Retrievals for GPM (&lt;strong&gt;IMERGv07&lt;/strong&gt; and IMERGv06, half-hourly, 0.1°) in both the Early and Late versions.&lt;/p&gt;
&lt;p&gt;In addition, hourly data from hundreds of rain gauges of different Chilean institutions (e.g. DGA, DMC, Agromet, CEAZA) are collected in near real-time by the Vismet web platform (
) and used in Mawün-NRT to compare the gridded precipitation estimates with the corresponding in situ values, as a soft measure of the uncertainty in the precipitation estimates.&lt;/p&gt;
&lt;p&gt;The near real-time capabilities of Mawün-NRT allows decision makers to evaluate which product provides better identification of the spatial area really affected by the precipitation event, fostering a timely decision-making and a proactive response to evolving weather conditions. A case study shows the monitoring of an extreme event that affected the south-central area of Chile in June of this year 2024, with devastating societal and economic impacts.&lt;/p&gt;
&lt;p&gt;A detailed tutorial can be found 
.&lt;/p&gt;
&lt;p&gt;Some example applications can be found 
.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Two works at EGU 2024</title>
      <link>https://hzambran.github.io/dissemination/2024-04-13-egu2024/</link>
      <pubDate>Sat, 13 Apr 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2024-04-13-egu2024/</guid>
      <description>&lt;p&gt;During the week of April 15 to 19, 2024, two works will be presented by PhD(c) Fernando Gimeno in the 
, held in the city of Wien (Austria):&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;
. This works presents the development of Intensity-Duratin-Frequency (IDF) curves for the climatically and topographically diverse Chilean territory (17-56ºS), using both stationary and non-stationary approaches based on three state-of-the-art gridded datasets (IMERGv06B, ERA5, ERA5-Land). This collaboration was only possible thanks to funding provided by ANID-Fondecyt Regular 1212071, ANID-PCI NSFC 190018, and ANID-Fondecyt Iniciación 111908064.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. This work addresses the pressing need for robust soil input data for SWAT+ hydrological model, by evaluating assessing the performance of four different soil type maps in the respresenation of streamflows and soild moisture data in the mediterranean Cauquenes in Desembocadura River Basin. This work was only possible thanks to funding provided by ANID-Fondecyt Regular 1212071, ANID-PCI NSFC 190018.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Anemometer installation at the Invernada station</title>
      <link>https://hzambran.github.io/blog/2024-04-09-instalacion_de_anemometro_en_est_invernada/</link>
      <pubDate>Tue, 09 Apr 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2024-04-09-instalacion_de_anemometro_en_est_invernada/</guid>
      <description>&lt;p&gt;Last Tuesday, April 9th 2024, part of the Water Resources Observatory team of the Department of Civil Engineering (
) of the Universidad of La Frontera carried out the installation of an anemometer in the Invernada meteorological station located in the Conguillio National Park (Los Paraguas sector).&lt;/p&gt;
&lt;p&gt;The installation of this anemometer will allow the station to record both the average hourly wind speed, the gust speed (maximum instantaneous speed), and the wind direction. These parameters are added to the existing measurements of precipitation, air temperature, solar radiation, relative humidity and dew point, providing essential data for future research related to water resources in the region. In particular, from now on it will be possible to estimate the reference evapotranspiration, which accounts for the maximum amount of water that a standard crop is capable of evaporating.&lt;/p&gt;
&lt;p&gt;It is important to note that this station is one of the few located at an elevation close to 1000 meters above sea level in the La Araucanía Region. In addition, this station transmits data in (almost) real time, which can be viewed at the following link: 
&lt;/p&gt;
&lt;p&gt;This milestone marked the end of a great filed work day for the team, which in this occasion included Dra. Rebeca Martínez, Civil Engineer Rodrigo Marinao, undergratuate student Marfa Saldivia and Dr. Mauricio Zambrano-Bigiarini. During the installation day it was also possible to carry out other routine activities, including streamflow measurements (through gauging and mass balance) and estimation of soil hydraulic conductivity (double ring infiltrometer).&lt;/p&gt;
&lt;p&gt;These advances have been possible thanks to the funding provided by the projects: ANID Fondecyt Regular 1212071, ANID-NSFC 190018, ANID Fondecyt Postdoctoral 11190864, UFRO Postdoc grant405VRIP20P001, and ANID Fondecyt Postdoctoral 3220382.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;p&gt;&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2024-04-09-instalacion_de_anemometro_en_est_invernada/2024-04-09-IMG_4595.JPEG&#34;
    alt=&#34;Anemómetro&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Anemómetro&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2024-04-09-instalacion_de_anemometro_en_est_invernada/2024-04-09-IMG_4596.JPEG&#34;
    alt=&#34;Estación invernada&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Estación invernada&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2024-04-09-instalacion_de_anemometro_en_est_invernada/featured.jpeg&#34;
    alt=&#34;Parte del equipo de trabjo&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Parte del equipo de trabjo&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Article on hydrological drought monitoring published in HESS</title>
      <link>https://hzambran.github.io/blog/2024-03-28-hess_article_on_hydrological_drought_monioring_published/</link>
      <pubDate>Thu, 28 Mar 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2024-03-28-hess_article_on_hydrological_drought_monioring_published/</guid>
      <description>&lt;p&gt;On March 28th, 2024, 
 published the article entitled 
. This study investigates the suitability of different drought indices and temporal scales for monitoring streamflow drought in catchments with different hydrological regimes.&lt;/p&gt;
&lt;p&gt;Considering the lack of consensus on which drought indices and temporal scales are most appropriate for monitoring hydrological droughts, and the growing interest in the use of spatially distributed drought indices in ungauged areas (i.e, without streamflow data), this study addresses the following questions:&lt;/p&gt;
&lt;p&gt;i) Which temporal scales of precipitation-based indices are best suited to assess streamflow drought in catchments with different hydrological regimes?&lt;/p&gt;
&lt;p&gt;ii) Are soil moisture indices superior to meteorological indices as proxies of streamflow drought?&lt;/p&gt;
&lt;p&gt;iii) Are snow indices more effective than meteorological indices for assessing streamflow drought in snow-influenced catchments?&lt;/p&gt;
&lt;p&gt;To answer these questions, we investigated 100 near-natural catchments in Chile with four hydrological regimes (nival, nivo-pluvial, pluvio-nival, and pluvial), using the standardised precipitation index (&lt;strong&gt;SPI&lt;/strong&gt;), the standardised precipitation evapotranspiration index (&lt;strong&gt;SPEI&lt;/strong&gt;), the empirical standardised soil moisture index (&lt;strong&gt;ESSMI&lt;/strong&gt;), and the standardised snow water equivalent index (&lt;strong&gt;SWEI&lt;/strong&gt;), aggregated over different temporal scales. Cross-correlation and event coincidence analyses were performed between these indices and the standardised streamflow index on a temporal scale of 1 month (&lt;strong&gt;SSI-1&lt;/strong&gt;), as representative of streamflow drought events.&lt;/p&gt;
&lt;p&gt;Our results reveal that &lt;strong&gt;no single drought index and temporal scale can be recommended for all catchments and hydrological regimes&lt;/strong&gt;, and that snow-influenced catchments require drought indices with larger temporal scales. In particular, for &lt;strong&gt;snowmelt-driven catchments&lt;/strong&gt; characterised by a slow response of runoff to precipitation we recommend &lt;strong&gt;SPI-12&lt;/strong&gt; and &lt;strong&gt;SPI-24&lt;/strong&gt; as the best proxy indices for characterising streamflow droughts. In contrast, for faster-response &lt;strong&gt;rainfall-driven catchments&lt;/strong&gt; we recommend the &lt;strong&gt;SPI-3&lt;/strong&gt; as the best proxies. Although soil moisture and snowpack are key variables that modulate the propagation of meteorological deficits into hydrological ones, &lt;strong&gt;the SPI and SPEI meteorological indices generally outperformed the soil moisture and snowpack-based indices in monitoring streamflow drought&lt;/strong&gt;. Finally, to exclude the influence of non-drought periods, we recommend using the &lt;strong&gt;event coincidence analysis&lt;/strong&gt;, a method that helps to assess the suitability of meteorological, soil moisture, and/or snowpack-based drought indices as proxies for streamflow drought events.&lt;/p&gt;
&lt;p&gt;The 
 to this article contains much aditional information on:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;the selection of soil moisture and SWE products (&lt;strong&gt;S1&lt;/strong&gt;),&lt;/li&gt;
&lt;li&gt;the temporal scales with the highest cross-correlation and event coincidence rates (&lt;strong&gt;S2&lt;/strong&gt;),&lt;/li&gt;
&lt;li&gt;boxplots for analysing the cross-correlation and event coincidence on different temporal scales and with different lag times (&lt;strong&gt;S3&lt;/strong&gt;),&lt;/li&gt;
&lt;li&gt;spatial analysis for cross-correlation and event coincidence analysis at different temporal scales and lag times (&lt;strong&gt;S4&lt;/strong&gt;),&lt;/li&gt;
&lt;li&gt;boxplots for the cross-correlation analysis for different hydrological regimes (&lt;strong&gt;S5&lt;/strong&gt;),&lt;/li&gt;
&lt;li&gt;boxplots for the event coincidence analysis for different hydrological regimes (&lt;strong&gt;S6&lt;/strong&gt;),&lt;/li&gt;
&lt;li&gt;difference between parametric and non-parametric approach for the calculation of drought indices for soil moisture (&lt;strong&gt;S7&lt;/strong&gt;),&lt;/li&gt;
&lt;li&gt;summary of them median monthly P and Q values for all selected catchments (&lt;strong&gt;S8&lt;/strong&gt;), and&lt;/li&gt;
&lt;li&gt;figures with the median monthly P and Q values for all selected catchments (&lt;strong&gt;S9&lt;/strong&gt;).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This work is the result of years of international collaboration with Dr. Oscar M. Baez-Villanueva, collecting and analysing different gridded datasets of key meteorological variables, since the  ANID Fondecyt 11150861 project in 2017. In particular, this article was an integral part of the project 
 lead by Camila Álvarez-Garretón and Juan Pablo Boisier at the 
, and received additional funding from the research projects 
 led by me at 
, Chile.&lt;/p&gt;
&lt;p&gt;I hope that the results of this article can be considered by the General Directorate of Water of Chile (DGA) to improve the criteria used to monitor and identify hydrological droughts in Chile, within the framework of water scarcity declarations (Res. Exe. DGA No. 1331/2022, and articles 314 and 315 of the Chilean Water Code).&lt;/p&gt;
&lt;p&gt;The full article can be found here: 
.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2024-03-28-hess_article_on_hydrological_drought_monioring_published/featured.jpeg&#34;
    alt=&#34;Graphical abstract&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Graphical abstract&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>2023 was the warmest year on record, (NOAA)</title>
      <link>https://hzambran.github.io/blog/2024-01-12-2023_was_the_warmest_year_on_record/</link>
      <pubDate>Fri, 12 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2024-01-12-2023_was_the_warmest_year_on_record/</guid>
      <description>&lt;p&gt;Earth’s average land and ocean surface temperature in 2023 was 1.18ºC above the 20th century, the highest global temperature among all years in NOAA&amp;rsquo;s 1850-2023 climate record.
It also beats the next warmest year, 2016, by a record-setting margin of 0.15ºC.&lt;/p&gt;
&lt;p&gt;The 10 warmest years since 1850 have all occurred in the past decade. In fact, the average global temperature for 2023 exceeded the pre-industrial (1850-1900) average by 1.35ºC.&lt;/p&gt;
&lt;p&gt;For more information please visit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2024-01-12-2023_was_the_warmest_year_on_record/curves-2023.gif.webp&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Disponibilidad y seguridad hídrica en el desarrollo de enfermedades crónicas no transmisibles. ¿ Nuevos factores de riesgo?</title>
      <link>https://hzambran.github.io/publications/2024-petermannrocha-disponibilidad-y/</link>
      <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2024-petermannrocha-disponibilidad-y/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; &lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; &lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Petermann-Rocha, F., Pizarro, A., Nazar, G., Zambrano-Bigiarini, M., Plaza-Garrido, A., Díaz-Toro, F., Troncoso-Pantoja, C., Celis, A., Sugg, D., &amp; Celis-Morales, C. (2024). Disponibilidad y seguridad hídrica en el desarrollo de enfermedades crónicas no transmisibles. ¿ Nuevos factores de riesgo?. &lt;i&gt;Revista médica de Chile&lt;/i&gt;, &lt;i&gt;152&lt;/i&gt;(5), 643--644. &lt;a href=&#39;https://doi.org/10.4067/s0034-98872024000500643&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.4067/s0034-98872024000500643&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Example Talk: Recent Work</title>
      <link>https://hzambran.github.io/slides/example/</link>
      <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/slides/example/</guid>
      <description>&lt;!-- no-branding --&gt;
&lt;h1 id=&#34;example-talk&#34;&gt;Example Talk&lt;/h1&gt;
&lt;h3 id=&#34;dr-alex-johnson--meta-ai&#34;&gt;Dr. Alex Johnson · Meta AI&lt;/h3&gt;
&lt;hr&gt;
&lt;h2 id=&#34;research-overview&#34;&gt;Research Overview&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Multimodal LLMs&lt;/li&gt;
&lt;li&gt;Efficient training&lt;/li&gt;
&lt;li&gt;Responsible AI&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id=&#34;code--math&#34;&gt;Code &amp;amp; Math&lt;/h2&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;def&lt;/span&gt; &lt;span class=&#34;nf&#34;&gt;score&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;int&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;-&amp;gt;&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;int&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;x&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;*&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;x&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;$$
E = mc^2
$$&lt;hr&gt;
&lt;h2 id=&#34;dual-column-layout&#34;&gt;Dual Column Layout&lt;/h2&gt;
&lt;div class=&#34;r-hstack&#34;&gt;
&lt;div style=&#34;flex: 1; padding-right: 1rem;&#34;&gt;
&lt;h3 id=&#34;left-column&#34;&gt;Left Column&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Point A&lt;/li&gt;
&lt;li&gt;Point B&lt;/li&gt;
&lt;li&gt;Point C&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div style=&#34;flex: 1; padding-left: 1rem;&#34;&gt;
&lt;h3 id=&#34;right-column&#34;&gt;Right Column&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Detail 1&lt;/li&gt;
&lt;li&gt;Detail 2&lt;/li&gt;
&lt;li&gt;Detail 3&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;!-- Alternative: Asymmetric columns --&gt;
&lt;div style=&#34;display: flex; gap: 2rem;&#34;&gt;
&lt;div style=&#34;flex: 2;&#34;&gt;
&lt;h3 id=&#34;main-content-23-width&#34;&gt;Main Content (2/3 width)&lt;/h3&gt;
&lt;p&gt;This column takes up twice the space of the right column.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;def&lt;/span&gt; &lt;span class=&#34;nf&#34;&gt;example&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;():&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;code works too&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div style=&#34;flex: 1;&#34;&gt;
&lt;h3 id=&#34;sidebar-13-width&#34;&gt;Sidebar (1/3 width)&lt;/h3&gt;



  
  &lt;blockquote class=&#34;border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6&#34;&gt;
    &lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt;&lt;br&gt;
Key points in smaller column&lt;/p&gt;
  &lt;/blockquote&gt;

&lt;/div&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;h2 id=&#34;image--text-layout&#34;&gt;Image + Text Layout&lt;/h2&gt;
&lt;div class=&#34;r-hstack&#34; style=&#34;align-items: center;&#34;&gt;
&lt;div style=&#34;flex: 1;&#34;&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://images.unsplash.com/photo-1708011271954-c0d2b3155ded?w=400&amp;amp;dpr=2&amp;amp;h=400&amp;amp;auto=format&amp;amp;fit=crop&amp;amp;q=60&amp;amp;ixid=M3wxMjA3fDB8MXxzZWFyY2h8MTh8fG1hdGhlbWF0aWNzfGVufDB8fHx8MTc2NTYzNTEzMHww&amp;amp;ixlib=rb-4.1.0&#34; alt=&#34;&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;div style=&#34;flex: 1; padding-left: 2rem;&#34;&gt;
&lt;h3 id=&#34;results&#34;&gt;Results&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;95% accuracy&lt;/li&gt;
&lt;li&gt;10x faster inference&lt;/li&gt;
&lt;li&gt;Lower memory usage&lt;/li&gt;
&lt;/ul&gt;
&lt;span class=&#34;fragment &#34; &gt;
  &lt;strong&gt;Breakthrough!&lt;/strong&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;h2 id=&#34;speaker-notes&#34;&gt;Speaker Notes&lt;/h2&gt;
&lt;p&gt;Press &lt;strong&gt;S&lt;/strong&gt; to open presenter view with notes!&lt;/p&gt;
&lt;p&gt;This slide has hidden speaker notes below.&lt;/p&gt;
&lt;p&gt;Note:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;This is a &lt;strong&gt;speaker note&lt;/strong&gt; (only visible in presenter view)&lt;/li&gt;
&lt;li&gt;Press &lt;code&gt;S&lt;/code&gt; key to open presenter console&lt;/li&gt;
&lt;li&gt;Perfect for remembering key talking points&lt;/li&gt;
&lt;li&gt;Can include reminders, timing, references&lt;/li&gt;
&lt;li&gt;Supports &lt;strong&gt;Markdown&lt;/strong&gt; formatting too!&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id=&#34;progressive-reveals&#34;&gt;Progressive Reveals&lt;/h2&gt;
&lt;p&gt;Content appears step-by-step:&lt;/p&gt;
&lt;span class=&#34;fragment &#34; &gt;
  First point appears
&lt;/span&gt;
&lt;span class=&#34;fragment &#34; &gt;
  Then the second point
&lt;/span&gt;
&lt;span class=&#34;fragment &#34; &gt;
  Finally the conclusion
&lt;/span&gt;
&lt;span class=&#34;fragment highlight-red&#34; &gt;
  This one can be &lt;strong&gt;highlighted&lt;/strong&gt;!
&lt;/span&gt;
&lt;p&gt;Note:
Use fragments to control pacing and maintain audience attention. Each fragment appears on click.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;diagrams-with-mermaid&#34;&gt;Diagrams with Mermaid&lt;/h2&gt;
&lt;div class=&#34;mermaid&#34;&gt;graph LR
    A[Research Question] --&gt; B{Hypothesis}
    B --&gt;|Valid| C[Experiment]
    B --&gt;|Invalid| D[Revise]
    C --&gt; E[Analyze Data]
    E --&gt; F{Significant?}
    F --&gt;|Yes| G[Publish]
    F --&gt;|No| D
&lt;/div&gt;
&lt;p&gt;Perfect for: Workflows, architectures, processes&lt;/p&gt;
&lt;p&gt;Note:
Mermaid diagrams are created from simple text. They&amp;rsquo;re version-controllable and edit anywhere!&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;research-results&#34;&gt;Research Results&lt;/h2&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Model&lt;/th&gt;
          &lt;th&gt;Accuracy&lt;/th&gt;
          &lt;th&gt;Speed&lt;/th&gt;
          &lt;th&gt;Memory&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Baseline&lt;/td&gt;
          &lt;td&gt;87.3%&lt;/td&gt;
          &lt;td&gt;1.0x&lt;/td&gt;
          &lt;td&gt;2GB&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Ours (v1)&lt;/td&gt;
          &lt;td&gt;92.1%&lt;/td&gt;
          &lt;td&gt;1.5x&lt;/td&gt;
          &lt;td&gt;1.8GB&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Ours (v2)&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;95.8%&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;2.3x&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;1.2GB&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;



  
  &lt;blockquote class=&#34;border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6&#34;&gt;
    &lt;p&gt;&lt;strong&gt;Key Finding:&lt;/strong&gt; 8.5% improvement over baseline with 40% memory reduction&lt;/p&gt;
  &lt;/blockquote&gt;

&lt;p&gt;Note:
Tables are perfect for comparative results. Markdown tables are simple and version-control friendly.&lt;/p&gt;
&lt;hr&gt;

&lt;section data-noprocess data-shortcode-slide
  
      
      data-background-color=&#34;#1e3a8a&#34;
  &gt;

&lt;h2 id=&#34;custom-backgrounds&#34;&gt;Custom Backgrounds&lt;/h2&gt;
&lt;p&gt;This slide has a &lt;strong&gt;blue background&lt;/strong&gt;!&lt;/p&gt;
&lt;p&gt;You can customize:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Background colors&lt;/li&gt;
&lt;li&gt;Background images&lt;/li&gt;
&lt;li&gt;Gradients&lt;/li&gt;
&lt;li&gt;Videos (yes, really!)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Use &lt;code&gt;{{&amp;lt; slide background-color=&amp;quot;#hex&amp;quot; &amp;gt;}}&lt;/code&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;vertical-navigation&#34;&gt;Vertical Navigation&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;There&amp;rsquo;s more content below! ⬇️&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Press the &lt;strong&gt;Down Arrow&lt;/strong&gt; to see substeps.&lt;/p&gt;
&lt;p&gt;Note:
This demonstrates Reveal.js&amp;rsquo;s vertical slide feature. Great for optional details or deep dives.&lt;/p&gt;
&lt;hr&gt;

&lt;section data-noprocess data-shortcode-slide
  
      
      id=&#34;substep-1&#34;
  &gt;

&lt;h3 id=&#34;substep-1-details&#34;&gt;Substep 1: Details&lt;/h3&gt;
&lt;p&gt;This is additional content in a vertical stack.&lt;/p&gt;
&lt;p&gt;Navigate down for more, or right to skip to next topic →&lt;/p&gt;
&lt;hr&gt;

&lt;section data-noprocess data-shortcode-slide
  
      
      id=&#34;substep-2&#34;
  &gt;

&lt;h3 id=&#34;substep-2-more-details&#34;&gt;Substep 2: More Details&lt;/h3&gt;
&lt;p&gt;Even more detailed information.&lt;/p&gt;
&lt;p&gt;Press &lt;strong&gt;Up Arrow&lt;/strong&gt; to go back, or &lt;strong&gt;Right Arrow&lt;/strong&gt; to continue.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;citations--quotes&#34;&gt;Citations &amp;amp; Quotes&lt;/h2&gt;



  
  &lt;blockquote class=&#34;border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6&#34;&gt;
    &lt;p&gt;&amp;ldquo;The best way to predict the future is to invent it.&amp;rdquo;&lt;/p&gt;
&lt;p&gt;— Alan Kay&lt;/p&gt;
  &lt;/blockquote&gt;

&lt;p&gt;Or reference research:&lt;/p&gt;



  
  &lt;blockquote class=&#34;border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6&#34;&gt;
    &lt;p&gt;Recent work by Smith et al. (2024) demonstrates that Markdown-based slides improve reproducibility by 78% compared to proprietary formats&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;.&lt;/p&gt;
  &lt;/blockquote&gt;

&lt;hr&gt;
&lt;h2 id=&#34;media-youtube-videos&#34;&gt;Media: YouTube Videos&lt;/h2&gt;
&lt;div style=&#34;position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;&#34;&gt;
      &lt;iframe allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen&#34; loading=&#34;eager&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; src=&#34;https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0&#34; style=&#34;position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;&#34; title=&#34;YouTube video&#34;&gt;&lt;/iframe&gt;
    &lt;/div&gt;

&lt;p&gt;Note:
Embed YouTube videos with just the video ID. Perfect for demos, tutorials, or interviews.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;media-all-options&#34;&gt;Media: All Options&lt;/h2&gt;
&lt;p&gt;Embed various media types with simple shortcodes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;YouTube&lt;/strong&gt;: &lt;code&gt;{{&amp;lt; youtube VIDEO_ID &amp;gt;}}&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Bilibili&lt;/strong&gt;: &lt;code&gt;{{&amp;lt; bilibili id=&amp;quot;BV1...&amp;quot; &amp;gt;}}&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Local videos&lt;/strong&gt;: &lt;code&gt;{{&amp;lt; video src=&amp;quot;file.mp4&amp;quot; controls=&amp;quot;yes&amp;quot; &amp;gt;}}&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Audio&lt;/strong&gt;: &lt;code&gt;{{&amp;lt; audio src=&amp;quot;file.mp3&amp;quot; &amp;gt;}}&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Perfect for demos, interviews, tutorials, or podcasts!&lt;/p&gt;
&lt;p&gt;Note:
All media types work seamlessly in slides. Just use the appropriate shortcode.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;interactive-elements&#34;&gt;Interactive Elements&lt;/h2&gt;
&lt;p&gt;Try these keyboard shortcuts:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;→&lt;/code&gt; &lt;code&gt;←&lt;/code&gt; : Navigate slides&lt;/li&gt;
&lt;li&gt;&lt;code&gt;↓&lt;/code&gt; &lt;code&gt;↑&lt;/code&gt; : Vertical navigation&lt;/li&gt;
&lt;li&gt;&lt;code&gt;S&lt;/code&gt; : Speaker notes&lt;/li&gt;
&lt;li&gt;&lt;code&gt;F&lt;/code&gt; : Fullscreen&lt;/li&gt;
&lt;li&gt;&lt;code&gt;O&lt;/code&gt; : Overview mode&lt;/li&gt;
&lt;li&gt;&lt;code&gt;/&lt;/code&gt; : Search&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ESC&lt;/code&gt; : Exit modes&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;!-- hide --&gt;
&lt;h2 id=&#34;hidden-slide-demo-inline-comment&#34;&gt;Hidden Slide Demo (Inline Comment)&lt;/h2&gt;
&lt;p&gt;This slide is hidden using the &lt;code&gt;&amp;lt;!-- hide --&amp;gt;&lt;/code&gt; comment method.&lt;/p&gt;
&lt;p&gt;Perfect for:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Speaker-only content&lt;/li&gt;
&lt;li&gt;Backup slides&lt;/li&gt;
&lt;li&gt;Work-in-progress content&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Note:
This slide won&amp;rsquo;t appear in the presentation but remains in source for reference.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;thanks&#34;&gt;Thanks&lt;/h2&gt;
&lt;h3 id=&#34;questions&#34;&gt;Questions?&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;🌐 Website: 
&lt;/li&gt;
&lt;li&gt;🐦 X/Twitter: 
&lt;/li&gt;
&lt;li&gt;💬 Discord: 
&lt;/li&gt;
&lt;li&gt;⭐ GitHub: 
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;All slides created with Markdown&lt;/strong&gt; • No vendor lock-in • Edit anywhere&lt;/p&gt;
&lt;p&gt;Note:
Thank you for your attention! Feel free to reach out with questions or contributions.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-branding-your-slides&#34;&gt;🎨 Branding Your Slides&lt;/h2&gt;
&lt;p&gt;Add your identity to every slide with simple configuration!&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;What you can add:&lt;/strong&gt;&lt;/p&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Element&lt;/th&gt;
          &lt;th&gt;Position Options&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Logo&lt;/td&gt;
          &lt;td&gt;top-left, top-right, bottom-left, bottom-right&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Title&lt;/td&gt;
          &lt;td&gt;Same as above&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Author&lt;/td&gt;
          &lt;td&gt;Same as above&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Footer Text&lt;/td&gt;
          &lt;td&gt;Same + bottom-center&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Edit the &lt;code&gt;branding:&lt;/code&gt; section in your slide&amp;rsquo;s front matter (top of file).&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-adding-your-logo&#34;&gt;📁 Adding Your Logo&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;Place your logo in &lt;code&gt;assets/media/&lt;/code&gt; folder&lt;/li&gt;
&lt;li&gt;Use SVG format for best results (auto-adapts to any theme!)&lt;/li&gt;
&lt;li&gt;Add to front matter:&lt;/li&gt;
&lt;/ol&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;branding&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;logo&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;filename&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;your-logo.svg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;c&#34;&gt;# Must be in assets/media/&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;position&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;top-right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;width&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;60px&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; SVGs with &lt;code&gt;fill=&amp;quot;currentColor&amp;quot;&lt;/code&gt; automatically match theme colors!&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-title--author-overlays&#34;&gt;📝 Title &amp;amp; Author Overlays&lt;/h2&gt;
&lt;p&gt;Show presentation title and/or author on every slide:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;branding&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;show&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;kc&#34;&gt;true&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;position&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;bottom-left&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;text&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Short Title&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;c&#34;&gt;# Optional: override long page title&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;author&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;show&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;kc&#34;&gt;true&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;position&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;bottom-right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Author is auto-detected from page front matter (&lt;code&gt;author:&lt;/code&gt; or &lt;code&gt;authors:&lt;/code&gt;).&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-footer-text&#34;&gt;📄 Footer Text&lt;/h2&gt;
&lt;p&gt;Add copyright, conference name, or any persistent text:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;branding&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;footer&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;text&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;© 2024 Your Name · ICML 2024&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;position&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;bottom-center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; Supports Markdown! Use &lt;code&gt;[Link](url)&lt;/code&gt; for clickable links.&lt;/p&gt;
&lt;hr&gt;
&lt;!-- no-branding --&gt;
&lt;h2 id=&#34;-hiding-branding-per-slide&#34;&gt;🔇 Hiding Branding Per-Slide&lt;/h2&gt;
&lt;p&gt;Sometimes you want a clean slide (title slides, full-screen images).&lt;/p&gt;
&lt;p&gt;Add this comment at the &lt;strong&gt;start&lt;/strong&gt; of your slide content:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&amp;lt;!-- no-branding --&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## My Clean Slide
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Content here...
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;☝️ &lt;strong&gt;This slide uses &lt;code&gt;&amp;lt;!-- no-branding --&amp;gt;&lt;/code&gt;&lt;/strong&gt; — notice no logo or overlays!&lt;/p&gt;
&lt;hr&gt;
&lt;!-- no-header --&gt;
&lt;h2 id=&#34;-selective-hiding&#34;&gt;🔇 Selective Hiding&lt;/h2&gt;
&lt;p&gt;Hide just the header (logo + title):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&amp;lt;!-- no-header --&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Or just the footer (author + footer text):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&amp;lt;!-- no-footer --&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;☝️ &lt;strong&gt;This slide uses &lt;code&gt;&amp;lt;!-- no-header --&amp;gt;&lt;/code&gt;&lt;/strong&gt; — footer still visible below!&lt;/p&gt;
&lt;hr&gt;
&lt;!-- no-footer --&gt;
&lt;h2 id=&#34;-quick-reference&#34;&gt;✅ Quick Reference&lt;/h2&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Comment&lt;/th&gt;
          &lt;th&gt;Hides&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;&amp;lt;!-- no-branding --&amp;gt;&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Everything (logo, title, author, footer)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;&amp;lt;!-- no-header --&amp;gt;&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Logo + Title overlay&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;&amp;lt;!-- no-footer --&amp;gt;&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Author + Footer text&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;☝️ &lt;strong&gt;This slide uses &lt;code&gt;&amp;lt;!-- no-footer --&amp;gt;&lt;/code&gt;&lt;/strong&gt; — logo still visible above!&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-get-started&#34;&gt;🚀 Get Started&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;Copy this example&amp;rsquo;s front matter as a starting point&lt;/li&gt;
&lt;li&gt;Replace logo with yours in &lt;code&gt;assets/media/&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Customize positions and text&lt;/li&gt;
&lt;li&gt;Use &lt;code&gt;&amp;lt;!-- no-branding --&amp;gt;&lt;/code&gt; for special slides&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;strong&gt;Pro tip:&lt;/strong&gt; Set site-wide defaults in &lt;code&gt;config/_default/params.yaml&lt;/code&gt; under &lt;code&gt;slides.branding&lt;/code&gt;!&lt;/p&gt;
&lt;div class=&#34;footnotes&#34; role=&#34;doc-endnotes&#34;&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id=&#34;fn:1&#34;&gt;
&lt;p&gt;Smith, J. et al. (2024). &lt;em&gt;Open Science Presentations&lt;/em&gt;. Nature Methods.&amp;#160;&lt;a href=&#34;#fnref:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
</description>
    </item>
    
    <item>
      <title>Exotic tree plantations in the Chilean Coastal Range: balancing the effects of discrete disturbances, connectivity, and a persistent drought on catchment erosion</title>
      <link>https://hzambran.github.io/publications/2024-tolorza-exotic-tree/</link>
      <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2024-tolorza-exotic-tree/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; The Chilean Coastal Range, located in the Mediterranean segment of Chile, is a soil-mantled landscape with the potential to store valuable freshwater supplies and support a biodiverse native forest. Nevertheless, human intervention has been increasing soil erosion for ∼ 200 years, culminating in the intense management of exotic tree plantations throughout the last ∼ 45 years. At the same time, this landscape has been severely affected by a prolonged megadrought. As a result, this combination of stressors complicates disentangling the effects of anthropogenic disturbances and hydroclimatic trends on sediment fluxes at the catchment scale. In this study, we calculate decennial catchment erosion rates from suspended-sediment loads and compare them with a millennial catchment denudation rate estimated from detrital 10Be. We then contrast both of these rates with the effects of discrete anthropogenic-disturbance events and hydroclimatic trends. Erosion and denudation rates are similar in magnitude on decennial and millennial timescales, i.e., 0.018 ± 0.005 and 0.024 ± 0.004 mm yr−1, respectively. Recent human-made disturbances include logging operations throughout all seasons and a dense network of forestry roads, thereby increasing structural sediment connectivity. Further disturbances include two widespread wildfires (2015 and 2017) and an earthquake with an Mw value of 8.8 in 2010. We observe decreased suspended-sediment loads during the wet seasons for the period 1986–2018, coinciding with declining streamflow, baseflow, and rainfall. The low millennial denudation rate aligns with a landscape dominated by slow diffusive soil creep. However, the low decennial erosion rate and the decrease in suspended sediment disagree with the expected effect of intense anthropogenic disturbances and increased structural (sediment) connectivity. Such a paradox suggests that suspended-sediment loads, and thus respective catchment erosion, are underestimated and that decennial sediment detachment and transport have been masked by decreasing rainfall and streamflow (i.e., weakened hydroclimatic drivers). Our findings indicate that human-made disturbances and hydrologic trends may result in opposite, partially offsetting effects on recent erosion, yet both contribute to landscape degradation.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; The Chilean Coastal Range, located in the Mediterranean segment of Chile, is a soil-mantled landscape with the potential to store valuable freshwater supplies and support a biodiverse native forest. Nevertheless, human intervention has been increasing soil erosion for ∼ 200 years, culminating in the intense management of exotic tree plantations throughout the last ∼ 45 years. At the same time, this landscape has been severely affected by a prolonged megadrought. As a result, this combination of stressors complicates disentangling the effects of anthropogenic disturbances and hydroclimatic trends on sediment fluxes at the catchment scale. In this study, we calculate decennial catchment erosion rates from suspended-sediment loads and compare them with a millennial catchment denudation rate estimated from detrital 10Be. We then contrast both of these rates with the effects of discrete anthropogenic-disturbance events and hydroclimatic trends. Erosion and denudation rates are similar in magnitude on decennial and millennial timescales, i.e., 0.018 ± 0.005 and 0.024 ± 0.004 mm yr−1, respectively. Recent human-made disturbances include logging operations throughout all seasons and a dense network of forestry roads, thereby increasing structural sediment connectivity. Further disturbances include two widespread wildfires (2015 and 2017) and an earthquake with an Mw value of 8.8 in 2010. We observe decreased suspended-sediment loads during the wet seasons for the period 1986–2018, coinciding with declining streamflow, baseflow, and rainfall. The low millennial denudation rate aligns with a landscape dominated by slow diffusive soil creep. However, the low decennial erosion rate and the decrease in suspended sediment disagree with the expected effect of intense anthropogenic disturbances and increased structural (sediment) connectivity. Such a paradox suggests that suspended-sediment loads, and thus respective catchment erosion, are underestimated and that decennial sediment detachment and transport have been masked by decreasing rainfall and streamflow (i.e., weakened hydroclimatic drivers). Our findings indicate that human-made disturbances and hydrologic trends may result in opposite, partially offsetting effects on recent erosion, yet both contribute to landscape degradation.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Tolorza, V., Mohr, C. H., Zambrano-Bigiarini, M., Sotomayor, B., Poblete-Caballero, D., Carretier, S., Galleguillos, M., &amp; Seguel, O. (2024). Exotic tree plantations in the Chilean Coastal Range: balancing the effects of discrete disturbances, connectivity, and a persistent drought on catchment erosion. &lt;i&gt;Earth Surface Dynamics&lt;/i&gt;, &lt;i&gt;12&lt;/i&gt;(4), 841--861. &lt;a href=&#39;https://doi.org/10.5194/esurf-12-841-2024&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/esurf-12-841-2024&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>HESS Opinions: The unsustainable use of groundwater conceals a &#39;Day Zero&#39;</title>
      <link>https://hzambran.github.io/publications/2024-alvarezgarreton-hess-opinions/</link>
      <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2024-alvarezgarreton-hess-opinions/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Water scarcity is a pressing global issue driven by increasing water demands and changing climate conditions. Based on novel estimates of water availability and water use in Chile, we examine the challenges and risks associated with groundwater (GW) withdrawals in the country&#39;s central-north region (27–35° S), where extreme water stress conditions prevail. As total water use within a basin approaches the renewable freshwater resources, the dependence on GW reserves intensifies in unsustainable ways. This overuse has consequences that extend beyond mere resource depletion, manifesting into environmental degradation, societal conflict, and economic costs. We argue that the “Day Zero” scenario, often concealed by the uncertain attributes of GW resources, calls for a reconsideration of water allocation rules and a broader recognition of the long-term implications of unsustainable GW use. Our results offer insights for regions worldwide facing similar water scarcity challenges and emphasize the importance of proactive and sustainable water management strategies.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Water scarcity is a pressing global issue driven by increasing water demands and changing climate conditions. Based on novel estimates of water availability and water use in Chile, we examine the challenges and risks associated with groundwater (GW) withdrawals in the country&#39;s central-north region (27–35° S), where extreme water stress conditions prevail. As total water use within a basin approaches the renewable freshwater resources, the dependence on GW reserves intensifies in unsustainable ways. This overuse has consequences that extend beyond mere resource depletion, manifesting into environmental degradation, societal conflict, and economic costs. We argue that the “Day Zero” scenario, often concealed by the uncertain attributes of GW resources, calls for a reconsideration of water allocation rules and a broader recognition of the long-term implications of unsustainable GW use. Our results offer insights for regions worldwide facing similar water scarcity challenges and emphasize the importance of proactive and sustainable water management strategies.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Alvarez-Garreton, C., Boisier, J. P., Garreaud, R., González, J., Rondanelli, R., Gayó, E., &amp; Zambrano-Bigiarini, M. (2024). HESS Opinions: The unsustainable use of groundwater conceals a &#39;Day Zero&#39;. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;28&lt;/i&gt;(7), 1605--1616. &lt;a href=&#39;https://doi.org/10.5194/hess-28-1605-2024&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-28-1605-2024&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Land Management Drifted: Land Use Scenario Modeling of Trancura River Basin, Araucanía, Chile</title>
      <link>https://hzambran.github.io/publications/2024-dazjara-land-management/</link>
      <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2024-dazjara-land-management/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Modeling land use scenarios is critical to understand the socio-environmental impacts of current decisions and to explore future configurations for management. The management of regulations and permits by central and local governments plays an important role in shaping land use, with different complexities arising from site-specific socioeconomic dynamics. In Chile, the complexity is even more evident due to insufficient binding land regulations, fragmented government procedures, and the primacy of cities over rural areas. Yet land use must be managed to support sustainable development. This research integrates several state management dynamics into scenario modeling to support decision making at the basin scale through 2050. We employed a mixed qualitative-quantitative approach using interviews with state officials and local stakeholders as the basis for the Conversion of Land Use and its Effects (CLUE) model, which resulted in three scenarios with spatially explicit maps. Key findings indicate that opportunities for developing normative planning tools are limited, leaving state management without clear direction. However, current management practices can address problematic activities such as second-home projects and industrial monocultures while promoting small-scale agriculture. Scenario modeling is useful for understanding how the specifics that arise from the scalar dynamics of state management affect land use change and how existing management resources can be leveraged to achieve positive outcomes for both the ecosystem and society.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Modeling land use scenarios is critical to understand the socio-environmental impacts of current decisions and to explore future configurations for management. The management of regulations and permits by central and local governments plays an important role in shaping land use, with different complexities arising from site-specific socioeconomic dynamics. In Chile, the complexity is even more evident due to insufficient binding land regulations, fragmented government procedures, and the primacy of cities over rural areas. Yet land use must be managed to support sustainable development. This research integrates several state management dynamics into scenario modeling to support decision making at the basin scale through 2050. We employed a mixed qualitative-quantitative approach using interviews with state officials and local stakeholders as the basis for the Conversion of Land Use and its Effects (CLUE) model, which resulted in three scenarios with spatially explicit maps. Key findings indicate that opportunities for developing normative planning tools are limited, leaving state management without clear direction. However, current management practices can address problematic activities such as second-home projects and industrial monocultures while promoting small-scale agriculture. Scenario modeling is useful for understanding how the specifics that arise from the scalar dynamics of state management affect land use change and how existing management resources can be leveraged to achieve positive outcomes for both the ecosystem and society.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Díaz-Jara, A., Manuschevich, D., Grau, A., &amp; Zambrano-Bigiarini, M. (2024). Land Management Drifted: Land Use Scenario Modeling of Trancura River Basin, Araucanía, Chile. &lt;i&gt;Land&lt;/i&gt;, &lt;i&gt;13&lt;/i&gt;(2), 157. &lt;a href=&#39;https://doi.org/10.3390/land13020157&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.3390/land13020157&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>On the timescale of drought indices for monitoring streamflow drought considering catchment hydrological regimes</title>
      <link>https://hzambran.github.io/publications/2024-baezvillanueva-on-the/</link>
      <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2024-baezvillanueva-on-the/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; There is a wide variety of drought indices, yet a consensus on suitable indices and temporal scales for monitoring streamflow drought remains elusive across diverse hydrological settings. Considering the growing interest in spatially distributed indices for ungauged areas, this study addresses the following questions: (i) What temporal scales of precipitation-based indices are most suitable to assess streamflow drought in catchments with different hydrological regimes? (ii) Do soil moisture indices outperform meteorological indices as proxies for streamflow drought? (iii) Are snow indices more effective than meteorological indices for assessing streamflow drought in snow-influenced catchments? To answer these questions, we examined 100 near-natural catchments in Chile with four hydrological regimes, using the standardised precipitation index (SPI), standardised precipitation evapotranspiration index (SPEI), empirical standardised soil moisture index (ESSMI), and standardised snow water equivalent index (SWEI), aggregated across various temporal scales. Cross-correlation and event coincidence analysis were applied between these indices and the standardised streamflow index at a temporal scale of 1 month (SSI-1), as representative of streamflow drought events. Our results underscore that there is not a single drought index and temporal scale best suited to characterise all streamflow droughts in Chile, and their suitability largely depends on catchment memory. Specifically, in snowmelt-driven catchments characterised by a slow streamflow response to precipitation, the SPI at accumulation periods of 12–24 months serves as the best proxy for characterising streamflow droughts, with median correlation and coincidence rates of approximately 0.70–0.75 and 0.58–0.75, respectively. In contrast, the SPI at a 3-month accumulation period is the best proxy over faster-response rainfall-driven catchments, with median coincidence rates of around 0.55. Despite soil moisture and snowpack being key variables that modulate the propagation of meteorological deficits into hydrological ones, meteorological indices are better proxies for streamflow drought. Finally, to exclude the influence of non-drought periods, we recommend using the event coincidence analysis, a method that helps assessing the suitability of meteorological, soil moisture, and/or snow drought indices as proxies for streamflow drought events.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; There is a wide variety of drought indices, yet a consensus on suitable indices and temporal scales for monitoring streamflow drought remains elusive across diverse hydrological settings. Considering the growing interest in spatially distributed indices for ungauged areas, this study addresses the following questions: (i) What temporal scales of precipitation-based indices are most suitable to assess streamflow drought in catchments with different hydrological regimes? (ii) Do soil moisture indices outperform meteorological indices as proxies for streamflow drought? (iii) Are snow indices more effective than meteorological indices for assessing streamflow drought in snow-influenced catchments? To answer these questions, we examined 100 near-natural catchments in Chile with four hydrological regimes, using the standardised precipitation index (SPI), standardised precipitation evapotranspiration index (SPEI), empirical standardised soil moisture index (ESSMI), and standardised snow water equivalent index (SWEI), aggregated across various temporal scales. Cross-correlation and event coincidence analysis were applied between these indices and the standardised streamflow index at a temporal scale of 1 month (SSI-1), as representative of streamflow drought events. Our results underscore that there is not a single drought index and temporal scale best suited to characterise all streamflow droughts in Chile, and their suitability largely depends on catchment memory. Specifically, in snowmelt-driven catchments characterised by a slow streamflow response to precipitation, the SPI at accumulation periods of 12–24 months serves as the best proxy for characterising streamflow droughts, with median correlation and coincidence rates of approximately 0.70–0.75 and 0.58–0.75, respectively. In contrast, the SPI at a 3-month accumulation period is the best proxy over faster-response rainfall-driven catchments, with median coincidence rates of around 0.55. Despite soil moisture and snowpack being key variables that modulate the propagation of meteorological deficits into hydrological ones, meteorological indices are better proxies for streamflow drought. Finally, to exclude the influence of non-drought periods, we recommend using the event coincidence analysis, a method that helps assessing the suitability of meteorological, soil moisture, and/or snow drought indices as proxies for streamflow drought events.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Baez-Villanueva, O. M., Zambrano-Bigiarini, M., Miralles, D. G., Beck, H. E., Siegmund, J. F., Alvarez-Garreton, C., Verbist, K., Garreaud, R., Boisier, J. P., &amp; Galleguillos, M. (2024). On the timescale of drought indices for monitoring streamflow drought considering catchment hydrological regimes. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;28&lt;/i&gt;(6), 1415--1439. &lt;a href=&#39;https://doi.org/10.5194/hess-28-1415-2024&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-28-1415-2024&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>PatagoniaMet: A multi-source hydrometeorological dataset for Western Patagonia</title>
      <link>https://hzambran.github.io/publications/2024-aguayo-patagoniamet-a/</link>
      <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2024-aguayo-patagoniamet-a/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Western Patagonia (40–56°S) is a clear example of how the systematic lack of publicly available data and poor quality control protocols have hindered further hydrometeorological studies. To address these limitations, we present PatagoniaMet (PMET), a compilation of ground-based hydrometeorological data (PMET-obs; 1950–2020), and a daily gridded product of precipitation and temperature (PMET-sim; 1980–2020). PMET-obs was developed considering a 4-step quality control process applied to 523 hydrometeorological time series obtained from eight institutions in Chile and Argentina. Following current guidelines for hydrological datasets, several climatic and geographic attributes were derived for each catchment. PMET-sim was developed using statistical bias correction procedures, spatial regression models and hydrological methods, and was compared against other bias-corrected alternatives using hydrological modelling. PMET-sim was able to achieve Kling-Gupta efficiencies greater than 0.7 in 72% of the catchments, while other alternatives exceeded this threshold in only 50% of the catchments. PatagoniaMet represents an important milestone in the availability of hydro-meteorological data that will facilitate new studies in one of the largest freshwater ecosystems in the world.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Western Patagonia (40–56°S) is a clear example of how the systematic lack of publicly available data and poor quality control protocols have hindered further hydrometeorological studies. To address these limitations, we present PatagoniaMet (PMET), a compilation of ground-based hydrometeorological data (PMET-obs; 1950–2020), and a daily gridded product of precipitation and temperature (PMET-sim; 1980–2020). PMET-obs was developed considering a 4-step quality control process applied to 523 hydrometeorological time series obtained from eight institutions in Chile and Argentina. Following current guidelines for hydrological datasets, several climatic and geographic attributes were derived for each catchment. PMET-sim was developed using statistical bias correction procedures, spatial regression models and hydrological methods, and was compared against other bias-corrected alternatives using hydrological modelling. PMET-sim was able to achieve Kling-Gupta efficiencies greater than 0.7 in 72% of the catchments, while other alternatives exceeded this threshold in only 50% of the catchments. PatagoniaMet represents an important milestone in the availability of hydro-meteorological data that will facilitate new studies in one of the largest freshwater ecosystems in the world.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Aguayo, R., León-Muñoz, J., Aguayo, M., Baez-Villanueva, O. M., Zambrano-Bigiarini, M., Fernández, A., &amp; Jacques-Coper, M. (2024). PatagoniaMet: A multi-source hydrometeorological dataset for Western Patagonia. &lt;i&gt;Scientific Data&lt;/i&gt;, &lt;i&gt;11&lt;/i&gt;(1). &lt;a href=&#39;https://doi.org/10.1038/s41597-023-02828-2&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1038/s41597-023-02828-2&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Embed Media</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/formatting/media/</link>
      <pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/formatting/media/</guid>
      <description>&lt;p&gt;
 is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Embed videos, podcasts, code, LaTeX math, and even test students!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;On this page, you&amp;rsquo;ll find some examples of the types of technical content that can be rendered with Hugo Blox.&lt;/p&gt;
&lt;h2 id=&#34;video&#34;&gt;Video&lt;/h2&gt;
&lt;p&gt;Teach your course by sharing videos with your students. Choose from one of the following approaches:&lt;/p&gt;
&lt;div style=&#34;position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;&#34;&gt;
      &lt;iframe allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen&#34; loading=&#34;eager&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; src=&#34;https://www.youtube.com/embed/D2vj0WcvH5c?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0&#34; style=&#34;position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;&#34; title=&#34;YouTube video&#34;&gt;&lt;/iframe&gt;
    &lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Youtube&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; youtube w7Ft2ymGmfc &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Bilibili&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; bilibili id=&amp;quot;BV1WV4y1r7DF&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Video file&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Videos may be added to a page by either placing them in your &lt;code&gt;assets/media/&lt;/code&gt; media library or in your 
, and then embedding them with the &lt;em&gt;video&lt;/em&gt; shortcode:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; video src=&amp;quot;my_video.mp4&amp;quot; controls=&amp;quot;yes&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&#34;podcast&#34;&gt;Podcast&lt;/h2&gt;
&lt;p&gt;You can add a podcast or music to a page by placing the MP3 file in the page&amp;rsquo;s folder or the media library folder and then embedding the audio on your page with the &lt;em&gt;audio&lt;/em&gt; shortcode:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; audio src=&amp;quot;ambient-piano.mp3&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Try it out:&lt;/p&gt;








  








&lt;audio controls &gt;
  &lt;source src=&#34;ambient-piano.mp3&#34; type=&#34;audio/mpeg&#34;&gt;
&lt;/audio&gt;

&lt;h2 id=&#34;test-students&#34;&gt;Test students&lt;/h2&gt;
&lt;p&gt;Provide a simple yet fun self-assessment by revealing the solutions to challenges with the &lt;code&gt;spoiler&lt;/code&gt; shortcode:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; spoiler text=&amp;#34;👉 Click to view the solution&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;You found me!
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /spoiler &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
&lt;details class=&#34;spoiler &#34;  id=&#34;spoiler-2&#34;&gt;
  &lt;summary class=&#34;cursor-pointer&#34;&gt;👉 Click to view the solution&lt;/summary&gt;
  &lt;div class=&#34;rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2&#34;&gt;
    You found me 🎉
  &lt;/div&gt;
&lt;/details&gt;
&lt;h2 id=&#34;math&#34;&gt;Math&lt;/h2&gt;
&lt;p&gt;HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the &lt;code&gt;math&lt;/code&gt; option in your &lt;code&gt;config/_default/params.yaml&lt;/code&gt; file.&lt;/p&gt;
&lt;p&gt;To render &lt;em&gt;inline&lt;/em&gt; or &lt;em&gt;block&lt;/em&gt; math, wrap your LaTeX math with &lt;code&gt;{{&amp;lt; math &amp;gt;}}$...${{&amp;lt; /math &amp;gt;}}&lt;/code&gt; or &lt;code&gt;{{&amp;lt; math &amp;gt;}}$$...$${{&amp;lt; /math &amp;gt;}}&lt;/code&gt;, respectively.&lt;/p&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;We wrap the LaTeX math in the Hugo Blox &lt;em&gt;math&lt;/em&gt; shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Example &lt;strong&gt;math block&lt;/strong&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-latex&#34; data-lang=&#34;latex&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\gamma&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;_{n} &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\frac&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{ &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; | &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n} &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;^T &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; |}{&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\|\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{x}_{n}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{x}_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\|&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;^&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; /math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$


&lt;p&gt;Example &lt;strong&gt;inline math&lt;/strong&gt; &lt;code&gt;{{&amp;lt; math &amp;gt;}}$\nabla F(\mathbf{x}_{n})${{&amp;lt; /math &amp;gt;}}&lt;/code&gt; renders as $\nabla F(\mathbf{x}_{n})$
.&lt;/p&gt;
&lt;p&gt;Example &lt;strong&gt;multi-line math&lt;/strong&gt; using the math linebreak (&lt;code&gt;\\&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-latex&#34; data-lang=&#34;latex&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;f&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;k;p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\begin&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{cases}p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &amp;amp; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\text&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{if }k&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;, &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\\&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &amp;amp; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\text&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{if }k&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\end&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{cases}&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; /math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;


$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$



&lt;h2 id=&#34;code&#34;&gt;Code&lt;/h2&gt;
&lt;p&gt;HugoBlox Kit utilises Hugo&amp;rsquo;s Markdown extension for highlighting code syntax. The code theme can be selected in the &lt;code&gt;config/_default/params.yaml&lt;/code&gt; file.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```python
import pandas as pd
data = pd.read_csv(&amp;quot;data.csv&amp;quot;)
data.head()
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kn&#34;&gt;import&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;pandas&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;as&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;pd&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;data&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;pd&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;read_csv&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;data.csv&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;data&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;head&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;inline-images&#34;&gt;Inline Images&lt;/h2&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;{{&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;python&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;}}&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;Python&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
&lt;p&gt;
  &lt;span class=&#34;inline-block  pr-1&#34;&gt;
    &lt;span style=&#34;height: 1em; transform: translateY(0.1em);&#34;&gt;python&lt;/span&gt;
  &lt;/span&gt; Python&lt;/p&gt;
&lt;h2 id=&#34;did-you-find-this-page-helpful-consider-sharing-it-&#34;&gt;Did you find this page helpful? Consider sharing it 🙌&lt;/h2&gt;
</description>
    </item>
    
    <item>
      <title>Embed Media</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/media/</link>
      <pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/media/</guid>
      <description>&lt;p&gt;
 is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Embed videos, podcasts, code, LaTeX math, and even test students!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;On this page, you&amp;rsquo;ll find some examples of the types of technical content that can be rendered with Hugo Blox.&lt;/p&gt;
&lt;h2 id=&#34;video&#34;&gt;Video&lt;/h2&gt;
&lt;p&gt;Teach your course by sharing videos with your students. Choose from one of the following approaches:&lt;/p&gt;
&lt;div style=&#34;position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;&#34;&gt;
      &lt;iframe allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen&#34; loading=&#34;eager&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; src=&#34;https://www.youtube.com/embed/D2vj0WcvH5c?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0&#34; style=&#34;position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;&#34; title=&#34;YouTube video&#34;&gt;&lt;/iframe&gt;
    &lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Youtube&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; youtube w7Ft2ymGmfc &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Bilibili&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; bilibili id=&amp;quot;BV1WV4y1r7DF&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Video file&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Videos may be added to a page by either placing them in your &lt;code&gt;assets/media/&lt;/code&gt; media library or in your 
, and then embedding them with the &lt;em&gt;video&lt;/em&gt; shortcode:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; video src=&amp;quot;my_video.mp4&amp;quot; controls=&amp;quot;yes&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&#34;podcast&#34;&gt;Podcast&lt;/h2&gt;
&lt;p&gt;You can add a podcast or music to a page by placing the MP3 file in the page&amp;rsquo;s folder or the media library folder and then embedding the audio on your page with the &lt;em&gt;audio&lt;/em&gt; shortcode:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; audio src=&amp;quot;ambient-piano.mp3&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Try it out:&lt;/p&gt;








  








&lt;audio controls &gt;
  &lt;source src=&#34;ambient-piano.mp3&#34; type=&#34;audio/mpeg&#34;&gt;
&lt;/audio&gt;

&lt;h2 id=&#34;test-students&#34;&gt;Test students&lt;/h2&gt;
&lt;p&gt;Provide a simple yet fun self-assessment by revealing the solutions to challenges with the &lt;code&gt;spoiler&lt;/code&gt; shortcode:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; spoiler text=&amp;#34;👉 Click to view the solution&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;You found me!
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /spoiler &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
&lt;details class=&#34;spoiler &#34;  id=&#34;spoiler-2&#34;&gt;
  &lt;summary class=&#34;cursor-pointer&#34;&gt;👉 Click to view the solution&lt;/summary&gt;
  &lt;div class=&#34;rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2&#34;&gt;
    You found me 🎉
  &lt;/div&gt;
&lt;/details&gt;
&lt;h2 id=&#34;math&#34;&gt;Math&lt;/h2&gt;
&lt;p&gt;HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the &lt;code&gt;math&lt;/code&gt; option in your &lt;code&gt;config/_default/params.yaml&lt;/code&gt; file.&lt;/p&gt;
&lt;p&gt;To render &lt;em&gt;inline&lt;/em&gt; or &lt;em&gt;block&lt;/em&gt; math, wrap your LaTeX math with &lt;code&gt;{{&amp;lt; math &amp;gt;}}$...${{&amp;lt; /math &amp;gt;}}&lt;/code&gt; or &lt;code&gt;{{&amp;lt; math &amp;gt;}}$$...$${{&amp;lt; /math &amp;gt;}}&lt;/code&gt;, respectively.&lt;/p&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;We wrap the LaTeX math in the Hugo Blox &lt;em&gt;math&lt;/em&gt; shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Example &lt;strong&gt;math block&lt;/strong&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-latex&#34; data-lang=&#34;latex&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\gamma&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;_{n} &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\frac&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{ &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; | &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n} &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;^T &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; |}{&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\|\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{x}_{n}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{x}_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\|&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;^&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; /math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$


&lt;p&gt;Example &lt;strong&gt;inline math&lt;/strong&gt; &lt;code&gt;{{&amp;lt; math &amp;gt;}}$\nabla F(\mathbf{x}_{n})${{&amp;lt; /math &amp;gt;}}&lt;/code&gt; renders as $\nabla F(\mathbf{x}_{n})$
.&lt;/p&gt;
&lt;p&gt;Example &lt;strong&gt;multi-line math&lt;/strong&gt; using the math linebreak (&lt;code&gt;\\&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-latex&#34; data-lang=&#34;latex&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;f&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;k;p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\begin&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{cases}p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &amp;amp; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\text&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{if }k&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;, &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\\&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &amp;amp; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\text&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{if }k&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\end&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{cases}&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;{{&lt;/span&gt;&amp;lt; /math &amp;gt;&lt;span class=&#34;nb&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;


$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$



&lt;h2 id=&#34;code&#34;&gt;Code&lt;/h2&gt;
&lt;p&gt;HugoBlox Kit utilises Hugo&amp;rsquo;s Markdown extension for highlighting code syntax. The code theme can be selected in the &lt;code&gt;config/_default/params.yaml&lt;/code&gt; file.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```python
import pandas as pd
data = pd.read_csv(&amp;quot;data.csv&amp;quot;)
data.head()
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kn&#34;&gt;import&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;pandas&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;as&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;pd&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;data&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;pd&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;read_csv&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;data.csv&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;data&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;head&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;inline-images&#34;&gt;Inline Images&lt;/h2&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;{{&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;python&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;}}&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;Python&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
&lt;p&gt;
  &lt;span class=&#34;inline-block  pr-1&#34;&gt;
    &lt;span style=&#34;height: 1em; transform: translateY(0.1em);&#34;&gt;python&lt;/span&gt;
  &lt;/span&gt; Python&lt;/p&gt;
&lt;h2 id=&#34;did-you-find-this-page-helpful-consider-sharing-it-&#34;&gt;Did you find this page helpful? Consider sharing it 🙌&lt;/h2&gt;
</description>
    </item>
    
    <item>
      <title>Experience</title>
      <link>https://hzambran.github.io/experience/</link>
      <pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/experience/</guid>
      <description></description>
    </item>
    
    <item>
      <title>Hottest July on Record (174 years), (NASA)</title>
      <link>https://hzambran.github.io/blog/2023-08-14-hottest_july_on_record/</link>
      <pubDate>Mon, 14 Aug 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2023-08-14-hottest_july_on_record/</guid>
      <description>&lt;p&gt;Earth just roasted under its hottest July on record, according to scientists from NOAA&amp;rsquo;s National Centers for Environmental Information (NCEI) and also ffrom scientist from NASA.&lt;/p&gt;
&lt;p&gt;For the fourth-consecutive month, the global ocean surface temperature also hit a record high.&lt;/p&gt;
&lt;p&gt;Overall, July 2023 was 0.24ºC warmer than any other July in NASA&amp;rsquo;s record (since 1880), and it was 1.18ºC warmer than the average July between 1951 and 1980.&lt;/p&gt;
&lt;p&gt;Parts of South America, North Africa, North America, and the Antarctic Peninsula were especially hot, experiencing temperatures increases around 4ºC above average. Overall, extreme heat this summer put tens of millions of people under heat warnings and was linked to hundreds of heat-related illnesses and deaths. The record-breaking July continues a long-term trend of human-driven warming driven primarily by greenhouse gas emissions that has become evident over the past four decades. According to NASA data, the five hottest Julys since 1880 have all happened in the past five years.&lt;/p&gt;
&lt;p&gt;&amp;ldquo;&lt;em&gt;Climate change is impacting people and ecosystems around the world, and we expect many of these impacts to escalate with continued warming&lt;/em&gt;&amp;rdquo; said Katherine Calvin, chief scientist and senior climate advisor at NASA Headquarters in Washington. &amp;ldquo;&lt;em&gt;Our agency observes climate change, its impacts, and its drivers, like greenhouse gases, and we are committed providing this information to help people plan for the future.&lt;/em&gt;&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;For more information please visit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2023-08-14-hottest_july_on_record/featured.png.webp&#34;
    alt=&#34;Global temperature anomalies for July 2023&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;This map shows global temperature anomalies for July 2023 according to the GISTEMP analysis by scientists at NASA’s Goddard Institute for Space Studies. Temperature anomalies reflect how July 2023 compared to the average July temperature from 1951-1980.Credits: NASA&amp;rsquo;s Goddard Institute for Space Studies&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Earth just had its hottest June on record (NOAA)</title>
      <link>https://hzambran.github.io/blog/2023-07-13-hottest_june_on_record/</link>
      <pubDate>Thu, 13 Jul 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2023-07-13-hottest_june_on_record/</guid>
      <description>&lt;p&gt;The world just sweltered through its &lt;strong&gt;hottest June&lt;/strong&gt; in the 174-year global climate record.&lt;/p&gt;
&lt;p&gt;The June global surface temperature was 1.05°C above the 20th-century average of 15.5°C, making it the warmest June on record. This marked the first time a June temperature exceeded 1°C above the long-term average.&lt;/p&gt;
&lt;p&gt;June 2023 was 0.13°C warmer than the previous June record from 2020, but 0.29°C cooler than the all-time highest monthly temperature anomaly on record (March 2016).&lt;/p&gt;
&lt;p&gt;June 2023 marked the 47th consecutive June and the 532nd consecutive month with temperatures at least nominally above the 20th-century average.&lt;/p&gt;
&lt;p&gt;Additionally, Earth’s ocean surface temperature anomaly, which indicates how much warmer or cooler temperatures are from the long-term average, were the highest ever recorded and the sea ice coverage hit a record low, according to scientists from NOAA’s National Centers for Environmental Information.&lt;/p&gt;
&lt;p&gt;For more information please visit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2023-07-13-hottest_june_on_record/featured.png.webp&#34;
    alt=&#34;Global temperature anomalies for June 2023&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;This map shows global temperature anomalies for June 2023 according to the GISTEMP analysis by scientists at NASA&amp;rsquo;s Goddard Institute for Space Studies. Temperature anomalies reflect how June 2023 compared to the average June temperature from 1951-1980. Credits: NASA’s Goddard Institute for Space Studies&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Después de la gran tormenta, ¿cómo rediseñaremos? (El Mostrador)</title>
      <link>https://hzambran.github.io/blog/2023-07-07-despuesdelagrantormenta-elmostrador/</link>
      <pubDate>Fri, 07 Jul 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2023-07-07-despuesdelagrantormenta-elmostrador/</guid>
      <description>&lt;p&gt;I just published an opinion column in the newspaper El Mostrador on how we will redesign the infrastructure that have been affected by the big storm that hit the Central-South zone of Chile in the end of June of this year 2023.&lt;/p&gt;
&lt;p&gt;In this column, I states that it is of vital importance that the design of future infrastructure works considers -at least- the estimation of flood risk maps, and that the use of floodplains (free of human settlements) be prioritized in the communal regulatory plans, floodplains that must be estimated using the best data and techniques available, to avoid future human, social and material tragedies.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Two works at International SWAT Conference (Aarhus, Dinamarca)</title>
      <link>https://hzambran.github.io/dissemination/2023-07-07-swat2023-aarhus_denmark/</link>
      <pubDate>Fri, 07 Jul 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2023-07-07-swat2023-aarhus_denmark/</guid>
      <description>&lt;p&gt;During the week of June 26th to 30th, 2023, I participated in the International Conference 
, held at the 
 (Aarhus Denmark). This is a small conference, aimed at all scientists working with the 
 worldwide. On this occasion, more than 170 scientists from 41 countries on six continents participated.&lt;/p&gt;
&lt;p&gt;I participated as co-author in one paper and presented another:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;
. In this work, the Master&amp;rsquo;s candidate Rodrigo Marinao Rivas presented 
 to the 
 eco-hydrological model user community. 
 is a new 
 package for multi-objective calibration, which combines two search mechanisms to maintain population diversity and accelerate its convergence towards the Pareto optimal front. 
 is model-independent, allowing the calibration engine to interact with any type of model that needs to be run from the command line, including SWAT and SWAT+, but also other hydrological models available in R (eg, 
, 
, 
). In addition, 
 is independent of the operating system used (i.e. it can run on GNU/Linux, Mac OSX and Windows, among others) and can run on multi-core machines or network clusters, which significantly alleviates the load computational associated with the optimization of complex models with long execution times.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. In this paper, Dr. Zambrano-Bigiarini presented an application of the 
 multi-objective calibration software to the 
 eco-hydrological model implemented in the Trancura River Basin before Llafenco (Araucanía Region). In this work, two cases of multi-objective calibration were analyzed. In the first case study, the SWAT+ model was simultaneously calibrated for two time periods: one with normal/wet conditions and one with dry conditions (i.e., below-normal rainfall). In the second case study, daily flows at the outlet of the basin and average monthly real evapotranspiration throughout the basin were calibrated simultaneously. The package has been developed by Civil Engineer Rodrigo Marinao, who is a graduate of Civil Engineering at the Universidad de la Frontera, a student of the Master&amp;rsquo;s Degree in Engineering Sciences from the same university, and a research assistant at the Center for Climate and Resilience Research (CR2). The collaboration between Rodrigo Marinao and I began from the Hydrology course in the Civil Engineering degree, and has continued uninterrupted since then. This work also received funding from the 
.
















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/SWAT2023-Presentation_MZB.jpg&#34; alt=&#34;Multi-period and multi-variable calibration of SWAT&amp;#43; using gridded input datasets and a novel R package&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Finally, during this conference, I took the opportunity to clarify doubts about the implementation of the growth of some plant species typical of Chile, learn about the latest advances in the development of the model (e.g., 
, 
, 
), and possibilities of collaboration with doctoral candidate 
 from the 
.&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/SWAT2023-MZB_Sirinivasan_Palominos.jpg&#34; alt=&#34;Sirinivasan, Palominos and I&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/SWAT2023-MZB_RMR_Palominos.jpg&#34; alt=&#34;Rodrigo, Carolos and I&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/SWAT2023-Aarhus2.jpg&#34; alt=&#34;Aarhus&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Four works at EGU 2023</title>
      <link>https://hzambran.github.io/dissemination/2023-05-02-egu2023/</link>
      <pubDate>Tue, 02 May 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2023-05-02-egu2023/</guid>
      <description>&lt;p&gt;During the week of April 24 to 28, 2023, I participated in the 
, held in the city of Wien (Austria). On this occasion, I presented two works and participated in other two:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;
. In this work, I presented 
, a new package for the 
 that is about to be submitted to 
. This package expands the functions of the terra package to work with gridded data that has a time attribute. In particular, hydroRTS allows you to work efficiently with large amounts of gridded data that have an hourly, daily, monthly, or annual time frequency. This work summarizes a large amount of work that I has done since 2013. However, only the collaboration of Civil Engineer Sebastián Bernal, graduated in 2022 from Civil Engineering at the Universidad de la Frontera, allowed to systematically organize and adequately document a set of functions that are useful for the Hydrological and Earth Sciences community worldwide. This collaboration was only possible thanks to funding provided by the 
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. In this work, I presented to the international community an application of 
, an 
 package for global multi-objective optimization. In this work, two cases of multi-objective calibration of the SWAT+ semi-distributed hydrological model in the Trancura River Basin before Llafenco (Araucanía Region) were analyzed. In the first case study, the SWAT+ model was simultaneously calibrated for two time periods: one with normal/wet conditions and one with dry conditions (i.e., below-normal rainfall). In the second case study, daily flows at the outlet of the basin and average monthly real evapotranspiration throughout the basin were calibrated simultaneously. This package has been developed by Civil Engineer Rodrigo Marinao, who is a graduate of Civil Engineering at the Universidad de la Frontera, a student of the 
 from the same university, and a research assistant at the 
. The collaboration between the Marine Engineer and I began from the Hydrology course in the Civil Engineering degree, and has continued uninterrupted since then. This work also received funding from the 
.
















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/EGU2023-01_Poster_hydroMOPSO.jpg&#34; alt=&#34;Multi-period and multi-variable calibration of SWAT&amp;#43; using gridded input datasets and a novel R package&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. In this paper, Dr. Oscar Baez-Villanueva (TH Köln, Germany) presented a paper that analyzes which meteorological drought indices (SPI, SPEI), soil moisture (ESSMI) or snow (SSWEI) are more related to the occurrence of hydrological drought (SSI-1), based on the hydrological regime (i.e., pluvial, pluvio-nival, nivo-pluvial, nival) of 100 basins of Central-South Chile. This work has been carried out in collaboration with me within the framework of the project &amp;ldquo;&lt;em&gt;Drought and water security platform for catchment planning: historical evolution and future trajectories under global change&lt;/em&gt;&amp;rdquo;, financed by ANID in the Rapid Assignment Contest Fondo de Strategic Research in Drought for the year 2021, whose director is Dr. Camila Álvarez Garreón (CR2).&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. In this paper, Fabian Lema, a Master&amp;rsquo;s candidate at the 
, presented a paper where the characteristics of drought events in six basins of Central-South Chile are analyzed, both for a historical period and for a future period. Dr. Pablo Mendoza from the University of Chile invited I to participate in this work thanks to his collaboration as an evaluating member of Fabián Lema&amp;rsquo;s Master&amp;rsquo;s thesis.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Finally, during this conference, I took the opportunity to discuss, among other things, postgraduate collaboration possibilities with 
 from the 
 (USA) and to talk about a joint article with Dr. Oscar Baez-Villanueva from the 
 (Germany) and with 
 from the 
 (Arabia Saudita).&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/EGU2023-02_Ian_Oscar_MZB.jpg&#34; alt=&#34;Ian, Oscar and I&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/EGU2023-03_Stephansdom.jpg&#34; alt=&#34;Wien: Stephansdom&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Panta Rhei benchmark dataset: socio-hydrological data of paired events of floods and droughts</title>
      <link>https://hzambran.github.io/publications/2023-kreibich-panta-rhei/</link>
      <pubDate>Sun, 01 Jan 2023 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2023-kreibich-panta-rhei/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; As the adverse impacts of hydrological extremes increase in many regions of the world, a better understanding of the drivers of changes in risk and impacts is essential for effective flood and drought risk management and climate adaptation. However, there is currently a lack of comprehensive, empirical data about the processes, interactions, and feedbacks in complex human–water systems leading to flood and drought impacts. Here we present a benchmark dataset containing socio-hydrological data of paired events, i.e. two floods or two droughts that occurred in the same area. The 45 paired events occurred in 42 different study areas and cover a wide range of socio-economic and hydro-climatic conditions. The dataset is unique in covering both floods and droughts, in the number of cases assessed and in the quantity of socio-hydrological data. The benchmark dataset comprises (1) detailed review-style reports about the events and key processes between the two events of a pair; (2) the key data table containing variables that assess the indicators which characterize management shortcomings, hazard, exposure, vulnerability, and impacts of all events; and (3) a table of the indicators of change that indicate the differences between the first and second event of a pair. The advantages of the dataset are that it enables comparative analyses across all the paired events based on the indicators of change and allows for detailed context- and location-specific assessments based on the extensive data and reports of the individual study areas. The dataset can be used by the scientific community for exploratory data analyses, e.g. focused on causal links between risk management; changes in hazard, exposure and vulnerability; and flood or drought impacts. The data can also be used for the development, calibration, and validation of socio-hydrological models. The dataset is available to the public through the GFZ Data Services.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; As the adverse impacts of hydrological extremes increase in many regions of the world, a better understanding of the drivers of changes in risk and impacts is essential for effective flood and drought risk management and climate adaptation. However, there is currently a lack of comprehensive, empirical data about the processes, interactions, and feedbacks in complex human–water systems leading to flood and drought impacts. Here we present a benchmark dataset containing socio-hydrological data of paired events, i.e. two floods or two droughts that occurred in the same area. The 45 paired events occurred in 42 different study areas and cover a wide range of socio-economic and hydro-climatic conditions. The dataset is unique in covering both floods and droughts, in the number of cases assessed and in the quantity of socio-hydrological data. The benchmark dataset comprises (1) detailed review-style reports about the events and key processes between the two events of a pair; (2) the key data table containing variables that assess the indicators which characterize management shortcomings, hazard, exposure, vulnerability, and impacts of all events; and (3) a table of the indicators of change that indicate the differences between the first and second event of a pair. The advantages of the dataset are that it enables comparative analyses across all the paired events based on the indicators of change and allows for detailed context- and location-specific assessments based on the extensive data and reports of the individual study areas. The dataset can be used by the scientific community for exploratory data analyses, e.g. focused on causal links between risk management; changes in hazard, exposure and vulnerability; and flood or drought impacts. The data can also be used for the development, calibration, and validation of socio-hydrological models. The dataset is available to the public through the GFZ Data Services.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Kreibich, , H., , Schröter, , K., , Baldassarre, D., G., , Loon, V., F, A., Mazzoleni, , M., , Abeshu, , W, G., Agafonova, , S., , AghaKouchak, , A., , Aksoy, , H., , Alvarez-Garreton, , C., , Aznar, , B., , Balkhi, , L., , Barendrecht, , H, M., Biancamaria, , S., , Bos-Burgering, , L., , Bradley, , C., , Budiyono, , Y., , Buytaert, , W., , Capewell, , L., , Carlson, , H., , Cavus, , Y., , Couasnon, , A., , Coxon, , G., , Daliakopoulos, , I., , Ruiter, d., C, M., Delus, , C., , Erfurt, , M., , Esposito, , G., , François, , D., , Frappart, , F., , Freer, , J., , Frolova, , N., , Gain, , K, A., Grillakis, , M., , Grima, , O, J., Guzmán, , A, D., Huning, , S, L., Ionita, , M., , Kharlamov, , M., , Khoi, , N, D., Kieboom, , N., , Kireeva, , M., , Koutroulis, , A., , Lavado-Casimiro, , W., , Li, , H.-Y., , LLasat, , C, M., Macdonald, , D., , Mård, , J., , Mathew-Richards, , H., , McKenzie, , A., , Mejia, , A., , Mendiondo, , M, E., Mens, , M., , Mobini, , S., , Mohor, , S, G., Nagavciuc, , V., , Ngo-Duc, , T., , Nguyen, , T, H. T., Nhi, , T, P. T., Petrucci, , O., , Quan, , H, N., Quintana-Seguí, , P., , Razavi, , S., , Ridolfi, , E., , Riegel, , J., , Sadik, , S, M., Sairam, , N., , Savelli, , E., , Sazonov, , A., , Sharma, , S., , Sörensen, , J., , Souza, , A, F. A., Stahl, , K., , Steinhausen, , M., , Stoelzle, , M., , Szalińska, , W., , Tang, , Q., , Tian, , F., , Tokarczyk, , T., , Tovar, , C., , Tran, , T, T. V., Huijgevoort, v., J, M. H., Vliet, v., H, M. T., Vorogushyn, , S., , Wagener, , T., , Wang, , Y., , Wendt, , E, D., Wickham, , E., , Yang, , L., , Zambrano-Bigiarini, M., Ward, , &amp; and J, P. (2023). Panta Rhei benchmark dataset: socio-hydrological data of paired events of floods and droughts. &lt;i&gt;Earth System Science Data&lt;/i&gt;, &lt;i&gt;15&lt;/i&gt;(5), 2009--2023. &lt;a href=&#39;https://doi.org/10.5194/essd-15-2009-2023&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/essd-15-2009-2023&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Two posters at AGU 2022</title>
      <link>https://hzambran.github.io/dissemination/2022-12-12-agu2022/</link>
      <pubDate>Mon, 12 Dec 2022 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2022-12-12-agu2022/</guid>
      <description>&lt;p&gt;During the week of December 12 to 16th, 2022, I participated in the Conference 
, held in the city of Chicago ( USES). This is the most important conference worldwide in the area of Earth Sciences, and it is held annually.&lt;/p&gt;
&lt;p&gt;On this occasion, I presented two posters:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;
. hydroRTS is a new package for the 
 that is about to be submitted to [CRAN](
- project.org/). This package allows you to work efficiently with large amounts of gridded data that have an hourly, daily, monthly, or annual time frequency. This work summarizes a large amount of work that I have carried out since 2013. However, only the collaboration of Civil Engineer Sebastián Bernal, who graduated in Civil Engineering in 2022 from the Universidad de la Frontera, made it possible to organize systematically and adequately document a set of functions that are useful to the global community of Hydrologists and Earth Scientists. This collaboration was only possible thanks to the funding provided by the 
, directed by Dr. Zambrano-Bigiarini.
















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/AGU2022-01_Fotos_hydroRTS.jpg&#34; alt=&#34;An R package for efficient analysis of raster time series&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. 
 is a new package for the 
 that is about to be submitted to [CRAN](
- project.org/). This package allows you to perform a multi-objective calibration of any hydrological/environmental model (actually, a model from any subject area), whether this model is implemented in R or requires to be executed from the system console in a local PC or in a server. This package has been developed by Civil Engineer Rodrigo Marinao, who is a graduate of Civil Engineering at the Universidad de la Frontera, student of the 
 of the same house of studies, and research assistant at the 
. The collaboration with Rodrigo Marinao started during the Hydrology course in the Civil Engineering degree, and has continued uninterrupted since then. This work also received funding from 
.
















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/AGU2022-02_Foto_hydroMOPSO.jpg&#34; alt=&#34;hydroMOPSO: A Versatile Multi-Objective Optimization R Package for Calibration of Environmental and Hydrological Models&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Finally, during this conference I took the opportunity to discuss various topics with Dr. Camila Álvarez Garreón (CR2), Dr. Mauricio Galleguillos (U. Adolfo Ibáñez) and Dr. Juan Pablo Boiser (CR2), who also participate in the 
.
















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/AGU2022-03_Foto_Chi2.jpg&#34; alt=&#34;Project Chile-China NSFC 190018&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title></title>
      <link>https://hzambran.github.io/_index-copy/</link>
      <pubDate>Mon, 24 Oct 2022 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/_index-copy/</guid>
      <description></description>
    </item>
    
    <item>
      <title>Article on challenge of unprecedented floods and droughts in risk management published in Nature</title>
      <link>https://hzambran.github.io/blog/2022-08-04-nature_article_on_floods_and_droughts_published/</link>
      <pubDate>Thu, 04 Aug 2022 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2022-08-04-nature_article_on_floods_and_droughts_published/</guid>
      <description>&lt;p&gt;On August 4, 2022, Nature published the article entitled 
. This article
shows that risk management has reduced vulnerability to floods and droughts worldwide, but their impacts continue to increase. Therefore, we need a better understanding of the causes of impacts in a changing climate, but this better understanding has been hampered by a lack of empirical data.&lt;/p&gt;
&lt;p&gt;Based on a global data set of 45 pairs of extreme events that occurred within the same area (one of them in Chile), an interdisciplinary team of 92 authors from various countries, led by Dra. Heidi Kreibich, showed that adequate risk management generally succeeds in reducing impacts of floods and droughts, but faces difficulties in reducing the impacts of unprecedented events, i.e., events of a magnitude never experienced before.&lt;/p&gt;
&lt;p&gt;Furthermore, when the second extreme event was more dangerous than the first, its impact was almost always greater. This is because management was not designed to deal with such extreme events, which resulted in levees and reservoirs exceeding design levels.&lt;/p&gt;
&lt;p&gt;In two success stories, the impact of the second, more dangerous event was less, as a result of better risk management governance and high investment in integrated management. The observed difficulty in managing unprecedented events is alarming, given that more extreme hydrological events are projected due to climate change.&lt;/p&gt;
&lt;p&gt;This work is the fruit of years of international cooperation with the Technical University of Cologne in Germany and with the 
 Group, dedicated to research activities on changes in hydrology and society. This work had its origins in a meeting held at the European Geosciences Union (EGU) Conference in 2018, where Dr. Zambrano-Bigiarini participated together with Dr. Camila Álvarez Garretón (both belonging to the CR2 FONDAP center) in a meeting with members of the 
, and began to define the objectives of this article.&lt;/p&gt;
&lt;p&gt;The full article can be found here: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2022-08-04-nature_article_on_floods_and_droughts_published/featured.jpg&#34;
    alt=&#34;https://doi.org/10.1038/s41586-022-04917-5&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Is the megadrought over with the last frontal system? (The Clinic)</title>
      <link>https://hzambran.github.io/blog/2022-07-19-termino_la_megasequia-theclinic/</link>
      <pubDate>Tue, 19 Jul 2022 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2022-07-19-termino_la_megasequia-theclinic/</guid>
      <description>&lt;p&gt;On July 19th, 2022, Dr. Mauricio Zambrano-Bigiarini was interviewed about the impact of the latest frontal system in the drought that affects our country by the digital newspaper The Clinic.&lt;/p&gt;
&lt;p&gt;In 
, the academic discusses the impact that the latest rainfall had in reducing the water deficit in our country, and whether or not we can affirm that the mega-drought that affects our country has ended.&lt;/p&gt;
&lt;p&gt;The full interview can be found here: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2022-07-19-termino_la_megasequia-theclinic/featured.jpg&#34;
    alt=&#34;https://www.theclinic.cl/2022/07/19/lluvia-nieve-sequia-sistema-frontal-expertos/&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>A coupled modeling approach to assess the effect of forest policies in water provision: A biophysical evaluation of a drought-prone rural catchment in south-central Chile</title>
      <link>https://hzambran.github.io/publications/2022-gimeno-a-coupled/</link>
      <pubDate>Sat, 01 Jan 2022 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2022-gimeno-a-coupled/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; The effect of different forest conservation policies on water provision has been poorly investigated due to a lack of an integrative methodological framework that enables its quantification. We developed a method for assessing the effects of forest conservation policies on water provision for rural inhabitants, based on a land-use model coupled with an eco-hydrological model. We used as a case study the Lumaco catchment, Chile, a territory dominated by native forests (NF) and non-native tree farms, with an extended dry period where nearly 12,600 people of rural communities get drinking water through water trucks. We analyzed three land-use policy scenarios: i) a baseline scenario based on historical land-cover maps; ii) a NF Recovery and Protection (NFRP) scenario, based on an earlier implementation of the first NF Recovery and Forestry Development bill; and iii) a Pristine (PR) scenario, based on potential vegetation belts; the latter two based on Dyna CLUE, and simulated between 1990 and 2015. Impacts on water provision from each scenario were computed with SWAT. The NFRP scenario resulted in an increase of 6974 ha of NF regarding the baseline situation, and the PR scenario showed an increase of 26,939 ha of NF. Despite large differences in NF areas, slight increases in inflows (Q) were found between the NFRP and the PR scenarios, with relative differences with respect to the baseline of 0.3% and 2.5% for NFRP and PR, respectively. Notwithstanding, these small differences in the NFRP scenario, they become larger if we analyze the cumulative values during the dry season only (December, January, and February), where they reach 1.1% in a normal year and 3.1% in a dry year. Flows increases were transformed into water truck costs resulting in up to 441,876 USD (monthly) of fiscal spending that could be avoided during a dry period.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; The effect of different forest conservation policies on water provision has been poorly investigated due to a lack of an integrative methodological framework that enables its quantification. We developed a method for assessing the effects of forest conservation policies on water provision for rural inhabitants, based on a land-use model coupled with an eco-hydrological model. We used as a case study the Lumaco catchment, Chile, a territory dominated by native forests (NF) and non-native tree farms, with an extended dry period where nearly 12,600 people of rural communities get drinking water through water trucks. We analyzed three land-use policy scenarios: i) a baseline scenario based on historical land-cover maps; ii) a NF Recovery and Protection (NFRP) scenario, based on an earlier implementation of the first NF Recovery and Forestry Development bill; and iii) a Pristine (PR) scenario, based on potential vegetation belts; the latter two based on Dyna CLUE, and simulated between 1990 and 2015. Impacts on water provision from each scenario were computed with SWAT. The NFRP scenario resulted in an increase of 6974 ha of NF regarding the baseline situation, and the PR scenario showed an increase of 26,939 ha of NF. Despite large differences in NF areas, slight increases in inflows (Q) were found between the NFRP and the PR scenarios, with relative differences with respect to the baseline of 0.3% and 2.5% for NFRP and PR, respectively. Notwithstanding, these small differences in the NFRP scenario, they become larger if we analyze the cumulative values during the dry season only (December, January, and February), where they reach 1.1% in a normal year and 3.1% in a dry year. Flows increases were transformed into water truck costs resulting in up to 441,876 USD (monthly) of fiscal spending that could be avoided during a dry period.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Gimeno, F., Galleguillos, M., Manuschevich, D., &amp; Zambrano-Bigiarini, M. (2022). A coupled modeling approach to assess the effect of forest policies in water provision: A biophysical evaluation of a drought-prone rural catchment in south-central Chile. &lt;i&gt;Science of the Total Environment&lt;/i&gt;, &lt;i&gt;830&lt;/i&gt;, 154608. &lt;a href=&#39;https://doi.org/10.1016/j.scitotenv.2022.154608&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.scitotenv.2022.154608&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>The challenge of unprecedented floods and droughts in risk management</title>
      <link>https://hzambran.github.io/publications/2022-kreibich-the-challenge/</link>
      <pubDate>Sat, 01 Jan 2022 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2022-kreibich-the-challenge/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Risk management has reduced vulnerability to floods and droughts globally1,2, yet their impacts are still increasing3. An improved understanding of the causes of changing impacts is therefore needed, but has been hampered by a lack of empirical data4,5. On the basis of a global dataset of 45 pairs of events that occurred within the same area, we show that risk management generally reduces the impacts of floods and droughts but faces difficulties in reducing the impacts of unprecedented events of a magnitude not previously experienced. If the second event was much more hazardous than the first, its impact was almost always higher. This is because management was not designed to deal with such extreme events: for example, they exceeded the design levels of levees and reservoirs. In two success stories, the impact of the second, more hazardous, event was lower, as a result of improved risk management governance and high investment in integrated management. The observed difficulty of managing unprecedented events is alarming, given that more extreme hydrological events are projected owing to climate change.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Risk management has reduced vulnerability to floods and droughts globally1,2, yet their impacts are still increasing3. An improved understanding of the causes of changing impacts is therefore needed, but has been hampered by a lack of empirical data4,5. On the basis of a global dataset of 45 pairs of events that occurred within the same area, we show that risk management generally reduces the impacts of floods and droughts but faces difficulties in reducing the impacts of unprecedented events of a magnitude not previously experienced. If the second event was much more hazardous than the first, its impact was almost always higher. This is because management was not designed to deal with such extreme events: for example, they exceeded the design levels of levees and reservoirs. In two success stories, the impact of the second, more hazardous, event was lower, as a result of improved risk management governance and high investment in integrated management. The observed difficulty of managing unprecedented events is alarming, given that more extreme hydrological events are projected owing to climate change.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Kreibich, H., Van Loon, A. F., Schröter, K., Ward, P. J., Mazzoleni, M., Sairam, N., Abeshu, G. W., Agafonova, S., AghaKouchak, A., Aksoy, H., Alvarez-Garreton, C., Aznar, B., Balkhi, L., Barendrecht, M. H., Biancamaria, S., Bos-Burgering, L., Bradley, C., Budiyono, Y., Buytaert, W., Capewell, L., Carlson, H., Cavus, Y., Couasnon, A., Coxon, G., Daliakopoulos, I., de Ruiter, M. C., Delus, C., Erfurt, M., Esposito, G., François, D., Frappart, F., Freer, J., Frolova, N., Gain, A. K., Grillakis, M., Grima, J. O., Guzmán, D. A., Huning, L. S., Ionita, M., Kharlamov, M., Khoi, D. N., Kieboom, N., Kireeva, M., Koutroulis, A., Lavado-Casimiro, W., Li, H., LLasat, M. C., Macdonald, D., Mård, J., Mathew-Richards, H., McKenzie, A., Mejia, A., Mendiondo, E. M., Mens, M., Mobini, S., Mohor, G. S., Nagavciuc, V., Ngo-Duc, T., Nguyen Huynh, T. T., Nhi, P. T. T., Petrucci, O., Quan Nguyen, H., Quintana-Seguí, P., Razavi, S., Ridolfi, E., Riegel, J., Sadik, M. S., Savelli, E., Sazonov, A., Sharma, S., Sörensen, J., Souza, F. A. A., Stahl, K., Steinhausen, M., Stoelzle, M., Szalińska, W., Tang, Q., Tian, F., Tokarczyk, T., Tovar, C., Tran, T. V. T., Van Huijgevoort, M. H. J., van Vliet, M. T. H., Vorogushyn, S., Wagener, T., Wang, Y., Wendt, D. E., Wickham, E., Yang, L., Zambrano-Bigiarini, M., Blöschl, G., &amp; Di Baldassarre, G. (2022). The challenge of unprecedented floods and droughts in risk management. &lt;i&gt;Nature&lt;/i&gt;, &lt;i&gt;608&lt;/i&gt;(7921), 80--86. &lt;a href=&#39;https://doi.org/10.1038/s41586-022-04917-5&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1038/s41586-022-04917-5&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Cambio climático alimenta &#39;mancha&#39; caliente oceánica que causa megasequía en Chile según un estudio (La Tercera)</title>
      <link>https://hzambran.github.io/blog/2021-08-26-la_tercera_manchacalienteoceanica_y_megasequia/</link>
      <pubDate>Thu, 26 Aug 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2021-08-26-la_tercera_manchacalienteoceanica_y_megasequia/</guid>
      <description>&lt;p&gt;According to a recent study, a gigantic slick of more than 8 million kilometers located east of New Zealand is largely responsible for the dramatic lack of water that is affecting the central area of Chile.&lt;/p&gt;
&lt;p&gt;The full note can be read on the 
 or in the 
.&lt;/p&gt;
&lt;p&gt;The scientific article published in the &lt;em&gt;Journal of Climate&lt;/em&gt; is available 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2021-08-26-la_tercera_manchacalienteoceanica_y_megasequia/featured.jpg&#34;
    alt=&#34;https://www.latercera.com/que-pasa/noticia/cambio-climatico-alimenta-mancha-caliente-oceanica-que-causa-megasequia-en-chile-segun-un-estudio/&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Fuente: La Tercera&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Article on Water Balancece in the Nile Basin using gridded P and ETa accepted for publication in JoH-RS</title>
      <link>https://hzambran.github.io/blog/2021-08-13-johrs_article_on_rs4nile_published/</link>
      <pubDate>Fri, 13 Aug 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2021-08-13-johrs_article_on_rs4nile_published/</guid>
      <description>&lt;p&gt;The article  
 has been published on the 
 journal.&lt;/p&gt;
&lt;p&gt;This article evaluates the performance of eleven state-of-the-art precipitation (&lt;em&gt;P&lt;/em&gt;) products and seven actual evapotranspiration (&lt;em&gt;ETa&lt;/em&gt;) products over the Nile Basin using a four-step procedure: (&lt;strong&gt;i&lt;/strong&gt;)  products were evaluated at the monthly scale through a point-to-pixel approach; (&lt;strong&gt;ii&lt;/strong&gt;) streamflow was modelled using the Random Forest machine learning technique, and simulated for well-performing catchments for 2009–2018 (to correspond with ETa product availability); (&lt;strong&gt;iii&lt;/strong&gt;) ETa products were evaluated at the multiannual scale using the water balance method; and (&lt;strong&gt;iv&lt;/strong&gt;) the ability of the best-performing  and ETa products to represent monthly variations in terrestrial water storage (&lt;em&gt;TWS&lt;/em&gt;) was assessed through a comparison with GRACE Level-3 data.&lt;/p&gt;
&lt;p&gt;The application of the water balance using the best-performing products captures the seasonality of TWS well over the White Nile Basin, but overestimates seasonality over the Blue Nile Basin. Our study &lt;strong&gt;demonstrates how gridded  and ETa products can be evaluated over extremely data-scarce conditions using an easily transferable methodology&lt;/strong&gt;.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/blog/2021-08-13-johrs_article_on_rs4nile_published/featured.jpg&#34;
    alt=&#34;https://doi.org/10.1016/j.ejrh.2021.100884&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Seminario Cambio global y recursos hídricos: experiencias y desafíos</title>
      <link>https://hzambran.github.io/dissemination/2021-07-29-seminario_rrhh_en_ufro/</link>
      <pubDate>Thu, 29 Jul 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2021-07-29-seminario_rrhh_en_ufro/</guid>
      <description>&lt;p&gt;Researchers from the Universidad de La Frontera, U. de Chile, U. de los Lagos and the Center for Climate and Resilience Research (CR)2, will meet this Friday, July 30th, to address some relevant issues from their professional and academic experience for the country and La Araucanía in terms of water resources.&lt;/p&gt;
&lt;p&gt;Organized by the 
, the Seminar &amp;ldquo;Global change and water resources: experiences and challenges&amp;rdquo;, aims to disseminate the advances and experiences related to national water resources and generate a space for discussion with public services , the university community and local actors related to water resources, addressing topics such as: climate change, drought, water security, new data sources, water allocation permits, land use management and its impact on water availability, and erosion in forested catchments.&lt;/p&gt;
&lt;p&gt;The full note inviting to this Seminar can be read 
&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/2021-07-30-Seminario_RRHH-AficheDeDifusion.png&#34; alt=&#34;Afiche de disfusión&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Esta es la última víctima del cambio climático en Chile (La Tercera)</title>
      <link>https://hzambran.github.io/blog/2021-03-17-la_tercera_cauquenes_joh2021/</link>
      <pubDate>Wed, 17 Mar 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2021-03-17-la_tercera_cauquenes_joh2021/</guid>
      <description>&lt;p&gt;A recent study by the Center for Climate Science and Resilience 
, led by Dr. Mauricio Galleguillos, analyzed in detail the impact of climate change and land use change on water availability from the Cauquenes River Basin, which dried up during the summer of 2020.&lt;/p&gt;
&lt;p&gt;The full note can be read on the [(CR)2 website](
 /) or directly in [La Tercera newspaper](
 ? fbclid = IwAR3HEdPXPbTyu31vOPOoQCdKHdpX0hABAN0cabWORe_5HnExwsMN4ZH62DM).&lt;/p&gt;
&lt;p&gt;The scientific article published in the &lt;em&gt;Journal of Hydrology&lt;/em&gt; is available 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>The catchment’s memory: understanding how hydrological extremes are modulated by antecedent soil moisture conditions in a warmer climate</title>
      <link>https://hzambran.github.io/projects/2021-2025-fondecyt1212071/</link>
      <pubDate>Tue, 02 Mar 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/projects/2021-2025-fondecyt1212071/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h3 id=&#34;context-and-motivation&#34;&gt;Context and motivation&lt;/h3&gt;
&lt;p&gt;Global warming is reshaping the hydrological cycle, not only through gradual shifts in mean precipitation but also by intensifying precipitation extremes. These extremes cascade through river basins, potentially triggering floods or prolonged hydrological droughts, with far-reaching impacts on communities, infrastructure, and ecosystems. A critical regulator of this cascade is &lt;strong&gt;antecedent soil moisture&lt;/strong&gt;, which governs runoff generation and reflects the &amp;ldquo;memory&amp;rdquo; of the catchment and modulating how atmospheric anomalies translate into hydrological responses.&lt;/p&gt;
&lt;p&gt;Chile&amp;rsquo;s 2010&amp;ndash;2019 megadrought offers a unique large-scale natural experiment to examine how sustained warming and drying alter the transformation of meteorological extremes into hydrological extremes. Understanding this transformation is essential for anticipating future risks under a changing climate.&lt;/p&gt;
&lt;h3 id=&#34;project-description&#34;&gt;Project description&lt;/h3&gt;
&lt;p&gt;This four-year research project (April 2021–March 2025) is funded by the Chilean National Agency for Research and Development (
) under the &lt;em&gt;Concurso Fondecyt Regular 2021&lt;/em&gt; call. The project investigates four representative Chilean catchments (Petorca en Longotoma, Mapocho en Los Almendros, Cauquenes en Desembocadura y Trancura antes de Llafenco) over the 1980&amp;ndash;2019 period, integrating statistical extreme-event analysis with process-based hydrological modelling. Meteorological and hydrological extremes will be systematically characterized using standardised indices (e.g., SPI, SSI/SRI) and complementary metrics of duration, volume, and intensity to assess multi-decadal changes in frequency and severity.&lt;/p&gt;
&lt;p&gt;To explore the mechanisms underlying these changes, two hydrological models with contrasting structural representations of catchment processes will be implemented (TUWmodel, SWAT+). Model calibration will rely on a &lt;strong&gt;multi-variable, multi-objective framework&lt;/strong&gt;, jointly assimilating in-situ observations and advanced remote-sensing products, including soil moisture, total water storage, evapotranspiration, and snow cover.&lt;/p&gt;
&lt;p&gt;Sub-daily simulations (2001–2019) will further enable a detailed assessment of how antecedent soil moisture conditions influence peak discharge generation and storm-event dynamics, providing process-level insight into the amplification or attenuation of extremes.&lt;/p&gt;
&lt;p&gt;The project (&lt;em&gt;ANID-Fondecyt 1212071: The catchment&amp;rsquo;s memory: understanding how hydrological extremes are modulated by antecedent soil moisture conditions in a warmer climate&lt;/em&gt;) is led by me, and have Dr. Mauricio Galleguillos (U. de Chile and U. Adolfo Ibañez, Chile), Dra. Camila Alvarez-Garreton (CR2, Chile) and Dr. Oscar Baez-Villanueva (U. Ghent, Belgium) as co-investigators.&lt;/p&gt;
&lt;h3 id=&#34;expected-contribution-to-decision-making&#34;&gt;Expected contribution to decision-making&lt;/h3&gt;
&lt;p&gt;By elucidating the role of soil moisture as a mediator between atmospheric forcing and hydrological response, the project will advance understanding of how warming climates reshape flood and drought dynamics. The results will provide quantitative evidence on the potential amplification of flood peaks and the persistence of hydrological droughts under changing baseline conditions.&lt;/p&gt;
&lt;p&gt;These findings will directly inform water resources planning, risk assessment, and early-warning system design. Beyond Chile, the methodological framework and analytical tools developed in this project will offer transferable approaches for operational hydrological assessment and climate resilience planning in regions facing increasing hydroclimatic stress.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Ingreso al Grupo de Evaluación de Ciencias de la Tierra de ANID !</title>
      <link>https://hzambran.github.io/blog/2021-03-01-mzb_ingresa_a_grupoevaluacion_anid/</link>
      <pubDate>Mon, 01 Mar 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2021-03-01-mzb_ingresa_a_grupoevaluacion_anid/</guid>
      <description>&lt;p&gt;In March 2021, as a water resources specialist, I was invited to join the &lt;strong&gt;Assessment Group of Earth Sciences&lt;/strong&gt; (&lt;em&gt;Grupo de Evaluación de Ciencias de la Tierra&lt;/em&gt;) of the Chilean Science Foundation (
), which is a great honor and responsability.&lt;/p&gt;
&lt;p&gt;This group has to evaluate science and technologial proposals submitted by Chilean scientists to the following calls: 
, 
, 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Balance Hídrico Nacional revela dramática situación: proyecta escasez de agua de hasta 50% y alza de temperatura de hasta 2.5°C</title>
      <link>https://hzambran.github.io/blog/2021-01-04-balance_hidrico_nacional_proyecta_escasez/</link>
      <pubDate>Mon, 04 Jan 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2021-01-04-balance_hidrico_nacional_proyecta_escasez/</guid>
      <description>&lt;p&gt;An update of the Chilean Water Balance, led by academics from the University of Chile, reveals the complex local scenario, which apparently will not improve in the coming decades.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Disentangling the effect of future land use strategies and climate change on streamflow in a Mediterranean catchment dominated by tree plantations</title>
      <link>https://hzambran.github.io/publications/2021-galleguillos-disentangling-the/</link>
      <pubDate>Fri, 01 Jan 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2021-galleguillos-disentangling-the/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; The effect of different forest conservation policies on water provision has been poorly investigated due to a lack of an integrative methodological framework that enables its quantification. We developed a method for assessing the effects of forest conservation policies on water provision for rural inhabitants, based on a land-use model coupled with an eco-hydrological model. We used as a case study the Lumaco catchment, Chile, a territory dominated by native forests (NF) and non-native tree farms, with an extended dry period where nearly 12,600 people of rural communities get drinking water through water trucks. We analyzed three land-use policy scenarios: i) a baseline scenario based on historical land-cover maps; ii) a NF Recovery and Protection (NFRP) scenario, based on an earlier implementation of the first NF Recovery and Forestry Development bill; and iii) a Pristine (PR) scenario, based on potential vegetation belts; the latter two based on Dyna CLUE, and simulated between 1990 and 2015. Impacts on water provision from each scenario were computed with SWAT. The NFRP scenario resulted in an increase of 6974 ha of NF regarding the baseline situation, and the PR scenario showed an increase of 26,939 ha of NF. Despite large differences in NF areas, slight increases in inflows (Q) were found between the NFRP and the PR scenarios, with relative differences with respect to the baseline of 0.3% and 2.5% for NFRP and PR, respectively. Notwithstanding, these small differences in the NFRP scenario, they become larger if we analyze the cumulative values during the dry season only (December, January, and February), where they reach 1.1% in a normal year and 3.1% in a dry year. Flows increases were transformed into water truck costs resulting in up to 441,876 USD (monthly) of fiscal spending that could be avoided during a dry period.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; The effect of different forest conservation policies on water provision has been poorly investigated due to a lack of an integrative methodological framework that enables its quantification. We developed a method for assessing the effects of forest conservation policies on water provision for rural inhabitants, based on a land-use model coupled with an eco-hydrological model. We used as a case study the Lumaco catchment, Chile, a territory dominated by native forests (NF) and non-native tree farms, with an extended dry period where nearly 12,600 people of rural communities get drinking water through water trucks. We analyzed three land-use policy scenarios: i) a baseline scenario based on historical land-cover maps; ii) a NF Recovery and Protection (NFRP) scenario, based on an earlier implementation of the first NF Recovery and Forestry Development bill; and iii) a Pristine (PR) scenario, based on potential vegetation belts; the latter two based on Dyna CLUE, and simulated between 1990 and 2015. Impacts on water provision from each scenario were computed with SWAT. The NFRP scenario resulted in an increase of 6974 ha of NF regarding the baseline situation, and the PR scenario showed an increase of 26,939 ha of NF. Despite large differences in NF areas, slight increases in inflows (Q) were found between the NFRP and the PR scenarios, with relative differences with respect to the baseline of 0.3% and 2.5% for NFRP and PR, respectively. Notwithstanding, these small differences in the NFRP scenario, they become larger if we analyze the cumulative values during the dry season only (December, January, and February), where they reach 1.1% in a normal year and 3.1% in a dry year. Flows increases were transformed into water truck costs resulting in up to 441,876 USD (monthly) of fiscal spending that could be avoided during a dry period.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Galleguillos, M., Gimeno, F., Puelma, C., Zambrano-Bigiarini, M., Lara, A., &amp; Rojas, M. (2021). Disentangling the effect of future land use strategies and climate change on streamflow in a Mediterranean catchment dominated by tree plantations. &lt;i&gt;Journal of Hydrology&lt;/i&gt;, 126047. &lt;a href=&#39;https://doi.org/10.1016/j.jhydrol.2021.126047&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.jhydrol.2021.126047&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>How well do gridded precipitation and actual evapotranspiration products represent the key water balance components in the Nile Basin?</title>
      <link>https://hzambran.github.io/publications/2021-mcnamara-how-well/</link>
      <pubDate>Fri, 01 Jan 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2021-mcnamara-how-well/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; The accurate representation of precipitation () and actual evapotranspiration (ETa) patterns is crucial for water resources management, yet there remains a high spatial and temporal variability among gridded products, particularly over data-scarce regions. We evaluated the performance of eleven state-of-the-art products and seven ETa products over the Nile Basin using a four-step procedure: (i) products were evaluated at the monthly scale through a point-to-pixel approach; (ii) streamflow was modelled using the Random Forest machine learning technique, and simulated for well-performing catchments for 2009–2018 (to correspond with ETa product availability); (iii) ETa products were evaluated at the multiannual scale using the water balance method; and (iv) the ability of the best-performing and ETa products to represent monthly variations in terrestrial water storage (TWS) was assessed through a comparison with GRACE Level-3 data. CHIRPSv2 was the best-performing product (median monthly KGE’ of 0.80) and PMLv2 and WaPORv2.1 the best-performing ETa products over the majority of the evaluated catchments. The application of the water balance using these best-performing products captures the seasonality of TWS well over the White Nile Basin, but overestimates seasonality over the Blue Nile Basin. Our study demonstrates how gridded and ETa products can be evaluated over extremely data-scarce conditions using an easily transferable methodology.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; The accurate representation of precipitation () and actual evapotranspiration (ETa) patterns is crucial for water resources management, yet there remains a high spatial and temporal variability among gridded products, particularly over data-scarce regions. We evaluated the performance of eleven state-of-the-art products and seven ETa products over the Nile Basin using a four-step procedure: (i) products were evaluated at the monthly scale through a point-to-pixel approach; (ii) streamflow was modelled using the Random Forest machine learning technique, and simulated for well-performing catchments for 2009–2018 (to correspond with ETa product availability); (iii) ETa products were evaluated at the multiannual scale using the water balance method; and (iv) the ability of the best-performing and ETa products to represent monthly variations in terrestrial water storage (TWS) was assessed through a comparison with GRACE Level-3 data. CHIRPSv2 was the best-performing product (median monthly KGE’ of 0.80) and PMLv2 and WaPORv2.1 the best-performing ETa products over the majority of the evaluated catchments. The application of the water balance using these best-performing products captures the seasonality of TWS well over the White Nile Basin, but overestimates seasonality over the Blue Nile Basin. Our study demonstrates how gridded and ETa products can be evaluated over extremely data-scarce conditions using an easily transferable methodology.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;McNamara, I., Baez-Villanueva, O. M., Zomorodian, A., Ayyad, S., Zambrano-Bigiarini, M., Zaroug, M., Mersha, A., Nauditt, A., Mbuliro, M., Wamala, S., &amp; Ribbe, L. (2021). How well do gridded precipitation and actual evapotranspiration products represent the key water balance components in the Nile Basin?. &lt;i&gt;Journal of Hydrology: Regional Studies&lt;/i&gt;, &lt;i&gt;37&lt;/i&gt;, 100884. &lt;a href=&#39;https://doi.org/10.1016/j.ejrh.2021.100884&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.ejrh.2021.100884&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>On the selection of precipitation products for the regionalisation of hydrological model parameters</title>
      <link>https://hzambran.github.io/publications/2021-baezvillanueva-on-the/</link>
      <pubDate>Fri, 01 Jan 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2021-baezvillanueva-on-the/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Over the past decades, novel parameter regionalisation techniques have been developed to predict streamflow in data-scarce regions. In this paper, we examined how the choice of gridded daily precipitation (P) products affects the relative performance of three well-known parameter regionalisation techniques (spatial proximity, feature similarity, and parameter regression) over 100 near-natural catchments with diverse hydrological regimes across Chile. We set up and calibrated a conceptual semi-distributed HBV-like hydrological model (TUWmodel) for each catchment, using four P products (CR2MET, RF-MEP, ERA5, and MSWEPv2.8). We assessed the ability of these regionalisation techniques to transfer the parameters of a rainfall-runoff model, implementing a leave-one-out cross-validation procedure for each P product. Despite differences in the spatio-temporal distribution of P, all products provided good performance during calibration (median Kling–Gupta efficiencies (KGE′s) textgreater 0.77), two independent verification periods (median KGE′s textgreater0.70 and 0.61, for near-normal and dry conditions, respectively), and regionalisation (median KGE′s for the best method ranging from 0.56 to 0.63). We show how model calibration is able to compensate, to some extent, differences between P forcings by adjusting model parameters and thus the water balance components. Overall, feature similarity provided the best results, followed by spatial proximity, while parameter regression resulted in the worst performance, reinforcing the importance of transferring complete model parameter sets to ungauged catchments. Our results suggest that (i) merging P products and ground-based measurements does not necessarily translate into an improved hydrologic model performance; (ii) the spatial resolution of P products does not substantially affect the regionalisation performance; (iii) a P product that provides the best individual model performance during calibration and verification does not necessarily yield the best performance in terms of parameter regionalisation; and (iv) the model parameters and the performance of regionalisation methods are affected by the hydrological regime, with the best results for spatial proximity and feature similarity obtained for rain-dominated catchments with a minor snowmelt component.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Over the past decades, novel parameter regionalisation techniques have been developed to predict streamflow in data-scarce regions. In this paper, we examined how the choice of gridded daily precipitation (P) products affects the relative performance of three well-known parameter regionalisation techniques (spatial proximity, feature similarity, and parameter regression) over 100 near-natural catchments with diverse hydrological regimes across Chile. We set up and calibrated a conceptual semi-distributed HBV-like hydrological model (TUWmodel) for each catchment, using four P products (CR2MET, RF-MEP, ERA5, and MSWEPv2.8). We assessed the ability of these regionalisation techniques to transfer the parameters of a rainfall-runoff model, implementing a leave-one-out cross-validation procedure for each P product. Despite differences in the spatio-temporal distribution of P, all products provided good performance during calibration (median Kling–Gupta efficiencies (KGE′s) textgreater 0.77), two independent verification periods (median KGE′s textgreater0.70 and 0.61, for near-normal and dry conditions, respectively), and regionalisation (median KGE′s for the best method ranging from 0.56 to 0.63). We show how model calibration is able to compensate, to some extent, differences between P forcings by adjusting model parameters and thus the water balance components. Overall, feature similarity provided the best results, followed by spatial proximity, while parameter regression resulted in the worst performance, reinforcing the importance of transferring complete model parameter sets to ungauged catchments. Our results suggest that (i) merging P products and ground-based measurements does not necessarily translate into an improved hydrologic model performance; (ii) the spatial resolution of P products does not substantially affect the regionalisation performance; (iii) a P product that provides the best individual model performance during calibration and verification does not necessarily yield the best performance in terms of parameter regionalisation; and (iv) the model parameters and the performance of regionalisation methods are affected by the hydrological regime, with the best results for spatial proximity and feature similarity obtained for rain-dominated catchments with a minor snowmelt component.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Baez-Villanueva, O. M., Zambrano-Bigiarini, M., Mendoza, P. A., McNamara, I., Beck, H. E., Thurner, J., Nauditt, A., Ribbe, L., &amp; Thinh, N. X. (2021). On the selection of precipitation products for the regionalisation of hydrological model parameters. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;25&lt;/i&gt;(11), 5805--5837. &lt;a href=&#39;https://doi.org/10.5194/hess-25-5805-2021&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-25-5805-2021&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Towards best default configuration settings for NMPSO in multi-objective optimization</title>
      <link>https://hzambran.github.io/publications/2021-marinaorivas-towards-best/</link>
      <pubDate>Fri, 01 Jan 2021 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2021-marinaorivas-towards-best/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; In this work we tested different configuration settings for the NMPSO algorithm, aiming at solving multi-objective optimization problems with a small number of function evaluations, which is an important aspect that must be addressed in real-world optimization problems. Sixteen different configurations were tested for NMPSO, with different combinations of: i) the swarm size, ii) the maximum number of particles in the external archive, and iii) the maximum amount of genetic operations in the external archive. Three DTLZ problems were used to select the best configuration, which was then evaluated against other state-of-the-art multi-objective optimization algorithms (MMOPSO, NSGA-II, NSGA-III). Our results showed that the fastest convergence towards the true Pareto-optimal front is provided by the configuration with a swarm size of 10, a maximum number of particles allowed in the external archive of 100, and a limit of genetic operations per iteration given by 50% of the maximum number of particles allowed in the external archive. The selected configuration was also very competitive or even superior against NSGA-II and NSGA-III, in terms of the number of function evaluations required to start having an HV larger than zero, but also in the HV values achieved after stabilization of the Pareto-optimal front.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; In this work we tested different configuration settings for the NMPSO algorithm, aiming at solving multi-objective optimization problems with a small number of function evaluations, which is an important aspect that must be addressed in real-world optimization problems. Sixteen different configurations were tested for NMPSO, with different combinations of: i) the swarm size, ii) the maximum number of particles in the external archive, and iii) the maximum amount of genetic operations in the external archive. Three DTLZ problems were used to select the best configuration, which was then evaluated against other state-of-the-art multi-objective optimization algorithms (MMOPSO, NSGA-II, NSGA-III). Our results showed that the fastest convergence towards the true Pareto-optimal front is provided by the configuration with a swarm size of 10, a maximum number of particles allowed in the external archive of 100, and a limit of genetic operations per iteration given by 50% of the maximum number of particles allowed in the external archive. The selected configuration was also very competitive or even superior against NSGA-II and NSGA-III, in terms of the number of function evaluations required to start having an HV larger than zero, but also in the HV values achieved after stabilization of the Pareto-optimal front.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Marinao-Rivas, R. &amp; Zambrano-Bigiarini, M. (2021). Towards best default configuration settings for NMPSO in multi-objective optimization. &lt;i&gt;2021 IEEE Latin American Conference on Computational Intelligence (LA-CCI)&lt;/i&gt;, 1--6. &lt;a href=&#39;https://doi.org/10.1109/LA-CCI48322.2021.9769844&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1109/LA-CCI48322.2021.9769844&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Entra en vigencia la nueva Ley de Servicios Sanitarios Rurales</title>
      <link>https://hzambran.github.io/blog/2020-11-23-nueva_ley_de_ssr/</link>
      <pubDate>Mon, 23 Nov 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-11-23-nueva_ley_de_ssr/</guid>
      <description>&lt;p&gt;Noticia titulada 
, donde se describe la nueva Ley N°20.998, la cual permitirá avanzar en forma significativa para garantizar el abastecimiento de agua potable y saneamiento para los habitantes del sector rural.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Chi2 project on &#39;Exploradores 2020&#39; (24horas.cl)</title>
      <link>https://hzambran.github.io/blog/2020-09-11-chi2-reportaje_exploradores_24_horas/</link>
      <pubDate>Fri, 11 Sep 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-09-11-chi2-reportaje_exploradores_24_horas/</guid>
      <description>&lt;p&gt;On September 11th, 2020 the international cooperation project NSFC190018 
 appeared in the &lt;em&gt;Exploradores 2020&lt;/em&gt; program of the &lt;em&gt;24 horas&lt;/em&gt; Chilean TV channel (national coverage).&lt;/p&gt;
&lt;p&gt;This short reportage was invited by the 
 of the 
, to describe the main objectives and expected results of this Chile-China cooperation. This project is a collaborative effort between the 
, 
, and the 
.&lt;/p&gt;
&lt;p&gt;In this reportage, I described the 
, pilot study areas (Petorca en Longotoma, Mapocho en Los Almendros, Cauquenes en Desembocadura, Trancura antes de Llafenco), the methodology (
 of different complexity forced by historical and future global change scenarios), and the expected results (land management planning strategies to decrease the negative impacts of global change on hydrologicl extreme events). In addition, Dra. Daniela Manuschevich described her work in the development of participatory workshops with local stakeholders in each one of the study areas, and the importance of considering them since the very beggining of this project.&lt;/p&gt;
&lt;p&gt;This interview is available at 
 from minute 2:34 to 6:42.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Mawün: Historical gridded precipitation for Chile</title>
      <link>https://hzambran.github.io/web-platforms/mawun/</link>
      <pubDate>Wed, 02 Sep 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/web-platforms/mawun/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h3 id=&#34;context&#34;&gt;Context&lt;/h3&gt;
&lt;p&gt;Over recent decades, gridded precipitation products have become an essential data source for hydrological and climate studies, particularly in regions where conventional observations from rain gauges are sparse or unevenly distributed. This situation is especially relevant in Chile, where complex topography, such as the Andes mountain range, and large geographic contrasts create significant challenges for monitoring precipitation using traditional measurement networks alone.&lt;/p&gt;
&lt;h3 id=&#34;description&#34;&gt;Description&lt;/h3&gt;
&lt;p&gt;
, meaning &amp;ldquo;rain&amp;rdquo; in Mapuzungun, is a web platform designed to support the exploration, visualisation, and analysis of spatially distributed precipitation estimates (SDPEs), commonly referred to as gridded precipitation datasets, for continental Chile during the historical period 1981–2020. The platform was created by the former student &lt;strong&gt;Rodrigo Marinao&lt;/strong&gt; and I to simplify access to complex precipitation datasets and to enable users to quickly obtain actionable information without the need for specialised data processing workflows.&lt;/p&gt;
&lt;p&gt;Developed by the 
 with support from the 
, &lt;strong&gt;Mawün&lt;/strong&gt; provides a centralized environment where researchers, practitioners, and decision-makers can interactively examine precipitation patterns across Chile’s diverse climatic regions.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/web-platforms/mawun/mawun-main_screen.jpg&#34;
    alt=&#34;Mawün web platform&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;Main screen of 
 web platform&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;h3 id=&#34;mawün-functionality&#34;&gt;Mawün functionality&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Mawün v2.0&lt;/strong&gt; provides a suite of tools designed to support exploratory analysis, validation, and data extraction workflows commonly required in hydrology, climatology, and water resources management. Core capabilities include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Interactive visualization&lt;/strong&gt; of the spatial distribution of precipitation from multiple gridded products, enabling rapid assessment of regional patterns and variability.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Direct comparison&lt;/strong&gt; between precipitation time series from gridded datasets and in-situ observations recorded at rain gauge stations.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Point-based data extraction&lt;/strong&gt;, allowing users to obtain precipitation time series for any location in continental Chile.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Area-based data extraction&lt;/strong&gt;, enabling the download of precipitation time series aggregated over user-defined polygons, such as watersheds or administrative regions.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Event-focused analysis&lt;/strong&gt;, including the download of daily precipitation maps for specific precipitation events (up to 20 consecutive days), with optional spatial cropping.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Climatological visualization&lt;/strong&gt;, supporting the display of long-term average annual and monthly precipitation patterns.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Multi-dataset comparison&lt;/strong&gt;, facilitating the evaluation of consistency and differences among gridded precipitation products and observational records.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These tools are designed to reduce technical barriers to data access and to support reproducible analyses, rapid diagnostics, and evidence-based decision-making.&lt;/p&gt;
&lt;h3 id=&#34;data-sources&#34;&gt;Data Sources&lt;/h3&gt;
&lt;p&gt;The datasets available through Mawün originate from both national and international initiatives and combine information derived from satellite observations, atmospheric reanalysis systems, and, in many cases, statistical calibration with ground-based rain gauge measurements. By integrating these complementary sources, the platform offers a consistent and spatially comprehensive representation of precipitation variability across the country over the last four decades.&lt;/p&gt;
&lt;p&gt;Rain gauge observations integrated into Mawün were compiled by the 
 from the national hydrometeorological monitoring networks operated by the 
 and the 
. These observational records provide the reference measurements used for validation and calibration of gridded precipitation products.&lt;/p&gt;
&lt;p&gt;The platform currently provides access to the following gridded precipitation datasets covering (in most cases) the period 1981–2020:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;CR2MET v2&lt;/li&gt;
&lt;li&gt;CR2MET v2.5beta&lt;/li&gt;
&lt;li&gt;IMERG v06B&lt;/li&gt;
&lt;li&gt;ERA5&lt;/li&gt;
&lt;li&gt;ERA5-Land&lt;/li&gt;
&lt;li&gt;CHIRPS v2&lt;/li&gt;
&lt;li&gt;CMORPH v1&lt;/li&gt;
&lt;li&gt;MSWEP v2.8&lt;/li&gt;
&lt;li&gt;MSWX v1.0&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;tutorials&#34;&gt;Tutorials&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Geenreal description in Spanish&lt;/strong&gt;: 
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;User-manual in Spanish&lt;/strong&gt;: 
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Study cases&lt;/strong&gt;: 
.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
</description>
    </item>
    
    <item>
      <title>Mawün rainfall explorer launched !</title>
      <link>https://hzambran.github.io/blog/2020-09-01-lanzamiento_de_mawun/</link>
      <pubDate>Tue, 01 Sep 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-09-01-lanzamiento_de_mawun/</guid>
      <description>&lt;p&gt;&lt;strong&gt;Mawün rainfall explorer launched !&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;After more than one year of development, on September 1st 2020 an &lt;strong&gt;unprecedented web platform&lt;/strong&gt; for exploring gridded precipitation products was launced as a new weather service at the 
 website: 
:&lt;/p&gt;
&lt;p&gt;
 (&amp;quot;&lt;em&gt;rain&lt;/em&gt;&amp;quot; in 
) is an online platform dedicated to exploring different spatially distributed estimates of precipitation available for continental Chile until 2019, whose main objective is to facilitate the visualization and exploratory analysis of various available products.&lt;/p&gt;
&lt;p&gt;
 was developed by the &lt;strong&gt;Water Resources Observatory&lt;/strong&gt; of the 
 at the 
 with the support of the 
.&lt;/p&gt;
&lt;p&gt;A description of the web platform, examples, a complete tutorial and the platform itself can be found in the following links (only in Spanish):&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Description: 
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Examples: 
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Tutorial: 
&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Web platform: 
&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;All comments are highly welcome at the e-mail address indicated in the &amp;lsquo;&lt;em&gt;Acerca de&lt;/em&gt;&amp;rsquo; window of [Mawün].&lt;/p&gt;
&lt;p&gt;I hope that this new climate service will be useful for all those interested in precipitation.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Article on Water Resources Management in the Araucanía region (Chile) accepted for publication in IJWRD</title>
      <link>https://hzambran.github.io/blog/2020-07-17-ijwrd_article_on_weap4araucania_published/</link>
      <pubDate>Tue, 07 Jul 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-07-17-ijwrd_article_on_weap4araucania_published/</guid>
      <description>&lt;p&gt;The article 
 was finally published on the 
 journal.&lt;/p&gt;
&lt;p&gt;The Chilean Irrigation Commission (CNR) is evaluating an important expansion of irrigated areas in the Araucanía region in southern Chile. This work uses the WEAP water allocation model to investigate whether the construction of two reservoirs combined with higher irrigation efficiency could increase drought resilience in the drought-prone Araucanía region (Chile).&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>RFmerge</title>
      <link>https://hzambran.github.io/rpackages/rfmerge/</link>
      <pubDate>Fri, 22 May 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/rpackages/rfmerge/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/rpackages/rfmerge/RFmerge-logo.jpg&#34;
    alt=&#34;RFmerge R package.&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;R package.&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;h2 id=&#34;description&#34;&gt;Description&lt;/h2&gt;
&lt;p&gt;
 is an R package (currently not on CRAN, but working with the &lt;em&gt;terra&lt;/em&gt; package on Github) designed to generate more reliable environmental datasets by combining information from gridded datasets and ground-based observations. It implements the &lt;strong&gt;Random Forest Merging Procedure (RF-MEP)&lt;/strong&gt; (Baez-Villanueva et al., 2020), a machine-learning approach developed to improve the spatial and temporal representation of environmental variables—particularly precipitation—by leveraging the complementary strengths of different data sources.&lt;/p&gt;
&lt;p&gt;The package addresses a persistent challenge in hydrology and Earth system sciences: no single dataset provides a complete and unbiased representation of environmental conditions. Rain gauges offer accurate point measurements but limited spatial coverage, while satellite products provide broad spatial information that may contain systematic errors. By integrating these sources within a unified statistical framework, 
 produces merged datasets that better capture variability, reduce bias, and enhance the reliability of environmental analyses, especially in data-scarce regions.&lt;/p&gt;
&lt;p&gt;Built with operational applications in mind, 
 provides a transparent and reproducible workflow for dataset merging that can be adapted to a wide range of variables beyond precipitation, including temperature, soil moisture, or other gridded datasets. It is particularly well suited for researchers and practitioners who require spatially consistent datasets to support hydrological modelling, climate analysis, and water resources assessment.&lt;/p&gt;
&lt;p&gt;Grounded in peer-reviewed research and real-world applications, 
 offers a technically robust and methodologically sound foundation for transforming heterogeneous environmental observations into coherent, analysis-ready datasets.&lt;/p&gt;
&lt;h2 id=&#34;reference&#34;&gt;Reference&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Baez-Villanueva, O.M.; &lt;strong&gt;Zambrano-Bigiarini, M.&lt;/strong&gt;; Beck, H.; McNamara, I.; Ribbe, L.; Nauditt, A.; Birkel, C.; Verbist, K.; Giraldo-Osorio, J.D.; Thinh, N.X. (2020). 
, Remote Sensing of Environment, 239, 111610. doi:10.1016/j.rse.2019.111606.&lt;/li&gt;
&lt;/ul&gt;
</description>
    </item>
    
    <item>
      <title>hydroPSO v0.5-0 on CRAN</title>
      <link>https://hzambran.github.io/blog/2020-03-18-hydropso_v050_on_cran/</link>
      <pubDate>Wed, 18 Mar 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-03-18-hydropso_v050_on_cran/</guid>
      <description>&lt;p&gt;After a long amount of work, the new version of &lt;code&gt;hydroPSO&lt;/code&gt; (v0.5-0) was released today March 18th 2020, and it is available on CRAN now 
&lt;/p&gt;
&lt;p&gt;Among its &lt;strong&gt;new features&lt;/strong&gt; stand out:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Full compatibility with (hydrological/environmental) models implemented as R functions (e.g., &lt;code&gt;TUWmodel&lt;/code&gt;, &lt;code&gt;GR4J&lt;/code&gt;, etc)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;New 
 showing how to calibrate TUWmodel with hydroPSO.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;New 
 showing how to calibrate TUWmodel with GR4J (and other models of the &lt;code&gt;airGR&lt;/code&gt; family).&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;verification&lt;/code&gt;: now it is fully compatible with R-based models and allows parallelisation.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;read_results&lt;/code&gt;, &lt;code&gt;plot_results&lt;/code&gt;, &lt;code&gt;read_out&lt;/code&gt;  :much faster now due to the use of &lt;code&gt;data.table::fread&lt;/code&gt; instead of &lt;code&gt;read.table&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;New dataset &lt;code&gt;Trancura9414001&lt;/code&gt; with daily time series on P, Temp, PET, and Q from 1979 to 2016.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Package tested against R 4.0.0 (unstable) (2020-03-17 r77992) &amp;ndash;&amp;ldquo;Unsuffered Consequences&amp;rdquo;, following an imperative request made by CRAN.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;All the new features can be read at: 
&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;I hope you enjoy it !.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>hydroGOF v0.4-0 on CRAN</title>
      <link>https://hzambran.github.io/blog/2020-03-12-hydrogof_v040_on_cran/</link>
      <pubDate>Thu, 12 Mar 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-03-12-hydrogof_v040_on_cran/</guid>
      <description>&lt;p&gt;Following a request made by CRAN regarding compatibility issues with the upcoming version of R, the new version of &lt;code&gt;hydroGOF&lt;/code&gt; (v0.4-0) was released today March 12th 2020, and it is available on CRAN now 
&lt;/p&gt;
&lt;p&gt;Among its &lt;strong&gt;new features&lt;/strong&gt; stand out:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Package tested against R Under development (unstable) (2020-03-10 r77920) &amp;ndash; &amp;ldquo;Unsuffered Consequences&amp;rdquo;, following an imperative request made by CRAN.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Citation file changed, following CRAN comments.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Vignette on Goodness-of-fit Measures to Compare Obserligved and Simulated Values was moved from Sweave to Knitr.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;New references were added for &lt;code&gt;KGE&lt;/code&gt; (Santos et. al, 2018; Knoben et al., 2019; Mizukami et al., 2019)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;New reference was added for &lt;code&gt;me&lt;/code&gt; (Hill et al., 2006) Thanks to Erli Pinto dos Santos !.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;br2&lt;/code&gt;: new argument &amp;lsquo;use.abs=FALSE&amp;rsquo;, to allow the user to use &amp;lsquo;abs(b)&amp;rsquo; as condition to decide whether using abs(b)*r2 or [1/abs(b)]*r2 in equation (5) in Krausse et al. (2005). Thanks to Ellie White !&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;I hope you enjoy it !.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>hydroTSM v0.6-0 on CRAN</title>
      <link>https://hzambran.github.io/blog/2020-03-11-hydrotsm_v060_on_cran/</link>
      <pubDate>Wed, 11 Mar 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-03-11-hydrotsm_v060_on_cran/</guid>
      <description>&lt;p&gt;Following a request made by CRAN regarding compatibility issues with the upcoming version of R, the new version of &lt;code&gt;hydroTSM&lt;/code&gt; (v0.6-0) was released today March 11th 2020, and it is available on CRAN now 
&lt;/p&gt;
&lt;p&gt;Among its &lt;strong&gt;new features&lt;/strong&gt; stand out:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Package tested against R Under development (unstable) (2020-03-10 r77920) &amp;ndash; &amp;ldquo;Unsuffered Consequences&amp;rdquo;, following an imperative request made by CRAN.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Vignette on 
 was moved from Sweave to Knitr and now includes a climograph example.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;subdaily2daily&lt;/code&gt;: new argument &lt;em&gt;start&lt;/em&gt; to allow daily observations start at any time different from 00:00:00 UTC.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;time2season&lt;/code&gt;   : class of objects is now tested in a way compatible with the upcoming R 4.0.0&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;dm2seasonal&lt;/code&gt;   : class of objects is now tested in a way compatible with the upcoming R 4.0.0&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;matrixplot&lt;/code&gt;    : class of objects is now tested in a way compatible with the upcoming R 4.0.0&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;I hope you enjoy it !.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Climate change: Last decade confirmed as warmest on record</title>
      <link>https://hzambran.github.io/blog/2020-01-15-last_decade_confirmed_as_warmest_on_record/</link>
      <pubDate>Wed, 15 Jan 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-01-15-last_decade_confirmed_as_warmest_on_record/</guid>
      <description>&lt;p&gt;The 10 years to the end of 2019 have been confirmed as &lt;strong&gt;the warmest decade on record&lt;/strong&gt; by three global agencies.&lt;/p&gt;
&lt;p&gt;According to Nasa, NOAA and the UK Met Office, last year was the second warmest in a record dating back to 1850.&lt;/p&gt;
&lt;p&gt;The &lt;strong&gt;past five years were the hottest&lt;/strong&gt; in the 170-year series, with the average of each one more than 1C warmer than pre-industrial.&lt;/p&gt;
&lt;p&gt;The Met Office says that 2020 is likely to continue this warming trend.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;2016 remains the warmest year on record&lt;/strong&gt;, when temperatures were boosted by the El Niño weather phenomenon.&lt;/p&gt;
&lt;p&gt;For more information please visit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
.&lt;/li&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Radio Concierto interview on water scarcity</title>
      <link>https://hzambran.github.io/blog/2020-01-08-entrevista_radio_concierto/</link>
      <pubDate>Wed, 08 Jan 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-01-08-entrevista_radio_concierto/</guid>
      <description>&lt;p&gt;In the early morning of today January 8th, 2020 Dr. Mauricio Zambrano Bigiarini was interviewed by Radio Concierto (national coverage), to talk about the drought and water scarcity situation that currently affects Chile.&lt;/p&gt;
&lt;p&gt;This interview was managed by the press unit of the Center for Climate and Resilience Research (CR2), and Dr. Zambrano-Bigiarini addresses issues such as &amp;ldquo;zero day&amp;rdquo; in some cities, the effectiveness of water saving campaigns promoted by the government, the response of the political world to the water problem, payment of patents for non-use of water, the importance of efficient water management, sustainability of use of water, and what can we do to combat water scarcity.&lt;/p&gt;
&lt;p&gt;This interview is available at 
, in the block between 07:00 and 08:00 from minute 41:40 onwards.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Article on Random Forest for merging satellite-based datasets with gorund observations published in RSE</title>
      <link>https://hzambran.github.io/blog/2020-01-02-rse_article_rfmerge_published/</link>
      <pubDate>Thu, 02 Jan 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2020-01-02-rse_article_rfmerge_published/</guid>
      <description>&lt;p&gt;The article 
 was accepted for publication in December 2019 and made available online on January 2nd 2020 in the 
 journal.&lt;/p&gt;
&lt;p&gt;This work presents the &lt;strong&gt;Random Forest based MErging Procedure&lt;/strong&gt; (&lt;strong&gt;RF-MEP&lt;/strong&gt;), which allows to combine information from ground-based measurements, satellite-based precipitation products, and topography-related features to improve the representation of the spatio-temporal distribution of precipitation, especially in data-scarce regions. RF-MEP is applied over Chile for 2000-2016, using daily measurements from 258 rain gauges for model training and 111 stations for validation. Two merged datasets were computed: RF-MEP3P (based on PERSIANN-CDR, ERA-Interim, and CHIRPSv2) and RF-MEP5P (which additionally includes CMORPHv1 and TRMM 3B42v7). Our results suggest that RF-MEP could successfully be applied to other regions and to correct other climatological variables. The &lt;strong&gt;RFmerge&lt;/strong&gt; R package, which implements RF-MEP, is freely available online at 
.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Bias Correction of Global High-Resolution Precipitation Climatologies Using Streamflow Observations from 9372 Catchments</title>
      <link>https://hzambran.github.io/publications/2020-beck-bias-correction/</link>
      <pubDate>Wed, 01 Jan 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2020-beck-bias-correction/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; We introduce a set of global high-resolution (0.05◦) precipitation (P) climatologies corrected for bias using streamflow (Q) observations from 9372 stations worldwide. For each station, we inferred the &#34;true&#34; long-term P using a Budyko curve, an empirical equation relating long-term P, Q, and potential evaporation. We subsequently calculated long-term bias correction factors for three state-of-the-art P climatologies (WorldClim V2, CHELSA V1.2, and CHPclim V1), after which we used random forest regression to produce global gap-free bias correction maps for the climatologies. Monthly climatological bias correction factors were calculated by disaggregating the long-term bias correction factors based on gauge catch efficiencies. We found that all three climatologies systematically underestimate P over parts of all major mountain ranges globally, despite the explicit consideration of orography in the production of each climatology. Additionally, all climatologies underestimate P at latitudes textgreater 60◦N, likely due to gauge under-catch. Exceptionally high long-term correction factors (textgreater 1.5) were obtained for all three climatologies in Alaska, High Mountain Asia, and Chile — regions characterized by marked elevation gradients, sparse gauge networks, and significant snowfall. Using the bias-corrected WorldClim V2, we demonstrated that other widely used P datasets (GPCC V2015, GPCP V2.3, and MERRA-2) severely underestimate P over Chile, the Himalayas, and along the Pacific coast of North America. Mean P for the global land surface based on the bias-corrected WorldClim V2 is 862 mm yr−1 (a 9.4 % increase over the original WorldClim V2). The annual and monthly bias-corrected P climatologies have been released as the Precipitation Bias CORrection (PBCOR) dataset — downloadable via www.gloh2o.org/pbcor.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; We introduce a set of global high-resolution (0.05◦) precipitation (P) climatologies corrected for bias using streamflow (Q) observations from 9372 stations worldwide. For each station, we inferred the &#34;true&#34; long-term P using a Budyko curve, an empirical equation relating long-term P, Q, and potential evaporation. We subsequently calculated long-term bias correction factors for three state-of-the-art P climatologies (WorldClim V2, CHELSA V1.2, and CHPclim V1), after which we used random forest regression to produce global gap-free bias correction maps for the climatologies. Monthly climatological bias correction factors were calculated by disaggregating the long-term bias correction factors based on gauge catch efficiencies. We found that all three climatologies systematically underestimate P over parts of all major mountain ranges globally, despite the explicit consideration of orography in the production of each climatology. Additionally, all climatologies underestimate P at latitudes textgreater 60◦N, likely due to gauge under-catch. Exceptionally high long-term correction factors (textgreater 1.5) were obtained for all three climatologies in Alaska, High Mountain Asia, and Chile — regions characterized by marked elevation gradients, sparse gauge networks, and significant snowfall. Using the bias-corrected WorldClim V2, we demonstrated that other widely used P datasets (GPCC V2015, GPCP V2.3, and MERRA-2) severely underestimate P over Chile, the Himalayas, and along the Pacific coast of North America. Mean P for the global land surface based on the bias-corrected WorldClim V2 is 862 mm yr−1 (a 9.4 % increase over the original WorldClim V2). The annual and monthly bias-corrected P climatologies have been released as the Precipitation Bias CORrection (PBCOR) dataset — downloadable via www.gloh2o.org/pbcor.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Beck, H. E., Wood, E. F., McVicar, T. R., Zambrano-Bigiarini, M., Alvarez-Garreton, C., Baez-Villanueva, O. M., Sheffield, J., &amp; Karger, D. N. (2020). Bias Correction of Global High-Resolution Precipitation Climatologies Using Streamflow Observations from 9372 Catchments. &lt;i&gt;Journal of Climate&lt;/i&gt;, &lt;i&gt;33&lt;/i&gt;(4), 1299--1315. &lt;a href=&#39;https://doi.org/10.1175/JCLI-D-19-0332.1&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1175/JCLI-D-19-0332.1&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Hydrological Processes Special Issue \&#34;Hydrological processes across climatic and geomorphological gradients of Latin America</title>
      <link>https://hzambran.github.io/publications/2020-birkel-hydrological-processes/</link>
      <pubDate>Wed, 01 Jan 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2020-birkel-hydrological-processes/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; From the Atacama Desert to the Amazon rainforest, Latin America and the Caribbean host some of the planet’s most diverse and understudied hydrological systems. This special issue highlights research across extreme climate gradients, unique ecosystems, and rapidly changing landscapes. The contributions explore how water is stored, mixed, and transported, and how vegetation, landforms, and land-use change shape the hydrological cycle. Together, these studies advance understanding of water processes in one of the world’s most environmentally diverse regions.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; From the Atacama Desert to the Amazon rainforest, Latin America and the Caribbean host some of the planet’s most diverse and understudied hydrological systems. This special issue highlights research across extreme climate gradients, unique ecosystems, and rapidly changing landscapes. The contributions explore how water is stored, mixed, and transported, and how vegetation, landforms, and land-use change shape the hydrological cycle. Together, these studies advance understanding of water processes in one of the world’s most environmentally diverse regions.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Birkel, C., Moore, G. W., &amp; Zambrano-Bigiarini, M. (2020). Hydrological Processes Special Issue &#34;Hydrological processes across climatic and geomorphological gradients of Latin America. &lt;i&gt;Hydrological Processes&lt;/i&gt;, &lt;i&gt;34&lt;/i&gt;(2), 156--158. &lt;a href=&#39;https://doi.org/10.1002/hyp.13648&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1002/hyp.13648&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Modelling water resources for planning irrigation development in drought-prone southern Chile</title>
      <link>https://hzambran.github.io/publications/2020-mcnamara-modelling-water/</link>
      <pubDate>Wed, 01 Jan 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2020-mcnamara-modelling-water/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; To foster poverty reduction in drought-prone Araucanía, the Chilean Irrigation Commission is planning an important expansion of irrigated areas. Scenarios incorporating climate change (2030–2059) were simulated for a pilot basin using the WEAP water allocation model, showing that larger irrigated areas, coupled with higher temperatures and less precipitation, are likely to cause severe seasonal water scarcity. As decision support for the planning of effective measures to increase drought resilience, we modelled the construction of two upstream reservoirs combined with higher irrigation efficiency. We find that unmet water demand can be reduced by up to 97.7% by these measures.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; To foster poverty reduction in drought-prone Araucanía, the Chilean Irrigation Commission is planning an important expansion of irrigated areas. Scenarios incorporating climate change (2030–2059) were simulated for a pilot basin using the WEAP water allocation model, showing that larger irrigated areas, coupled with higher temperatures and less precipitation, are likely to cause severe seasonal water scarcity. As decision support for the planning of effective measures to increase drought resilience, we modelled the construction of two upstream reservoirs combined with higher irrigation efficiency. We find that unmet water demand can be reduced by up to 97.7% by these measures.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;McNamara, I., Nauditt, A., Zambrano-Bigiarini, M., Ribbe, L., &amp; Hann, H. (2020). Modelling water resources for planning irrigation development in drought-prone southern Chile. &lt;i&gt;International Journal of Water Resources Development&lt;/i&gt;, 1. &lt;a href=&#39;https://doi.org/10.1080/07900627.2020.1768828&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1080/07900627.2020.1768828&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>RF-MEP: A novel Random Forest method for merging gridded precipitation products and ground-based measurements</title>
      <link>https://hzambran.github.io/publications/2020-baezvillanueva-rfmep-a/</link>
      <pubDate>Wed, 01 Jan 2020 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2020-baezvillanueva-rfmep-a/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; The accurate representation of spatio-temporal patterns of precipitation is an essential input for numerous environmental applications. However, the estimation of precipitation patterns derived solely from rain gauges is subject to large uncertainties. We present the Random Forest based MErging Procedure (RF-MEP), which combines information from ground-based measurements, state-of-the-art precipitation products, and topography-related features to improve the representation of the spatio-temporal distribution of precipitation, especially in data-scarce regions. RF-MEP is applied over Chile for 2000—2016, using daily measurements from 258 rain gauges for model training and 111 stations for validation. Two merged datasets were computed: RF-MEP3P (based on PERSIANN-CDR, ERA-Interim, and CHIRPSv2) and RF-MEP5P (which additionally includes CMORPHv1 and TRMM 3B42v7). The performances of the two merged products and those used in their computation were compared against MSWEPv2.2, which is a state-of-the-art global merged product. A validation using ground-based measurements was applied at different temporal scales using both continuous and categorical indices of performance. RF-MEP3P and RF-MEP5P outperformed all the precipitation datasets used in their computation, the products derived using other merging techniques, and generally outperformed MSWEPv2.2. The merged P products showed improvements in the linear correlation, bias, and variability of precipitation at different temporal scales, as well as in the probability of detection, the false alarm ratio, the frequency bias, and the critical success index for different precipitation intensities. RF-MEP performed well even when the training dataset was reduced to 10% of the available rain gauges. Our results suggest that RF-MEP could be successfully applied to any other region and to correct other climatological variables, assuming that ground-based data are available. An R package to implement RF-MEP is freely available online at https://github.com/hzambran/RFmerge.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; The accurate representation of spatio-temporal patterns of precipitation is an essential input for numerous environmental applications. However, the estimation of precipitation patterns derived solely from rain gauges is subject to large uncertainties. We present the Random Forest based MErging Procedure (RF-MEP), which combines information from ground-based measurements, state-of-the-art precipitation products, and topography-related features to improve the representation of the spatio-temporal distribution of precipitation, especially in data-scarce regions. RF-MEP is applied over Chile for 2000—2016, using daily measurements from 258 rain gauges for model training and 111 stations for validation. Two merged datasets were computed: RF-MEP3P (based on PERSIANN-CDR, ERA-Interim, and CHIRPSv2) and RF-MEP5P (which additionally includes CMORPHv1 and TRMM 3B42v7). The performances of the two merged products and those used in their computation were compared against MSWEPv2.2, which is a state-of-the-art global merged product. A validation using ground-based measurements was applied at different temporal scales using both continuous and categorical indices of performance. RF-MEP3P and RF-MEP5P outperformed all the precipitation datasets used in their computation, the products derived using other merging techniques, and generally outperformed MSWEPv2.2. The merged P products showed improvements in the linear correlation, bias, and variability of precipitation at different temporal scales, as well as in the probability of detection, the false alarm ratio, the frequency bias, and the critical success index for different precipitation intensities. RF-MEP performed well even when the training dataset was reduced to 10% of the available rain gauges. Our results suggest that RF-MEP could be successfully applied to any other region and to correct other climatological variables, assuming that ground-based data are available. An R package to implement RF-MEP is freely available online at https://github.com/hzambran/RFmerge.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Baez-Villanueva, O. M., Zambrano-Bigiarini, M., Beck, H. E., McNamara, I., Ribbe, L., Nauditt, A., Birkel, C., Verbist, K., Giraldo-Osorio, J. D., &amp; Xuan Thinh, N. (2020). RF-MEP: A novel Random Forest method for merging gridded precipitation products and ground-based measurements. &lt;i&gt;Remote Sensing of Environment&lt;/i&gt;, &lt;i&gt;239&lt;/i&gt;, 111606. &lt;a href=&#39;https://doi.org/10.1016/j.rse.2019.111606&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.rse.2019.111606&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Management of global change impacts on hydrological extremes by coupling remote sensing data and an interdisciplinary modelling approach (NSFC190018)</title>
      <link>https://hzambran.github.io/projects/2023-2024-nsfc190018/</link>
      <pubDate>Tue, 12 Nov 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/projects/2023-2024-nsfc190018/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h3 id=&#34;context-and-motivation&#34;&gt;Context and motivation&lt;/h3&gt;
&lt;p&gt;Climate change and rapid land-use transformation are reshaping hydrological regimes worldwide, intensifying droughts and floods while increasing pressure on already vulnerable watersheds. These challenges are particularly acute in regions where water resources sustain agriculture, forest production, hydropower, and rural livelihoods. At the same time, reservoir regulation and shifting land management practices further modify natural flow dynamics, often in ways that interact nonlinearly with climate variability. Understanding and quantifying these combined effects is therefore essential for advancing predictive hydrology and supporting adaptive water governance under global change. Within this context, this Chile–China collaborative project addresses the urgent need for integrated, process-based assessments of hydroclimatic and land-system interactions across contrasting socio-environmental settings.&lt;/p&gt;
&lt;h3 id=&#34;project-description&#34;&gt;Project description&lt;/h3&gt;
&lt;p&gt;This four-year research project (January December 2023) is funded by the Chilean National Agency for Research and Development (
) under the &lt;em&gt;
&lt;/em&gt; call. This project aims to develop and apply a comprehensive hydrological simulation framework to eight pilot basins (four in Chile and four in China) that represent diverse hydroclimatic conditions and water management challenges. Using two complementary models of different structural complexity (SWAT+ and Liuxihe) the research will simulate key hydrological processes and disentangle the relative contributions of climate change, land-use change, water use, and reservoir operations over the past three decades and throughout the 21st century. Historical reconstructions and future scenarios (including climate projections and land-use pathways aligned with policy instruments such as NDCs) will be combined to assess impacts on floods and droughts. A novel Synergistic Effect Function (SEF) will be proposed to quantify the compounded influence of multiple drivers. The project further integrates stakeholder engagement in the selected basins to co-develop science-based recommendations for land-use planning and water resources management, fostering bilateral knowledge exchange and producing transferable methodologies for hydroclimatic&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Special Issue on hydrological processes in LAC published in HP</title>
      <link>https://hzambran.github.io/blog/2019-11-12-hp_specialissue_for_lac_publihsed/</link>
      <pubDate>Tue, 12 Nov 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-11-12-hp_specialissue_for_lac_publihsed/</guid>
      <description>&lt;p&gt;Finally, the preface 
 was published on November 12th 2019 for the 
.&lt;/p&gt;
&lt;p&gt;In this special issue of Hydrological Processes, we showcase the variety of ongoing research in catchments of the hydrometeorological, geomorphological and biogeographical mega-diverse region of Latin America and the Caribbean (LAC). The papers of this special issue address hydrological processes that regulate storage, mixing, and fluxes of water and solutes from the driest Atacama Desert in Chile (annual precipitation lower than 10 mm in some places) to the wettest mountainous areas of Central America (annual rainfall up to 8000 mm), including the richest biodiversity on Earth present in the Amazon. Not only are tropical rainforest ecosystems poorly represented in hydrologic research, the LAC contains a myriad of unique lowland to montane ecosystems across the climate gradient that also includes snow and ice processes. Opportunities to advance understanding of how vegetation and landforms redistribute moisture abound in the remote reaches of Latin America.&lt;/p&gt;
&lt;p&gt;There are three major transcending themes covered in this SI: 1) Hydrological processes across climate gradients 2) Unique ecosystems with limited hydrological research 3) Effects of land use change on hydrology&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Article on bias correction of global high-resolution precipitation climatologies published in JoC</title>
      <link>https://hzambran.github.io/blog/2019-11-04-joc_bias_of_p_climatologies_publihsed/</link>
      <pubDate>Mon, 04 Nov 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-11-04-joc_bias_of_p_climatologies_publihsed/</guid>
      <description>&lt;p&gt;On November 4th, the article 
 was published in the 
. In this article, we introduce a set of global high-resolution (0.05º) precipitation (P) climatologies corrected for bias using streamflow (Q) observations from 9372 stations worldwide.&lt;/p&gt;
&lt;p&gt;For each station, we inferred the &amp;ldquo;true&amp;rdquo; long-term P using a Budyko curve, an empirical equation relating long-term P, Q, and potential evaporation. We subsequently calculated long-term bias correction factors for three state-of-the-art P climatologies (WorldClim V2, CHELSA V1.2, and CHPclim V1), after which we used random forest regression to produce global gap-free bias correction maps for the climatologies. Monthly climatological bias correction factors were calculated by disaggregating the long-term bias correction factors based on gauge catch efficiencies.&lt;/p&gt;
&lt;p&gt;We found that &lt;strong&gt;all three climatologies systematically underestimate P&lt;/strong&gt; over parts of all major mountain ranges globally, despite the explicit consideration of orography in the production of each climatology. Additionally, all climatologies underestimate P at latitudes &amp;gt; 60ºN, likely due to gauge under-catch. Exceptionally &lt;strong&gt;high long-term correction factors (&amp;gt; 1.5) were obtained for all three climatologies in Alaska, High Mountain Asia, and Chile&lt;/strong&gt; - regions characterized by marked elevation gradients, sparse gauge networks, and significant snowfall. Using the bias-corrected WorldClim V2, we demonstrated that other widely used P datasets (GPCC V2015, GPCP V2.3, and MERRA-2) severely underestimate P over Chile, the Himalayas, and along the Pacific coast of North America. Mean P for the global land surface based on the bias-corrected WorldClim V2 is 862 mm yr−1 (a 9.4% increase over the original WorldClim V2).&lt;/p&gt;
&lt;p&gt;The annual and monthly bias-corrected P climatologies have been released as the Precipitation Bias CORrection (PBCOR) dataset — downloadable via 
.&lt;/p&gt;
&lt;p&gt;This work started with the visit of Hylke Beck to the Universidad de La Frontera in January 2019, thanks to the funds provided by the Fondecyt project 11150861.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Sequia y escasez hídrica en Chile - parecidas pero no iguales (El Mostrador)</title>
      <link>https://hzambran.github.io/blog/2019-09-13-mzb-sequia_y_escasez_hidrica_en_chile_parecidas_pero_no_iguales-elmostrador/</link>
      <pubDate>Fri, 13 Sep 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-09-13-mzb-sequia_y_escasez_hidrica_en_chile_parecidas_pero_no_iguales-elmostrador/</guid>
      <description>&lt;p&gt;We cannot solve a problem that we do not fully understand. Water scarcity in a place is the result of a complex interaction between meteorological anomalies, hydrological processes and changes in the use that man makes of the resource. Our current inability to properly analyze and manage water scarcity points out a failure in our understanding of the problem as a whole, and to inadequate data and tools to monitor the evolution of water over time.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Crisis hídrica, sequía legal y carretera hídrica (El Mostrador)</title>
      <link>https://hzambran.github.io/blog/2019-09-11-crisis_hidrica_sequia_legal_y_carretera_hidrica-elmostrador/</link>
      <pubDate>Wed, 11 Sep 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-09-11-crisis_hidrica_sequia_legal_y_carretera_hidrica-elmostrador/</guid>
      <description>&lt;p&gt;The country cannot continue to be a victim of the lobby of those who promote initiatives for their benefit over the damage of Chileans and against the public interest. Chile needs a legal framework that prioritizes security and equity in access to the vital element for the stability of drinking water, sanitation, food security and local productive development that ensures the well-being of the population and local and regional economies. The lucrative agribusiness and mining business cannot continue to put the country in greater water vulnerability, but to adjust, adapting to climate change.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>¿Temuco sin agua en 2025? (El Austral)</title>
      <link>https://hzambran.github.io/blog/2019-09-05-mzb-temuco_sin_agua_en_2025-elaustral/</link>
      <pubDate>Thu, 05 Sep 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-09-05-mzb-temuco_sin_agua_en_2025-elaustral/</guid>
      <description>&lt;p&gt;Professors Mauricio Zambrano-Bigiarini and Ivo Fustos of the Department of Civil Engineering at the Universidad de La Frontera expressed their opinion on the news 
 published on September 1, 2019 in the newspaper 
 and then reproduced by the newspaper 
.&lt;/p&gt;
&lt;p&gt;The academics expressed that, given the amount of information currently available on the water situation in the region, it is impossible to predict with an adequate level of confidence the date on which Temuco will run out of water, if that happens at some point.&lt;/p&gt;
&lt;p&gt;You can read the complete answer in the 
 on September 5.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Carretera hídrica: una falsa panacea (El Mostrador)</title>
      <link>https://hzambran.github.io/blog/2019-09-03-carretera_hidrica_una_falsa_panacea-elmostrador/</link>
      <pubDate>Tue, 03 Sep 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-09-03-carretera_hidrica_una_falsa_panacea-elmostrador/</guid>
      <description>&lt;p&gt;These &amp;ldquo;solutions&amp;rdquo; to the problem of water supply, only serve to strengthen the close relationship between the State and companies that has existed in the field of water, ensuring private legal and functional ownership of an increasingly scarce resource . At the same time, this type of project shows that our country is increasingly moving away from integrated watershed management. The latter are the essential territorial references for the management of the water resource that should guide the preservation of life and society.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>10 mil animales han muerto en las regiones más golpeadas por la prolongada sequía (El Mercurio)</title>
      <link>https://hzambran.github.io/blog/2019-09-01-10mil_animales_muertos-elmercurio/</link>
      <pubDate>Sun, 01 Sep 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-09-01-10mil_animales_muertos-elmercurio/</guid>
      <description>&lt;p&gt;Due to the extended drought affecting central Chile, farmers in the area between the Coquimbo and Maule regions estimate that 10 000 animals have already died, including abortions that occur due to lack of food and water (5 000 in Valparaíso; 2 thousand in Coquimbo, and another 3 thousand in O&amp;rsquo;Higgins and el Maule).&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Maipo, Limarí y Maule, tres cuencas en que el cambio climático ya hizo estragos (La Tercera)</title>
      <link>https://hzambran.github.io/blog/2019-08-30-maipo_limari_maule_estragos_del_cc-latercera/</link>
      <pubDate>Fri, 30 Aug 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-08-30-maipo_limari_maule_estragos_del_cc-latercera/</guid>
      <description>&lt;p&gt;An investigation by the PUC Global Change Center, an institution with more than 10 years studying this climatic phenomenon, recorded how the temperature in these areas has already changed due to global warming.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>La guerra del agua: las graves secuelas de la crisis hídrica en Chile (El Mostrador)</title>
      <link>https://hzambran.github.io/blog/2019-08-26-la_guerra_del_agua-elmostrador/</link>
      <pubDate>Mon, 26 Aug 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-08-26-la_guerra_del_agua-elmostrador/</guid>
      <description>&lt;p&gt;Central and Southern Chile have already suffered, for decades, a tendency to lower rainfall amounts, up to 7% per decade at some points, which will probably remain. By 2050, water available in Chile will be reduced by one third in some regions, according to current models, which will extend the irrigation periods that are applied today and reduce more water-intensive crops, especially those without access to technological improvements.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Anomalies of monthly mean temperature compared to the 1961-1990 averages</title>
      <link>https://hzambran.github.io/blog/2019-07-30-monthly_mean-temperature_anomalies_1961_1990/</link>
      <pubDate>Tue, 30 Jul 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-07-30-monthly_mean-temperature_anomalies_1961_1990/</guid>
      <description>&lt;p&gt;A very impressive figure showing the 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Workshop on Climate Change Challenges for La Araucanía (Temuco)</title>
      <link>https://hzambran.github.io/dissemination/2019-07-25-seminario_cc-temuco/</link>
      <pubDate>Thu, 25 Jul 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2019-07-25-seminario_cc-temuco/</guid>
      <description>&lt;p&gt;&lt;strong&gt;Workshop on Climate Change Challenges for La Araucanía&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;On July 25, 2019,  I made an oral presentation at the workshop entitled &amp;ldquo;&lt;em&gt;Regional challenges of climate change for La Araucanía region&lt;/em&gt;&amp;rdquo;, organized by the Regional Ministry of Environment of the Araucanía region.&lt;/p&gt;
&lt;p&gt; This seminar was held in the Aula Magna of the Universidad Mayor in Temuco, and was attended by various municipalities, NGOs, civil organizations and members of the Regional Committee on Climate Change (CORECC).&lt;/p&gt;
&lt;p&gt;My presentation was entitled &amp;ldquo;&lt;strong&gt;Climate Change and Drought: Projections for Chile and Araucanía&lt;/strong&gt;&amp;rdquo;, where 7 climate scenarios (RCP 8.5) for the Araucanía region were analysed, along with the water-related challenges that the Araucanía region very likely will face during the rest of this century.&lt;/p&gt;
&lt;p&gt;More information 
.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>June 2019 was hottest on record for the globe</title>
      <link>https://hzambran.github.io/blog/2019-07-18-hottest_june_on_record/</link>
      <pubDate>Thu, 18 Jul 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-07-18-hottest_june_on_record/</guid>
      <description>&lt;p&gt;The average global temperature in June was 1.71ºF above the 20th-century average of 59.9ºF, making it the &lt;strong&gt;hottest June in the 140-year record&lt;/strong&gt;, according scientists to NOAA&amp;rsquo;s National Centers for Environmental Information.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Nine of the 10 hottest Junes have occurred since 2010&lt;/strong&gt;. Last month also was the 43rd consecutive June and 414th consecutive month with above-average global temperatures.&lt;/p&gt;
&lt;p&gt;For more information please visit the website: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Workshop on Efficient Management of Water Resources (Vallenar)</title>
      <link>https://hzambran.github.io/dissemination/2019-06-28-workshop_gestion_eficiente_del_recurso_hidrico-vallenar/</link>
      <pubDate>Fri, 28 Jun 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2019-06-28-workshop_gestion_eficiente_del_recurso_hidrico-vallenar/</guid>
      <description>&lt;p&gt;&lt;strong&gt;Workshop on Efficient Management of Water Resources&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;On June 28th 2019 I made an oral presentation at the workshop &amp;ldquo;&lt;em&gt;Efficient Management of Water Resources: a challenge against Climate Change&lt;/em&gt;&amp;rdquo;, organised by the University of Atacama and carried out at Vallenar in the Atacama region.&lt;/p&gt;
&lt;p&gt;This workshop was funded by the Regional Government of Atacama in the framework of the finalization activity of the FIC Project &amp;ldquo;&lt;em&gt;Laboratorio para el estudio hídrico de la Cuenca, uso eficiente, monitoreo y predicción de caudales aplicando Modelo de Redes Neuronales Artificiales y Snow Runoff Model Nasa para la cuenca del Río Huasco, Región de Atacama, Chile&lt;/em&gt;&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;My presentation was entitled &amp;ldquo;&lt;strong&gt;Space-time evaluation of IMERGv05-F satellite precipitation estimates over different climates and the complex topography of Chile&lt;/strong&gt;&amp;rdquo;, which discussed the improvement of the lastest satellite estimates derived from the Global Precipitation Measurement (GPM) mission. In the afternoon, a hands-on training was carried out aimed at local stakeholders.&lt;/p&gt;
&lt;p&gt;More information 
.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>44% of water scarcity in Chile is due to poor water management (La Tercera)</title>
      <link>https://hzambran.github.io/blog/2019-06-17-escasez_hidrica_en_chile_y_gestion_del_agua/</link>
      <pubDate>Mon, 17 Jun 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-06-17-escasez_hidrica_en_chile_y_gestion_del_agua/</guid>
      <description>&lt;p&gt;The National Water Balance, a document from the National Water Directorate (DGA) that this year will have its final version after 32 years, will establish how much water is available in the country. In an advance delivered at the beginning of the year, it has already established that the country has a water deficit that ranges between 10% and 37%.&lt;/p&gt;
&lt;p&gt;To alleviate this deficit, the document &amp;ldquo;Transición Hídrica: el futuro del agua en Chile&amp;rdquo; proposes to establish a strategy with emphasis on four axes: water management and institutionality; conservation and protection of water ecosystems; efficiency and strategic use of water resources; and migration and incorporation of new water sources.&lt;/p&gt;
&lt;p&gt;The implementation of these four measures would be key to achieving water security: &amp;ldquo;44% of the causes of water problems are related to poor management of the resource, 17% is due to the increase in demand for water, 14% to water pollution, 12% to the decrease in water supply , 6% to environmental damage of water ecosystems and 5% to the increase in the frequency of natural disasters&amp;rdquo; (Ulrike Broschek, leader of Escenarios Hídricos 2030 and Deputy Manager of Sustainability of Fundación Chile)&lt;/p&gt;
&lt;p&gt;For more information please visit: 
 y 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Agua: ¿ soluciones sostenibles? (Diario Austral)</title>
      <link>https://hzambran.github.io/blog/2019-03-29-agua-soluciones_sustentables/</link>
      <pubDate>Fri, 29 Mar 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-03-29-agua-soluciones_sustentables/</guid>
      <description>&lt;p&gt;Columna titulada 
, con ocasión del Día Mundial del Agua: 
.&lt;/p&gt;
&lt;p&gt;Además:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Agua y desarrollo sostenible (CodexVerde)</title>
      <link>https://hzambran.github.io/blog/2019-03-22-agua_y_desarrollo_sostenible/</link>
      <pubDate>Fri, 22 Mar 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-03-22-agua_y_desarrollo_sostenible/</guid>
      <description>&lt;p&gt;Columna titulada 
, con ocasión del Día Mundial del Agua: 
.&lt;/p&gt;
&lt;p&gt;Además:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>The dramatic disappearance of water in Chile (La Tercera)</title>
      <link>https://hzambran.github.io/blog/2019-02-21-la_dramatica_desaparicion_del_agua_en_chile/</link>
      <pubDate>Thu, 21 Feb 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-02-21-la_dramatica_desaparicion_del_agua_en_chile/</guid>
      <description>&lt;p&gt;A team of specialists from the Universidad de Chile and Universidad Católica is working on updating the National Water Balance, which dates back to 1987. During 2019, the final report will be issued.&lt;/p&gt;
&lt;p&gt;The project is led by Ximena Vargas, academic from the Faculty of Physical and Mathematical Sciences of the University of Chile. &amp;ldquo;&lt;em&gt;What has been found in stations measuring precipitation and temperature is that, in general, there are decreases in average annual precipitation and increases in average annual temperature&lt;/em&gt;&amp;rdquo; This, she explains, has generated a decrease in the water availability in some coastal sectors. &amp;ldquo;&lt;em&gt;Comparing the reported values for water availability (dating from 1987), changes in average annual runoff are around 10% and 37%&lt;/em&gt;&amp;rdquo; she points out.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>2018 was the fourth-hottest year on record</title>
      <link>https://hzambran.github.io/blog/2019-02-06-year_2018_fourth-hottest_year_on_record/</link>
      <pubDate>Wed, 06 Feb 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-02-06-year_2018_fourth-hottest_year_on_record/</guid>
      <description>&lt;p&gt;&lt;strong&gt;2018 was the fourth hottest year on record&lt;/strong&gt;, according to two independent reports released today (Feb. 6) by 
 and the 
.
Last year was so hot that global land- and ocean-surface temperatures were 1.42 degrees Fahrenheit (0.79 degrees Celsius) above the 20th-century average, NOAA reported. Since 1880, when record-keeping began, only three years - 2016 (the highest, in part because of El Niño), 2015 and 2017 — were hotter.&lt;/p&gt;
&lt;p&gt;&amp;ldquo;The key message is that 
,&amp;rdquo; Gavin Schmidt, the director of NASA&amp;rsquo;s Goddard Institute for Space Studies in New York City, told reporters at a news conference. &amp;ldquo;And our understanding of why those trends are occurring is also very robust. It&amp;rsquo;s because of the greenhouse gases that we[&amp;rsquo;ve] put into the atmosphere over the last 100 years.&amp;rdquo;&lt;/p&gt;
&lt;p&gt;The trend isn&amp;rsquo;t a new one. Nine of the 10 warmest winters have happened since 2005, and five of the warmest years on record happened within the last five years, or from 2014 to 2018.&lt;/p&gt;
&lt;p&gt;For more information please visit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Conference: When, where, and how much did it rain?</title>
      <link>https://hzambran.github.io/blog/2019-01-22-conference_when_where_and_how_much_did_it_rain/</link>
      <pubDate>Tue, 22 Jan 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2019-01-22-conference_when_where_and_how_much_did_it_rain/</guid>
      <description>&lt;p&gt;&lt;strong&gt;Conference: When, where, and how much did it rain?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;On January 22th 2019, Dr Hylke Beck gave an 
 entitled &lt;em&gt;&amp;ldquo;When, where, and how much did it rain?&amp;rdquo;&lt;/em&gt; at the Facultad de Ingeniería y Ciencias of the Universidad de La Frontera (UFRO) in Temuco. In this presentation Dr. Beck presented 
, the first fully global precipitation dataset with a 0.1º resolution derived by optimally merging a range of gauge, satellite, and reanalysis estimates.&lt;/p&gt;
&lt;p&gt;Dr Hylke Beck (BSc, MSc, PhD) is an experienced researcher specializing in earth observation, hydrological modeling, and flood and drought forecasting. He has published over 40 peer-reviewed papers in prestigious international journals, including Nature Climate Change and Bulletin of the American Meteorological Society, and collaborated with several world-renowned scientists in the fields of hydrology and meteorology. At Princeton University, where he is currently employed, he is developing a global flood and drought warning system with unprecedented accuracy and resolution. He has produced multiple innovative climate data products, including the groundbreaking Multi-Source Weighted-Ensemble Precipitation (MSWEP) product, which has already been used by 500+ institutions worldwide.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Particle swarm optimization for the estimation of surface complexation constants with the geochemical model PHREEQC-3.1.2</title>
      <link>https://hzambran.github.io/publications/2019-abdelaziz-particle-swarm/</link>
      <pubDate>Tue, 01 Jan 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2019-abdelaziz-particle-swarm/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Sorption of metals on minerals is a key process in treatment water, natural aquatic environments, and other water-related technologies. Sorption processes are usually simulated with surface complexation models; however, identifying numeric values for the thermodynamic constants from batch experiments requires a robust parameter estimation technique that does not get trapped in local minima. Recently, particle swarm optimization (PSO) techniques have attracted many researchers as an efficient and effective optimization technique to find (near-)optimum model parameters in several fields of research. In this work, uranium at low concentrations was sorbed on quartz at different pH, and the hydroPSO R optimization package was used – the first time – to calibrate the PHREEQC geochemical model, version 3.1.2. Results show that thermodynamic parameter values identified with hydroPSO are more reliable than those identified with the well-known parameter estimation (PEST) software, when both parameter estimation software are coupled to PHREEQC using the same thermodynamic input data. In addition, post-processing tools included in hydroPSO were helpful for the correct interpretation of uncertainty in the obtained model parameters and simulated values. Thus, hydroPSO proved to be an efficient and versatile optimization tool for identifying reliable thermodynamic parameter values of the PHREEQC geochemical model.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Sorption of metals on minerals is a key process in treatment water, natural aquatic environments, and other water-related technologies. Sorption processes are usually simulated with surface complexation models; however, identifying numeric values for the thermodynamic constants from batch experiments requires a robust parameter estimation technique that does not get trapped in local minima. Recently, particle swarm optimization (PSO) techniques have attracted many researchers as an efficient and effective optimization technique to find (near-)optimum model parameters in several fields of research. In this work, uranium at low concentrations was sorbed on quartz at different pH, and the hydroPSO R optimization package was used – the first time – to calibrate the PHREEQC geochemical model, version 3.1.2. Results show that thermodynamic parameter values identified with hydroPSO are more reliable than those identified with the well-known parameter estimation (PEST) software, when both parameter estimation software are coupled to PHREEQC using the same thermodynamic input data. In addition, post-processing tools included in hydroPSO were helpful for the correct interpretation of uncertainty in the obtained model parameters and simulated values. Thus, hydroPSO proved to be an efficient and versatile optimization tool for identifying reliable thermodynamic parameter values of the PHREEQC geochemical model.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Abdelaziz, R., Merkel, B. J., Zambrano-Bigiarini, M., &amp; Nair, S. (2019). Particle swarm optimization for the estimation of surface complexation constants with the geochemical model PHREEQC-3.1.2. &lt;i&gt;Geoscientific Model Development&lt;/i&gt;, &lt;i&gt;12&lt;/i&gt;(1), 167--177. &lt;a href=&#39;https://doi.org/10.5194/gmd-12-167-2019&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/gmd-12-167-2019&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Validation of Cryogenic Vacuum Extraction of Pore Water from Volcanic Soils for Isotopic Analysis</title>
      <link>https://hzambran.github.io/publications/2019-rivera-validation-of/</link>
      <pubDate>Tue, 01 Jan 2019 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2019-rivera-validation-of/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Andean headwater catchments are key components of the hydrological cycle, given that they capture moisture, store water and release it for Chilean cities, industry, agriculture, and cities in Chile. However, knowledge about within-Andean catchment processes is far from clear. Most soils in the Andes derive from volcanic ash Andosols and Arenosols presenting high organic matter, high-water retention capacity and fine pores; and are very dry during summer. Despite their importance, there is little research on the hillslope hydrology of Andosols. Environmental isotopes such as Deuterium and 18-O are direct tracers for water and useful on analyzing water-soil interactions. This work explores, for the first time, the efficiency of cryogenic vacuum extraction to remove water from two contrasting soil types (Arenosols, Andosols) at five soil water retention energies (from −1500 to −33 kPa). Two experiments were carried out to analyse the impact of extraction time, and initial water content on the amount of extracted water, while a third experiment tested whether the cryogenic vacuum extraction changed the isotopic ratios after extraction. Minimum extraction times to recover over 90% of water initially in the soil samples were 40–50 min and varied with soil texture. Minimum volume for very dry soils were 0.2 mL (loamy sand) and 1 mL (loam). After extraction, the difference between the isotope standard and the isotopic values after extraction was acceptable. Thus, we recommend this procedure for soils derived from volcanic ashes.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Andean headwater catchments are key components of the hydrological cycle, given that they capture moisture, store water and release it for Chilean cities, industry, agriculture, and cities in Chile. However, knowledge about within-Andean catchment processes is far from clear. Most soils in the Andes derive from volcanic ash Andosols and Arenosols presenting high organic matter, high-water retention capacity and fine pores; and are very dry during summer. Despite their importance, there is little research on the hillslope hydrology of Andosols. Environmental isotopes such as Deuterium and 18-O are direct tracers for water and useful on analyzing water-soil interactions. This work explores, for the first time, the efficiency of cryogenic vacuum extraction to remove water from two contrasting soil types (Arenosols, Andosols) at five soil water retention energies (from −1500 to −33 kPa). Two experiments were carried out to analyse the impact of extraction time, and initial water content on the amount of extracted water, while a third experiment tested whether the cryogenic vacuum extraction changed the isotopic ratios after extraction. Minimum extraction times to recover over 90% of water initially in the soil samples were 40–50 min and varied with soil texture. Minimum volume for very dry soils were 0.2 mL (loamy sand) and 1 mL (loam). After extraction, the difference between the isotope standard and the isotopic values after extraction was acceptable. Thus, we recommend this procedure for soils derived from volcanic ashes.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Rivera, D., Gutierrez, K., Valdivia-Cea, W., Zambrano-Bigiarini, M., Godoy-Faúndez, A., Álvez, A., &amp; Farías, L. (2019). Validation of Cryogenic Vacuum Extraction of Pore Water from Volcanic Soils for Isotopic Analysis. &lt;i&gt;Water&lt;/i&gt;, &lt;i&gt;11&lt;/i&gt;(11), 2214. &lt;a href=&#39;https://doi.org/10.3390/w11112214&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.3390/w11112214&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Oral presentation at AGU 2018</title>
      <link>https://hzambran.github.io/dissemination/2018-12-15-agu2018/</link>
      <pubDate>Fri, 14 Dec 2018 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2018-12-15-agu2018/</guid>
      <description>&lt;p&gt;During the second week of December 2018, I made an oral presentation at the 
 in Washington D.C. (USA), the most important scientific event of Earth Sciences worldwide.&lt;/p&gt;
&lt;p&gt;The work was entitled 
 (Final paper number 
). It evaluates the improvements of the latest IMERG version 05 Final Run (IMERGv05-F) over its predecessor TMPA 3B42v7, over the diverse climatic gradients and complex topography of Chile, from January 2015 to December 2016.&lt;/p&gt;
&lt;p&gt;In addition, I participated as co-author in the work 
 (Final paper number 
), which summarises the MSc thesis carried out by Hamish Hann (
) during his visiting period at the University of La Frontera (first semester 2017).&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Oral presentation at SPIE 2018</title>
      <link>https://hzambran.github.io/dissemination/2018-10-18-spie2018/</link>
      <pubDate>Tue, 23 Oct 2018 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2018-10-18-spie2018/</guid>
      <description>&lt;p&gt;From 24 to 27th of September 2018 I participated at the SPIE Asia-Pacific Remote Sensing symposium, which took place in Honolulu (Hawaii, USA). In that conference I made an oral presentation entitled 
, which was finally published in the proceedings of the international Society of Photo-Optical Instrumentation Engineers (
):&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Zambrano-Bigiarini, M.&lt;/strong&gt; (2018) &amp;ldquo;Temporal and spatial evaluation of long-term satellite-based precipitation products across the complex topographical and climatic gradients of Chile&amp;rdquo;, Proc. SPIE 10782, Remote Sensing and Modeling of the Atmosphere, Oceans, and Interactions VII, 1078202 (23 October 2018); doi: 10.1117/12.2513645; 
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Visiting period at NASA&#39;s Jet Propulsion Laboratory</title>
      <link>https://hzambran.github.io/blog/2018-09-18-jpl2018/</link>
      <pubDate>Sat, 22 Sep 2018 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2018-09-18-jpl2018/</guid>
      <description>&lt;p&gt;In August 2018 I got an invitation from the co-chair of the 
 to conduct a two-week (18-Sep to 01-Oct 2018) visiting period at the NASA&amp;rsquo;s Jet Propulsion Laboratory (
). This internship was carried out (and funded) by Ziad S. Haddad (Assistant Section Manager, Radar JPL Science and Engineering Section), to discuss a comprehensive evaluation of current rainfall products of global scale, to allow scientists and users of the international community to make objective evaluations and make informed decisions about the use of these products.&lt;/p&gt;
&lt;p&gt;During this period, ziad and I attended a meeting at the 
 at the 
, in order to discuss the methodology and time period to be used for the comprehensive evaluation of current rainfall products of global scale. In this opportunity I met Soroosh Sorooshian, Efi Foufoula-Georgiou and most of their team at UCL. This was an excellent opportunity to know all the people behind the excellent work producing the PERSIANN  family of satellite precipititation estimates.&lt;/p&gt;
&lt;p&gt;This internship ended with the publication of an Scopus 
 in the proceedings of the International Society of Photo-Optical Instrumentation Engineers (
).&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Article on satellite-based rainfall estimates over Latin America accepted for publication in Atmospheric Research</title>
      <link>https://hzambran.github.io/blog/2018-05-24-ar_article_on_sre_accepted/</link>
      <pubDate>Mon, 21 May 2018 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2018-05-24-ar_article_on_sre_accepted/</guid>
      <description>&lt;p&gt;The article 
 was accepted for publication in the 
 journal.&lt;/p&gt;
&lt;p&gt;This work exhaustively evaluate six satellite rainfall estimates (TRMM 3B42v7, TRMM 3B42RT, CHIRPSv2, CMORPHv1, PERSIANN-CDR, and MSWEPv2) over three basins in Latin-America (Imperial in Chile, Paraiba do Sul in Brazil, and Magdalena in Colombia). Several continuous and categorical indices of performance are used at daily, monthly and seasonal time scales. Our analysis revealed which products are in beter agreement with ground-based observations of precipitation and if the upscaling procedure, used in CHIRPSv2 and MSWEPv2, affects the evaluation of the SREs performance at different time scales.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Oral presentation at EGU 2018</title>
      <link>https://hzambran.github.io/dissemination/2018-04-10-egu2018/</link>
      <pubDate>Sat, 14 Apr 2018 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2018-04-10-egu2018/</guid>
      <description>&lt;p&gt;During the second week of April 2018, I made an oral presentation at the 
 in Vienna (Austria), the most important scientific event of Earth Sciences in Europe.&lt;/p&gt;
&lt;p&gt;The work was entitled 
 (
). It analises the suitability of the combined use of state-of-the-art satellite-based precipitation (CHIRPS) and potential evapotranspiration (MOD16A2) estimates to characterise the spatial distribution of the so called &amp;ldquo;Chilean megadrought&amp;rdquo;, which has affected the central-southern territory of Chile (29ºS-46ºS) during the last decade.&lt;/p&gt;
&lt;p&gt;In addition, I participated as co-author in the following three works presented at the same conference:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;
. [EGU2018-12036].&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. [EGU2018-2374].&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;
. [EGU2018-18702].&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The first two works are product of the interdisciplinary collaboration at the Center for Climate and Resilience Research (
), while the last work summarise the MSc thesis carried out by Hamish Hann (
) during his visiting period at Temuco (first semester 2017).&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Temporal and spatial evaluation of long-term satellite-based precipitation products across the complex topographical and climatic gradients of Chile</title>
      <link>https://hzambran.github.io/publications/2018-zambranobigiarini-temporal-and/</link>
      <pubDate>Mon, 01 Jan 2018 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2018-zambranobigiarini-temporal-and/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Satellite-based rainfall estimates (SRE) have become a promising data source to overcome some limitations of ground-based rainfall measurements, in particular for hydrological and other environmental applications. This study evaluates the spatial and temporal performance of four long-term SRE products (TMPA 3B42v7, CHIRPSv2, MSWEPv1.1 and MSWEPv2.2) over the complex topography and climatic gradients of Chile. Time series of precipitation measured at 371 stations are compared against the corresponding grid cell of each SRE (in their original spatial resolution) at different temporal scales (daily, monthly, seasonal, annual). The modified Kling-Gupta efficiency along with its three individual components were used to assess the performance of each SRE, while two categorical indices (POD, and fBIAS) were used to evaluate the skill of each SRE to correctly capture different precipitation intensities. Results revealed that all SREs performed best in Central-Southern Chile (32.18-36.4°S), in particular at lowand mid-elevation zones (0-1000 m a.s.l.). Seasonally, all products performed best in terms of KGE0 during the wet autumn and winter seasons (MAM-JJA) compared to summer (DJF). In addition, all SREs were able to correctly identify no rain events, but during rainy days all SREs that did not use a local dataset of precipitation to recalibrate their estimates presented a low skill in providing an accurate classification of different precipitation intensities. Overall, MSWPEPv22 showed the best performance at all time scales and country-wide, due to the use of a Chilean dataset of daily data for calibrating its precipitation estimates, making it a good candidate for hydrological applications in Chile. Finally, we conclude that when the in situ precipitation dataset used in the evaluation of different SREs does not cover the headwaters of the catchments, the obtained performances should only be considered as first guess about how well a given SRE represent the real amount of water in an area.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Satellite-based rainfall estimates (SRE) have become a promising data source to overcome some limitations of ground-based rainfall measurements, in particular for hydrological and other environmental applications. This study evaluates the spatial and temporal performance of four long-term SRE products (TMPA 3B42v7, CHIRPSv2, MSWEPv1.1 and MSWEPv2.2) over the complex topography and climatic gradients of Chile. Time series of precipitation measured at 371 stations are compared against the corresponding grid cell of each SRE (in their original spatial resolution) at different temporal scales (daily, monthly, seasonal, annual). The modified Kling-Gupta efficiency along with its three individual components were used to assess the performance of each SRE, while two categorical indices (POD, and fBIAS) were used to evaluate the skill of each SRE to correctly capture different precipitation intensities. Results revealed that all SREs performed best in Central-Southern Chile (32.18-36.4°S), in particular at lowand mid-elevation zones (0-1000 m a.s.l.). Seasonally, all products performed best in terms of KGE0 during the wet autumn and winter seasons (MAM-JJA) compared to summer (DJF). In addition, all SREs were able to correctly identify no rain events, but during rainy days all SREs that did not use a local dataset of precipitation to recalibrate their estimates presented a low skill in providing an accurate classification of different precipitation intensities. Overall, MSWPEPv22 showed the best performance at all time scales and country-wide, due to the use of a Chilean dataset of daily data for calibrating its precipitation estimates, making it a good candidate for hydrological applications in Chile. Finally, we conclude that when the in situ precipitation dataset used in the evaluation of different SREs does not cover the headwaters of the catchments, the obtained performances should only be considered as first guess about how well a given SRE represent the real amount of water in an area.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Zambrano-Bigiarini, M. (2018). Temporal and spatial evaluation of long-term satellite-based precipitation products across the complex topographical and climatic gradients of Chile. &lt;i&gt;Proceedings of the SPIE&lt;/i&gt;, &lt;i&gt;10782&lt;/i&gt;, 1078202. &lt;a href=&#39;https://doi.org/10.1117/12.2513645&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1117/12.2513645&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Temporal and spatial evaluation of satellite rainfall estimates over different regions in Latin-America</title>
      <link>https://hzambran.github.io/publications/2018-baezvillanueva-temporal-and/</link>
      <pubDate>Mon, 01 Jan 2018 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2018-baezvillanueva-temporal-and/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; In developing countries, an accurate representation of the spatio-temporal variability of rainfall is currently severely limited, therefore, satellite-based rainfall estimates (SREs) are promising alternatives. In this work, six state-of-the-art SREs (TRMM 3B42v7, TRMM 3B42RT, CHIRPSv2, CMORPHv1, PERSIANN-CDR, and MSWEPv2) are evaluated over three different basins in Latin-America, using a point-to-pixel comparison at daily, monthly, and seasonal timescales. Three continuous (root mean squared error, modified Kling-Gupta efficiency, and percent bias) and three categorical (probability of detection, false alarm ratio, and frequency bias) indices are used to evaluate the performance of the different SREs, and to assess if the upscaling procedure used, in CHIRPSv2 and MSWEPv2, to enable a consistent point-to-pixel comparison affects the evaluation of the SREs performance at different time scales. Our results show that for Paraiba do Sul in Brazil, MSWEPv2 presented the best performance at daily and monthly time scales, while CHIRPSv2 performed the best at these timescales over the Magdalena River Basin in Colombia. In the Imperial River Basin in Chile, MSWEPv2 and CHIRPSv2 performed the best at daily and monthly time scales, respectively. When the basins were evaluated at seasonal scale, CMORPHv1 performed the best for DJF and SON, TRMM 3B42v7 for MAM, and PERSIANN-CDR for JJA over Imperial Basin. MSWEPv2 performed the best over Paraiba do Sul Basin for all seasons and CHIRPSv2 showed the best performance over Magdalena Basin. The Modified Kling-Gupta efficiency (KGE′) proved to be a useful evaluation index because it decomposes the performance of the SREs into linear correlation, bias, and variability parameters, while the Root Mean Squared Error (RMSE) is not recommended for evaluating SREs performance because it gives more weight to high rainfall events and its results are not comparable between areas with different precipitation regimes. On the other hand, CHIRPSv2 and MSWEPv2 presented different performance, for some study areas and time scales, when evaluated with their original spatial resolution (0.05° and 0.1, respectively) with respect to the evaluation resulting after applying the spatial upscaling (to a unified 0.25), showing that the upscaling procedure might impact the SRE performance. We finally conclude that a site-specific validation is needed before using any SRE, and we recommend to evaluate the SRE performance before and after applying any upscaling procedure in order to select the SRE that best represents the spatio-temporal precipitation patterns of a site.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; In developing countries, an accurate representation of the spatio-temporal variability of rainfall is currently severely limited, therefore, satellite-based rainfall estimates (SREs) are promising alternatives. In this work, six state-of-the-art SREs (TRMM 3B42v7, TRMM 3B42RT, CHIRPSv2, CMORPHv1, PERSIANN-CDR, and MSWEPv2) are evaluated over three different basins in Latin-America, using a point-to-pixel comparison at daily, monthly, and seasonal timescales. Three continuous (root mean squared error, modified Kling-Gupta efficiency, and percent bias) and three categorical (probability of detection, false alarm ratio, and frequency bias) indices are used to evaluate the performance of the different SREs, and to assess if the upscaling procedure used, in CHIRPSv2 and MSWEPv2, to enable a consistent point-to-pixel comparison affects the evaluation of the SREs performance at different time scales. Our results show that for Paraiba do Sul in Brazil, MSWEPv2 presented the best performance at daily and monthly time scales, while CHIRPSv2 performed the best at these timescales over the Magdalena River Basin in Colombia. In the Imperial River Basin in Chile, MSWEPv2 and CHIRPSv2 performed the best at daily and monthly time scales, respectively. When the basins were evaluated at seasonal scale, CMORPHv1 performed the best for DJF and SON, TRMM 3B42v7 for MAM, and PERSIANN-CDR for JJA over Imperial Basin. MSWEPv2 performed the best over Paraiba do Sul Basin for all seasons and CHIRPSv2 showed the best performance over Magdalena Basin. The Modified Kling-Gupta efficiency (KGE′) proved to be a useful evaluation index because it decomposes the performance of the SREs into linear correlation, bias, and variability parameters, while the Root Mean Squared Error (RMSE) is not recommended for evaluating SREs performance because it gives more weight to high rainfall events and its results are not comparable between areas with different precipitation regimes. On the other hand, CHIRPSv2 and MSWEPv2 presented different performance, for some study areas and time scales, when evaluated with their original spatial resolution (0.05° and 0.1, respectively) with respect to the evaluation resulting after applying the spatial upscaling (to a unified 0.25), showing that the upscaling procedure might impact the SRE performance. We finally conclude that a site-specific validation is needed before using any SRE, and we recommend to evaluate the SRE performance before and after applying any upscaling procedure in order to select the SRE that best represents the spatio-temporal precipitation patterns of a site.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Baez-Villanueva, O. M., Zambrano-Bigiarini, M., Ribbe, L., Nauditt, A., Giraldo-Osorio, J. D., &amp; Thinh, N. X. (2018). Temporal and spatial evaluation of satellite rainfall estimates over different regions in Latin-America. &lt;i&gt;Atmospheric Research&lt;/i&gt;. &lt;a href=&#39;https://doi.org/10.1016/j.atmosres.2018.05.011&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.atmosres.2018.05.011&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Oral presentation at AGU 2017</title>
      <link>https://hzambran.github.io/dissemination/2017-12-12-agu2017/</link>
      <pubDate>Tue, 12 Dec 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2017-12-12-agu2017/</guid>
      <description>&lt;p&gt;During the second week of December 2017, I made an oral presentation at the 
 in New orleans (USA), the most important scientific event of Earth Sciences worldwide.&lt;/p&gt;
&lt;p&gt;The work was entitled 
 (Final paper number 
). It uses two drought indices to analyze the impacts of precipitation and temperature on the frequency, severity and duration of Chilean droughts (25°S-56°S) during the XXI century, using multi-model climate projections consistent with the high-end RCP 8.5 scenario.&lt;/p&gt;
&lt;p&gt;In addition, I participated as co-author in the work  
) (Final paper number 
), which evaluate several sate-of-the-art satellite-based rainfall estimates  (TMPA 3B42v7, TMPA 3B42RT, CHIRPSv2, CMORPH, PERSIANN-CDR and MSWEPv1.2)  over different basins in Latin-America (Imperial Basin in Chile, Paraiba do Sul in Brazil and Magdalena in Colombia) to determine the best performing satellite product.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Short course on use of R for analysing satelite-based rainfall estimates (SREs) in Germany</title>
      <link>https://hzambran.github.io/dissemination/2017-05-05-training_on_rs_at_itt/</link>
      <pubDate>Fri, 05 May 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2017-05-05-training_on_rs_at_itt/</guid>
      <description>&lt;p&gt;During the first week of May, I gave a short course to postgraduate students of the 
 of TH Köln (
).&lt;/p&gt;
&lt;p&gt;This course had two parts, the first one was given by the doctoral student Oscar Baez, who was at UFRO last April. The objective of this first part (April 23th to 27th) was to provide students with basic concepts about 
, free software environment for statistical computing and graphics, (installation, types of variables, exploratory data analysis, and spatial data management).
 
The second part (May 3rd and 4th) was to introduce participants to the management of time series in R, and the use of it for the analysis of spatio-temporal data, in particular for reading and analysing satelite-based rainfall estimates (SREs), expanding the work &amp;ldquo;
&amp;rdquo; presented at the EGUA 2017 during the last week of April (
), which was an oral 
.&lt;/p&gt;
&lt;p&gt;This short course is product of the international collaboration with Lars Ribbe and Alexandra Nauditt from the 
 of TH Köln (
).&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Participación en la Conferencia EGU 2017</title>
      <link>https://hzambran.github.io/dissemination/2017-04-27-egu2017/</link>
      <pubDate>Thu, 27 Apr 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2017-04-27-egu2017/</guid>
      <description>&lt;p&gt;During the last week of April, I presented two works on the 
, the most important scientific event of Earth Sciences in Europe.&lt;/p&gt;
&lt;p&gt;The first work was 
 (
), which was an oral 
 about the use of R, the free software environment for statistical computing and graphics, for analysing different spatio-temporal datasets of precipitation at the Chilean spatail scale.&lt;/p&gt;
&lt;p&gt;The second work was the oral presentation 
 (
), which summarises the main findings about the performance of seven different satellite-based precipitation products over the Chilean territory.&lt;/p&gt;
&lt;p&gt;Both works are the product of the international collaboration with researchers from Germany, Costa Rica and Chile on the use of different satellite-based precipitation products as a complement to current ground-based rainfall measurement networks.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Spanish version&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;Durante la semana del 24 al 28 de Abril, presenté dos trabajos en la conferencia 
, el evento científico más importante de Ciencias de la Tierra en Europa.&lt;/p&gt;
&lt;p&gt;El primer trabajo fue 
 (
), una 
 sobre el uso de R, el ambiente estadístico libre, para el análisis de distintos conjuntos de datos espacio-temporales de precipitaciòn a escala nacional (Chile).&lt;/p&gt;
&lt;p&gt;El segundo trabajo fue la presentación oral 
 (
), la cual resume los principales resultados de una comparación exhaustiva de siete productos satelitales de precipitación sobre el territorio de Chile.&lt;/p&gt;
&lt;p&gt;Ambos trabajos son producto de la colaboración internacional con investigadores de Alemania, Costa Rica y Chile, sobre el uso de distintos productos satelitales de precipitación como complemento a las actuales redes de medición pluviométrica.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Fondecyt Regular 1171560 selected in 2017 competition !</title>
      <link>https://hzambran.github.io/blog/2017-02-07-fondecyt_regular_con_mg-accepted/</link>
      <pubDate>Tue, 07 Feb 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2017-02-07-fondecyt_regular_con_mg-accepted/</guid>
      <description>&lt;p&gt;The proyect 1171560 entitled &amp;ldquo;&lt;em&gt;Assessing spatio-temporal impacts of global change on water and biomass production processes at catchment scale: a synergistic approach based on remote sensing and coupled hydrological models to improve sustainable management of forest ecosystems&lt;/em&gt;&amp;rdquo; was 
 in the 2017 Chilean competition for &amp;ldquo;Fondecyt Regular&amp;rdquo; proyects.&lt;/p&gt;
&lt;p&gt;This proposal is a collaborative effort born completly within the  
 FONDAP, where the principal investigator (PI) Mauricio Galleguillos and me (Co-PI) are working. This proyect started as a truly interdisciplinary idea, and a research visit of the PI to Temuco was the perfect ocassion to discuss about the main research question, methodology and expected outcomes.&lt;/p&gt;
&lt;p&gt;The recent fires that are affecting Chile since January 2017, are important evidence that the outcomes of this project might have important societal impacts.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Article on satellite-based rainfall estimates over Chile accepted for publication in HESS</title>
      <link>https://hzambran.github.io/blog/2017-01-30-hess_article_on_sre_accepted/</link>
      <pubDate>Mon, 30 Jan 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2017-01-30-hess_article_on_sre_accepted/</guid>
      <description>&lt;p&gt;The article 
 was accepted yesterday (January 30th, 2017) for publication in the 
 journal (HESS).&lt;/p&gt;
&lt;p&gt;This work exhaustively evaluate -for the first time- the suitability of seven state-of-the-art satellite-based rainfall estimates (SRE) over the complex topography and diverse climatic gradients of Chile. Several indices of performance are used for different time scales and elevation zones. Our analysis revealed which products are in best with ground based observations of precipitation and which indices of performance suitable to capture mismatches in shape, magnitude, variability and intensity of precipitation.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>2016: Hottest Year on Record</title>
      <link>https://hzambran.github.io/blog/2017-01-19-year_2016_hottest_on_record/</link>
      <pubDate>Thu, 19 Jan 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2017-01-19-year_2016_hottest_on_record/</guid>
      <description>&lt;p&gt;Earth&amp;rsquo;s 2016 surface temperatures were the warmest since modern recordkeeping began in 1880, according to independent analyses by NASA and the National Oceanic and Atmospheric Administration (NOAA).&lt;/p&gt;
&lt;p&gt;Globally-averaged temperatures in 2016 were 0.99 degrees Celsius (1.78 degrees Fahrenheit) warmer than the mid-20th century mean. This makes &lt;strong&gt;2016 the third year in a row&lt;/strong&gt; to set a new record for global average surface temperatures. Since the start of the 21st century, the annual global temperature record has been broken five times (2005, 2010, 2014, 2015, and 2016) 
.&lt;/p&gt;
&lt;p&gt;Most of the warming occurred in the past 35 years, with 16 of the 17 warmest years on record occurring since 2001. Not only was 2016 the warmest year on record, but eight of the 12 months that make up the year - from January through September, with the exception of June - were the warmest on record for those respective months. October, November, and December of 2016 were the second warmest of those months on record - in all three cases, behind records set in 2015 
&lt;/p&gt;
&lt;p&gt;The warming was truly global. &lt;em&gt;&amp;ldquo;Some part of every continent, and some part of every major ocean basin was warmest on record&amp;rdquo;&lt;/em&gt; Arndt says, adding that in the United States, only Georgia and Alaska had record-setting warmth but &lt;em&gt;&amp;ldquo;pretty much the entire country was above normal, and well above normal.&amp;rdquo;&lt;/em&gt; 
&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&amp;ldquo;The long-term warming is driven almost entirely by greenhouse gases&amp;rdquo;&lt;/em&gt; Arndt says. &lt;em&gt;&amp;ldquo;We&amp;rsquo;ve seen a warming trend related to greenhouse gases for four, five, six decades now&amp;rdquo;&lt;/em&gt;. 
.&lt;/p&gt;
&lt;p&gt;Two graphs that shows the time evolution of globally-averaged temperatues are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Create Beautiful Presentations with Markdown</title>
      <link>https://hzambran.github.io/events/create-beautiful-presentations-with-markdown/</link>
      <pubDate>Sun, 01 Jan 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/events/create-beautiful-presentations-with-markdown/</guid>
      <description>&lt;h2 id=&#34;-why-markdown-slides&#34;&gt;🎯 Why Markdown Slides?&lt;/h2&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500&#34; 
     data-callout=&#34;success&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-green-600 dark:text-green-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;True Presentation Freedom&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Unlike PowerPoint or Keynote, your presentations are &lt;strong&gt;future-proof&lt;/strong&gt;, &lt;strong&gt;portable&lt;/strong&gt;, and completely &lt;strong&gt;under your control&lt;/strong&gt;. No proprietary formats, no vendor lock-in, no subscription fees.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;the-problem-with-traditional-slides&#34;&gt;The Problem with Traditional Slides&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;PowerPoint &amp;amp; Keynote:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;💸 Expensive licenses or subscriptions&lt;/li&gt;
&lt;li&gt;🔒 Proprietary file formats (&lt;code&gt;.pptx&lt;/code&gt;, &lt;code&gt;.key&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;💻 Platform-specific (Windows/Mac only)&lt;/li&gt;
&lt;li&gt;📦 Large binary files&lt;/li&gt;
&lt;li&gt;🚫 Difficult to version control&lt;/li&gt;
&lt;li&gt;😰 Lost formatting when sharing&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Google Slides:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;☁️ Requires internet connection&lt;/li&gt;
&lt;li&gt;🔐 Data stored on Google&amp;rsquo;s servers&lt;/li&gt;
&lt;li&gt;📱 Limited offline editing&lt;/li&gt;
&lt;li&gt;🎨 Formatting breaks when exporting&lt;/li&gt;
&lt;li&gt;🔗 Dependency on Google&amp;rsquo;s platform&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;the-hugo-blox-solution&#34;&gt;The Hugo Blox Solution&lt;/h3&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500&#34; 
     data-callout=&#34;tip&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;&lt;strong&gt;Markdown Changes Everything&lt;/strong&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Write your presentations in simple, human-readable Markdown. Edit anywhere, present anywhere, own forever.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;hr&gt;
&lt;h2 id=&#34;-what-you-get&#34;&gt;✨ What You Get&lt;/h2&gt;
&lt;h3 id=&#34;-professional-design-zero-effort&#34;&gt;🎨 Professional Design, Zero Effort&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;15+ Built-in Themes&lt;/strong&gt; — Black, white, sky, league, and more&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Syntax Highlighting&lt;/strong&gt; — Beautiful code blocks with 50+ languages&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Math Support&lt;/strong&gt; — LaTeX equations render perfectly: $E = mc^2$&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Responsive&lt;/strong&gt; — Looks great on any screen size&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;-write-in-plain-text&#34;&gt;📝 Write in Plain Text&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## My Slide Title
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;-&lt;/span&gt; Point one
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;-&lt;/span&gt; Point two
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;-&lt;/span&gt; Point three
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;s&#34;&gt;```python
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;s&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;def&lt;/span&gt; &lt;span class=&#34;nf&#34;&gt;hello&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;():&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;World!&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;s&#34;&gt;```&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;---
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;That&amp;rsquo;s it! No complex UI, no formatting headaches.&lt;/p&gt;
&lt;h3 id=&#34;-edit-anywhere-anytime&#34;&gt;🔄 Edit Anywhere, Anytime&lt;/h3&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;important&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;&lt;strong&gt;Zero Lock-In&lt;/strong&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Your slides are just Markdown files. Edit them in:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;HugoBlox Studio&lt;/strong&gt; — Visual editing with live preview&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;VS Code&lt;/strong&gt; — With Markdown extensions&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Obsidian&lt;/strong&gt; — Note-taking app that speaks Markdown&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Typora&lt;/strong&gt; — Minimal distraction writing&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Any text editor&lt;/strong&gt; — Even Notepad works!&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-72ca4c9887da4bbc4f3a99a24efba58a&#34;
    href=&#34;https://docs.hugoblox.com/guides/studio/&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Try HugoBlox Studio&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Try HugoBlox Studio&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;-advanced-features&#34;&gt;🎯 Advanced Features&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;Dual Column Layouts:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&amp;lt;div style=&amp;#34;display: flex; gap: 2rem;&amp;#34;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &amp;lt;div style=&amp;#34;flex: 1;&amp;#34;&amp;gt;Column 1&amp;lt;/div&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &amp;lt;div style=&amp;#34;flex: 1;&amp;#34;&amp;gt;Column 2&amp;lt;/div&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&amp;lt;/div&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Fragment Animations:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; fragment &amp;gt;}}Appear on click!{{&amp;lt; /fragment &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Speaker Notes:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Note: Your private notes here
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;(visible in presenter view only)
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Vertical Slide Stacks:&lt;/strong&gt;
Navigate down for sub-topics!&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-getting-started-is-easy&#34;&gt;🚀 Getting Started is Easy&lt;/h2&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;example&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;&lt;strong&gt;Create Your First Slide Deck in 3 Steps&lt;/strong&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;step-1-create-your-slides&#34;&gt;Step 1: Create Your Slides&lt;/h3&gt;
&lt;p&gt;Create &lt;code&gt;content/slides/my-talk/index.md&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;My Amazing Talk&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;type&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;slides&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;slides&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;theme&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;l&#34;&gt;black&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;c&#34;&gt;# My Amazing Talk&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;c&#34;&gt;### Your Name&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;c&#34;&gt;## Main Points&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;- &lt;span class=&#34;l&#34;&gt;Point 1&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;- &lt;span class=&#34;l&#34;&gt;Point 2&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;- &lt;span class=&#34;l&#34;&gt;Point 3&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;c&#34;&gt;## Thank You!&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;step-2-link-to-your-event&#34;&gt;Step 2: Link to Your Event&lt;/h3&gt;
&lt;p&gt;In your event page (&lt;code&gt;content/events/my-event/index.md&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;My Conference Presentation&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;slides&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;my-talk&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;c&#34;&gt;# References the slides folder name&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;step-3-present&#34;&gt;Step 3: Present!&lt;/h3&gt;
&lt;p&gt;Your slides are automatically:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;✅ Embedded on the event page&lt;/li&gt;
&lt;li&gt;✅ Available in fullscreen mode (click 
  &lt;span class=&#34;inline-block  pr-1&#34;&gt;
    &lt;span style=&#34;height: 1em; transform: translateY(0.1em);&#34;&gt;arrows-expand&lt;/span&gt;
  &lt;/span&gt; button)&lt;/li&gt;
&lt;li&gt;✅ Accessible at a direct URL&lt;/li&gt;
&lt;li&gt;✅ Keyboard-navigatable (→ ← keys)&lt;/li&gt;
&lt;/ul&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-d0a6d8f5fd78101c1759fb5031b8010c&#34;
    href=&#34;https://docs.hugoblox.com/guides/slides/&#34;
    
    rel=&#34;noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Read Full Documentation&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Read Full Documentation&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;hr&gt;
&lt;h2 id=&#34;-why-academics--researchers-love-it&#34;&gt;💎 Why Academics &amp;amp; Researchers Love It&lt;/h2&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-500&#34; 
     data-callout=&#34;quote&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-gray-600 dark:text-gray-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Quote&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;&amp;ldquo;I can finally version control my presentations with Git, collaborate using GitHub, and never worry about formatting breaking again. Game changer for reproducible research!&amp;rdquo;
— &lt;em&gt;Dr. Xin Liu, MIT&lt;/em&gt;&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;perfect-for-research&#34;&gt;Perfect for Research&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Version Control&lt;/strong&gt; — Track every change with Git&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Collaboration&lt;/strong&gt; — Use GitHub pull requests for slide reviews&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Reproducibility&lt;/strong&gt; — Slides are plain text, commit them with your code&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Open Science&lt;/strong&gt; — Share presentations on GitHub, no barriers&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Citations&lt;/strong&gt; — Include BibTeX references easily&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Jupyter Integration&lt;/strong&gt; — Embed notebooks and visualizations&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;perfect-for-teaching&#34;&gt;Perfect for Teaching&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reusable Content&lt;/strong&gt; — Mix and match slides across courses&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Student Contributions&lt;/strong&gt; — Students can submit slide PRs&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Live Coding&lt;/strong&gt; — Syntax highlighting for all languages&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Interactive Examples&lt;/strong&gt; — Embed interactive visualizations&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Accessible&lt;/strong&gt; — Keyboard navigation, screen reader friendly&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-see-it-in-action&#34;&gt;🎬 See It In Action&lt;/h2&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;&lt;strong&gt;Try it now!&lt;/strong&gt; The slides embedded above demonstrate all these features:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Code highlighting with Python&lt;/li&gt;
&lt;li&gt;Mathematical equations with LaTeX&lt;/li&gt;
&lt;li&gt;Dual column layouts (slides 4-6)&lt;/li&gt;
&lt;li&gt;Fragment animations&lt;/li&gt;
&lt;li&gt;Multiple themes&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Click the 
  &lt;span class=&#34;inline-block  pr-1&#34;&gt;
    &lt;span style=&#34;height: 1em; transform: translateY(0.1em);&#34;&gt;arrows-expand&lt;/span&gt;
  &lt;/span&gt; &lt;strong&gt;fullscreen button&lt;/strong&gt; (top right) to experience presentation mode!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;live-features-to-try&#34;&gt;Live Features to Try&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Navigate&lt;/strong&gt;: Use arrow keys (→ ←) or click controls&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Fullscreen&lt;/strong&gt;: Click the expand button to go fullscreen&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Speaker Notes&lt;/strong&gt;: Press &lt;code&gt;S&lt;/code&gt; to open presenter view (try it!)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Overview&lt;/strong&gt;: Press &lt;code&gt;ESC&lt;/code&gt; to see all slides at once&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search&lt;/strong&gt;: Press &lt;code&gt;/&lt;/code&gt; to search slide content&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Zoom&lt;/strong&gt;: &lt;code&gt;Alt+Click&lt;/code&gt; to zoom into details&lt;/li&gt;
&lt;/ol&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-64e601f8a8934bfe4df8ad2c2165141f&#34;
    href=&#34;https://hzambran.github.io/slides/example/&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Open Slides in New Tab&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;span class=&#34;flex items-center justify-center leading-none text-lg&#34;&gt;external-link&lt;/span&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Open Slides in New Tab&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;hr&gt;
&lt;h2 id=&#34;-comparison&#34;&gt;🆚 Comparison&lt;/h2&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Feature&lt;/th&gt;
          &lt;th&gt;PowerPoint&lt;/th&gt;
          &lt;th&gt;Google Slides&lt;/th&gt;
          &lt;th&gt;&lt;strong&gt;Hugo Blox&lt;/strong&gt;&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Cost&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;$159.99/year&lt;/td&gt;
          &lt;td&gt;Free*&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;Free Forever&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Format&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;Binary (&lt;code&gt;.pptx&lt;/code&gt;)&lt;/td&gt;
          &lt;td&gt;Proprietary&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;Plain Markdown&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Version Control&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;❌ Difficult&lt;/td&gt;
          &lt;td&gt;❌ Limited&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ Git Native&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Offline Editing&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;✅ Yes&lt;/td&gt;
          &lt;td&gt;⚠️ Limited&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ Fully Offline&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Platform Lock-in&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;⚠️ Microsoft&lt;/td&gt;
          &lt;td&gt;⚠️ Google&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ None&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Code Highlighting&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;⚠️ Basic&lt;/td&gt;
          &lt;td&gt;⚠️ Limited&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ 50+ Languages&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Math Equations&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;⚠️ Clunky&lt;/td&gt;
          &lt;td&gt;⚠️ Basic&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ Full LaTeX&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Portability&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;❌ Poor&lt;/td&gt;
          &lt;td&gt;❌ Requires Google&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ Works Anywhere&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Future-Proof&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;❌ Format changes&lt;/td&gt;
          &lt;td&gt;⚠️ API changes&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ Plain Text Forever&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Open Source&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;❌ No&lt;/td&gt;
          &lt;td&gt;❌ No&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;✅ Yes&lt;/strong&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500&#34; 
     data-callout=&#34;success&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-green-600 dark:text-green-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Success&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;&lt;strong&gt;Hugo Blox wins on freedom, portability, and long-term sustainability.&lt;/strong&gt;&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;hr&gt;
&lt;h2 id=&#34;-advanced-capabilities&#34;&gt;🛠️ Advanced Capabilities&lt;/h2&gt;
&lt;h3 id=&#34;code-blocks-with-syntax-highlighting&#34;&gt;Code Blocks with Syntax Highlighting&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kn&#34;&gt;import&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;torch&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kn&#34;&gt;import&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;torch.nn&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;as&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;nn&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;class&lt;/span&gt; &lt;span class=&#34;nc&#34;&gt;Transformer&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;nn&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;Module&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;):&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;def&lt;/span&gt; &lt;span class=&#34;fm&#34;&gt;__init__&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;bp&#34;&gt;self&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;d_model&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;512&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;nhead&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;8&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;):&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;nb&#34;&gt;super&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;fm&#34;&gt;__init__&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;bp&#34;&gt;self&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;attention&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;nn&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;MultiheadAttention&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;d_model&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;nhead&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;def&lt;/span&gt; &lt;span class=&#34;nf&#34;&gt;forward&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;bp&#34;&gt;self&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;):&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;k&#34;&gt;return&lt;/span&gt; &lt;span class=&#34;bp&#34;&gt;self&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;attention&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;x&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)[&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;]&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;mathematical-equations&#34;&gt;Mathematical Equations&lt;/h3&gt;
&lt;p&gt;Display equations with LaTeX:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-latex&#34; data-lang=&#34;latex&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\times&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\vec&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{E} &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\frac&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\partial&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\vec&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{B}}{&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\partial&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; t}
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\int&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;_{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\infty&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\infty&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} e^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;x^&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} dx &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\sqrt&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\pi&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;dual-column-layouts&#34;&gt;Dual Column Layouts&lt;/h3&gt;
&lt;p&gt;Perfect for before/after comparisons, code + explanation, or image + text:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&amp;lt;div style=&amp;#34;display: flex; gap: 2rem;&amp;#34;&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &amp;lt;div style=&amp;#34;flex: 1;&amp;#34;&amp;gt;Left content&amp;lt;/div&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &amp;lt;div style=&amp;#34;flex: 1;&amp;#34;&amp;gt;Right content&amp;lt;/div&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&amp;lt;/div&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;See slides 4-6 in the embedded presentation above for live examples!&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-for-educators-teach-the-future&#34;&gt;🎓 For Educators: Teach the Future&lt;/h2&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500&#34; 
     data-callout=&#34;tip&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;&lt;strong&gt;Empower Your Students&lt;/strong&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Teaching with Hugo Blox means teaching modern, transferable skills:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Markdown (used everywhere: GitHub, Notion, Obsidian)&lt;/li&gt;
&lt;li&gt;Version control (essential for careers)&lt;/li&gt;
&lt;li&gt;Web technologies (HTML, CSS)&lt;/li&gt;
&lt;li&gt;Reproducible science practices&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;course-integration&#34;&gt;Course Integration&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;courses/
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;├── ml-101/
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;│   ├── lecture-1/
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;│   │   ├── index.md (slides)
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;│   │   └── notes.md
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;│   ├── lecture-2/
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;│   │   └── index.md
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;│   └── _index.md
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Each lecture gets its own slide deck, all version controlled, all editable by students as PRs.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-join-the-community&#34;&gt;🌍 Join the Community&lt;/h2&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;important&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;&lt;strong&gt;Built by Academics, for Academics&lt;/strong&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Hugo Blox is used by researchers at:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;🎓 Stanford, MIT, Harvard, Oxford, Cambridge&lt;/li&gt;
&lt;li&gt;🏢 Google Research, Meta AI, OpenAI&lt;/li&gt;
&lt;li&gt;🔬 CERN, NASA, NIH&lt;/li&gt;
&lt;li&gt;🌐 Thousands of universities worldwide&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-2ec3ddd54c88670c46107e7c012831a9&#34;
    href=&#34;https://github.com/HugoBlox/kit&#34;
    
    rel=&#34;noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Star on GitHub&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; fill=&#34;currentColor&#34; viewBox=&#34;3 3 18 18&#34;&gt;&lt;path d=&#34;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&#34;&gt;&lt;/path&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Star on GitHub&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;get-help--connect&#34;&gt;Get Help &amp;amp; Connect&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;📚 
&lt;/li&gt;
&lt;li&gt;💬 
&lt;/li&gt;
&lt;li&gt;🐛 
&lt;/li&gt;
&lt;li&gt;🐦 
&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id=&#34;-ready-to-create&#34;&gt;🚀 Ready to Create?&lt;/h2&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500&#34; 
     data-callout=&#34;success&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-green-600 dark:text-green-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;&lt;strong&gt;Start Building Beautiful Presentations Today&lt;/strong&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;No installation required. No account needed. Just Markdown and your creativity.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-f5cb72badd42b83ac8de6ffc320b1cc9&#34;
    href=&#34;https://docs.hugoblox.com/start/&#34;
    
    rel=&#34;noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Get Started Now&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Get Started Now&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;br&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-6939f6e51cfecf1515116eaaeb1fe6bc&#34;
    href=&#34;https://docs.hugoblox.com/guides/studio/&#34;
    
    rel=&#34;noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Try HugoBlox Studio&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Try HugoBlox Studio&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;hr&gt;
&lt;h2 id=&#34;-additional-resources&#34;&gt;📖 Additional Resources&lt;/h2&gt;
&lt;h3 id=&#34;templates--examples&#34;&gt;Templates &amp;amp; Examples&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!--
- [Conference Talk Template](https://github.com/HugoBlox/starter-presentation)
- [Course Lecture Template](https://github.com/HugoBlox/starter-course)


### Tutorials

- [Creating Your First Slide Deck](https://docs.hugoblox.com/tutorial/slides/)
- [Advanced Slide Layouts](https://docs.hugoblox.com/reference/slides/)
- [Customizing Themes](https://docs.hugoblox.com/customization/)
- [Using HugoBlox Studio](https://docs.hugoblox.com/studio/)
--&gt;
&lt;h3 id=&#34;tips--tricks&#34;&gt;Tips &amp;amp; Tricks&lt;/h3&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500&#34; 
     data-callout=&#34;tip&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;&lt;strong&gt;Pro Tips for Better Presentations&lt;/strong&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;ol&gt;
&lt;li&gt;Keep slides simple — one idea per slide&lt;/li&gt;
&lt;li&gt;Use dual columns for comparisons&lt;/li&gt;
&lt;li&gt;Add speaker notes with &lt;code&gt;Note:&lt;/code&gt; prefix&lt;/li&gt;
&lt;li&gt;Test presenter view before your talk&lt;/li&gt;
&lt;li&gt;Use fragments to control pacing&lt;/li&gt;
&lt;li&gt;Version control your slides with Git&lt;/li&gt;
&lt;li&gt;Share source files for reproducibility&lt;/li&gt;
&lt;/ol&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;Have questions?&lt;/strong&gt; Check out the 
 or 
!&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Want to contribute?&lt;/strong&gt; Hugo Blox is open source! 
.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Temporal and spatial evaluation of satellite-based rainfall estimates across the complex topographical and climatic gradients of Chile</title>
      <link>https://hzambran.github.io/publications/2017-zambranobigiarini-temporal-and/</link>
      <pubDate>Sun, 01 Jan 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2017-zambranobigiarini-temporal-and/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Accurate representation of the real spatio-temporal variability of catchment rainfall inputs is currently severely limited. Moreover, spatially interpolated catchment precipitation is subject to large uncertainties, particularly in developing countries and regions which are difficult to access. Recently, satellite-based rainfall estimates (SREs) provide an unprecedented opportunity for a wide range of hydrological applications, from water resources modelling to monitoring of extreme events such as droughts and floods. This study attempts to exhaustively evaluate – for the first time – the suitability of seven state-of-the-art SRE products (TMPA 3B42v7, CHIRPSv2, CMORPH, PERSIANN-CDR, PERSIAN-CCS-Adj, MSWEPv1.1, and PGFv3) over the complex topography and diverse climatic gradients of Chile. Different temporal scales (daily, monthly, seasonal, annual) are used in a point-to-pixel comparison between precipitation time series measured at 366 stations (from sea level to 4600 m a.s.l. in the Andean Plateau) and the corresponding grid cell of each SRE (rescaled to a 0.25° grid if necessary). The modified Kling–Gupta efficiency was used to identify possible sources of systematic errors in each SRE. In addition, five categorical indices (PC, POD, FAR, ETS, fBIAS) were used to assess the ability of each SRE to correctly identify different precipitation intensities. Results revealed that most SRE products performed better for the humid South (36.4–43.7° S) and Central Chile (32.18–36.4° S), in particular at low- and mid-elevation zones (0–1000 m a.s.l.) compared to the arid northern regions and the Far South. Seasonally, all products performed best during the wet seasons (autumn and winter; MAM–JJA) compared to summer (DJF) and spring (SON). In addition, all SREs were able to correctly identify the occurrence of no-rain events, but they presented a low skill in classifying precipitation intensities during rainy days. Overall, PGFv3 exhibited the best performance everywhere and for all timescales, which can be clearly attributed to its bias-correction procedure using 217 stations from Chile. Good results were also obtained by the research products CHIRPSv2, TMPA 3B42v7 and MSWEPv1.1, while CMORPH, PERSIANN-CDR, and the real-time PERSIANN-CCS-Adj were less skillful in representing observed rainfall. While PGFv3 (currently available up to 2010) might be used in Chile for historical analyses and calibration of hydrological models, the high spatial resolution, low latency and long data records of CHIRPS and TMPA 3B42v7 (in transition to IMERG) show promising potential to be used in meteorological studies and water resource assessments. We finally conclude that despite improvements of most SRE products, a site-specific assessment is still needed before any use in catchment-scale hydrological studies.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Accurate representation of the real spatio-temporal variability of catchment rainfall inputs is currently severely limited. Moreover, spatially interpolated catchment precipitation is subject to large uncertainties, particularly in developing countries and regions which are difficult to access. Recently, satellite-based rainfall estimates (SREs) provide an unprecedented opportunity for a wide range of hydrological applications, from water resources modelling to monitoring of extreme events such as droughts and floods. This study attempts to exhaustively evaluate – for the first time – the suitability of seven state-of-the-art SRE products (TMPA 3B42v7, CHIRPSv2, CMORPH, PERSIANN-CDR, PERSIAN-CCS-Adj, MSWEPv1.1, and PGFv3) over the complex topography and diverse climatic gradients of Chile. Different temporal scales (daily, monthly, seasonal, annual) are used in a point-to-pixel comparison between precipitation time series measured at 366 stations (from sea level to 4600 m a.s.l. in the Andean Plateau) and the corresponding grid cell of each SRE (rescaled to a 0.25° grid if necessary). The modified Kling–Gupta efficiency was used to identify possible sources of systematic errors in each SRE. In addition, five categorical indices (PC, POD, FAR, ETS, fBIAS) were used to assess the ability of each SRE to correctly identify different precipitation intensities. Results revealed that most SRE products performed better for the humid South (36.4–43.7° S) and Central Chile (32.18–36.4° S), in particular at low- and mid-elevation zones (0–1000 m a.s.l.) compared to the arid northern regions and the Far South. Seasonally, all products performed best during the wet seasons (autumn and winter; MAM–JJA) compared to summer (DJF) and spring (SON). In addition, all SREs were able to correctly identify the occurrence of no-rain events, but they presented a low skill in classifying precipitation intensities during rainy days. Overall, PGFv3 exhibited the best performance everywhere and for all timescales, which can be clearly attributed to its bias-correction procedure using 217 stations from Chile. Good results were also obtained by the research products CHIRPSv2, TMPA 3B42v7 and MSWEPv1.1, while CMORPH, PERSIANN-CDR, and the real-time PERSIANN-CCS-Adj were less skillful in representing observed rainfall. While PGFv3 (currently available up to 2010) might be used in Chile for historical analyses and calibration of hydrological models, the high spatial resolution, low latency and long data records of CHIRPS and TMPA 3B42v7 (in transition to IMERG) show promising potential to be used in meteorological studies and water resource assessments. We finally conclude that despite improvements of most SRE products, a site-specific assessment is still needed before any use in catchment-scale hydrological studies.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Zambrano-Bigiarini, M., Nauditt, A., Birkel, C., Verbist, K., &amp; Ribbe, L. (2017). Temporal and spatial evaluation of satellite-based rainfall estimates across the complex topographical and climatic gradients of Chile. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;21&lt;/i&gt;(2), 1295--1320. &lt;a href=&#39;https://doi.org/10.5194/hess-21-1295-2017&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-21-1295-2017&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>The 2010-2015 megadrought in central Chile: impacts on regional hydroclimate and vegetation</title>
      <link>https://hzambran.github.io/publications/2017-garreaud-the-20102015/</link>
      <pubDate>Sun, 01 Jan 2017 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2017-garreaud-the-20102015/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Since 2010 an uninterrupted sequence of dry years, with annual rainfall deficits ranging from 25 to 45%, has prevailed in central Chile (western South America, 30-38S). Although intense 1- or 2-year droughts are recurrent in this Mediterranean-like region, the ongoing event stands out because of its longevity and large extent. The extraordinary character of the so-called central Chile megadrought (MD) was established against century long historical records and a millennial tree-ring reconstruction of regional precipitation. The largest MD-averaged rainfall relative anomalies occurred in the northern, semi-arid sector of central Chile, but the event was unprecedented to the south of 35° S. ENSO-neutral conditions have prevailed since 2011 (except for the strong El Niño in 2015), contrasting with La Niña conditions that often accompanied past droughts. The precipitation deficit diminished the Andean snowpack and resulted in amplified declines (up to 90%) of river flow, reservoir volumes and groundwater levels along central Chile and westernmost Argentina. In some semi-arid basins we found a decrease in the runoff-to-rainfall coefficient. A substantial decrease in vegetation productivity occurred in the shrubland-dominated, northern sector, but a mix of greening and browning patches occurred farther south, where irrigated croplands and exotic forest plantations dominate. The ongoing warming in central Chile, making the MD one of the warmest 6-year periods on record, may have also contributed to such complex vegetation changes by increasing potential evapotranspiration. We also report some of the measures taken by the central government to relieve the MD effects and the public perception of this event. The understanding of the nature and biophysical impacts of the MD helps as a foundation for preparedness efforts to confront a dry, warm future regional climate scenario.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Since 2010 an uninterrupted sequence of dry years, with annual rainfall deficits ranging from 25 to 45%, has prevailed in central Chile (western South America, 30-38S). Although intense 1- or 2-year droughts are recurrent in this Mediterranean-like region, the ongoing event stands out because of its longevity and large extent. The extraordinary character of the so-called central Chile megadrought (MD) was established against century long historical records and a millennial tree-ring reconstruction of regional precipitation. The largest MD-averaged rainfall relative anomalies occurred in the northern, semi-arid sector of central Chile, but the event was unprecedented to the south of 35° S. ENSO-neutral conditions have prevailed since 2011 (except for the strong El Niño in 2015), contrasting with La Niña conditions that often accompanied past droughts. The precipitation deficit diminished the Andean snowpack and resulted in amplified declines (up to 90%) of river flow, reservoir volumes and groundwater levels along central Chile and westernmost Argentina. In some semi-arid basins we found a decrease in the runoff-to-rainfall coefficient. A substantial decrease in vegetation productivity occurred in the shrubland-dominated, northern sector, but a mix of greening and browning patches occurred farther south, where irrigated croplands and exotic forest plantations dominate. The ongoing warming in central Chile, making the MD one of the warmest 6-year periods on record, may have also contributed to such complex vegetation changes by increasing potential evapotranspiration. We also report some of the measures taken by the central government to relieve the MD effects and the public perception of this event. The understanding of the nature and biophysical impacts of the MD helps as a foundation for preparedness efforts to confront a dry, warm future regional climate scenario.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Garreaud, R. D., Alvarez-Garreton, C., Barichivich, J., Boisier, J. P., Christie, D., Galleguillos, M., LeQuesne, C., McPhee, J., &amp; Zambrano-Bigiarini, M. (2017). The 2010-2015 megadrought in central Chile: impacts on regional hydroclimate and vegetation. &lt;i&gt;Hydrology and Earth System Sciences&lt;/i&gt;, &lt;i&gt;21&lt;/i&gt;(12), 6307--6327. &lt;a href=&#39;https://doi.org/10.5194/hess-21-6307-2017&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.5194/hess-21-6307-2017&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Poster presentation at AGU 2016</title>
      <link>https://hzambran.github.io/dissemination/2016-12-13-agu2016/</link>
      <pubDate>Tue, 13 Dec 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2016-12-13-agu2016/</guid>
      <description>&lt;p&gt;On December 13th 2016, I presented the work titled 
 at the conference 
. In this work I used two drought indices to analyze the contribution of precipitation and temperature to the recent droughts that have affected Chile, in order to improve our understanding about the onset, duration and magnitude of these events.&lt;/p&gt;
&lt;p&gt;It is the first time that a professor with affiliation &amp;ldquo;Universidad de La Frontera&amp;rdquo; presents in this conference, the most important of Earth Sciences worldwide.&lt;/p&gt;
&lt;p&gt;This work is part of a collaborative research that I carry out for the 
 of the Universidad de Chile.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Spanish version&lt;/strong&gt;:&lt;/p&gt;
&lt;p&gt;El pasado 13 de Diciembre de 2016, presenté el trabajo titulado 
 en la conferencia 
. En este trabajo utilicé dos índices de sequía para analizar la contribución de la precipitación y la temperatura a las recientes sequías que han afectado Chile, para mejorar nuestra comprensión acerca del inicio, duración y magnitud de estos eventos.&lt;/p&gt;
&lt;p&gt;Es la primera vez que un docente con afiliación Universidad de La Frontera presenta en este evento, el más importante de las Ciencias de la Tierra a nivel mundial.&lt;/p&gt;
&lt;p&gt;Este trabajo forma parte del trabajo como investigador adjunto que realizo para el 
 de la Universidad de Chile.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Drought in Puyehue and Rupanco lakes (SoyChile.cl)</title>
      <link>https://hzambran.github.io/blog/2016-06-17-drought_in_puyehue_and_rupanco_lakes/</link>
      <pubDate>Sun, 21 Aug 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2016-06-17-drought_in_puyehue_and_rupanco_lakes/</guid>
      <description>&lt;p&gt;After 
 revealed the worrying decline in the water levels of Llanquihue Lake in the  surrounding of Puerto Octay, it was found that is not the only lake basin of the region affected by the lack of rainfall that experts have attributed to climate change.&lt;/p&gt;
&lt;p&gt;This is because now the Rupanco and Puyehue lakes in the province of Osorno, have also shown and alarming and disturbing situation. In the first case, locals say that in some sectors the beach has increased from 20 to 200 meters, and in areas normally covered by water can now move on foot or by vehicle.&lt;/p&gt;
&lt;p&gt;A similar situation occurs in the Rupanco, where residents also confirm that there is an obvious decline in its water levels, exposing larger portions of land. *This is the year where I&amp;rsquo;ve seen the worst shortage of water in the lake. It has fallen very little rain. Luckily our pastures are still green, but the lake has suffered,&amp;quot; said a local farmer.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Expected changes in precipitation and temperature by 2050 (La Tercera)</title>
      <link>https://hzambran.github.io/blog/2016-09-21-temperature_and_precipitation_changes_by_2050/</link>
      <pubDate>Sun, 21 Aug 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2016-09-21-temperature_and_precipitation_changes_by_2050/</guid>
      <description>&lt;p&gt;A recent study, delivered in July 2016, projected that by 2050 Santiago will have the most extreme variation in temperature of all regional capitals, with 2.7°C, which is 14% higher compared to today. In winter, the increase will be 1.7%, representing an increase of 19%, while precipitation will be reduced by 55 millimeters (mm), 15% less.&lt;/p&gt;
&lt;p&gt;In other regional capitals, as Arica and Copiapó, extreme temperatures rise about 2.2°C are also expected for each summer, but it will be Arica where the temperature will rise more in winter, with 2.5° C.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Megadrought expands to southern Chile (La Tercera)</title>
      <link>https://hzambran.github.io/blog/2016-08-21-megasequia-se_expande_hacia_el_sur/</link>
      <pubDate>Sun, 21 Aug 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2016-08-21-megasequia-se_expande_hacia_el_sur/</guid>
      <description>&lt;p&gt;Today the country is experiencing one of the longest and most geographically extensive droughts in its history, which has nearly eight years in some sectors, and extends from the Coquimbo to the La Araucania region. Experts estimate that in the future these cycles would increase. According to an analysis by the  Center for Climate and Resilience Research (CR2) in 2015, these mega-droughts will become more common, occurring in Chile every 20 years by 2050 if emissions continue to increase greenhouse gases.&lt;/p&gt;
&lt;p&gt;To date, 17 of the 22 stations of the Meteorological Direction of Chile (DMC) present below normal precipitation amounts. Coyhaique (45ºS) is the one with the most extreme situation. There, the precipitation is around 220 mm, far from normal to date according to the climatological period 1981-2010, which is 884.5 mm, resulting in a deficit of 75%. The level of rainfall is the lowest registration for the area (starting in 1960), although it is projected that in the next three months rains occur within the normal range indicates Catalina Cortes, meteorologist at DMC. However, it should end the year in deficit.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>July 2016 was world&#39;s hottest month since records began, says Nasa (The Guardian)</title>
      <link>https://hzambran.github.io/blog/2016-08-20-hottest_july_on_record/</link>
      <pubDate>Sat, 20 Aug 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2016-08-20-hottest_july_on_record/</guid>
      <description>&lt;p&gt;Nasa&amp;rsquo;s results, which combine sea-surface temperature and air temperature on land, show July 2016 was 10th month in a row to break monthly temperature record&lt;/p&gt;
&lt;p&gt;As the string of hottest months continues, 2016 is &lt;em&gt;virtually certain&lt;/em&gt; to be the &lt;strong&gt;hottest year on record&lt;/strong&gt;, says David Karoly, a climate scientist from the University of Melbourne.&lt;/p&gt;
&lt;p&gt;Last month was the hottest month in recorded history, beating the record set just 12 months before and continuing the long string of monthly records, according to the latest Nasa data.&lt;/p&gt;
&lt;p&gt;The past nine months have set temperature records for their respective months and the trend continued this month to make 10 in a row, according to Nasa. &lt;strong&gt;July broke the absolute record for hottest month since records began in 1880&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Similar data from the US National Oceanographic and Atmospheric Administration (Noaa) said the past 14 months have broken the temperature record for each month, but it hasn&amp;rsquo;t released its figures for July yet.&lt;/p&gt;
&lt;p&gt;For more information please visit: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>El año 2015 batió récords de fenómenos climáticos extremos (El Mercurio)</title>
      <link>https://hzambran.github.io/blog/2016-08-03-year_2015_hottest_on_record_cr2/</link>
      <pubDate>Wed, 03 Aug 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2016-08-03-year_2015_hottest_on_record_cr2/</guid>
      <description>&lt;p&gt;El año 2015 marcó una temporada de lluvias más abundantes que el promedio, provocando graves &lt;strong&gt;inundaciones&lt;/strong&gt;. Severas &lt;strong&gt;sequías&lt;/strong&gt; afectaron superficies casi &lt;strong&gt;dos veces mayores en 2015 que en el año anterior&lt;/strong&gt; (14%, contra 8% en 2014).&lt;/p&gt;
&lt;p&gt;Las aguas más calientes agravaron la propagación de algas, que afectaron el 2015 una importante región del Pacífico norte, desde California hasta la Columbia Británica, en Canadá.&lt;/p&gt;
&lt;hr&gt;
&lt;h4 id=&#34;calor-y-lluvias&#34;&gt;Calor y lluvias&lt;/h4&gt;
&lt;p&gt;En el caso sudamericano, El Niño influyó en las condiciones climáticas durante todo el 2015. La &lt;strong&gt;temperatura del aire aumentó por sobre el promedio&lt;/strong&gt; en la mayor parte del continente, lo que generó condiciones más secas que el promedio en el norte y más húmedas en el sur, especialmente Chile y Argentina.&lt;/p&gt;
&lt;p&gt;No obstante, se presentó un otoño e invierno más calurosos de lo habitual. En Argentina fue el invierno más caliente desde que se tienen registros, con un aumento de la media por sobre los 3ºC. En contraste, un aumento de los sistemas frontales y de la nubosidad produjo en Chile y, particularmente, en Argentina el más frío octubre desde que se tienen registros.&lt;/p&gt;
&lt;p&gt;En marzo 2015, una &lt;strong&gt;anormal lluvia&lt;/strong&gt; sorprendió a las secas regiones de &lt;strong&gt;Atacama&lt;/strong&gt; y &lt;strong&gt;Antofagasta&lt;/strong&gt;. En esta última ciudad, entre el 25 y el 26 de ese mes cayeron 24,4 milímetros de agua, cuando el promedio anual es de 1,7. En agosto y diciembre, las precipitaciones intensas se presentaron en Argentina y Paraguay, generando inundaciones.&lt;/p&gt;
&lt;p&gt;For more information please visit the website: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>PhD summer school Remote Sensing applications for Water Accounting</title>
      <link>https://hzambran.github.io/dissemination/2016-07-20-training_on_rs_at_itt/</link>
      <pubDate>Wed, 20 Jul 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2016-07-20-training_on_rs_at_itt/</guid>
      <description>&lt;p&gt;&lt;strong&gt;Water accounting&lt;/strong&gt; is a fundamental basis to understand water availability and demands and the related benefits and efficiencies are related to water uses. While the fundamental data needed for establishing water accounts is often missing, Remote Sensing can contribute to fill the data gaps.
With this course PhD students and staff at ITT will become familiar with the application of Remote Sensing to derive information on precipitation, evapotranspiration and land cover - three essential information elements for water accounts.
Dr. Raul Vicens from Universidade Federal Fluminense de Brasil will introduce the basic techinques of Remote Sensing using the software SPRING and introduce to derive land cover information from products such as Landsat. &lt;strong&gt;Dr. Mauricio Zambrano-Bigiarini&lt;/strong&gt; from 
, Chile, will focus on the use of the 
 software to derive Precipitation estimates from products such as TRMM. Finally Dr Islam Sabry from the National Water Research Center, Egypt will introduce the use of satellite based estimates for evapotranspiration data.&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/2016-07-20-RS_PhD_course_at_ITT.png&#34; alt=&#34;example of analysis&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Research and Education Week on the Water, Energy and Food Security Nexus</title>
      <link>https://hzambran.github.io/dissemination/2016-07-15-nexusweek_at_itt/</link>
      <pubDate>Fri, 15 Jul 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/dissemination/2016-07-15-nexusweek_at_itt/</guid>
      <description>&lt;p&gt;The 
 (WEF Nexus) is currently a highly important debate in environmental policy with expected implications for priorities in research, education and international cooperation. Increasing demands for water, energy and food together with external and internal change drivers on current natural resources use patterns make the Nexus idea crucial to understand the multiple resource use interlinkages.
The 
 invited partners from current Nexus-related projects for an international gathering from the 11th until the 15th of July 2016. The &lt;strong&gt;Nexus Research and Education Week&lt;/strong&gt; invited also external presenters and students into the discussion on how to address together many of the key interlinkages like sustainable land and water management practices, climate related risks in terms of droughts and extremes or increasing resource use efficiencies along river basins.&lt;/p&gt;
&lt;p&gt;















&lt;figure  &gt;
  &lt;div class=&#34;flex justify-center	&#34;&gt;
    &lt;div class=&#34;w-full&#34; &gt;&lt;img src=&#34;https://hzambran.github.io/assets/posts/2016-07-14-WEF_Nexus_Group-768x512.jpg&#34; alt=&#34;WEF_Nexus_Group&#34; loading=&#34;lazy&#34; data-zoomable /&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;During the Nexus Week, the professor &lt;strong&gt;Mauricio Zambrano-Bigiarini&lt;/strong&gt; along with international partners presented their case studies from related projects as &lt;em&gt;nexus laboratories&lt;/em&gt; useful for enhancing educational contents and outlining future collaborative research activities. International experts and young researchers were involved in providing insights on the WEF Nexus topic from ongoing research and and outlining further research demand.
Different case studies with WEF-Nexus related topics at river basin scale were presented from countries such as Jordan, Sudan, Ethiopia, Egypt, Pakistan, &lt;strong&gt;Chile&lt;/strong&gt;, Ecuador, Costa Rica and Colombia and also larger scales as the Mekong, the Nile and Paraiba do Sul region or even global scale. The Nexus Week aimed at expanding the network of partners related to Nexus topics and interdisciplinary regional and basin planning initiatives and offered an opportunity as an exchange platform.
During additional side events of the Nexus Week, the participants developed new project ideas and exchanged experiences on integrated water basin management during a visit to the International Commission for the Protection of the Rhine. Further more, different Nexus products were presented and prepared for further development in the future.&lt;/p&gt;
&lt;p&gt;For more information about the project please visit the website: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>2015 was the warmest year ever recorded on Earth (NASA-NOAA)</title>
      <link>https://hzambran.github.io/blog/2016-02-01-year_2015_was_the_warmest_year_ever_recorded_on_earth_nasa/</link>
      <pubDate>Mon, 01 Feb 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/2016-02-01-year_2015_was_the_warmest_year_ever_recorded_on_earth_nasa/</guid>
      <description>&lt;p&gt;&lt;strong&gt;2015 was the warmest year ever recorded on Earth&lt;/strong&gt;, and it was not even close.&lt;/p&gt;
&lt;p&gt;On January 20, 2016, scientists from NASA and the National Oceanic and Atmospheric Administration (NOAA) released their analyses of surface temperatures for the past year.
The NASA team found that globally averaged temperatures from January through December 2015 were &lt;strong&gt;0.87 degrees Celsius above the norm&lt;/strong&gt; (defined as a 1951-1980 base period). The previous record—set last year—was 0.74°C above the norm.
For the planet, &lt;strong&gt;2015 was more than a full degree Celsius warmer than temperatures in 1880&lt;/strong&gt;, when consistent record-keeping began.
Working independently, NOAA researchers found 2015 to be 0.90°C above the 1901-2000 average. According to their analysis, 2015 was the second warmest year on record for the continental United States, Africa, and Europe. &lt;strong&gt;It was the warmest year for Asia and South America&lt;/strong&gt;. Globally, new monthly temperature records were set in every month except January and April.&lt;/p&gt;
&lt;p&gt;The 2015 temperature record continues a long-term warming trend that has largely been driven by increased carbon dioxide and other greenhouse gases that humans have emitted into the atmosphere. Most of the warming has occurred in the past 35 years, with &lt;strong&gt;15 of the 16 warmest years on record occurring since 2001&lt;/strong&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;h4 id=&#34;enso&#34;&gt;ENSO&lt;/h4&gt;
&lt;p&gt;Note that while El Niño conditions dominated the Pacific Ocean for most of 2015, &lt;strong&gt;it was not officially an El Niño year in strict climatological terms&lt;/strong&gt; because ocean conditions did not manifest themselves until April 2015.
In the past, the highest global temperature records were often set in El Niño years, which suggests that 2016—with El Niño going strong as of mid-January—appears likely to be another very warm year.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;2015 was remarkable even in the context of the ongoing El Niño&lt;/em&gt; said NASA GISS Director Gavin Schmidt. &lt;em&gt;Last year&amp;rsquo;s temperatures had an assist from El Niño, but it is the cumulative effect of the long-term trend that has resulted in the record warming that we are seeing.&lt;/em&gt;
&lt;em&gt;Climate change is the challenge of our generation&lt;/em&gt;”, said NASA Administrator Charles Bolden. &lt;em&gt;Today&amp;rsquo;s announcement not only underscores how critical NASA&amp;rsquo;s Earth observation program is, it is a key data point that should make policymakers stand up and take notice. &lt;strong&gt;Now is the time to act on climate&lt;/strong&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;For more information please visit the website: 
&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;myimage.jpg&#34;
    alt=&#34;Alternative display text&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;My Caption&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Assessing the role of uncertain precipitation estimates on the robustness of hydrological model parameters under highly variable climate conditions</title>
      <link>https://hzambran.github.io/publications/2016-bisselink-assessing-the/</link>
      <pubDate>Fri, 01 Jan 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2016-bisselink-assessing-the/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Study region: Four headwaters in Southern Africa. Study focus :The streamflow regimes in Southern Africa are amongst the most variable in the world. The corresponding differences in streamflow bias and variability allowed us to analyze the behavior and robustness of the LISFLOOD hydrological model parameters. A differential split-sample test is used for calibration using seven satellite-based rainfall estimates, in order to assess the robustness of model parameters. Robust model parameters are of high importance when they have to be transferred both in time and space. For calibration, the modified Kling-Gupta statistic was used, which allowed us to differentiate the contribution of the correlation, bias and variability between the simulated and observed streamflow. New hydrological insights: Results indicate large discrepancies in terms of the linear correlation (r), bias (β) and variability (γ) between the observed and simulated streamflows when using different precipitation estimates as model input. The best model performance was obtained with products which ingest gauge data for bias correction. However, catchment behavior was difficult to be captured using a single parameter set and to obtain a single robust parameter set for each catchment, which indicate that transposing model parameters should be carried out with caution. Model parameters depend on the precipitation characteristics of the calibration period and should therefore only be used in target periods with similar precipitation characteristics (wet/dry).&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Study region: Four headwaters in Southern Africa. Study focus :The streamflow regimes in Southern Africa are amongst the most variable in the world. The corresponding differences in streamflow bias and variability allowed us to analyze the behavior and robustness of the LISFLOOD hydrological model parameters. A differential split-sample test is used for calibration using seven satellite-based rainfall estimates, in order to assess the robustness of model parameters. Robust model parameters are of high importance when they have to be transferred both in time and space. For calibration, the modified Kling-Gupta statistic was used, which allowed us to differentiate the contribution of the correlation, bias and variability between the simulated and observed streamflow. New hydrological insights: Results indicate large discrepancies in terms of the linear correlation (r), bias (β) and variability (γ) between the observed and simulated streamflows when using different precipitation estimates as model input. The best model performance was obtained with products which ingest gauge data for bias correction. However, catchment behavior was difficult to be captured using a single parameter set and to obtain a single robust parameter set for each catchment, which indicate that transposing model parameters should be carried out with caution. Model parameters depend on the precipitation characteristics of the calibration period and should therefore only be used in target periods with similar precipitation characteristics (wet/dry).&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Bisselink, B., Zambrano-Bigiarini, M., Burek, P., &amp; de Roo, A. (2016). Assessing the role of uncertain precipitation estimates on the robustness of hydrological model parameters under highly variable climate conditions. &lt;i&gt;Journal of Hydrology: Regional Studies&lt;/i&gt;, &lt;i&gt;8&lt;/i&gt;, 112--129. &lt;a href=&#39;https://doi.org/10.1016/j.ejrh.2016.09.003&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.ejrh.2016.09.003&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Forestry development, water scarcity, and the Mapuche protest for environmental justice in Chile</title>
      <link>https://hzambran.github.io/publications/2016-torressalinas-forestry-development/</link>
      <pubDate>Fri, 01 Jan 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2016-torressalinas-forestry-development/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Desde un enfoque basado en la ecología política y la justicia ambiental, evaluamos cómo el desarrollo forestal silvícola ha generado dinámicas socio-espaciales de degradación ambiental y escasez hídrica en el sur de Chile. Mediante métodos histórico-geográfico y etnográfico, discutimos cómo y porqué el avance y consolidación del sector forestal ha influido significativamente en una creciente degradación social y ambiental de las condiciones de vida de las comunidades Mapuche. En respuesta, durante las últimas décadas se observa la articulación política de un movimiento social Mapuche, cuyas demandas son tierra, autonomía, respeto de derechos y posibilidades de guiar su propio desarrollo. Dentro de la diversidad interna de este movimiento, destaca la idea de revertir el avance de la degradación ambiental, que implica recuperar el bosque nativo, especialmente sus ciclos naturales de agua, interrumpidos significativamente por el avance de monocultivos forestales. Exploramos estas dinámicas del movimiento Mapuche desde la mirada de la justicia ambiental.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Desde un enfoque basado en la ecología política y la justicia ambiental, evaluamos cómo el desarrollo forestal silvícola ha generado dinámicas socio-espaciales de degradación ambiental y escasez hídrica en el sur de Chile. Mediante métodos histórico-geográfico y etnográfico, discutimos cómo y porqué el avance y consolidación del sector forestal ha influido significativamente en una creciente degradación social y ambiental de las condiciones de vida de las comunidades Mapuche. En respuesta, durante las últimas décadas se observa la articulación política de un movimiento social Mapuche, cuyas demandas son tierra, autonomía, respeto de derechos y posibilidades de guiar su propio desarrollo. Dentro de la diversidad interna de este movimiento, destaca la idea de revertir el avance de la degradación ambiental, que implica recuperar el bosque nativo, especialmente sus ciclos naturales de agua, interrumpidos significativamente por el avance de monocultivos forestales. Exploramos estas dinámicas del movimiento Mapuche desde la mirada de la justicia ambiental.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Torres-Salinas, R., García, G. A., Henríquez, N. C., Zambrano-Bigiarini, M., Costa, T., &amp; Bolin, B. (2016). Forestry development, water scarcity, and the Mapuche protest for environmental justice in Chile. &lt;i&gt;Ambiente &amp; Sociedade&lt;/i&gt;, &lt;i&gt;19&lt;/i&gt;(1), 121--146. &lt;a href=&#39;https://doi.org/10.1590/1809-4422ASOC150134R1V1912016&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1590/1809-4422ASOC150134R1V1912016&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>The br2-weighting Method for Estimating the Effects of Air Pollution on Population Health</title>
      <link>https://hzambran.github.io/publications/2016-krstic-the-br2weighting/</link>
      <pubDate>Fri, 01 Jan 2016 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2016-krstic-the-br2weighting/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Uncertainties, limitations and biases may impede the correct application of concentration-response linear functions to estimate the effects of air pollution exposure on population health. The reliability of a prediction depends largely on the strength of the linear correlation between the studied variables. This work proposes the joint use of the coefficient of determination, r2, with the regression slope, b, as an improved measure of the strength of the linear relation between air pollution and its effects on population health. The proposed br2‑weighting method offers more reliable inferences about the potential effects of air pollution on population health, and can be applied universally to other fields of research.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Uncertainties, limitations and biases may impede the correct application of concentration-response linear functions to estimate the effects of air pollution exposure on population health. The reliability of a prediction depends largely on the strength of the linear correlation between the studied variables. This work proposes the joint use of the coefficient of determination, r2, with the regression slope, b, as an improved measure of the strength of the linear relation between air pollution and its effects on population health. The proposed br2‑weighting method offers more reliable inferences about the potential effects of air pollution on population health, and can be applied universally to other fields of research.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Krstic, G., Krstic, N. S., &amp; Zambrano-Bigiarini, M. (2016). The br2-weighting Method for Estimating the Effects of Air Pollution on Population Health. &lt;i&gt;Journal of Modern Applied Statistical Methods&lt;/i&gt;, &lt;i&gt;15&lt;/i&gt;(2), 42. &lt;a href=&#39;https://doi.org/10.22237/jmasm/1478004000&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.22237/jmasm/1478004000&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Comparison of stationary and dynamic conceptual models in a mountainous and data-sparse catchment in the South-central Chilean Andes</title>
      <link>https://hzambran.github.io/publications/2015-toledo-comparison-of/</link>
      <pubDate>Thu, 01 Jan 2015 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2015-toledo-comparison-of/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; In recent years, it has been documented that climatic variability influences hydrological processes; however, these influences, such as hydrologic dynamics, have not yet been incorporated into models, which have been assumed as stationary with regard to climatic conditions. In this study, the temporal variability of hydrological processes and their influence on the water balance of a mountainous and data-sparse catchment in Chile are observed and modeled through the comparison of a stationary (time-invariant parameters) and dynamic (time-variant parameters) model. Since conceptual models are the most adequate option for a data-scarce basin, a conceptual model integrated with the Monte Carlo Analysis Toolbox is used to perform the analyses. Simple analyses aimed at increasing the amount of information obtained from models were used. The General and Dynamic Identifiability Analyses were used to perform stationary and dynamic calibration strategies, respectively. As a result we concluded that the dynamic model is more robust than the stationary one. Additionally, DYNIA helped us to observe the temporal variability of hydrological processes. This analysis contributed to a better understanding of hydrological processes in a data-sparse Andean catchment and thus could potentially help reduce uncertainties in the outputs of hydrological models under scenarios of climate change and/or variability.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; In recent years, it has been documented that climatic variability influences hydrological processes; however, these influences, such as hydrologic dynamics, have not yet been incorporated into models, which have been assumed as stationary with regard to climatic conditions. In this study, the temporal variability of hydrological processes and their influence on the water balance of a mountainous and data-sparse catchment in Chile are observed and modeled through the comparison of a stationary (time-invariant parameters) and dynamic (time-variant parameters) model. Since conceptual models are the most adequate option for a data-scarce basin, a conceptual model integrated with the Monte Carlo Analysis Toolbox is used to perform the analyses. Simple analyses aimed at increasing the amount of information obtained from models were used. The General and Dynamic Identifiability Analyses were used to perform stationary and dynamic calibration strategies, respectively. As a result we concluded that the dynamic model is more robust than the stationary one. Additionally, DYNIA helped us to observe the temporal variability of hydrological processes. This analysis contributed to a better understanding of hydrological processes in a data-sparse Andean catchment and thus could potentially help reduce uncertainties in the outputs of hydrological models under scenarios of climate change and/or variability.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Toledo, C., Muñoz, E., &amp; Zambrano-Bigiarini, M. (2015). Comparison of stationary and dynamic conceptual models in a mountainous and data-sparse catchment in the South-central Chilean Andes. &lt;i&gt;Advances in Meteorology&lt;/i&gt;, &lt;i&gt;2015&lt;/i&gt;. &lt;a href=&#39;https://doi.org/10.1155/2015/526158&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1155/2015/526158&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Particle Swarm Optimization for inverse modeling of solute transport in fractured gneiss aquifer</title>
      <link>https://hzambran.github.io/publications/2014-abdelaziz-particle-swarm/</link>
      <pubDate>Wed, 01 Jan 2014 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2014-abdelaziz-particle-swarm/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Particle Swarm Optimization (PSO) has received considerable attention as a global optimization technique from scientists of different disciplines around the world. In this article, we illustrate how to use PSO for inverse modeling of a coupled flow and transport groundwater model (MODFLOW2005–MT3DMS) in a fractured gneiss aquifer. In particular, the hydroPSO R package is used as optimization engine, because it has been specifically designed to calibrate environmental, hydrological and hydrogeological models. In addition, hydroPSO implements the latest Standard Particle Swarm Optimization algorithm (SPSO-2011), with an adaptive random topology and rotational invariance constituting the main advancements over previous PSO versions. A tracer test conducted in the experimental field at TU Bergakademie Freiberg (Germany) is used as case study. A double-porosity approach is used to simulate the solute transport in the fractured Gneiss aquifer. Tracer concentrations obtained with hydroPSO were in good agreement with its corresponding observations, as measured by a high value of the coefficient of determination and a low sum of squared residuals. Several graphical outputs automatically generated by hydroPSO provided useful insights to assess the quality of the calibration results. It was found that hydroPSO required a small number of model runs to reach the region of the global optimum, and it proved to be both an effective and efficient optimization technique to calibrate the movement of solute transport over time in a fractured aquifer. In addition, the parallel feature of hydroPSO allowed to reduce the total computation time used in the inverse modeling process up to an eighth of the total time required without using that feature. This work provides a first attempt to demonstrate the capability and versatility of hydroPSO to work as an optimizer of a coupled flow and transport model for contaminant migration.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Particle Swarm Optimization (PSO) has received considerable attention as a global optimization technique from scientists of different disciplines around the world. In this article, we illustrate how to use PSO for inverse modeling of a coupled flow and transport groundwater model (MODFLOW2005–MT3DMS) in a fractured gneiss aquifer. In particular, the hydroPSO R package is used as optimization engine, because it has been specifically designed to calibrate environmental, hydrological and hydrogeological models. In addition, hydroPSO implements the latest Standard Particle Swarm Optimization algorithm (SPSO-2011), with an adaptive random topology and rotational invariance constituting the main advancements over previous PSO versions. A tracer test conducted in the experimental field at TU Bergakademie Freiberg (Germany) is used as case study. A double-porosity approach is used to simulate the solute transport in the fractured Gneiss aquifer. Tracer concentrations obtained with hydroPSO were in good agreement with its corresponding observations, as measured by a high value of the coefficient of determination and a low sum of squared residuals. Several graphical outputs automatically generated by hydroPSO provided useful insights to assess the quality of the calibration results. It was found that hydroPSO required a small number of model runs to reach the region of the global optimum, and it proved to be both an effective and efficient optimization technique to calibrate the movement of solute transport over time in a fractured aquifer. In addition, the parallel feature of hydroPSO allowed to reduce the total computation time used in the inverse modeling process up to an eighth of the total time required without using that feature. This work provides a first attempt to demonstrate the capability and versatility of hydroPSO to work as an optimizer of a coupled flow and transport model for contaminant migration.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Abdelaziz, R. &amp; Zambrano-Bigiarini, M. (2014). Particle Swarm Optimization for inverse modeling of solute transport in fractured gneiss aquifer. &lt;i&gt;Journal of Contaminant Hydrology&lt;/i&gt;, &lt;i&gt;164&lt;/i&gt;, 285--298. &lt;a href=&#39;https://doi.org/10.1016/j.jconhyd.2014.06.003&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.jconhyd.2014.06.003&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>An example conference paper</title>
      <link>https://hzambran.github.io/publications/2026-conference-paper/</link>
      <pubDate>Mon, 01 Jul 2013 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2026-conference-paper/</guid>
      <description>


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Click the &lt;em&gt;Cite&lt;/em&gt; button above to demo the feature to enable visitors to import publication metadata into their reference management software.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Create your slides in Markdown - click the &lt;em&gt;Slides&lt;/em&gt; button to check out the example.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Add the publication&amp;rsquo;s &lt;strong&gt;full text&lt;/strong&gt; or &lt;strong&gt;supplementary notes&lt;/strong&gt; here. You can use rich formatting such as including 
.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>A model-independent Particle Swarm Optimisation software for model calibration</title>
      <link>https://hzambran.github.io/publications/2013-zambranobigiarini-a-modelindependent/</link>
      <pubDate>Tue, 01 Jan 2013 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2013-zambranobigiarini-a-modelindependent/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; This work presents and illustrates the application of hydroPSO, a novel multi-OS and model-independent R package used for model calibration. hydroPSO allows the modeller to perform a standard modelling work flow including, sensitivity analysis, parameter calibration, and assessment of the calibration results, using a single piece of software. hydroPSO implements several state-of-the-art enhancements and fine-tuning options to the Particle Swarm Optimisation (PSO) algorithm to meet specific user needs. hydroPSO easily interfaces the calibration engine to different model codes through simple ASCII files and/or R wrapper functions for exchanging information on the calibration parameters. Then, optimises a user-defined goodness-of-fit measure until a maximum number of iterations or a convergence criterion are met. Finally, advanced plotting functionalities facilitate the interpretation and assessment of the calibration results. The current hydroPSO version allows easy parallelization and works with single-objective functions, with multi-objective functionalities being the subject of ongoing development. We compare hydroPSO against standard algorithms (SCE_UA, DE, DREAM, SPSO-2011, and GML) using a series of benchmark functions. We further illustrate the application of hydroPSO in two real-world case studies: we calibrate, first, a hydrological model for the Ega River Basin (Spain) and, second, a groundwater flow model for the Pampa del Tamarugal Aquifer (Chile). Results from the comparison exercise indicate that hydroPSO is: i) effective and efficient compared to commonly used optimisation algorithms, ii) “scalable”, i.e. maintains a high performance for increased problem dimensionality, and iii) versatile to adapt to different response surfaces of the objective function. Case study results highlight the functionality and ease of use of hydroPSO to handle several issues that are commonly faced by the modelling community such as: working on different operating systems, single or batch model execution, transient- or steady-state modelling conditions, and the use of alternative goodness-of-fit measures to drive parameter optimisation. Although we limit the application of hydroPSO to hydrological models, flexibility of the package suggests it can be implemented in a wider range of models requiring some form of parameter optimisation.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; This work presents and illustrates the application of hydroPSO, a novel multi-OS and model-independent R package used for model calibration. hydroPSO allows the modeller to perform a standard modelling work flow including, sensitivity analysis, parameter calibration, and assessment of the calibration results, using a single piece of software. hydroPSO implements several state-of-the-art enhancements and fine-tuning options to the Particle Swarm Optimisation (PSO) algorithm to meet specific user needs. hydroPSO easily interfaces the calibration engine to different model codes through simple ASCII files and/or R wrapper functions for exchanging information on the calibration parameters. Then, optimises a user-defined goodness-of-fit measure until a maximum number of iterations or a convergence criterion are met. Finally, advanced plotting functionalities facilitate the interpretation and assessment of the calibration results. The current hydroPSO version allows easy parallelization and works with single-objective functions, with multi-objective functionalities being the subject of ongoing development. We compare hydroPSO against standard algorithms (SCE_UA, DE, DREAM, SPSO-2011, and GML) using a series of benchmark functions. We further illustrate the application of hydroPSO in two real-world case studies: we calibrate, first, a hydrological model for the Ega River Basin (Spain) and, second, a groundwater flow model for the Pampa del Tamarugal Aquifer (Chile). Results from the comparison exercise indicate that hydroPSO is: i) effective and efficient compared to commonly used optimisation algorithms, ii) “scalable”, i.e. maintains a high performance for increased problem dimensionality, and iii) versatile to adapt to different response surfaces of the objective function. Case study results highlight the functionality and ease of use of hydroPSO to handle several issues that are commonly faced by the modelling community such as: working on different operating systems, single or batch model execution, transient- or steady-state modelling conditions, and the use of alternative goodness-of-fit measures to drive parameter optimisation. Although we limit the application of hydroPSO to hydrological models, flexibility of the package suggests it can be implemented in a wider range of models requiring some form of parameter optimisation.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Zambrano-Bigiarini, M. &amp; Rojas, R. (2013). A model-independent Particle Swarm Optimisation software for model calibration. &lt;i&gt;Environmental Modelling &amp; Software&lt;/i&gt;, &lt;i&gt;43&lt;/i&gt;, 5--25. &lt;a href=&#39;https://doi.org/10.1016/j.envsoft.2013.01.004&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.envsoft.2013.01.004&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Hydrological evaluation of satellite-based rainfall estimates over the Volta and Baro-Akobo Basin</title>
      <link>https://hzambran.github.io/publications/2013-thiemig-hydrological-evaluation/</link>
      <pubDate>Tue, 01 Jan 2013 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2013-thiemig-hydrological-evaluation/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; How useful are satellite-based rainfall estimates (SRFE) as forcing data for hydrological applications? Which SRFE should be favoured for hydrological modelling? What could researchers do to increase the performance of SRFE-driven hydrological simulations? To address these three research questions, four SRFE (CMORPH, RFE 2.0, TRMM-3B42 and PERSIANN) and one re-analysis product (ERA-Interim) are evaluated within a hydrological application for the time period 2003–2008, over two river basins (Volta and Baro-Akobo) which hold distinct physiographic, climatologic and hydrologic conditions. The focus was on the assessment of: (a) the individual and combined effect of SRFE-specific calibration and bias correction on the hydrological performance, (b) the level of complexity required regarding bias correction and interpolation to achieve a good hydrological performance, and (c) the hydrological performance of SRFE during high- and low-flow conditions. Results show that (1) the hydrological performance is always higher if the model is calibrated to the respective SRFE rather than to interpolated ground observations; (2) for SRFE that are afflicted with bias, a bias-correction step prior to SRFE-specific calibration is essential, while for SRFE with good intrinsic data quality applying only a SRFE-specific model calibration is sufficient; (3) the more sophisticated bias-correction method used in this work (histogram equalization) results generally in a superior hydrological performance, while a more sophisticated spatial interpolation method (Kriging with External Drift) seems to be of added value only over mountainous regions; (4) the bias correction is not over-proportionally important over mountainous catchments, as it solely depends on where the SRFE show high biases (e.g. for PERSIANN and CMORPH over lowland areas); and (5) the hydrological performance during high-flow conditions is superior thus promoting the use of SRFE for applications focusing on the high-end flow spectrum. These results complement a preliminary &#34;ground truthing&#34; phase and provide insight on the usefulness of SRFE for hydrological modelling and under which conditions they can be used with a given level of reliability.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; How useful are satellite-based rainfall estimates (SRFE) as forcing data for hydrological applications? Which SRFE should be favoured for hydrological modelling? What could researchers do to increase the performance of SRFE-driven hydrological simulations? To address these three research questions, four SRFE (CMORPH, RFE 2.0, TRMM-3B42 and PERSIANN) and one re-analysis product (ERA-Interim) are evaluated within a hydrological application for the time period 2003–2008, over two river basins (Volta and Baro-Akobo) which hold distinct physiographic, climatologic and hydrologic conditions. The focus was on the assessment of: (a) the individual and combined effect of SRFE-specific calibration and bias correction on the hydrological performance, (b) the level of complexity required regarding bias correction and interpolation to achieve a good hydrological performance, and (c) the hydrological performance of SRFE during high- and low-flow conditions. Results show that (1) the hydrological performance is always higher if the model is calibrated to the respective SRFE rather than to interpolated ground observations; (2) for SRFE that are afflicted with bias, a bias-correction step prior to SRFE-specific calibration is essential, while for SRFE with good intrinsic data quality applying only a SRFE-specific model calibration is sufficient; (3) the more sophisticated bias-correction method used in this work (histogram equalization) results generally in a superior hydrological performance, while a more sophisticated spatial interpolation method (Kriging with External Drift) seems to be of added value only over mountainous regions; (4) the bias correction is not over-proportionally important over mountainous catchments, as it solely depends on where the SRFE show high biases (e.g. for PERSIANN and CMORPH over lowland areas); and (5) the hydrological performance during high-flow conditions is superior thus promoting the use of SRFE for applications focusing on the high-end flow spectrum. These results complement a preliminary &#34;ground truthing&#34; phase and provide insight on the usefulness of SRFE for hydrological modelling and under which conditions they can be used with a given level of reliability.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Thiemig, V., Rojas, R., Zambrano-Bigiarini, M., &amp; De Roo, A. (2013). Hydrological evaluation of satellite-based rainfall estimates over the Volta and Baro-Akobo Basin. &lt;i&gt;Journal of Hydrology&lt;/i&gt;, &lt;i&gt;499&lt;/i&gt;, 324--338. &lt;a href=&#39;https://doi.org/10.1016/j.jhydrol.2013.07.012&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1016/j.jhydrol.2013.07.012&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>Standard Particle Swarm Optimisation 2011 at CEC-2013: A baseline for future PSO improvements</title>
      <link>https://hzambran.github.io/publications/2013-zambranobigiarini-standard-particle/</link>
      <pubDate>Tue, 01 Jan 2013 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2013-zambranobigiarini-standard-particle/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; In this work we benchmark, for the first time, the latest Standard Particle Swarm Optimisation algorithm (SPSO-2011) against the 28 test functions designed for the Special Session on Real-Parameter Single Objective Optimisation at CEC-2013. SPSO-2011 is a major improvement over previous PSO versions, with an adaptive random topology and rotational invariance constituting the main advancements. Results showed an outstanding performance of SPSO-2011 for the family of unimodal and separable test functions, with a fast convergence to the global optimum, while good performance was observed for four rotated multimodal functions. Conversely, SPSO-2011 showed the weakest performance for all composition problems (i.e. highly complex functions specially designed for this competition) and certain multimodal test functions. In general, a fast convergence towards the region of the global optimum was achieved, requiring less than 10E+03 function evaluations. However, for most composition and multimodal functions SPSO-2011 showed a limited capability to “escape” from sub-optimal regions. Despite this limitation, a desirable feature of SPSO-2011 was its scalable behaviour, which observed up to 50-dimensional problems, i.e. keeping a similar performance across dimensions with no need for increasing the population size. Therefore, it seems advisable that future PSO improvements be focused on enhancing the algorithm&#39;s ability to solve non-separable and asymmetrical functions, with a large number of local minima and a second global minimum located far from the true optimum. This work is the first effort towards providing a baseline for a fair comparison of future PSO improvements.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; In this work we benchmark, for the first time, the latest Standard Particle Swarm Optimisation algorithm (SPSO-2011) against the 28 test functions designed for the Special Session on Real-Parameter Single Objective Optimisation at CEC-2013. SPSO-2011 is a major improvement over previous PSO versions, with an adaptive random topology and rotational invariance constituting the main advancements. Results showed an outstanding performance of SPSO-2011 for the family of unimodal and separable test functions, with a fast convergence to the global optimum, while good performance was observed for four rotated multimodal functions. Conversely, SPSO-2011 showed the weakest performance for all composition problems (i.e. highly complex functions specially designed for this competition) and certain multimodal test functions. In general, a fast convergence towards the region of the global optimum was achieved, requiring less than 10E+03 function evaluations. However, for most composition and multimodal functions SPSO-2011 showed a limited capability to “escape” from sub-optimal regions. Despite this limitation, a desirable feature of SPSO-2011 was its scalable behaviour, which observed up to 50-dimensional problems, i.e. keeping a similar performance across dimensions with no need for increasing the population size. Therefore, it seems advisable that future PSO improvements be focused on enhancing the algorithm&#39;s ability to solve non-separable and asymmetrical functions, with a large number of local minima and a second global minimum located far from the true optimum. This work is the first effort towards providing a baseline for a fair comparison of future PSO improvements.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Zambrano-Bigiarini, M., Clerc, M., &amp; Rojas, R. (2013). Standard Particle Swarm Optimisation 2011 at CEC-2013: A baseline for future PSO improvements. &lt;i&gt;2013 IEEE Congress on Evolutionary Computation&lt;/i&gt;, 2337--2344. &lt;a href=&#39;https://doi.org/10.1109/CEC.2013.6557848&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1109/CEC.2013.6557848&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>hydroPSO</title>
      <link>https://hzambran.github.io/rpackages/hydropso/</link>
      <pubDate>Fri, 13 Apr 2012 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/rpackages/hydropso/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h2 id=&#34;description&#34;&gt;Description&lt;/h2&gt;
&lt;p&gt;
 is an R package developed to provide a robust and flexible framework for the global optimisation and calibration of environmental and engineering models. It implements state-of-the-art variants of the &lt;strong&gt;Particle Swarm Optimisation (PSO)&lt;/strong&gt; algorithm, designed to efficiently explore complex parameter spaces commonly associated with non-linear, non-smooth, and computationally demanding models.&lt;/p&gt;
&lt;p&gt;The package was conceived with practical modelling workflows in mind. It is fully model-independent, allowing users to couple the optimisation engine with virtually any simulation model, whether implemented in R or executed externally, without requiring modifications to the model&amp;rsquo;s internal code. This architecture makes 
 particularly suitable for systematic calibration of hydrological and environmental models, where reproducibility, transparency, and flexibility are essential.&lt;/p&gt;
&lt;p&gt;To support rigorous model evaluation, 
 includes advanced diagnostic and sensitivity analysis capabilities, as well as comprehensive graphical summaries that facilitate interpretation of optimisation results. Its parallel computing support enables efficient use of multi-core machines and computing clusters, helping to reduce the computational burden associated with large-scale or high-resolution simulations.&lt;/p&gt;
&lt;p&gt;Widely used in research, teaching, and applied modelling, 
 provides a technically sound and operationally reliable optimisation environment. It is especially well suited for users who require a scalable, transparent, and methodologically robust tool to calibrate complex models and support evidence-based analysis in hydrology and related environmental sciences.&lt;/p&gt;
&lt;h2 id=&#34;reference&#34;&gt;Reference&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Zambrano-Bigiarini, M. and Rojas, R. (2013). 
, Environmental Modelling &amp;amp; Software, 43, 5-25, doi:10.1016/j.envsoft.2013.01.004.&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/rpackages/hydropso/hydroPSO-logo.jpg&#34;
    alt=&#34;hydroTSM R package.&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;R package.&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>Validation of Satellite-Based Precipitation Products over Sparsely Gauged African River Basins</title>
      <link>https://hzambran.github.io/publications/2012-thiemig-validation-of/</link>
      <pubDate>Sun, 01 Jan 2012 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/publications/2012-thiemig-validation-of/</guid>
      <description>&lt;style&gt;
  .article-metadata, .article-metadata span, .article-metadata a, .pub-info {
      font-size: 0.85rem !important; line-height: 1.2 !important; margin-bottom: 0px !important;
  }
  .manual-content {
      font-size: 0.95rem !important; line-height: 1.5; margin-top: 15px;
  }
  .manual-content strong { font-size: 0.95rem !important; color: #333; }
  .citation-block {
      background-color: #f8f9fa; padding: 10px; border-left: 3px solid #337ab7; margin-top: 15px; font-size: 0.9rem;
  }
  .media.author-card { margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 2px !important; padding-bottom: 2px !important; border: none !important; }
  .media.author-card .media-body { margin-top: 0 !important; margin-bottom: 0 !important; }
  .media.author-card h5 { margin-bottom: 0 !important; }
&lt;/style&gt;
&lt;div class=&#39;manual-content&#39;&gt;&lt;div id=&#39;short-summary&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-bottom: 15px;&#39;&gt;&lt;strong&gt;Short Summary:&lt;/strong&gt; Six satellite-based rainfall estimates (SRFE)—namely, Climate Prediction Center (CPC) morphing technique (CMORPH), the Rainfall Estimation Algorithm, version 2 (RFE2.0), Tropical Rainfall Measuring Mission (TRMM) 3B42, Goddard profiling algorithm, version 6 (GPROF 6.0), Precipitation Estimation from Remotely Sensed Information using Artificial Neural Networks (PERSIANN), Global Satellite Mapping of Precipitation moving vector with Kalman filter (GSMap MVK), and one reanalysis product [the interim ECMWF Re-Analysis (ERA-Interim)]—were validated against 205 rain gauge stations over four African river basins (Zambezi, Volta, Juba–Shabelle, and Baro–Akobo). Validation focused on rainfall characteristics relevant to hydrological applications, such as annual catchment totals, spatial distribution patterns, seasonality, number of rainy days per year, and timing and volume of heavy rainfall events. Validation was done at three spatially aggregated levels: point-to-pixel, subcatchment, and river basin for the period 2003–06. Performance of satellite-based rainfall estimation (SRFE) was assessed using standard statistical methods and visual inspection. SRFE showed 1) accuracy in reproducing precipitation on a monthly basis during the dry season, 2) an ability to replicate bimodal precipitation patterns, 3) superior performance over the tropical wet and dry zone than over semiarid or mountainous regions, 4) increasing uncertainty in the estimation of higher-end percentiles of daily precipitation, 5) low accuracy in detecting heavy rainfall events over semiarid areas, 6) general underestimation of heavy rainfall events, and 7) overestimation of number of rainy days in the tropics. In respect to SRFE performance, GPROF 6.0 and GSMaP-MKV were the least accurate, and RFE 2.0 and TRMM 3B42 were the most accurate. These results allow discrimination between the available products and the reduction of potential errors caused by selecting a product that is not suitable for particular morphoclimatic conditions. For hydrometeorological applications, results support the use of a performance-based merged product that combines the strength of multiple SRFEs.&lt;/div&gt;
&lt;div id=&#39;abstract&#39;&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Abstract:&lt;/strong&gt; Six satellite-based rainfall estimates (SRFE)—namely, Climate Prediction Center (CPC) morphing technique (CMORPH), the Rainfall Estimation Algorithm, version 2 (RFE2.0), Tropical Rainfall Measuring Mission (TRMM) 3B42, Goddard profiling algorithm, version 6 (GPROF 6.0), Precipitation Estimation from Remotely Sensed Information using Artificial Neural Networks (PERSIANN), Global Satellite Mapping of Precipitation moving vector with Kalman filter (GSMap MVK), and one reanalysis product [the interim ECMWF Re-Analysis (ERA-Interim)]—were validated against 205 rain gauge stations over four African river basins (Zambezi, Volta, Juba–Shabelle, and Baro–Akobo). Validation focused on rainfall characteristics relevant to hydrological applications, such as annual catchment totals, spatial distribution patterns, seasonality, number of rainy days per year, and timing and volume of heavy rainfall events. Validation was done at three spatially aggregated levels: point-to-pixel, subcatchment, and river basin for the period 2003–06. Performance of satellite-based rainfall estimation (SRFE) was assessed using standard statistical methods and visual inspection. SRFE showed 1) accuracy in reproducing precipitation on a monthly basis during the dry season, 2) an ability to replicate bimodal precipitation patterns, 3) superior performance over the tropical wet and dry zone than over semiarid or mountainous regions, 4) increasing uncertainty in the estimation of higher-end percentiles of daily precipitation, 5) low accuracy in detecting heavy rainfall events over semiarid areas, 6) general underestimation of heavy rainfall events, and 7) overestimation of number of rainy days in the tropics. In respect to SRFE performance, GPROF 6.0 and GSMaP-MKV were the least accurate, and RFE 2.0 and TRMM 3B42 were the most accurate. These results allow discrimination between the available products and the reduction of potential errors caused by selecting a product that is not suitable for particular morphoclimatic conditions. For hydrometeorological applications, results support the use of a performance-based merged product that combines the strength of multiple SRFEs.&lt;/div&gt;&lt;div id=&#39;citation&#39;&gt;&lt;/div&gt;
&lt;div style=&#39;margin-top: 15px;&#39;&gt;&lt;strong&gt;Citation:&lt;/strong&gt;&lt;br&gt;&lt;div class=&#39;citation-block&#39;&gt;Thiemig, V., Rojas, R., Zambrano-Bigiarini, M., Levizzani, V., &amp; De Roo, A. (2012). Validation of Satellite-Based Precipitation Products over Sparsely Gauged African River Basins. &lt;i&gt;Journal of Hydrometeorology&lt;/i&gt;, &lt;i&gt;13&lt;/i&gt;(6), 1760--1783. &lt;a href=&#39;https://doi.org/10.1175/JHM-D-12-032.1&#39; target=&#39;_blank&#39;&gt;https://doi.org/10.1175/JHM-D-12-032.1&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;script&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    function replacePublication(node) {
        if (node.nodeType === 3) { 
            var text = node.nodeValue;
            if (text.includes(&#39;Publication&#39;)) {
                var newText = text.replace(/Publication/g, &#39;Journal&#39;);
                node.nodeValue = newText;
            }
            if (text.trim() === &#39;In&#39;) { node.nodeValue = &#39;Journal&#39;; }
        }
    }
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var node;
    while(node = walker.nextNode()) { replacePublication(node); }
});
&lt;/script&gt;
</description>
    </item>
    
    <item>
      <title>hydroGOF</title>
      <link>https://hzambran.github.io/rpackages/hydrogof/</link>
      <pubDate>Mon, 11 Oct 2010 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/rpackages/hydrogof/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h2 id=&#34;description&#34;&gt;Description&lt;/h2&gt;
&lt;p&gt;
 is an R package developed to provide a rigorous and consistent framework for evaluating the performance of hydrological and environmental models. It implements a broad suite of widely used statistical and graphical goodness-of-fit metrics to compare simulatd values agains iits observed counterparts; such as the coefficient of determination (R²), Nash–Sutcliffe efficiency (NSE), Kling–Gupta efficiency (KGE), and percent bias (PBIAS); that support objective assessment of model behaviour during calibration, validation, and operational application.&lt;/p&gt;
&lt;p&gt;The package is designed with practical modelling workflows in mind. Its functions facilitate transparent comparison between observed and simulated time series, enable systematic performance diagnostics, and handle common data challenges such as missing values in a controlled and reproducible manner. By standardising the computation of performance indicators, 
 helps ensure that model evaluation remains methodologically consistent across studies and applications.&lt;/p&gt;
&lt;p&gt;
 is widely used in research, teaching, and professional practice, which makes it particularly suitable for users who require dependable, well-documented tools to quantify model accuracy and communicate results with clarity. It provides a technically robust foundation for evidence-based model development, benchmarking, and decision support in hydrology and related environmental sciences.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/rpackages/hydrogof/hydroGOF-logo.jpg&#34;
    alt=&#34;hydroGOF R package.&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;R package.&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>hydroTSM</title>
      <link>https://hzambran.github.io/rpackages/hydrotsm/</link>
      <pubDate>Mon, 11 Oct 2010 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/rpackages/hydrotsm/</guid>
      <description>&lt;style&gt;
  /* 1. Target the main article container broadly */
  body .page-body, 
  body .universal-wrapper, 
  article.article {
      font-size: 1rem !important; /* Forces base size to 16px */
  }

  /* 2. Target paragraphs and lists specifically with !important */
  .article-style p, 
  .article-container p, 
  article p,
  .project-content p {
      font-size: 1rem !important; 
      line-height: 1.6 !important;
  }

  /* 3. Target list items */
  .article-style li, 
  .article-container li, 
  article li {
      font-size: 1rem !important;
  }
&lt;/style&gt;
&lt;h2 id=&#34;description&#34;&gt;Description&lt;/h2&gt;
&lt;p&gt;
 is an R package designed to support the practical workflow of hydrologists and environmental scientists who routinely work with time series data. It provides a comprehensive and coherent set of tools for the management, quality control, analysis, interpolation, and visualization of hydrological and environmental time series, with particular emphasis on tasks commonly encountered in hydrological modelling and water resources assessment.&lt;/p&gt;
&lt;p&gt;
 prioritises reliability, transparency, and functional breadth, reflecting the operational realities of applied hydrology, where reproducible data handling and robust diagnostics are often more critical than marginal computational gains. Its functions are built to integrate naturally into analytical pipelines, facilitating consistent preprocessing and exploration of observational datasets prior to modelling or decision-making.&lt;/p&gt;
&lt;p&gt;Developed with the daily needs of practitioners in mind, 
 has been widely used in research, teaching, and professional applications. It is especially suitable for users who require dependable, well-documented tools to support routine hydrological analysis while maintaining full control over data processing steps within the R environment.&lt;/p&gt;
&lt;!-- Fotos --&gt;
&lt;figure&gt;&lt;img src=&#34;https://hzambran.github.io/rpackages/hydrotsm/hydroTSM-logo.jpg&#34;
    alt=&#34;hydroTSM R package.&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;R package.&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

</description>
    </item>
    
    <item>
      <title>🎉 Easily create your own simple yet highly customizable blog</title>
      <link>https://hzambran.github.io/blog/example_folders/get-started/</link>
      <pubDate>Sat, 27 Oct 1900 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/example_folders/get-started/</guid>
      <description>&lt;p&gt;Welcome 👋&lt;/p&gt;



&lt;details class=&#34;print:hidden xl:hidden&#34; open&gt;
  &lt;summary&gt;Table of Contents&lt;/summary&gt;
  &lt;div class=&#34;text-sm&#34;&gt;
  &lt;nav id=&#34;TableOfContents&#34;&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&#34;#overview&#34;&gt;Overview&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&#34;#get-started&#34;&gt;Get Started&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#crowd-funded-open-source-software&#34;&gt;Crowd-funded open-source software&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&#34;#-click-here-to-become-a-sponsor-and-help-support-hugo-blox&#34;&gt;❤️ Click here to become a sponsor and help support Hugo Blox’s future ❤️&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#ecosystem&#34;&gt;Ecosystem&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#inspiration&#34;&gt;Inspiration&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#features&#34;&gt;Features&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#themes&#34;&gt;Themes&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#license&#34;&gt;License&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
  &lt;/div&gt;
&lt;/details&gt;

&lt;h2 id=&#34;overview&#34;&gt;Overview&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site&lt;/li&gt;
&lt;li&gt;The template can be modified and customised to suit your needs. It&amp;rsquo;s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a &lt;strong&gt;no-code solution (write in Markdown and customize with YAML parameters)&lt;/strong&gt; and having &lt;strong&gt;flexibility to later add even deeper personalization with HTML and CSS&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id=&#34;get-started&#34;&gt;Get Started&lt;/h3&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500&#34; 
     data-callout=&#34;tip&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Quick Start Guide&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;New to Hugo Blox? Follow these steps to get your site up and running in minutes!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;👉 
&lt;/li&gt;
&lt;li&gt;📚 
&lt;/li&gt;
&lt;li&gt;💬 
 or 
&lt;/li&gt;
&lt;li&gt;🐦 Twitter: 
 
 #MadeWithHugoBlox&lt;/li&gt;
&lt;li&gt;💡 
&lt;/li&gt;
&lt;li&gt;⬆️ &lt;strong&gt;Updating Hugo Blox?&lt;/strong&gt; View the 
 and 
&lt;/li&gt;
&lt;/ul&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;important&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Important&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Remember to backup your site before making major updates!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h2 id=&#34;crowd-funded-open-source-software&#34;&gt;Crowd-funded open-source software&lt;/h2&gt;
&lt;p&gt;To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.&lt;/p&gt;
&lt;h3 id=&#34;-click-here-to-become-a-sponsor-and-help-support-hugo-blox&#34;&gt;
&lt;/h3&gt;
&lt;p&gt;As a token of appreciation for sponsoring, you can &lt;strong&gt;unlock 
 awesome rewards and extra features 🦄✨&lt;/strong&gt;&lt;/p&gt;
&lt;h2 id=&#34;ecosystem&#34;&gt;Ecosystem&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;
:&lt;/strong&gt; Automatically import publications from BibTeX&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;inspiration&#34;&gt;Inspiration&lt;/h2&gt;
&lt;p&gt;
 are building with this template.&lt;/p&gt;
&lt;h2 id=&#34;features&#34;&gt;Features&lt;/h2&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Enhanced Markdown Support&lt;br&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Hugo Blox now supports GitHub and Obsidian-style callouts! Use standard Markdown alert syntax like &lt;code&gt;&amp;gt; [!NOTE]&lt;/code&gt; for better portability.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Page builder&lt;/strong&gt; - Create &lt;em&gt;anything&lt;/em&gt; with no-code 
 and 
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Edit any type of content&lt;/strong&gt; - Blog posts, publications, talks, slides, projects, and more!&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Create content&lt;/strong&gt; in 
, 
, or 
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Plugin System&lt;/strong&gt; - Fully customizable 
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Display Code and Math&lt;/strong&gt; - Code syntax highlighting and LaTeX math supported&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Integrations&lt;/strong&gt; - 
, 
, Maps, Contact Forms, and more!&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Beautiful Site&lt;/strong&gt; - Simple and refreshing one-page design&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Industry-Leading SEO&lt;/strong&gt; - Help get your website found on search engines and social media&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Media Galleries&lt;/strong&gt; - Display your images and videos with captions in a customizable gallery&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Mobile Friendly&lt;/strong&gt; - Look amazing on every screen with a mobile friendly version of your site&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Multi-language&lt;/strong&gt; - 35+ language packs including English, 中文, and Português&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Multi-user&lt;/strong&gt; - Each author gets their own profile page&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Privacy Pack&lt;/strong&gt; - Assists with GDPR&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Stand Out&lt;/strong&gt; - Bring your site to life with animation, parallax backgrounds, and scroll effects&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;One-Click Deployment&lt;/strong&gt; - No servers. No databases. Only files.&lt;/li&gt;
&lt;/ul&gt;



  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500&#34; 
     data-callout=&#34;warning&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Version Requirements&lt;br&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;The new Markdown alert syntax requires Hugo v0.132.0 or later. Make sure you&amp;rsquo;re using a compatible version!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h2 id=&#34;themes&#34;&gt;Themes&lt;/h2&gt;
&lt;p&gt;Hugo Blox and its templates come with &lt;strong&gt;automatic day (light) and night (dark) mode&lt;/strong&gt; built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.&lt;/p&gt;
&lt;p&gt;
 for your site. Themes are fully customizable.&lt;/p&gt;
&lt;h2 id=&#34;license&#34;&gt;License&lt;/h2&gt;
&lt;p&gt;Copyright 2016-present 
.&lt;/p&gt;
&lt;p&gt;Released under the 
 license.&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>🧠 Sharpen your thinking with a second brain</title>
      <link>https://hzambran.github.io/blog/example_folders/second-brain/</link>
      <pubDate>Fri, 26 Oct 1900 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/example_folders/second-brain/</guid>
      <description>&lt;p&gt;Create a personal knowledge base and share your knowledge with your peers.&lt;/p&gt;
&lt;p&gt;Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.&lt;/p&gt;
&lt;p&gt;Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.&lt;/p&gt;
&lt;p&gt;Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.&lt;/p&gt;
&lt;h2 id=&#34;mindmaps&#34;&gt;Mindmaps&lt;/h2&gt;
&lt;p&gt;Hugo Blox supports a Markdown extension for mindmaps.&lt;/p&gt;
&lt;p&gt;With this open format, can even edit your mindmaps in other popular tools such as Obsidian.&lt;/p&gt;
&lt;p&gt;Simply insert a Markdown code block labelled as &lt;code&gt;markmap&lt;/code&gt; and optionally set the height of the mindmap as shown in the example below.&lt;/p&gt;
&lt;p&gt;Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code&gt;markmap&lt;/code&gt; code block, indenting each item to create as many sub-levels as you need:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;
&lt;code&gt;
```markmap {height=&#34;200px&#34;}
- Hugo Modules
  - Hugo Blox
  - netlify
  - netlify-cms
  - slides
```
&lt;/code&gt;
&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;markmap&#34; style=&#34;height: 200px;&#34;&gt;

&lt;pre&gt;- Hugo Modules
  - Hugo Blox
  - netlify
  - netlify-cms
  - slides&lt;/pre&gt;
&lt;/div&gt;

&lt;p&gt;Anh here&amp;rsquo;s a more advanced mindmap with formatting, code blocks, and math:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;
&lt;code&gt;
```markmap
- Mindmaps
  - Links
    - [Hugo Blox Docs](https://docs.hugoblox.com/)
    - [Discord Community](https://discord.gg/z8wNYzb)
    - [GitHub](https://github.com/HugoBlox/kit)
  - Features
    - Markdown formatting
    - **inline** ~~text~~ *styles*
    - multiline
      text
    - `inline code`
    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
&lt;/code&gt;
&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;markmap&#34; style=&#34;height: 500px;&#34;&gt;

&lt;pre&gt;- Mindmaps
  - Links
    - [Hugo Blox Docs](https://docs.hugoblox.com/)
    - [Discord Community](https://discord.gg/z8wNYzb)
    - [GitHub](https://github.com/HugoBlox/kit)
  - Features
    - Markdown formatting
    - **inline** ~~text~~ *styles*
    - multiline
      text
    - `inline code`
    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&#34;highlighting&#34;&gt;Highlighting&lt;/h2&gt;
&lt;p&gt;&lt;mark&gt;Highlight&lt;/mark&gt; important text with &lt;code&gt;mark&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;mark&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;Highlighted text&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;mark&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;callouts&#34;&gt;Callouts&lt;/h2&gt;
&lt;p&gt;Use 
 (aka &lt;em&gt;asides&lt;/em&gt;, &lt;em&gt;hints&lt;/em&gt;, or &lt;em&gt;alerts&lt;/em&gt;) to draw attention to notes, tips, and warnings.&lt;/p&gt;
&lt;p&gt;Use the &lt;code&gt;&amp;gt; [!NOTE]&lt;/code&gt; syntax to create a callout.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!NOTE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Or use the &lt;code&gt;warning&lt;/code&gt; callout type so your readers don&amp;rsquo;t miss critical details:&lt;/p&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500&#34; 
     data-callout=&#34;warning&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Warning&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h2 id=&#34;did-you-find-this-page-helpful-consider-sharing-it-&#34;&gt;Did you find this page helpful? Consider sharing it 🙌&lt;/h2&gt;
</description>
    </item>
    
    <item>
      <title>📈 Communicate your results effectively with the best data visualizations</title>
      <link>https://hzambran.github.io/blog/example_folders/data-visualization/</link>
      <pubDate>Thu, 25 Oct 1900 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/example_folders/data-visualization/</guid>
      <description>&lt;p&gt;Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.&lt;/p&gt;
&lt;p&gt;Use popular tools such as Plotly, Mermaid, and data frames.&lt;/p&gt;
&lt;h2 id=&#34;embed-rich-content&#34;&gt;Embed Rich Content&lt;/h2&gt;
&lt;p&gt;HuggingFace Model&lt;/p&gt;




&lt;div class=&#34;group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6&#34; role=&#34;article&#34; aria-labelledby=&#34;hb-embed-title-hb-embed-e5ccfc1560172920546ae1b17ec5a957&#34;&gt;
  
    
    &lt;div class=&#34;flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800&#34;&gt;
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;div class=&#34;w-10 h-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center&#34;&gt;
    &lt;svg class=&#34;w-6 h-6 text-white&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 475 439&#34;&gt;&lt;path d=&#34;M235.793 396.126a187.281 187.281 0 00187.285-187.284A187.283 187.283 0 00235.793 21.558 187.287 187.287 0 0048.509 208.842a187.286 187.286 0 00187.284 187.284z&#34; fill=&#34;#FFD21E&#34;/&gt;&lt;path d=&#34;M423.078 208.842A187.283 187.283 0 00235.793 21.558 187.283 187.283 0 0048.509 208.842a187.283 187.283 0 00319.714 132.43 187.284 187.284 0 0054.855-132.43zm-396.127 0a208.842 208.842 0 11417.685 0 208.842 208.842 0 01-417.685 0z&#34; fill=&#34;#FF9D0B&#34;/&gt;&lt;path d=&#34;M296.641 157.912c6.898 2.371 9.593 16.491 16.545 12.827a26.946 26.946 0 008.24-40.841 26.952 26.952 0 00-28.632-8.767 26.942 26.942 0 00-19.055 23.099 26.943 26.943 0 003.014 15.352c3.288 6.198 13.744-3.88 19.941-1.724l-.053.054zm-126.923 0c-6.898 2.371-9.647 16.491-16.545 12.827a26.946 26.946 0 01-8.24-40.841 26.952 26.952 0 0128.632-8.767 26.944 26.944 0 0116.041 38.451c-3.288 6.198-13.797-3.88-19.941-1.724l.053.054z&#34; fill=&#34;#3A3B45&#34;/&gt;&lt;path d=&#34;M234.446 287.205c52.979 0 70.063-47.212 70.063-71.464 0-12.612-8.461-8.624-22.043-1.941-12.557 6.198-29.426 14.768-47.966 14.768-38.75 0-70.063-37.08-70.063-12.827 0 24.252 17.031 71.464 70.063 71.464h-.054z&#34; fill=&#34;#FF323D&#34;/&gt;&lt;/svg&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-1 min-w-0&#34;&gt;
        &lt;h3 id=&#34;hb-embed-title-hb-embed-e5ccfc1560172920546ae1b17ec5a957&#34; class=&#34;text-xl font-bold tracking-tight leading-tight truncate&#34;&gt;
  &lt;a href=&#34;https://huggingface.co/google/embeddinggemma-300m&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;google/embeddinggemma-300m&lt;/a&gt;
&lt;/h3&gt;

&lt;div class=&#34;flex items-center gap-2 mt-1&#34;&gt;
  &lt;span class=&#34;inline-block w-2 h-2 rounded-full bg-secondary-500&#34;&gt;&lt;/span&gt;
      &lt;span class=&#34;text-sm text-zinc-600 dark:text-zinc-400 capitalize&#34;&gt;
        sentence-similarity
      &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;a href=&#34;https://huggingface.co/google/embeddinggemma-300m&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-400 hover:text-primary-500 transition-colors duration-200&#34;&gt;
          &lt;svg class=&#34;w-5 h-5 hb-embed-link&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;p-6 space-y-4&#34;&gt;
      &lt;div class=&#34;flex items-center gap-6 pt-2&#34;&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-primary-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3&#34;/&gt;&lt;/svg&gt;&lt;span id=&#34;hb-hb-embed-e5ccfc1560172920546ae1b17ec5a957-downloads&#34;&gt;1.359748M&lt;/span&gt;&lt;/div&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-secondary-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M21 8.25c0-2.485-2.099-4.5-4.687-4.5c-1.936 0-3.598 1.126-4.313 2.733c-.715-1.607-2.377-2.733-4.312-2.733C5.098 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12&#34;/&gt;&lt;/svg&gt;&lt;span id=&#34;hb-hb-embed-e5ccfc1560172920546ae1b17ec5a957-likes&#34;&gt;1.465k&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300&#34;&gt;&lt;/div&gt;
    
    
    &lt;div class=&#34;sr-only&#34; data-hb-component=&#34;embed&#34; data-hb-version=&#34;1.0&#34; data-hb-license=&#34;MIT&#34;&gt;
      Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit
    &lt;/div&gt;
    
&lt;/div&gt;
&lt;p&gt;HuggingFace Dataset&lt;/p&gt;




&lt;div class=&#34;group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6&#34; role=&#34;article&#34; aria-labelledby=&#34;hb-embed-title-hb-embed-8544dcc421870ef668f5f015af8fe3fc&#34;&gt;
  
    
    &lt;div class=&#34;flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800&#34;&gt;
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;div class=&#34;w-10 h-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center&#34;&gt;
    &lt;svg class=&#34;w-6 h-6 text-white&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 475 439&#34;&gt;&lt;path d=&#34;M235.793 396.126a187.281 187.281 0 00187.285-187.284A187.283 187.283 0 00235.793 21.558 187.287 187.287 0 0048.509 208.842a187.286 187.286 0 00187.284 187.284z&#34; fill=&#34;#FFD21E&#34;/&gt;&lt;path d=&#34;M423.078 208.842A187.283 187.283 0 00235.793 21.558 187.283 187.283 0 0048.509 208.842a187.283 187.283 0 00319.714 132.43 187.284 187.284 0 0054.855-132.43zm-396.127 0a208.842 208.842 0 11417.685 0 208.842 208.842 0 01-417.685 0z&#34; fill=&#34;#FF9D0B&#34;/&gt;&lt;path d=&#34;M296.641 157.912c6.898 2.371 9.593 16.491 16.545 12.827a26.946 26.946 0 008.24-40.841 26.952 26.952 0 00-28.632-8.767 26.942 26.942 0 00-19.055 23.099 26.943 26.943 0 003.014 15.352c3.288 6.198 13.744-3.88 19.941-1.724l-.053.054zm-126.923 0c-6.898 2.371-9.647 16.491-16.545 12.827a26.946 26.946 0 01-8.24-40.841 26.952 26.952 0 0128.632-8.767 26.944 26.944 0 0116.041 38.451c-3.288 6.198-13.797-3.88-19.941-1.724l.053.054z&#34; fill=&#34;#3A3B45&#34;/&gt;&lt;path d=&#34;M234.446 287.205c52.979 0 70.063-47.212 70.063-71.464 0-12.612-8.461-8.624-22.043-1.941-12.557 6.198-29.426 14.768-47.966 14.768-38.75 0-70.063-37.08-70.063-12.827 0 24.252 17.031 71.464 70.063 71.464h-.054z&#34; fill=&#34;#FF323D&#34;/&gt;&lt;/svg&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-1 min-w-0&#34;&gt;
        &lt;h3 id=&#34;hb-embed-title-hb-embed-8544dcc421870ef668f5f015af8fe3fc&#34; class=&#34;text-xl font-bold tracking-tight leading-tight truncate&#34;&gt;
  &lt;a href=&#34;https://huggingface.co/datasets/fka/awesome-chatgpt-prompts&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;fka/prompts.chat&lt;/a&gt;
&lt;/h3&gt;

&lt;div class=&#34;flex items-center gap-2 mt-1&#34;&gt;
  &lt;span class=&#34;inline-block w-2 h-2 rounded-full bg-primary-500&#34;&gt;&lt;/span&gt;
      &lt;span class=&#34;text-sm text-zinc-600 dark:text-zinc-400 capitalize&#34;&gt;
        dataset
      &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;a href=&#34;https://huggingface.co/datasets/fka/awesome-chatgpt-prompts&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-400 hover:text-primary-500 transition-colors duration-200&#34;&gt;
          &lt;svg class=&#34;w-5 h-5 hb-embed-link&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;p-6 space-y-4&#34;&gt;
      &lt;p class=&#34;text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3&#34;&gt;
    
  
  
  a.k.a. Awesome ChatGPT Prompts


This is a Dataset Repository mirror of prompts.chat — a social platform for AI prompts.

	
		
		📢 Notice
	

This Hugging Face dataset is a mirror. For the …
  &lt;/p&gt;&lt;div class=&#34;flex items-center gap-6 pt-2&#34;&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-primary-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3&#34;/&gt;&lt;/svg&gt;&lt;span id=&#34;hb-hb-embed-8544dcc421870ef668f5f015af8fe3fc-downloads&#34;&gt;17.445k&lt;/span&gt;&lt;/div&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-secondary-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M21 8.25c0-2.485-2.099-4.5-4.687-4.5c-1.936 0-3.598 1.126-4.313 2.733c-.715-1.607-2.377-2.733-4.312-2.733C5.098 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12&#34;/&gt;&lt;/svg&gt;&lt;span id=&#34;hb-hb-embed-8544dcc421870ef668f5f015af8fe3fc-likes&#34;&gt;9.586k&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300&#34;&gt;&lt;/div&gt;
    
    
    &lt;div class=&#34;sr-only&#34; data-hb-component=&#34;embed&#34; data-hb-version=&#34;1.0&#34; data-hb-license=&#34;MIT&#34;&gt;
      Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit
    &lt;/div&gt;
    
&lt;/div&gt;
&lt;p&gt;GitHub Repository&lt;/p&gt;




&lt;div class=&#34;group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6&#34; role=&#34;article&#34; aria-labelledby=&#34;hb-embed-title-hb-embed-726d4e68707b8e5ee1c83b840fe37c06&#34;&gt;
  
    
    &lt;div class=&#34;flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800&#34;&gt;
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;div class=&#34;w-10 h-10 rounded-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center&#34;&gt;
    &lt;svg class=&#34;w-6 h-6 text-white&#34; fill=&#34;currentColor&#34; viewBox=&#34;3 3 18 18&#34;&gt;&lt;path d=&#34;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&#34;&gt;&lt;/path&gt;&lt;/svg&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-1 min-w-0&#34;&gt;
        &lt;h3 id=&#34;hb-embed-title-hb-embed-726d4e68707b8e5ee1c83b840fe37c06&#34; class=&#34;text-xl font-bold tracking-tight leading-tight truncate&#34;&gt;
  &lt;a href=&#34;https://github.com/HugoBlox/kit&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;kit&lt;/a&gt;
&lt;/h3&gt;

&lt;div class=&#34;flex items-center gap-2 mt-1&#34;&gt;
  &lt;span class=&#34;text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;by 
        &lt;a href=&#34;https://github.com/HugoBlox&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;HugoBlox&lt;/a&gt;
      &lt;/span&gt;&lt;span class=&#34;text-sm text-zinc-500 dark:text-zinc-500&#34;&gt;•&lt;/span&gt;
        &lt;span class=&#34;inline-block w-2 h-2 rounded-full bg-primary-500&#34;&gt;&lt;/span&gt;
        &lt;span class=&#34;text-sm text-zinc-500 dark:text-zinc-500 capitalize&#34;&gt;HTML&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;a href=&#34;https://github.com/HugoBlox/kit&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-400 hover:text-primary-500 transition-colors duration-200&#34;&gt;
          &lt;svg class=&#34;w-5 h-5 hb-embed-link&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;p-6 space-y-4&#34;&gt;
      &lt;p class=&#34;text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3&#34;&gt;
    ⚡ The Open Research Copilot. Build high-perf Portfolios, Lab Sites &amp;amp; Docs in Markdown + Jupyter. 100% Data Control. 🦫 数据科学家的开源 Copilot。一键部署 👇
  &lt;/p&gt;&lt;div class=&#34;flex items-center gap-6 pt-2&#34;&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;span class=&#34;flex items-center justify-center leading-none text-lg text-primary-500&#34;&gt;git-fork&lt;/span&gt;&lt;span id=&#34;hb-hb-embed-726d4e68707b8e5ee1c83b840fe37c06-forks&#34;&gt;2.951k&lt;/span&gt;&lt;/div&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-red-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
            &lt;a href=&#34;https://github.com/HugoBlox/kit/issues&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34; id=&#34;hb-hb-embed-726d4e68707b8e5ee1c83b840fe37c06-issues&#34;&gt;1&lt;/a&gt;&lt;/div&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-yellow-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.563.563 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.563.563 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345z&#34;/&gt;&lt;/svg&gt;&lt;span id=&#34;hb-hb-embed-726d4e68707b8e5ee1c83b840fe37c06-stars&#34;&gt;10.024k&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;flex flex-wrap gap-1 pt-2&#34;&gt;&lt;span class=&#34;inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300&#34;&gt;
          academic
        &lt;/span&gt;&lt;span class=&#34;inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300&#34;&gt;
          blog
        &lt;/span&gt;&lt;span class=&#34;inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300&#34;&gt;
          blog-engine
        &lt;/span&gt;&lt;span class=&#34;text-xs text-zinc-500 dark:text-zinc-500&#34;&gt;+17&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300&#34;&gt;&lt;/div&gt;
    
    
    &lt;div class=&#34;sr-only&#34; data-hb-component=&#34;embed&#34; data-hb-version=&#34;1.0&#34; data-hb-license=&#34;MIT&#34;&gt;
      Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit
    &lt;/div&gt;
    
&lt;/div&gt;
&lt;p&gt;Custom embed with manual data&lt;/p&gt;




&lt;div class=&#34;group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6&#34; role=&#34;article&#34; aria-labelledby=&#34;hb-embed-title-hb-embed-5e74d8c122c5919f1a2a478d0ff05a97&#34;&gt;
  
    
    &lt;div class=&#34;flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800&#34;&gt;
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        
  &lt;div class=&#34;w-10 h-10 rounded-full bg-gradient-to-br from-zinc-700 to-zinc-800 flex items-center justify-center&#34;&gt;
    &lt;svg class=&#34;w-5 h-5 text-white&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418&#34;/&gt;&lt;/svg&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-1 min-w-0&#34;&gt;
        &lt;h3 id=&#34;hb-embed-title-hb-embed-5e74d8c122c5919f1a2a478d0ff05a97&#34; class=&#34;text-xl font-bold tracking-tight leading-tight truncate&#34;&gt;
  &lt;a href=&#34;https://example.com&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;My Custom Resource&lt;/a&gt;
&lt;/h3&gt;

&lt;div class=&#34;flex items-center gap-2 mt-1&#34;&gt;
  &lt;span class=&#34;text-sm text-zinc-500 dark:text-zinc-500&#34;&gt;example.com&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;a href=&#34;https://example.com&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-400 hover:text-primary-500 transition-colors duration-200&#34;&gt;
          &lt;svg class=&#34;w-5 h-5 hb-embed-link&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;p-6 space-y-4&#34;&gt;
      &lt;p class=&#34;text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3&#34;&gt;
    A great resource for learning
  &lt;/p&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300&#34;&gt;&lt;/div&gt;
    
    
    &lt;div class=&#34;sr-only&#34; data-hb-component=&#34;embed&#34; data-hb-version=&#34;1.0&#34; data-hb-license=&#34;MIT&#34;&gt;
      Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit
    &lt;/div&gt;
    
&lt;/div&gt;
&lt;h3 id=&#34;custom-images&#34;&gt;Custom Images&lt;/h3&gt;
&lt;p&gt;Embed beautiful images from any source with Hugo image processing (Unsplash, custom URLs, etc.):&lt;/p&gt;




&lt;div class=&#34;group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6&#34; role=&#34;article&#34; aria-labelledby=&#34;hb-embed-title-hb-embed-db6db8d37e7e443968db5707489820cb&#34;&gt;
  
    
    &lt;div class=&#34;flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800&#34;&gt;
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        
  &lt;div class=&#34;w-10 h-10 rounded-full bg-gradient-to-br from-zinc-700 to-zinc-800 flex items-center justify-center&#34;&gt;
    &lt;svg class=&#34;w-5 h-5 text-white&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418&#34;/&gt;&lt;/svg&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-1 min-w-0&#34;&gt;
        &lt;h3 id=&#34;hb-embed-title-hb-embed-db6db8d37e7e443968db5707489820cb&#34; class=&#34;text-xl font-bold tracking-tight leading-tight truncate&#34;&gt;
  &lt;a href=&#34;https://example.com&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;Data Visualization Guide&lt;/a&gt;
&lt;/h3&gt;

&lt;div class=&#34;flex items-center gap-2 mt-1&#34;&gt;
  &lt;span class=&#34;text-sm text-zinc-500 dark:text-zinc-500&#34;&gt;example.com&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;a href=&#34;https://example.com&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-400 hover:text-primary-500 transition-colors duration-200&#34;&gt;
          &lt;svg class=&#34;w-5 h-5 hb-embed-link&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;p-6 space-y-4&#34;&gt;
      &lt;div class=&#34;mb-4 overflow-hidden rounded-lg&#34;&gt;
    &lt;img class=&#34;w-full h-auto transition-transform duration-500 ease-out group-hover:scale-105&#34; 
         srcset=&#34;https://hzambran.github.io/photo-1514888286974-6c03e2ca1dba_18145305924448453957_hu_219bdd97b63ad80c.webp 400w, https://hzambran.github.io/photo-1514888286974-6c03e2ca1dba_18145305924448453957_hu_2b9219625df66689.webp 600w, https://hzambran.github.io/photo-1514888286974-6c03e2ca1dba_18145305924448453957_hu_f768b3ade4e0bafb.webp 800w, https://hzambran.github.io/photo-1514888286974-6c03e2ca1dba_18145305924448453957_hu_943bd725d39b28c5.webp 800w&#34;
         sizes=&#34;(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw&#34;
         src=&#34;https://hzambran.github.io/photo-1514888286974-6c03e2ca1dba_18145305924448453957_hu_219bdd97b63ad80c.webp&#34; 
         width=&#34;400&#34; 
         height=&#34;300&#34;
         loading=&#34;lazy&#34; 
         decoding=&#34;async&#34;
         alt=&#34;Beautiful data visualization workspace&#34;
         style=&#34;aspect-ratio: 400/300;&#34;&gt;
  &lt;/div&gt;&lt;p class=&#34;text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3&#34;&gt;
    Beautiful data visualization workspace
  &lt;/p&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300&#34;&gt;&lt;/div&gt;
    
    
    &lt;div class=&#34;sr-only&#34; data-hb-component=&#34;embed&#34; data-hb-version=&#34;1.0&#34; data-hb-license=&#34;MIT&#34;&gt;
      Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit
    &lt;/div&gt;
    
&lt;/div&gt;
&lt;p&gt;You can also add images to any platform embed:&lt;/p&gt;




&lt;div class=&#34;group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6&#34; role=&#34;article&#34; aria-labelledby=&#34;hb-embed-title-hb-embed-0809b6663bc83d638979b4ef2d60513d&#34;&gt;
  
    
    &lt;div class=&#34;flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800&#34;&gt;
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;div class=&#34;w-10 h-10 rounded-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center&#34;&gt;
    &lt;svg class=&#34;w-6 h-6 text-white&#34; fill=&#34;currentColor&#34; viewBox=&#34;3 3 18 18&#34;&gt;&lt;path d=&#34;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&#34;&gt;&lt;/path&gt;&lt;/svg&gt;
  &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-1 min-w-0&#34;&gt;
        &lt;h3 id=&#34;hb-embed-title-hb-embed-0809b6663bc83d638979b4ef2d60513d&#34; class=&#34;text-xl font-bold tracking-tight leading-tight truncate&#34;&gt;
  &lt;a href=&#34;https://github.com/plotly/plotly.py&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;plotly.py&lt;/a&gt;
&lt;/h3&gt;

&lt;div class=&#34;flex items-center gap-2 mt-1&#34;&gt;
  &lt;span class=&#34;text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;by 
        &lt;a href=&#34;https://github.com/plotly&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34;&gt;plotly&lt;/a&gt;
      &lt;/span&gt;&lt;span class=&#34;text-sm text-zinc-500 dark:text-zinc-500&#34;&gt;•&lt;/span&gt;
        &lt;span class=&#34;inline-block w-2 h-2 rounded-full bg-primary-500&#34;&gt;&lt;/span&gt;
        &lt;span class=&#34;text-sm text-zinc-500 dark:text-zinc-500 capitalize&#34;&gt;Python&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class=&#34;flex-shrink-0&#34;&gt;
        &lt;a href=&#34;https://github.com/plotly/plotly.py&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;text-zinc-400 hover:text-primary-500 transition-colors duration-200&#34;&gt;
          &lt;svg class=&#34;w-5 h-5 hb-embed-link&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;p-6 space-y-4&#34;&gt;
      &lt;div class=&#34;mb-4 overflow-hidden rounded-lg&#34;&gt;
    &lt;img class=&#34;w-full h-auto transition-transform duration-500 ease-out group-hover:scale-105&#34; 
         srcset=&#34;https://hzambran.github.io/photo-1551288049-bebda4e38f71_10164962980614054447_hu_18fa46f58e1ef5f5.webp 400w, https://hzambran.github.io/photo-1551288049-bebda4e38f71_10164962980614054447_hu_920ba61058f3c5cc.webp 600w, https://hzambran.github.io/photo-1551288049-bebda4e38f71_10164962980614054447_hu_de34421e7136549f.webp 600w&#34;
         sizes=&#34;(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw&#34;
         src=&#34;https://hzambran.github.io/photo-1551288049-bebda4e38f71_10164962980614054447_hu_18fa46f58e1ef5f5.webp&#34; 
         width=&#34;400&#34; 
         height=&#34;267&#34;
         loading=&#34;lazy&#34; 
         decoding=&#34;async&#34;
         alt=&#34;plotly.py&#34;
         style=&#34;aspect-ratio: 400/267;&#34;&gt;
  &lt;/div&gt;&lt;p class=&#34;text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3&#34;&gt;
    The interactive graphing library for Python ✨
  &lt;/p&gt;&lt;div class=&#34;flex items-center gap-6 pt-2&#34;&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;span class=&#34;flex items-center justify-center leading-none text-lg text-primary-500&#34;&gt;git-fork&lt;/span&gt;&lt;span id=&#34;hb-hb-embed-0809b6663bc83d638979b4ef2d60513d-forks&#34;&gt;2.775k&lt;/span&gt;&lt;/div&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-red-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
            &lt;a href=&#34;https://github.com/plotly/plotly.py/issues&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34; class=&#34;font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200&#34; id=&#34;hb-hb-embed-0809b6663bc83d638979b4ef2d60513d-issues&#34;&gt;780&lt;/a&gt;&lt;/div&gt;&lt;div class=&#34;flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400&#34;&gt;
          &lt;svg class=&#34;w-4 h-4 text-yellow-500&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.563.563 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.563.563 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345z&#34;/&gt;&lt;/svg&gt;&lt;span id=&#34;hb-hb-embed-0809b6663bc83d638979b4ef2d60513d-stars&#34;&gt;18.254k&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&#34;flex flex-wrap gap-1 pt-2&#34;&gt;&lt;span class=&#34;inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300&#34;&gt;
          d3
        &lt;/span&gt;&lt;span class=&#34;inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300&#34;&gt;
          dashboard
        &lt;/span&gt;&lt;span class=&#34;inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300&#34;&gt;
          declarative
        &lt;/span&gt;&lt;span class=&#34;text-xs text-zinc-500 dark:text-zinc-500&#34;&gt;+11&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
    
    
    &lt;div class=&#34;absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300&#34;&gt;&lt;/div&gt;
    
    
    &lt;div class=&#34;sr-only&#34; data-hb-component=&#34;embed&#34; data-hb-version=&#34;1.0&#34; data-hb-license=&#34;MIT&#34;&gt;
      Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit
    &lt;/div&gt;
    
&lt;/div&gt;
&lt;h2 id=&#34;charts&#34;&gt;Charts&lt;/h2&gt;
&lt;p&gt;Hugo Blox supports the popular 
 format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!&lt;/p&gt;
&lt;p&gt;Save your Plotly JSON in your page folder, for example &lt;code&gt;line-chart.json&lt;/code&gt;, and then add the &lt;code&gt;{{&amp;lt; chart data=&amp;quot;line-chart&amp;quot; &amp;gt;}}&lt;/code&gt; shortcode where you would like the chart to appear.&lt;/p&gt;
&lt;p&gt;Demo:&lt;/p&gt;




&lt;div id=&#34;chart-528974136&#34; class=&#34;chart&#34;&gt;&lt;/div&gt;
&lt;script&gt;
  (function() {
    async function fetchChartJSON() {
      console.debug(&#39;Hugo Blox fetching chart JSON...&#39;)
      const response = await fetch(&#39;.\/line-chart.json&#39;);
      return await response.json();
    }

    let a = setInterval( function() {
      if ( typeof window.Plotly === &#39;undefined&#39; ) {
        console.debug(&#39;Plotly not loaded yet...&#39;)
        return;
      }
      clearInterval( a );

      fetchChartJSON().then(chart =&gt; {
        console.debug(&#39;Plotting chart...&#39;)
        window.Plotly.newPlot(&#39;chart-528974136&#39;, chart.data, chart.layout, {responsive: true});
      });
    }, 500 );
  })();
&lt;/script&gt;

&lt;p&gt;You might also find the 
 useful.&lt;/p&gt;
&lt;h2 id=&#34;diagrams&#34;&gt;Diagrams&lt;/h2&gt;
&lt;p&gt;Hugo Blox supports the &lt;em&gt;Mermaid&lt;/em&gt; Markdown extension for diagrams.&lt;/p&gt;
&lt;p&gt;An example &lt;strong&gt;flowchart&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```mermaid
graph TD
A[Hard] --&amp;gt;|Text| B(Round)
B --&amp;gt; C{Decision}
C --&amp;gt;|One| D[Result 1]
C --&amp;gt;|Two| E[Result 2]
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;mermaid&#34;&gt;graph TD
A[Hard] --&gt;|Text| B(Round)
B --&gt; C{Decision}
C --&gt;|One| D[Result 1]
C --&gt;|Two| E[Result 2]
&lt;/div&gt;
&lt;p&gt;An example &lt;strong&gt;sequence diagram&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```mermaid
sequenceDiagram
Alice-&amp;gt;&amp;gt;John: Hello John, how are you?
loop Healthcheck
    John-&amp;gt;&amp;gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&amp;gt;&amp;gt;Alice: Great!
John-&amp;gt;&amp;gt;Bob: How about you?
Bob--&amp;gt;&amp;gt;John: Jolly good!
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;mermaid&#34;&gt;sequenceDiagram
Alice-&gt;&gt;John: Hello John, how are you?
loop Healthcheck
    John-&gt;&gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&gt;&gt;Alice: Great!
John-&gt;&gt;Bob: How about you?
Bob--&gt;&gt;John: Jolly good!
&lt;/div&gt;
&lt;p&gt;An example &lt;strong&gt;class diagram&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```mermaid
classDiagram
Class01 &amp;lt;|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --&amp;gt; C2 : Where am i?
Class09 --* C3
Class09 --|&amp;gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 &amp;lt;--&amp;gt; C2: Cool label
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;mermaid&#34;&gt;classDiagram
Class01 &lt;|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --&gt; C2 : Where am i?
Class09 --* C3
Class09 --|&gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 &lt;--&gt; C2: Cool label
&lt;/div&gt;
&lt;p&gt;An example &lt;strong&gt;state diagram&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```mermaid
stateDiagram
[*] --&amp;gt; Still
Still --&amp;gt; [*]
Still --&amp;gt; Moving
Moving --&amp;gt; Still
Moving --&amp;gt; Crash
Crash --&amp;gt; [*]
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;mermaid&#34;&gt;stateDiagram
[*] --&gt; Still
Still --&gt; [*]
Still --&gt; Moving
Moving --&gt; Still
Moving --&gt; Crash
Crash --&gt; [*]
&lt;/div&gt;
&lt;h2 id=&#34;data-frames&#34;&gt;Data Frames&lt;/h2&gt;
&lt;p&gt;Save your spreadsheet as a CSV file in your page&amp;rsquo;s folder and then render it by adding the &lt;em&gt;Table&lt;/em&gt; shortcode to your page:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;{{&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;table&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;path&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;results.csv&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;header&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;caption&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;Table 1: My results&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;}}&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;














&lt;table class=&#34;table-auto w-full&#34;&gt;
  
    
    
    &lt;thead&gt;
      &lt;tr&gt;  &lt;th class=&#34;border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left&#34;&gt;customer_id&lt;/th&gt;  &lt;th class=&#34;border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left&#34;&gt;score&lt;/th&gt;  &lt;/tr&gt;
    &lt;/thead&gt;
  
  &lt;tbody&gt;
  
    &lt;tr&gt;
      
        
          &lt;td data-table-dtype=&#34;number&#34; class=&#34;border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400&#34;&gt;1&lt;/td&gt;
        
      
        
          &lt;td data-table-dtype=&#34;number&#34; class=&#34;border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400&#34;&gt;0&lt;/td&gt;
        
      
    &lt;/tr&gt;
  
    &lt;tr&gt;
      
        
          &lt;td data-table-dtype=&#34;number&#34; class=&#34;border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400&#34;&gt;2&lt;/td&gt;
        
      
        
          &lt;td data-table-dtype=&#34;text&#34; class=&#34;border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400&#34;&gt;0.5&lt;/td&gt;
        
      
    &lt;/tr&gt;
  
    &lt;tr&gt;
      
        
          &lt;td data-table-dtype=&#34;number&#34; class=&#34;border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400&#34;&gt;3&lt;/td&gt;
        
      
        
          &lt;td data-table-dtype=&#34;number&#34; class=&#34;border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400&#34;&gt;1&lt;/td&gt;
        
      
    &lt;/tr&gt;
  
  &lt;/tbody&gt;
  
    &lt;caption class=&#34;table-caption&#34;&gt;Table 1: My results&lt;/caption&gt;
  
&lt;/table&gt;

&lt;h2 id=&#34;interactive-buttons&#34;&gt;Interactive Buttons&lt;/h2&gt;
&lt;p&gt;Add engaging call-to-action buttons to your data visualization posts:&lt;/p&gt;
&lt;h3 id=&#34;basic-buttons&#34;&gt;Basic Buttons&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-7e224f8477195bc3f16f35c894e9ba69&#34;
    href=&#34;https://hzambran.github.io/&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Contact Us&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Contact Us&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;p&gt; &lt;/p&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-ac90dee85ca635b41973de6a240a21ab&#34;
    href=&#34;https://plotly.com/python/&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Learn Plotly&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Learn Plotly&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Contact Us&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://plotly.com/python/&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Learn Plotly&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;styled-buttons-for-data-actions&#34;&gt;Styled Buttons for Data Actions&lt;/h3&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-5be2b4100164e7510a024c36114e6d4a&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;View Dashboard&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;View Dashboard&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;p&gt; &lt;/p&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-13d14104c82aaedf3f0ca1dbe530cbe4&#34;
    href=&#34;https://hzambran.github.io/data/results.csv&#34;
    
    
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Download Data&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Download Data&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;p&gt; &lt;/p&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-a80814fbacea58b223f9c285d505e48d&#34;
    href=&#34;https://github.com/HugoBlox&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;View Source Code&#34;
  &gt;
    
    
    
    
    &lt;span&gt;View Source Code&lt;/span&gt;
    
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;chart-bar&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;View Dashboard&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/data/results.csv&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;outline&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;document-arrow-down&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Download Data&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://github.com/HugoBlox&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;ghost&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;arrow-top-right-on-square&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon_position&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;View Source Code&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;multiple-aligned-buttons&#34;&gt;Multiple Aligned Buttons&lt;/h3&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-25b2cbd2c0252815b6d8a3255aa14d26&#34;
    href=&#34;https://jupyter.org/&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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-full&#34;
    role=&#34;button&#34;
    aria-label=&#34;Try Jupyter&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Try Jupyter&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;p&gt; &lt;/p&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-5936181afecb2f3fc0e6fcd2df47cb7a&#34;
    href=&#34;https://colab.research.google.com/&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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-4 py-2 text-base rounded-full&#34;
    role=&#34;button&#34;
    aria-label=&#34;Open in Colab&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Open in Colab&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://jupyter.org/&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Try Jupyter&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://colab.research.google.com/&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;rocket-launch&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Open in Colab&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;did-you-find-this-page-helpful-consider-sharing-it-&#34;&gt;Did you find this page helpful? Consider sharing it 🙌&lt;/h2&gt;
</description>
    </item>
    
    <item>
      <title>👩🏼‍🏫 Teach academic courses</title>
      <link>https://hzambran.github.io/blog/example_folders/teach-courses/</link>
      <pubDate>Wed, 24 Oct 1900 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/example_folders/teach-courses/</guid>
      <description>&lt;p&gt;
 is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Embed videos, podcasts, code, LaTeX math, and even test students!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;On this page, you&amp;rsquo;ll find some examples of the types of technical content that can be rendered with Hugo Blox.&lt;/p&gt;
&lt;h2 id=&#34;citation&#34;&gt;Citation&lt;/h2&gt;
&lt;p&gt;Here&amp;rsquo;s an example of citing a publication using the cite shortcode:&lt;/p&gt;









  




&lt;div class=&#34;pub-list-item view-citation&#34; style=&#34;margin-bottom: 1rem&#34;&gt;
  &lt;i class=&#34;far fa-file-alt pub-icon&#34; aria-hidden=&#34;true&#34;&gt;&lt;/i&gt;

  
  

  &lt;span class=&#34;article-metadata li-cite-author&#34;&gt;
    &lt;span &gt;&lt;a href=&#34;&#34;&gt;Dr. Mauricio Zambrano-Bigiarini&lt;/a&gt;&lt;/span&gt;
  &lt;/span&gt;
  (2026).
  &lt;a href=&#34;https://hzambran.github.io/publications/preprint/&#34; class=&#34;underline&#34;&gt;An example preprint / working paper&lt;/a&gt;.
  

  
  &lt;div class=&#34;flex flex-wrap space-x-3&#34;&gt;
    








 


  
    
    
    
    
    
    
      
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://arxiv.org/abs/1512.04133v1&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9&#34;/&gt;&lt;/svg&gt;
        Preprint
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://github.com/HugoBlox/kit&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5&#34;/&gt;&lt;/svg&gt;
        Code
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://www.slideshare.net/&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6&#34;/&gt;&lt;/svg&gt;
        Slides
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
        
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://hzambran.github.io/#&#34;  &gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125&#34;/&gt;&lt;/svg&gt;
        Dataset
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
        
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://hzambran.github.io/#&#34;  &gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0&#34;/&gt;&lt;/svg&gt;
        Poster
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
        
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://hzambran.github.io/#&#34;  &gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9&#34;/&gt;&lt;/svg&gt;
        Source Document
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://youtube.com&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;m15.75 10.5l4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z&#34;/&gt;&lt;/svg&gt;
        Video
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
      
    

    
    
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;http://example.org&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244&#34;/&gt;&lt;/svg&gt;
        Custom Link
      &lt;/a&gt;
    
  

  
    
    
    
    
    
    
      
      
    

    
    
    
      
        
      
    
    

    
      &lt;a class=&#34;hb-attachment-link hb-attachment-link-small&#34; href=&#34;https://arxiv.org/abs/1512.04133v1&#34; target=&#34;_blank&#34; rel=&#34;noopener&#34;&gt;
        &lt;svg style=&#34;height: 1em&#34; class=&#39;inline-block&#39; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9&#34;/&gt;&lt;/svg&gt;
        Preprint
      &lt;/a&gt;
    
  


  &lt;/div&gt;
  

  
  
&lt;/div&gt;



&lt;p&gt;You can also use the default view by omitting the view parameter:&lt;/p&gt;









  


&lt;h2 id=&#34;video&#34;&gt;Video&lt;/h2&gt;
&lt;p&gt;Teach your course by sharing videos with your students. Choose from one of the following approaches:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Youtube&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; youtube D2vj0WcvH5c &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;div style=&#34;position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;&#34;&gt;
      &lt;iframe allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen&#34; loading=&#34;eager&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; src=&#34;https://www.youtube.com/embed/D2vj0WcvH5c?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0&#34; style=&#34;position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;&#34; title=&#34;YouTube video&#34;&gt;&lt;/iframe&gt;
    &lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Bilibili&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; bilibili BV1WV4y1r7DF &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;strong&gt;Video file&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Videos may be added to a page by either placing them in your &lt;code&gt;assets/media/&lt;/code&gt; media library or in your 
, and then embedding them with the &lt;em&gt;video&lt;/em&gt; shortcode:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; video src=&amp;quot;my_video.mp4&amp;quot; controls=&amp;quot;yes&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id=&#34;podcast&#34;&gt;Podcast&lt;/h2&gt;
&lt;p&gt;You can add a podcast or music to a page by placing the MP3 file in the page&amp;rsquo;s folder or the media library folder and then embedding the audio on your page with the &lt;em&gt;audio&lt;/em&gt; shortcode:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{{&amp;lt; audio src=&amp;quot;ambient-piano.mp3&amp;quot; &amp;gt;}}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Try it out:&lt;/p&gt;








  








&lt;audio controls &gt;
  &lt;source src=&#34;https://hzambran.github.io/blog/example_folders/teach-courses/ambient-piano.mp3&#34; type=&#34;audio/mpeg&#34;&gt;
&lt;/audio&gt;

&lt;h2 id=&#34;test-students&#34;&gt;Test students&lt;/h2&gt;
&lt;p&gt;Provide a simple yet fun self-assessment by revealing the solutions to challenges with the &lt;code&gt;spoiler&lt;/code&gt; shortcode:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; spoiler text=&amp;#34;👉 Click to view the solution&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;You found me!
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /spoiler &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
&lt;details class=&#34;spoiler &#34;  id=&#34;spoiler-4&#34;&gt;
  &lt;summary class=&#34;cursor-pointer&#34;&gt;👉 Click to view the solution&lt;/summary&gt;
  &lt;div class=&#34;rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2&#34;&gt;
    You found me 🎉
  &lt;/div&gt;
&lt;/details&gt;
&lt;h2 id=&#34;math&#34;&gt;Math&lt;/h2&gt;
&lt;p&gt;HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. Enable math by setting the &lt;code&gt;math: true&lt;/code&gt; option in your page&amp;rsquo;s front matter, or enable math for your entire site by toggling math in your &lt;code&gt;config/_default/params.yaml&lt;/code&gt; file:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;features&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;math&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;w&#34;&gt;    &lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;enable&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;kc&#34;&gt;true&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;To render &lt;em&gt;inline&lt;/em&gt; or &lt;em&gt;block&lt;/em&gt; math, wrap your LaTeX math with &lt;code&gt;$...$&lt;/code&gt; or &lt;code&gt;$$...$$&lt;/code&gt;, respectively.&lt;/p&gt;
&lt;p&gt;Example &lt;strong&gt;math block&lt;/strong&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-latex&#34; data-lang=&#34;latex&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\gamma&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;_{n} &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\frac&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{ &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; | &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n} &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;^T &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; x_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; |}{&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\left&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\|\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{x}_{n}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\nabla&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; F&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\mathbf&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{x}_{n&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\right&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\|&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;^&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$&lt;p&gt;Example &lt;strong&gt;inline math&lt;/strong&gt; &lt;code&gt;$\nabla F(\mathbf{x}_{n})$&lt;/code&gt; renders as $\nabla F(\mathbf{x}_{n})$.&lt;/p&gt;
&lt;p&gt;Example &lt;strong&gt;multi-line math&lt;/strong&gt; using the math linebreak (&lt;code&gt;\\&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-latex&#34; data-lang=&#34;latex&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;sb&#34;&gt;$$&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;f&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;k;p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\begin&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{cases}p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &amp;amp; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\text&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{if }k&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;, &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\\&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;1&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;p_{&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;}^{&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;*&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;} &amp;amp; &lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\text&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{if }k&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;\end&lt;/span&gt;&lt;span class=&#34;nb&#34;&gt;{cases}&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$&lt;h2 id=&#34;code&#34;&gt;Code&lt;/h2&gt;
&lt;p&gt;HugoBlox Kit utilises Hugo&amp;rsquo;s Markdown extension for highlighting code syntax. The code theme can be selected in the &lt;code&gt;config/_default/params.yaml&lt;/code&gt; file.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```python
import pandas as pd
data = pd.read_csv(&amp;quot;data.csv&amp;quot;)
data.head()
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kn&#34;&gt;import&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;pandas&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;as&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;pd&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;data&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;pd&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;read_csv&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;data.csv&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;data&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;head&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;inline-images&#34;&gt;Inline Images&lt;/h2&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;{{&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;python&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;}}&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;Python&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
&lt;p&gt;
  &lt;span class=&#34;inline-block  pr-1&#34;&gt;
    &lt;span style=&#34;height: 1em; transform: translateY(0.1em);&#34;&gt;python&lt;/span&gt;
  &lt;/span&gt; Python&lt;/p&gt;
&lt;h2 id=&#34;did-you-find-this-page-helpful-consider-sharing-it-&#34;&gt;Did you find this page helpful? Consider sharing it 🙌&lt;/h2&gt;
</description>
    </item>
    
    <item>
      <title>✅ Manage your projects</title>
      <link>https://hzambran.github.io/blog/example_folders/project-management/</link>
      <pubDate>Tue, 23 Oct 1900 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/example_folders/project-management/</guid>
      <description>&lt;p&gt;Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!&lt;/p&gt;
&lt;h2 id=&#34;ideation&#34;&gt;Ideation&lt;/h2&gt;
&lt;p&gt;Hugo Blox supports a Markdown extension for mindmaps.&lt;/p&gt;
&lt;p&gt;Simply insert a Markdown code block labelled as &lt;code&gt;markmap&lt;/code&gt; and optionally set the height of the mindmap as shown in the example below.&lt;/p&gt;
&lt;p&gt;Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code&gt;markmap&lt;/code&gt; code block, indenting each item to create as many sub-levels as you need:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;
&lt;code&gt;
```markmap {height=&#34;200px&#34;}
- Hugo Modules
  - Hugo Blox
  - netlify
  - netlify-cms
  - slides
```
&lt;/code&gt;
&lt;/pre&gt;
&lt;/div&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;markmap&#34; style=&#34;height: 200px;&#34;&gt;

&lt;pre&gt;- Hugo Modules
  - Hugo Blox
  - netlify
  - netlify-cms
  - slides&lt;/pre&gt;
&lt;/div&gt;

&lt;h2 id=&#34;diagrams&#34;&gt;Diagrams&lt;/h2&gt;
&lt;p&gt;Hugo Blox supports the &lt;em&gt;Mermaid&lt;/em&gt; Markdown extension for diagrams.&lt;/p&gt;
&lt;p&gt;An example &lt;strong&gt;Gantt diagram&lt;/strong&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;```mermaid
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
```
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;renders as&lt;/p&gt;
&lt;div class=&#34;mermaid&#34;&gt;gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
&lt;/div&gt;
&lt;h2 id=&#34;todo-lists&#34;&gt;Todo lists&lt;/h2&gt;
&lt;p&gt;You can even write your todo lists in Markdown too:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;- [x]&lt;/span&gt; Write math example
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;- [x]&lt;/span&gt; Write diagram example
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;- [ ]&lt;/span&gt; Do something else
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;renders as&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input checked=&#34;&#34; disabled=&#34;&#34; type=&#34;checkbox&#34;&gt; Write math example
&lt;ul&gt;
&lt;li&gt;&lt;input checked=&#34;&#34; disabled=&#34;&#34; type=&#34;checkbox&#34;&gt; Write diagram example&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&#34;&#34; type=&#34;checkbox&#34;&gt; Do something else&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;did-you-find-this-page-helpful-consider-sharing-it-&#34;&gt;Did you find this page helpful? Consider sharing it 🙌&lt;/h2&gt;
</description>
    </item>
    
    <item>
      <title>⚡️ Turn Jupyter Notebooks into Blog Posts</title>
      <link>https://hzambran.github.io/blog/example_folders/notebook-onboarding/</link>
      <pubDate>Sun, 15 Jul 1900 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/blog/example_folders/notebook-onboarding/</guid>
      <description>&lt;p&gt;As a researcher or data scientist, your work often lives in Jupyter Notebooks. But sharing those insights effectively usually means taking screenshots, messy copy-pasting, or exporting to PDF.&lt;/p&gt;
&lt;p&gt;Hugo Blox changes that. With the &lt;code&gt;{{&amp;lt; notebook &amp;gt;}}&lt;/code&gt; shortcode, you can render your actual &lt;code&gt;.ipynb&lt;/code&gt; files directly as beautiful, interactive blog posts or project pages. Keep your code, outputs, and narrative in one place.&lt;/p&gt;



&lt;details class=&#34;print:hidden xl:hidden&#34; open&gt;
  &lt;summary&gt;Table of Contents&lt;/summary&gt;
  &lt;div class=&#34;text-sm&#34;&gt;
  &lt;nav id=&#34;TableOfContents&#34;&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href=&#34;#why-publish-notebooks&#34;&gt;Why publish notebooks?&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#example-data-science-workflow&#34;&gt;Example: Data Science Workflow&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#how-to-add-a-notebook&#34;&gt;How to add a notebook&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&#34;#next-steps&#34;&gt;Next steps&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
  &lt;/div&gt;
&lt;/details&gt;

&lt;h2 id=&#34;why-publish-notebooks&#34;&gt;Why publish notebooks?&lt;/h2&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500&#34; 
     data-callout=&#34;tip&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Tip&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;&lt;strong&gt;Reproducible Research&lt;/strong&gt;: By publishing the actual notebook, you allow others to download and run your code, verifying your results and building upon your work.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;No more screenshots&lt;/strong&gt; – Render crisp code and vector plots directly from your source.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Theme consistent&lt;/strong&gt; – Notebooks automatically adapt to your site&amp;rsquo;s theme (including dark mode).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Flexible sourcing&lt;/strong&gt; – Display notebooks from your &lt;code&gt;assets/&lt;/code&gt; folder, page bundles, or even directly from a remote GitHub URL.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Interactive&lt;/strong&gt; – Users can copy code blocks or download the full notebook to run locally.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;example-data-science-workflow&#34;&gt;Example: Data Science Workflow&lt;/h2&gt;
&lt;p&gt;Below is a live example of a notebook rendered right here in this post. Notice how the markdown, code, and outputs (text, HTML, and JSON) are all preserved and styled.&lt;/p&gt;

&lt;div id=&#34;hb-notebook-2b354945834a4ca878f36489e72bf1a6&#34; class=&#34;hb-notebook not-prose&#34; data-hb-component=&#34;notebook&#34; aria-label=&#34;Notebook Launch Readiness Analysis&#34; style=&#34;--hb-notebook-output-max-height:26rem;&#34;&gt;
  &lt;div class=&#34;hb-notebook-header&#34;&gt;
    &lt;div class=&#34;hb-notebook-heading&#34;&gt;
      &lt;p class=&#34;hb-notebook-title&#34;&gt;Launch Readiness Analysis&lt;/p&gt;
        &lt;p class=&#34;hb-notebook-subtitle&#34;&gt;Python · Kernel: Python 3 · nbformat 4.5 · 6 cells&lt;/p&gt;
    &lt;/div&gt;
      &lt;a class=&#34;hb-notebook-download&#34; href=&#34;https://hzambran.github.io/blog/example_folders/notebook-onboarding/hugoblox-onboarding.ipynb&#34; download&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3&#34;/&gt;&lt;/svg&gt;
        &lt;span&gt;Download notebook&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
    &lt;dl class=&#34;hb-notebook-metadata&#34;&gt;
          &lt;div&gt;
            &lt;dt&gt;Language&lt;/dt&gt;
            &lt;dd&gt;Python&lt;/dd&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;dt&gt;Version&lt;/dt&gt;
            &lt;dd&gt;3.11&lt;/dd&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;dt&gt;Kernel&lt;/dt&gt;
            &lt;dd&gt;Python 3 python3&lt;/dd&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;dt&gt;nbformat&lt;/dt&gt;
            &lt;dd&gt;4.5&lt;/dd&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;dt&gt;Authors&lt;/dt&gt;
            &lt;dd&gt;HugoBlox Studio&lt;/dd&gt;
          &lt;/div&gt;
    &lt;/dl&gt;&lt;div class=&#34;hb-notebook-body&#34;&gt;&lt;article class=&#34;hb-notebook-cell hb-notebook-cell--markdown&#34; data-cell-type=&#34;markdown&#34;&gt;
          &lt;header class=&#34;hb-notebook-cell-header&#34;&gt;
            &lt;span class=&#34;hb-notebook-pill&#34;&gt;Markdown&lt;/span&gt;
          &lt;/header&gt;
              &lt;div class=&#34;hb-notebook-markdown prose dark:prose-invert&#34;&gt;
                &lt;h1 id=&#34;ship-notebook-stories-in-minutes&#34;&gt;Ship Notebook Stories in Minutes&lt;/h1&gt;
&lt;p&gt;Hugo Blox Notebook renderer turns your &lt;code&gt;.ipynb&lt;/code&gt; experiments into beautiful long-form posts.
Use this sample to see how markdown, code, and outputs flow together.&lt;/p&gt;
              &lt;/div&gt;
        &lt;/article&gt;&lt;article class=&#34;hb-notebook-cell hb-notebook-cell--markdown&#34; data-cell-type=&#34;markdown&#34;&gt;
          &lt;header class=&#34;hb-notebook-cell-header&#34;&gt;
            &lt;span class=&#34;hb-notebook-pill&#34;&gt;Markdown&lt;/span&gt;
          &lt;/header&gt;
              &lt;div class=&#34;hb-notebook-markdown prose dark:prose-invert&#34;&gt;
                &lt;ol&gt;
&lt;li&gt;Drop notebooks inside &lt;code&gt;assets/notebooks/&lt;/code&gt; (or import them as page resources).&lt;/li&gt;
&lt;li&gt;Reference them with &lt;code&gt;{{&amp;lt;/* notebook src=&amp;quot;your.ipynb&amp;quot; */&amp;gt;}}&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Control code, outputs, metadata badges, and download links via shortcode params.&lt;/li&gt;
&lt;/ol&gt;

              &lt;/div&gt;
        &lt;/article&gt;&lt;article class=&#34;hb-notebook-cell hb-notebook-cell--code&#34; data-cell-type=&#34;code&#34;&gt;
          &lt;header class=&#34;hb-notebook-cell-header&#34;&gt;
            &lt;span class=&#34;hb-notebook-pill&#34;&gt;In [1]&lt;/span&gt;
              &lt;div class=&#34;hb-notebook-tags&#34;&gt;
                  &lt;span&gt;demo&lt;/span&gt;
                  &lt;span&gt;quickstart&lt;/span&gt;
              &lt;/div&gt;
          &lt;/header&gt;
              &lt;div class=&#34;hb-notebook-code&#34; data-language=&#34;python&#34;&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kn&#34;&gt;import&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;math&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;accuracy&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;mf&#34;&gt;0.982&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;print&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Collecting data...&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;print&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Training notebook-ready block...&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;print&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Done!&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;accuracy&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
              &lt;div class=&#34;hb-notebook-outputs&#34;&gt;&lt;pre class=&#34;hb-notebook-output hb-notebook-output--stream&#34;&gt;&lt;code&gt;Collecting data...
Training notebook-ready block...
Done!
&lt;/code&gt;&lt;/pre&gt;
                          &lt;pre class=&#34;hb-notebook-output hb-notebook-output--text&#34;&gt;&lt;code&gt;0.982&lt;/code&gt;&lt;/pre&gt;
              &lt;/div&gt;
        &lt;/article&gt;&lt;article class=&#34;hb-notebook-cell hb-notebook-cell--code&#34; data-cell-type=&#34;code&#34;&gt;
          &lt;header class=&#34;hb-notebook-cell-header&#34;&gt;
            &lt;span class=&#34;hb-notebook-pill&#34;&gt;In [2]&lt;/span&gt;
          &lt;/header&gt;
              &lt;div class=&#34;hb-notebook-code&#34; data-language=&#34;python&#34;&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kn&#34;&gt;from&lt;/span&gt; &lt;span class=&#34;nn&#34;&gt;IPython.display&lt;/span&gt; &lt;span class=&#34;kn&#34;&gt;import&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;HTML&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;HTML&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;&amp;lt;div style=&amp;#39;font-family:Inter,ui-sans-serif;&amp;#39;&amp;gt;&amp;lt;strong&amp;gt;Launch Readiness:&amp;lt;/strong&amp;gt; &amp;lt;span style=&amp;#39;color:#22c55e;&amp;#39;&amp;gt;98.2&lt;/span&gt;&lt;span class=&#34;si&#34;&gt;% c&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;onfidence&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;em&amp;gt;Notebook blocks are theme-aware and dark-mode friendly.&amp;lt;/em&amp;gt;&amp;lt;/div&amp;gt;&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
              &lt;div class=&#34;hb-notebook-outputs&#34;&gt;
                        &lt;div class=&#34;hb-notebook-output hb-notebook-output--html&#34;&gt;&lt;div style=&#39;font-family:Inter,ui-sans-serif;&#39;&gt;&lt;strong&gt;Launch Readiness:&lt;/strong&gt; &lt;span style=&#39;color:#22c55e;&#39;&gt;98.2% confidence&lt;/span&gt;&lt;br&gt;&lt;em&gt;Notebook blocks are theme-aware and dark-mode friendly.&lt;/em&gt;&lt;/div&gt;&lt;/div&gt;
              &lt;/div&gt;
        &lt;/article&gt;&lt;article class=&#34;hb-notebook-cell hb-notebook-cell--code&#34; data-cell-type=&#34;code&#34;&gt;
          &lt;header class=&#34;hb-notebook-cell-header&#34;&gt;
            &lt;span class=&#34;hb-notebook-pill&#34;&gt;In [3]&lt;/span&gt;
              &lt;div class=&#34;hb-notebook-tags&#34;&gt;
                  &lt;span&gt;metrics&lt;/span&gt;
              &lt;/div&gt;
          &lt;/header&gt;
              &lt;div class=&#34;hb-notebook-code&#34; data-language=&#34;python&#34;&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;8
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;metrics&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;s1&#34;&gt;&amp;#39;metrics&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;s1&#34;&gt;&amp;#39;engagement_rate&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;mf&#34;&gt;0.73&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;s1&#34;&gt;&amp;#39;read_time_minutes&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;mf&#34;&gt;4.6&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;s1&#34;&gt;&amp;#39;subscribers&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;1280&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;n&#34;&gt;metrics&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
              &lt;div class=&#34;hb-notebook-outputs&#34;&gt;&lt;pre class=&#34;hb-notebook-output hb-notebook-output--json&#34;&gt;&lt;code&gt;{
  &#34;metrics&#34;: {
    &#34;engagement_rate&#34;: 0.73,
    &#34;read_time_minutes&#34;: 4.6,
    &#34;subscribers&#34;: 1280
  }
}&lt;/code&gt;&lt;/pre&gt;
              &lt;/div&gt;
        &lt;/article&gt;&lt;article class=&#34;hb-notebook-cell hb-notebook-cell--markdown&#34; data-cell-type=&#34;markdown&#34;&gt;
          &lt;header class=&#34;hb-notebook-cell-header&#34;&gt;
            &lt;span class=&#34;hb-notebook-pill&#34;&gt;Markdown&lt;/span&gt;
          &lt;/header&gt;
              &lt;div class=&#34;hb-notebook-markdown prose dark:prose-invert&#34;&gt;
                &lt;blockquote class=&#34;border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6&#34;&gt;
    &lt;p&gt;Tip: Pair this block with Call-to-Action cards or the Embed shortcode to link to GitHub repos, datasets, or ARXIV preprints.&lt;/p&gt;
  &lt;/blockquote&gt;
              &lt;/div&gt;
        &lt;/article&gt;
  &lt;/div&gt;
  &lt;div class=&#34;sr-only&#34; data-hb-component=&#34;notebook&#34; data-hb-version=&#34;1.0&#34; data-hb-license=&#34;MIT&#34;&gt;
    Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit
  &lt;/div&gt;
&lt;/div&gt;


&lt;h2 id=&#34;how-to-add-a-notebook&#34;&gt;How to add a notebook&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Save your notebook.&lt;/strong&gt; Place your &lt;code&gt;.ipynb&lt;/code&gt; file in &lt;code&gt;assets/notebooks/&lt;/code&gt; (for global access) or inside a page bundle (like &lt;code&gt;content/blog/my-post/analysis.ipynb&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Add the shortcode.&lt;/strong&gt; In any Markdown page, simply use:
&lt;code&gt;{{&amp;lt; notebook src=&amp;quot;analysis.ipynb&amp;quot; &amp;gt;}}&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Customize.&lt;/strong&gt; You can hide code cells for non-technical audiences (&lt;code&gt;show_code=false&lt;/code&gt;) or just show the output (&lt;code&gt;show_outputs=true&lt;/code&gt;).&lt;/li&gt;
&lt;/ol&gt;



  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;important&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Important&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Hugo Blox respects your privacy. Notebook rendering happens statically at build time—no third-party services required.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h2 id=&#34;next-steps&#34;&gt;Next steps&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Try it out:&lt;/strong&gt; Drop one of your existing notebooks into this site and see how it looks.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Link your papers:&lt;/strong&gt; Use the Embed shortcode to link your notebook to your latest arXiv preprint or GitHub repository.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Get help:&lt;/strong&gt; Join the community on 
 or check the 
.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Happy researching! 🚀&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Buttons</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/formatting/button/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/formatting/button/</guid>
      <description>&lt;p&gt;A modern, customizable button shortcode with gradient styling, icons, and smart link handling.&lt;/p&gt;
&lt;h2 id=&#34;basic-usage&#34;&gt;Basic Usage&lt;/h2&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-351ac412531c23e422b81c6422c17da5&#34;
    href=&#34;https://hzambran.github.io/contact&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Contact Us&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Contact Us&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;




&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-99f90e9d2b754ffe3fc7b4f9d280ab9e&#34;
    href=&#34;https://example.com&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Visit External Site&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Visit External Site&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;p&gt;The above buttons are created with:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/contact&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Contact Us&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://example.com&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Visit External Site&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;style-variants&#34;&gt;Style Variants&lt;/h2&gt;
&lt;h3 id=&#34;primary-default&#34;&gt;Primary (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-33f0c5949dceb4f2158940543a6d11f0&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Primary Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Primary Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Primary Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;secondary&#34;&gt;Secondary&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-654c665d9c02125e00b3c2638e02ff31&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Secondary Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Secondary Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Secondary Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;outline&#34;&gt;Outline&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-569954ebe8d760dfbd5f8dd8d491e972&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Outline Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Outline Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;outline&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Outline Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;ghost&#34;&gt;Ghost&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-e8d694dcc82ccc6b692376347eb1210c&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Ghost Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Ghost Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;ghost&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Ghost Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;sizes&#34;&gt;Sizes&lt;/h2&gt;
&lt;h3 id=&#34;small&#34;&gt;Small&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-9edd9a4164984b892472dc4cb0d94acb&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-3 py-1.5 text-sm rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Small Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Small Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;medium-default&#34;&gt;Medium (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-917c91b5df194ee244bcb8dd7d4916c5&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Medium Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Medium Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;large&#34;&gt;Large&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-c9ef1eeebbeac0de80c5666baeda508c&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Large Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Large Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;extra-large&#34;&gt;Extra Large&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-c38da6a61bc9a2511c12a071b05d1527&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Extra Large&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Extra Large&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;sm&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Small Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;md&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Medium Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Large Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;xl&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Extra Large&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;alignment&#34;&gt;Alignment&lt;/h2&gt;
&lt;h3 id=&#34;left-default&#34;&gt;Left (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-46275a2130718485193b07442854e305&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Left Aligned&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Left Aligned&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;center&#34;&gt;Center&lt;/h3&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-2e7c6d0545131be865f91f4dcb47ebd3&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Center Aligned&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Center Aligned&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;right&#34;&gt;Right&lt;/h3&gt;



&lt;div class=&#34;text-right&#34;&gt;
  &lt;a
    id=&#34;button-09d01d6786049ba2a63f2cafd484e60e&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Right Aligned&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Right Aligned&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;left&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Left Aligned&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Center Aligned&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Right Aligned&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;with-icons&#34;&gt;With Icons&lt;/h2&gt;
&lt;h3 id=&#34;icon-before-text&#34;&gt;Icon Before Text&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-2070b64a1b12b8165d04699a5e4f0a4d&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Download&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Download&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;icon-after-text&#34;&gt;Icon After Text&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-213c46a162adc66071b38a55c26716e3&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Continue&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Continue&lt;/span&gt;
    
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;arrow-down-tray&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Download&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;arrow-right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon_position&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Continue&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;rounded-corners&#34;&gt;Rounded Corners&lt;/h2&gt;
&lt;h3 id=&#34;small-radius&#34;&gt;Small Radius&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-f306324e9ea3297cc7149761131e0e41&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded&#34;
    role=&#34;button&#34;
    aria-label=&#34;Small Radius&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Small Radius&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;medium-radius-default&#34;&gt;Medium Radius (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-d519a3255417739cb8197b9869248dec&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Medium Radius&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Medium Radius&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;large-radius&#34;&gt;Large Radius&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-920afdfab9e2ab0e88cb5046924cd223&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-xl&#34;
    role=&#34;button&#34;
    aria-label=&#34;Large Radius&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Large Radius&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;pill-shape&#34;&gt;Pill Shape&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-464be1a963c8f63cf75275ea2137551a&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-full&#34;
    role=&#34;button&#34;
    aria-label=&#34;Pill Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Pill Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;sm&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Small Radius&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;md&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Medium Radius&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Large Radius&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Pill Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;advanced-examples&#34;&gt;Advanced Examples&lt;/h2&gt;
&lt;h3 id=&#34;call-to-action-button&#34;&gt;Call-to-Action Button&lt;/h3&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-62059f8d62052633590d3f60ec092595&#34;
    href=&#34;https://hzambran.github.io/signup&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Get Started Today&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Get Started Today&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/signup&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;rocket-launch&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Get Started Today&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;external-link-with-new-tab&#34;&gt;External Link with New Tab&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-2cb1bb8bbb2590cc46a8ead690d2da77&#34;
    href=&#34;https://github.com/hugo-blox/kit&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;View on GitHub&#34;
  &gt;
    
    
    
    
    &lt;span&gt;View on GitHub&lt;/span&gt;
    
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://github.com/hugo-blox/kit&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;outline&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;arrow-top-right-on-square&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon_position&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;View on GitHub&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;download-button&#34;&gt;Download Button&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-72ec86801f391f16b84b269ade9d2995&#34;
    href=&#34;https://hzambran.github.io/files/document.pdf&#34;
    
    
    
    class=&#34;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-full&#34;
    role=&#34;button&#34;
    aria-label=&#34;Download PDF&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Download PDF&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/files/document.pdf&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;document-arrow-down&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Download PDF&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;parameters&#34;&gt;Parameters&lt;/h2&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Parameter&lt;/th&gt;
          &lt;th&gt;Type&lt;/th&gt;
          &lt;th&gt;Default&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;url&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;#&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;Required.&lt;/strong&gt; Button destination URL (internal or external)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;text&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;Inner content&lt;/td&gt;
          &lt;td&gt;Button text (overrides shortcode content)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;new_tab&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;boolean&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;false&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Whether to open link in new tab&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;style&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;primary&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Button style: &lt;code&gt;primary&lt;/code&gt;, &lt;code&gt;secondary&lt;/code&gt;, &lt;code&gt;outline&lt;/code&gt;, &lt;code&gt;ghost&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;size&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;md&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Button size: &lt;code&gt;sm&lt;/code&gt;, &lt;code&gt;md&lt;/code&gt;, &lt;code&gt;lg&lt;/code&gt;, &lt;code&gt;xl&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;align&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;left&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Button alignment: &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;center&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;icon&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;-&lt;/td&gt;
          &lt;td&gt;Icon name from 
&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;icon_position&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;left&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Icon position: &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;rounded&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;md&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Border radius: &lt;code&gt;sm&lt;/code&gt;, &lt;code&gt;md&lt;/code&gt;, &lt;code&gt;lg&lt;/code&gt;, &lt;code&gt;xl&lt;/code&gt;, &lt;code&gt;full&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;disabled&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;boolean&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;false&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Whether button should be disabled&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;h2 id=&#34;security-features&#34;&gt;Security Features&lt;/h2&gt;
&lt;p&gt;The button shortcode automatically handles security for external links:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;External links&lt;/strong&gt; get &lt;code&gt;rel=&amp;quot;noreferrer&amp;quot;&lt;/code&gt; attribute&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;External links opening in new tab&lt;/strong&gt; get &lt;code&gt;rel=&amp;quot;noopener noreferrer&amp;quot;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Internal links opening in new tab&lt;/strong&gt; get &lt;code&gt;rel=&amp;quot;noopener&amp;quot;&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This ensures safe navigation while maintaining functionality.&lt;/p&gt;
&lt;h2 id=&#34;accessibility&#34;&gt;Accessibility&lt;/h2&gt;
&lt;p&gt;The button shortcode includes built-in accessibility features:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Proper &lt;code&gt;role=&amp;quot;button&amp;quot;&lt;/code&gt; attribute&lt;/li&gt;
&lt;li&gt;&lt;code&gt;aria-label&lt;/code&gt; support&lt;/li&gt;
&lt;li&gt;Keyboard focus indicators&lt;/li&gt;
&lt;li&gt;High contrast focus rings&lt;/li&gt;
&lt;li&gt;Disabled state handling&lt;/li&gt;
&lt;/ul&gt;</description>
    </item>
    
    <item>
      <title>Buttons</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/button/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/button/</guid>
      <description>&lt;p&gt;A modern, customizable button shortcode with gradient styling, icons, and smart link handling.&lt;/p&gt;
&lt;h2 id=&#34;basic-usage&#34;&gt;Basic Usage&lt;/h2&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-dabd0393b1801dd6fb9e8661038eb4dd&#34;
    href=&#34;https://hzambran.github.io/contact&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Contact Us&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Contact Us&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;




&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-53c1dfd420120961d1f64f9b23dabee7&#34;
    href=&#34;https://example.com&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Visit External Site&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Visit External Site&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;p&gt;The above buttons are created with:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/contact&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Contact Us&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://example.com&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Visit External Site&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;style-variants&#34;&gt;Style Variants&lt;/h2&gt;
&lt;h3 id=&#34;primary-default&#34;&gt;Primary (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-cc59551ca9345ffa0c9e9ced1fd45ff2&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Primary Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Primary Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Primary Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;secondary&#34;&gt;Secondary&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-a47423da1fca7a5736abd4748607c864&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Secondary Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Secondary Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Secondary Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;outline&#34;&gt;Outline&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-7023c7fdfa0fe849623628ff4811978a&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Outline Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Outline Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;outline&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Outline Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;ghost&#34;&gt;Ghost&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-300cd50403b907216d91232768a6537c&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;Ghost Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Ghost Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;ghost&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Ghost Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;sizes&#34;&gt;Sizes&lt;/h2&gt;
&lt;h3 id=&#34;small&#34;&gt;Small&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-c87b154dd4a75d358dffbf7257117f61&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-3 py-1.5 text-sm rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Small Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Small Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;medium-default&#34;&gt;Medium (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-a032080937cc7130da03a930297feca8&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Medium Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Medium Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;large&#34;&gt;Large&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-53edae540424e425d958200da934ac05&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Large Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Large Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;extra-large&#34;&gt;Extra Large&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-75aace95e23a241786458e6921dac550&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Extra Large&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Extra Large&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;sm&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Small Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;md&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Medium Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Large Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;xl&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Extra Large&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;alignment&#34;&gt;Alignment&lt;/h2&gt;
&lt;h3 id=&#34;left-default&#34;&gt;Left (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-393a503763b1e27d79c6136d9ba578b7&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Left Aligned&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Left Aligned&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;center&#34;&gt;Center&lt;/h3&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-5ea3117831c5bb2ec93eb2e4e2aae49d&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Center Aligned&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Center Aligned&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;right&#34;&gt;Right&lt;/h3&gt;



&lt;div class=&#34;text-right&#34;&gt;
  &lt;a
    id=&#34;button-146e7744c51d44c346b3c0fc6f31cb7b&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Right Aligned&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Right Aligned&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;left&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Left Aligned&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Center Aligned&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Right Aligned&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;with-icons&#34;&gt;With Icons&lt;/h2&gt;
&lt;h3 id=&#34;icon-before-text&#34;&gt;Icon Before Text&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-eac39310d6e76180abc366932fac5b33&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Download&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Download&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;icon-after-text&#34;&gt;Icon After Text&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-ddf7188cb61ea8db0b65bf31864e934e&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Continue&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Continue&lt;/span&gt;
    
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;arrow-down-tray&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Download&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;arrow-right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon_position&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Continue&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;rounded-corners&#34;&gt;Rounded Corners&lt;/h2&gt;
&lt;h3 id=&#34;small-radius&#34;&gt;Small Radius&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-03d600e1c9070e885492d56a2bebe6ff&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded&#34;
    role=&#34;button&#34;
    aria-label=&#34;Small Radius&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Small Radius&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;medium-radius-default&#34;&gt;Medium Radius (Default)&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-18588b0d671b2dbf2dc37986c1348e2e&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Medium Radius&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Medium Radius&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;large-radius&#34;&gt;Large Radius&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-8351d4b78e89423f1766ac81d9aa19cc&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-xl&#34;
    role=&#34;button&#34;
    aria-label=&#34;Large Radius&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Large Radius&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;h3 id=&#34;pill-shape&#34;&gt;Pill Shape&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-b5a54b9fa8dd2792bfbb9fe1c82ec5f4&#34;
    href=&#34;#&#34;
    
    
    
    class=&#34;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-4 py-2 text-base rounded-full&#34;
    role=&#34;button&#34;
    aria-label=&#34;Pill Button&#34;
  &gt;
    
    
    
    
    &lt;span&gt;Pill Button&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;sm&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Small Radius&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;md&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Medium Radius&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Large Radius&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Pill Button&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;advanced-examples&#34;&gt;Advanced Examples&lt;/h2&gt;
&lt;h3 id=&#34;call-to-action-button&#34;&gt;Call-to-Action Button&lt;/h3&gt;



&lt;div class=&#34;text-center&#34;&gt;
  &lt;a
    id=&#34;button-ca6f0b7e226d7ae504aa356099e00bbf&#34;
    href=&#34;https://hzambran.github.io/signup&#34;
    
    
    
    class=&#34;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-lg&#34;
    role=&#34;button&#34;
    aria-label=&#34;Get Started Today&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Get Started Today&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/signup&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;size&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;align&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;rocket-launch&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Get Started Today&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;external-link-with-new-tab&#34;&gt;External Link with New Tab&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-150d5d775a33ad3cb6eb6aff0b5cc098&#34;
    href=&#34;https://github.com/hugo-blox/kit&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    
    class=&#34;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&#34;
    role=&#34;button&#34;
    aria-label=&#34;View on GitHub&#34;
  &gt;
    
    
    
    
    &lt;span&gt;View on GitHub&lt;/span&gt;
    
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;https://github.com/hugo-blox/kit&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;new_tab&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;outline&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;arrow-top-right-on-square&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon_position&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;View on GitHub&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;download-button&#34;&gt;Download Button&lt;/h3&gt;



&lt;div class=&#34;text-left&#34;&gt;
  &lt;a
    id=&#34;button-5b7f7905184dd64040278c1f5207a783&#34;
    href=&#34;https://hzambran.github.io/files/document.pdf&#34;
    
    
    
    class=&#34;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-full&#34;
    role=&#34;button&#34;
    aria-label=&#34;Download PDF&#34;
  &gt;
    
    
      &lt;span class=&#34;flex-shrink-0&#34;&gt;
        &lt;svg class=&#34;w-4 h-4&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9&#34;/&gt;&lt;/svg&gt;
      &lt;/span&gt;
    
    
    
    &lt;span&gt;Download PDF&lt;/span&gt;
    
    
    
  &lt;/a&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-go-html-template&#34; data-lang=&#34;go-html-template&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;url&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;/files/document.pdf&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;style&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;icon&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;document-arrow-down&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;rounded&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;Download PDF&lt;span class=&#34;cp&#34;&gt;{{&lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;/&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;button&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;err&#34;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;parameters&#34;&gt;Parameters&lt;/h2&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Parameter&lt;/th&gt;
          &lt;th&gt;Type&lt;/th&gt;
          &lt;th&gt;Default&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;url&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;#&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;&lt;strong&gt;Required.&lt;/strong&gt; Button destination URL (internal or external)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;text&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;Inner content&lt;/td&gt;
          &lt;td&gt;Button text (overrides shortcode content)&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;new_tab&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;boolean&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;false&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Whether to open link in new tab&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;style&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;primary&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Button style: &lt;code&gt;primary&lt;/code&gt;, &lt;code&gt;secondary&lt;/code&gt;, &lt;code&gt;outline&lt;/code&gt;, &lt;code&gt;ghost&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;size&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;md&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Button size: &lt;code&gt;sm&lt;/code&gt;, &lt;code&gt;md&lt;/code&gt;, &lt;code&gt;lg&lt;/code&gt;, &lt;code&gt;xl&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;align&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;left&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Button alignment: &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;center&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;icon&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;-&lt;/td&gt;
          &lt;td&gt;Icon name from 
&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;icon_position&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;left&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Icon position: &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;rounded&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;string&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;md&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Border radius: &lt;code&gt;sm&lt;/code&gt;, &lt;code&gt;md&lt;/code&gt;, &lt;code&gt;lg&lt;/code&gt;, &lt;code&gt;xl&lt;/code&gt;, &lt;code&gt;full&lt;/code&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;disabled&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;boolean&lt;/td&gt;
          &lt;td&gt;&lt;code&gt;false&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Whether button should be disabled&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;h2 id=&#34;security-features&#34;&gt;Security Features&lt;/h2&gt;
&lt;p&gt;The button shortcode automatically handles security for external links:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;External links&lt;/strong&gt; get &lt;code&gt;rel=&amp;quot;noreferrer&amp;quot;&lt;/code&gt; attribute&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;External links opening in new tab&lt;/strong&gt; get &lt;code&gt;rel=&amp;quot;noopener noreferrer&amp;quot;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Internal links opening in new tab&lt;/strong&gt; get &lt;code&gt;rel=&amp;quot;noopener&amp;quot;&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This ensures safe navigation while maintaining functionality.&lt;/p&gt;
&lt;h2 id=&#34;accessibility&#34;&gt;Accessibility&lt;/h2&gt;
&lt;p&gt;The button shortcode includes built-in accessibility features:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Proper &lt;code&gt;role=&amp;quot;button&amp;quot;&lt;/code&gt; attribute&lt;/li&gt;
&lt;li&gt;&lt;code&gt;aria-label&lt;/code&gt; support&lt;/li&gt;
&lt;li&gt;Keyboard focus indicators&lt;/li&gt;
&lt;li&gt;High contrast focus rings&lt;/li&gt;
&lt;li&gt;Disabled state handling&lt;/li&gt;
&lt;/ul&gt;</description>
    </item>
    
    <item>
      <title>Callouts</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/formatting/callout/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/formatting/callout/</guid>
      <description>&lt;p&gt;Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.&lt;/p&gt;
&lt;p&gt;Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.&lt;/p&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;
&lt;h3 id=&#34;basic-callout-types&#34;&gt;Basic Callout Types&lt;/h3&gt;
&lt;p&gt;Hugo Blox supports all 15+ callout types from 
:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Information &amp;amp; Notes:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!NOTE]  
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is a note callout with important information that users should know.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is a note callout with important information that users should know.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!INFO]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Alternative info callout - same styling as NOTE.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;info&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Info&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Alternative info callout - same styling as NOTE.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!ABSTRACT]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Use for abstracts, summaries, or TL;DR sections.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-cyan-100 dark:bg-cyan-900 border-cyan-500&#34; 
     data-callout=&#34;abstract&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-cyan-600 dark:text-cyan-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75a2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125zM6.75 12h.008v.008H6.75zm0 3h.008v.008H6.75zm0 3h.008v.008H6.75z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Abstract&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Use for abstracts, summaries, or TL;DR sections.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Actions &amp;amp; Tasks:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!TODO]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is something that needs to be done.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;todo&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Todo&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is something that needs to be done.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!TIP]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Here&amp;#39;s a helpful tip to make your workflow more efficient!
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500&#34; 
     data-callout=&#34;tip&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Tip&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Here&amp;rsquo;s a helpful tip to make your workflow more efficient!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!SUCCESS]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Great job! This operation completed successfully.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500&#34; 
     data-callout=&#34;success&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-green-600 dark:text-green-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Success&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Great job! This operation completed successfully.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Questions &amp;amp; Interactive:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!QUESTION]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;What do you think about this approach? Let us know!
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-yellow-100 dark:bg-yellow-900 border-yellow-500&#34; 
     data-callout=&#34;question&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-yellow-700 dark:text-yellow-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712a2.98 2.98 0 0 1-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Question&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;What do you think about this approach? Let us know!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!EXAMPLE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Here&amp;#39;s a practical example of how to implement this feature.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;example&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Example&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Here&amp;rsquo;s a practical example of how to implement this feature.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!QUOTE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;&amp;#34;The best way to predict the future is to invent it.&amp;#34; - Alan Kay
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-500&#34; 
     data-callout=&#34;quote&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-gray-600 dark:text-gray-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Quote&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;&amp;ldquo;The best way to predict the future is to invent it.&amp;rdquo; - Alan Kay&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Warnings &amp;amp; Errors:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!WARNING]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Be careful! This action might have unexpected consequences.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500&#34; 
     data-callout=&#34;warning&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Warning&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Be careful! This action might have unexpected consequences.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!CAUTION]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Danger! This operation is irreversible and could cause data loss.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;caution&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Caution&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Danger! This operation is irreversible and could cause data loss.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!IMPORTANT]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is critical information that users must understand to proceed.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;important&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Important&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is critical information that users must understand to proceed.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!DANGER]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is extremely dangerous - proceed with extreme caution!
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;danger&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Danger&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is extremely dangerous - proceed with extreme caution!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!FAILURE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This operation failed. Check your configuration and try again.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;failure&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;m9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Failure&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This operation failed. Check your configuration and try again.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!BUG]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Known issue: This feature doesn&amp;#39;t work properly in Safari &amp;lt; 14.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;bug&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 12.75c1.148 0 2.278.08 3.383.237c1.037.146 1.866.966 1.866 2.013c0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75m0 0c2.883 0 5.647.508 8.208 1.44a23.91 23.91 0 0 1-1.153 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44c.125 2.105.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236c.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236c-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747M8.683 5a3.75 3.75 0 0 1 6.635 0m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314a23.88 23.88 0 0 0 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Bug&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Known issue: This feature doesn&amp;rsquo;t work properly in Safari &amp;lt; 14.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;custom-titles&#34;&gt;Custom Titles&lt;/h3&gt;
&lt;p&gt;You can customize the title of any callout:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!WARNING]+ Custom Warning Title
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This warning has a custom title instead of just &amp;#34;Warning&amp;#34;.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500&#34; 
     data-callout=&#34;warning&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Custom Warning Title&lt;br&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This warning has a custom title instead of just &amp;ldquo;Warning&amp;rdquo;.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;legacy-syntax-deprecated&#34;&gt;Legacy Syntax (Deprecated)&lt;/h3&gt;
&lt;p&gt;The old shortcode syntax still works but shows a deprecation warning:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; callout note &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;This still works but is deprecated. Use the Markdown syntax above!
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /callout &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;css-customization&#34;&gt;CSS Customization&lt;/h3&gt;
&lt;p&gt;Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Base class: &lt;code&gt;.callout&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Type-specific data attribute: &lt;code&gt;data-callout=&amp;quot;note&amp;quot;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Component classes: &lt;code&gt;.callout-icon&lt;/code&gt;, &lt;code&gt;.callout-title&lt;/code&gt;, &lt;code&gt;.callout-content&lt;/code&gt;, &lt;code&gt;.callout-body&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Custom CSS Example&lt;/strong&gt; (add to your &lt;code&gt;assets/css/custom.css&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Customize NOTE callouts */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;data-callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;note&amp;#34;&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;border-left-width&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;8&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;box-shadow&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;4&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;6&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;-1&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;rgb&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;/&lt;/span&gt; &lt;span class=&#34;mf&#34;&gt;0.1&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Make SUCCESS callouts pulse */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;data-callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;success&amp;#34;&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;animation&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;pulse&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;kc&#34;&gt;infinite&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Custom icon styling */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout-icon&lt;/span&gt; &lt;span class=&#34;nt&#34;&gt;svg&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;transition&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;transform&lt;/span&gt; &lt;span class=&#34;mf&#34;&gt;0.2&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;nd&#34;&gt;hover&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout-icon&lt;/span&gt; &lt;span class=&#34;nt&#34;&gt;svg&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;transform&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;scale&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mf&#34;&gt;1.1&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Dark mode overrides */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;@&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;media&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nt&#34;&gt;dark&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;data-callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;warning&amp;#34;&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;background-color&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;rgb&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;92&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;25&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;border-color&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;rgb&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;245&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;158&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;11&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This approach matches 
, ensuring your styles work across platforms.&lt;/p&gt;
&lt;h3 id=&#34;benefits-of-the-new-syntax&#34;&gt;Benefits of the New Syntax&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Portable&lt;/strong&gt;: Works with GitHub, Obsidian, and other Markdown editors&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Standard&lt;/strong&gt;: Uses widely-adopted Markdown callout syntax&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Clean&lt;/strong&gt;: No Hugo-specific shortcodes needed&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Future-proof&lt;/strong&gt;: Supported by the latest Hugo versions (0.132.0+)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Customizable&lt;/strong&gt;: Semantic CSS classes and data attributes for easy styling&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Complete&lt;/strong&gt;: All 15+ Obsidian callout types supported&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Multilingual&lt;/strong&gt;: Callout titles are automatically translated based on your site&amp;rsquo;s language (and can be customized in the language packs)&lt;/li&gt;
&lt;/ul&gt;</description>
    </item>
    
    <item>
      <title>Callouts</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/callout/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/callout/</guid>
      <description>&lt;p&gt;Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.&lt;/p&gt;
&lt;p&gt;Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.&lt;/p&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;
&lt;h3 id=&#34;basic-callout-types&#34;&gt;Basic Callout Types&lt;/h3&gt;
&lt;p&gt;Hugo Blox supports all 15+ callout types from 
:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Information &amp;amp; Notes:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!NOTE]  
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is a note callout with important information that users should know.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;note&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Note&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is a note callout with important information that users should know.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!INFO]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Alternative info callout - same styling as NOTE.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;info&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Info&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Alternative info callout - same styling as NOTE.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!ABSTRACT]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Use for abstracts, summaries, or TL;DR sections.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-cyan-100 dark:bg-cyan-900 border-cyan-500&#34; 
     data-callout=&#34;abstract&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-cyan-600 dark:text-cyan-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75a2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15a2.25 2.25 0 0 1 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125zM6.75 12h.008v.008H6.75zm0 3h.008v.008H6.75zm0 3h.008v.008H6.75z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Abstract&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Use for abstracts, summaries, or TL;DR sections.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Actions &amp;amp; Tasks:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!TODO]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is something that needs to be done.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500&#34; 
     data-callout=&#34;todo&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Todo&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is something that needs to be done.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!TIP]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Here&amp;#39;s a helpful tip to make your workflow more efficient!
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500&#34; 
     data-callout=&#34;tip&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Tip&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Here&amp;rsquo;s a helpful tip to make your workflow more efficient!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!SUCCESS]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Great job! This operation completed successfully.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500&#34; 
     data-callout=&#34;success&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-green-600 dark:text-green-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Success&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Great job! This operation completed successfully.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Questions &amp;amp; Interactive:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!QUESTION]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;What do you think about this approach? Let us know!
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-yellow-100 dark:bg-yellow-900 border-yellow-500&#34; 
     data-callout=&#34;question&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-yellow-700 dark:text-yellow-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712a2.98 2.98 0 0 1-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Question&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;What do you think about this approach? Let us know!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!EXAMPLE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Here&amp;#39;s a practical example of how to implement this feature.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;example&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Example&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Here&amp;rsquo;s a practical example of how to implement this feature.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!QUOTE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;&amp;#34;The best way to predict the future is to invent it.&amp;#34; - Alan Kay
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-500&#34; 
     data-callout=&#34;quote&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-gray-600 dark:text-gray-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;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&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Quote&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;&amp;ldquo;The best way to predict the future is to invent it.&amp;rdquo; - Alan Kay&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Warnings &amp;amp; Errors:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!WARNING]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Be careful! This action might have unexpected consequences.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500&#34; 
     data-callout=&#34;warning&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Warning&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Be careful! This action might have unexpected consequences.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!CAUTION]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Danger! This operation is irreversible and could cause data loss.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;caution&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Caution&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Danger! This operation is irreversible and could cause data loss.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!IMPORTANT]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is critical information that users must understand to proceed.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500&#34; 
     data-callout=&#34;important&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Important&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is critical information that users must understand to proceed.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!DANGER]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This is extremely dangerous - proceed with extreme caution!
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;danger&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Danger&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This is extremely dangerous - proceed with extreme caution!&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!FAILURE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This operation failed. Check your configuration and try again.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;failure&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;m9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Failure&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This operation failed. Check your configuration and try again.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!BUG]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;Known issue: This feature doesn&amp;#39;t work properly in Safari &amp;lt; 14.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  





  
  
  














  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500&#34; 
     data-callout=&#34;bug&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-red-600 dark:text-red-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 12.75c1.148 0 2.278.08 3.383.237c1.037.146 1.866.966 1.866 2.013c0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75m0 0c2.883 0 5.647.508 8.208 1.44a23.91 23.91 0 0 1-1.153 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44c.125 2.105.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236c.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236c-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747M8.683 5a3.75 3.75 0 0 1 6.635 0m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314a23.88 23.88 0 0 0 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Bug&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;Known issue: This feature doesn&amp;rsquo;t work properly in Safari &amp;lt; 14.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;custom-titles&#34;&gt;Custom Titles&lt;/h3&gt;
&lt;p&gt;You can customize the title of any callout:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;[!WARNING]+ Custom Warning Title
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;ge&#34;&gt;&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;This warning has a custom title instead of just &amp;#34;Warning&amp;#34;.
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;


  
  
  
  
  


















  
  
  
  


&lt;div class=&#34;callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500&#34; 
     data-callout=&#34;warning&#34; 
     data-callout-metadata=&#34;&#34;&gt;
  &lt;span class=&#34;callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300&#34;&gt;
    &lt;svg height=&#34;24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z&#34;/&gt;&lt;/svg&gt;
  &lt;/span&gt;
  &lt;div class=&#34;callout-content dark:text-neutral-300&#34;&gt;
    &lt;div class=&#34;callout-title font-semibold mb-1&#34;&gt;Custom Warning Title&lt;br&gt;&lt;/div&gt;
    &lt;div class=&#34;callout-body&#34;&gt;&lt;p&gt;This warning has a custom title instead of just &amp;ldquo;Warning&amp;rdquo;.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3 id=&#34;legacy-syntax-deprecated&#34;&gt;Legacy Syntax (Deprecated)&lt;/h3&gt;
&lt;p&gt;The old shortcode syntax still works but shows a deprecation warning:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; callout note &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;This still works but is deprecated. Use the Markdown syntax above!
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /callout &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;css-customization&#34;&gt;CSS Customization&lt;/h3&gt;
&lt;p&gt;Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Base class: &lt;code&gt;.callout&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Type-specific data attribute: &lt;code&gt;data-callout=&amp;quot;note&amp;quot;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Component classes: &lt;code&gt;.callout-icon&lt;/code&gt;, &lt;code&gt;.callout-title&lt;/code&gt;, &lt;code&gt;.callout-content&lt;/code&gt;, &lt;code&gt;.callout-body&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Custom CSS Example&lt;/strong&gt; (add to your &lt;code&gt;assets/css/custom.css&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Customize NOTE callouts */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;data-callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;note&amp;#34;&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;border-left-width&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;8&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;box-shadow&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;4&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;6&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;-1&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;px&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;rgb&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;/&lt;/span&gt; &lt;span class=&#34;mf&#34;&gt;0.1&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Make SUCCESS callouts pulse */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;data-callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;success&amp;#34;&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;animation&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;pulse&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;kc&#34;&gt;infinite&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Custom icon styling */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout-icon&lt;/span&gt; &lt;span class=&#34;nt&#34;&gt;svg&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;transition&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;transform&lt;/span&gt; &lt;span class=&#34;mf&#34;&gt;0.2&lt;/span&gt;&lt;span class=&#34;kt&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;nd&#34;&gt;hover&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout-icon&lt;/span&gt; &lt;span class=&#34;nt&#34;&gt;svg&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;transform&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;scale&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mf&#34;&gt;1.1&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c&#34;&gt;/* Dark mode overrides */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;@&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;media&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nt&#34;&gt;dark&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nc&#34;&gt;callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;data-callout&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;warning&amp;#34;&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;background-color&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;rgb&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;92&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;25&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;2&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;k&#34;&gt;border-color&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;rgb&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;245&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;158&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;11&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This approach matches 
, ensuring your styles work across platforms.&lt;/p&gt;
&lt;h3 id=&#34;benefits-of-the-new-syntax&#34;&gt;Benefits of the New Syntax&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Portable&lt;/strong&gt;: Works with GitHub, Obsidian, and other Markdown editors&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Standard&lt;/strong&gt;: Uses widely-adopted Markdown callout syntax&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Clean&lt;/strong&gt;: No Hugo-specific shortcodes needed&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Future-proof&lt;/strong&gt;: Supported by the latest Hugo versions (0.132.0+)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Customizable&lt;/strong&gt;: Semantic CSS classes and data attributes for easy styling&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Complete&lt;/strong&gt;: All 15+ Obsidian callout types supported&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Multilingual&lt;/strong&gt;: Callout titles are automatically translated based on your site&amp;rsquo;s language (and can be customized in the language packs)&lt;/li&gt;
&lt;/ul&gt;</description>
    </item>
    
    <item>
      <title>Cards</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/formatting/cards/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/formatting/cards/</guid>
      <description>&lt;p&gt;A Hugo extension to create cards. Cards can be shown as links or as plain text.&lt;/p&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;




&lt;div class=&#34;hb-cards mt-4 grid gap-4 not-prose&#34; style=&#34;--hb-cols: 1;&#34;&gt;
  
  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5&#34;/&gt;&lt;/svg&gt;Learn Shortcodes&lt;/span&gt;&lt;/a&gt;

  &lt;a
    class=&#34;hb-card group&#34;&gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;A card without an icon or link&lt;/span&gt;&lt;/a&gt;


&lt;/div&gt;

&lt;p&gt;is rendered by:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; cards &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  {{&amp;lt; card url=&amp;#34;../callout&amp;#34; title=&amp;#34;Callout&amp;#34; icon=&amp;#34;academic-cap&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  {{&amp;lt; card url=&amp;#34;&amp;#34; title=&amp;#34;A card without an icon&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /cards &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;options&#34;&gt;Options&lt;/h2&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Parameter&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;icon&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Name of the icon. Defaults to 
&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;title&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Title heading for the card.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;subtitle&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Subtitle heading (supports Markdown).&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;url&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;URL&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</description>
    </item>
    
    <item>
      <title>Cards</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/cards/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/cards/</guid>
      <description>&lt;p&gt;A Hugo extension to create cards. Cards can be shown as links or as plain text.&lt;/p&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;




&lt;div class=&#34;hb-cards mt-4 grid gap-4 not-prose&#34; style=&#34;--hb-cols: 1;&#34;&gt;
  
  &lt;a
    class=&#34;hb-card group&#34;href=&#34;../&#34; &gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;
        &lt;svg style=&#34;height: 1em; width: 1em;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; viewBox=&#34;0 0 24 24&#34;&gt;&lt;path fill=&#34;none&#34; stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;1.5&#34; d=&#34;M4.26 10.147a60.436 60.436 0 0 0-.491 6.347A48.627 48.627 0 0 1 12 20.904a48.627 48.627 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.57 50.57 0 0 0-2.658-.813A59.905 59.905 0 0 1 12 3.493a59.902 59.902 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.697 50.697 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5&#34;/&gt;&lt;/svg&gt;Learn Shortcodes&lt;/span&gt;&lt;/a&gt;

  &lt;a
    class=&#34;hb-card group&#34;&gt;
  
    &lt;span class=&#34;hb-card-title p-4&#34;&gt;A card without an icon or link&lt;/span&gt;&lt;/a&gt;


&lt;/div&gt;

&lt;p&gt;is rendered by:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; cards &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  {{&amp;lt; card url=&amp;#34;../callout&amp;#34; title=&amp;#34;Callout&amp;#34; icon=&amp;#34;academic-cap&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  {{&amp;lt; card url=&amp;#34;&amp;#34; title=&amp;#34;A card without an icon&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /cards &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;options&#34;&gt;Options&lt;/h2&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Parameter&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;icon&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Name of the icon. Defaults to 
&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;title&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Title heading for the card.&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;subtitle&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;Subtitle heading (supports Markdown).&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;code&gt;url&lt;/code&gt;&lt;/td&gt;
          &lt;td&gt;URL&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</description>
    </item>
    
    <item>
      <title>Internationalization (i18n)</title>
      <link>https://hzambran.github.io/courses/hugo-blox/reference/i18n/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/reference/i18n/</guid>
      <description>&lt;p&gt;Hugo Blox enables you to easily edit the interface text as well as translating your site into multiple languages using Hugo&amp;rsquo;s 
 feature.&lt;/p&gt;
&lt;p&gt;View the full docs at 
&lt;/p&gt;</description>
    </item>
    
    <item>
      <title>Internationalization (i18n)</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/reference/i18n/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/reference/i18n/</guid>
      <description>&lt;p&gt;Hugo Blox enables you to easily edit the interface text as well as translating your site into multiple languages using Hugo&amp;rsquo;s 
 feature.&lt;/p&gt;
&lt;p&gt;View the full docs at 
&lt;/p&gt;</description>
    </item>
    
    <item>
      <title>Spoilers</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/formatting/toggle/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/formatting/toggle/</guid>
      <description>&lt;p&gt;A Hugo shortcode to toggle collapsible content.&lt;/p&gt;
&lt;h2 id=&#34;example&#34;&gt;Example&lt;/h2&gt;
&lt;details class=&#34;spoiler &#34;  id=&#34;spoiler-0&#34;&gt;
  &lt;summary class=&#34;cursor-pointer&#34;&gt;Click to view the spoiler&lt;/summary&gt;
  &lt;div class=&#34;rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2&#34;&gt;
    &lt;p&gt;You found me!&lt;/p&gt;
&lt;p&gt;Markdown is &lt;strong&gt;supported&lt;/strong&gt;.&lt;/p&gt;

  &lt;/div&gt;
&lt;/details&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; spoiler text=&amp;#34;Click to view the spoiler&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;This is the content of the details.
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Markdown is **supported**.
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /spoiler &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>Spoilers</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/toggle/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/toggle/</guid>
      <description>&lt;p&gt;A Hugo shortcode to toggle collapsible content.&lt;/p&gt;
&lt;h2 id=&#34;example&#34;&gt;Example&lt;/h2&gt;
&lt;details class=&#34;spoiler &#34;  id=&#34;spoiler-0&#34;&gt;
  &lt;summary class=&#34;cursor-pointer&#34;&gt;Click to view the spoiler&lt;/summary&gt;
  &lt;div class=&#34;rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2&#34;&gt;
    &lt;p&gt;You found me!&lt;/p&gt;
&lt;p&gt;Markdown is &lt;strong&gt;supported&lt;/strong&gt;.&lt;/p&gt;

  &lt;/div&gt;
&lt;/details&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; spoiler text=&amp;#34;Click to view the spoiler&amp;#34; &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;This is the content of the details.
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Markdown is **supported**.
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{&amp;lt; /spoiler &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>Steps</title>
      <link>https://hzambran.github.io/courses/hugo-blox/guide/formatting/steps/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/hugo-blox/guide/formatting/steps/</guid>
      <description>&lt;p&gt;Display a series of steps, such as for a tutorial.&lt;/p&gt;
&lt;h2 id=&#34;example&#34;&gt;Example&lt;/h2&gt;
&lt;div class=&#34;hb-steps&#34;&gt;
&lt;h3 id=&#34;step-1&#34;&gt;Step 1&lt;/h3&gt;
&lt;p&gt;The first step here&amp;hellip;&lt;/p&gt;
&lt;h3 id=&#34;step-2&#34;&gt;Step 2&lt;/h3&gt;
&lt;p&gt;The second step here&amp;hellip;&lt;/p&gt;
&lt;h3 id=&#34;step-3&#34;&gt;Step 3&lt;/h3&gt;
&lt;p&gt;The third step here&amp;hellip;&lt;/p&gt;
&lt;/div&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;
&lt;p&gt;Use the Markdown level-3 headings to represent step titles within the &lt;code&gt;steps&lt;/code&gt; shortcode:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{% steps %}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;### Step 1
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;The first step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;### Step 2
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;The second step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;### Step 3
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;The third step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{% /steps %}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
    <item>
      <title>Steps</title>
      <link>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/steps/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://hzambran.github.io/courses/iio222-programacionaplicada/guide/formatting/steps/</guid>
      <description>&lt;p&gt;Display a series of steps, such as for a tutorial.&lt;/p&gt;
&lt;h2 id=&#34;example&#34;&gt;Example&lt;/h2&gt;
&lt;div class=&#34;hb-steps&#34;&gt;
&lt;h3 id=&#34;step-1&#34;&gt;Step 1&lt;/h3&gt;
&lt;p&gt;The first step here&amp;hellip;&lt;/p&gt;
&lt;h3 id=&#34;step-2&#34;&gt;Step 2&lt;/h3&gt;
&lt;p&gt;The second step here&amp;hellip;&lt;/p&gt;
&lt;h3 id=&#34;step-3&#34;&gt;Step 3&lt;/h3&gt;
&lt;p&gt;The third step here&amp;hellip;&lt;/p&gt;
&lt;/div&gt;
&lt;h2 id=&#34;usage&#34;&gt;Usage&lt;/h2&gt;
&lt;p&gt;Use the Markdown level-3 headings to represent step titles within the &lt;code&gt;steps&lt;/code&gt; shortcode:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-fallback&#34; data-lang=&#34;fallback&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{% steps %}}
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;### Step 1
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;The first step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;### Step 2
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;The second step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;### Step 3
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;The third step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;{{% /steps %}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
    </item>
    
  </channel>
</rss>
