<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Qianle (Bill) Chen - Academic CV</title><link>https://qianlechen.github.io/</link><atom:link href="https://qianlechen.github.io/index.xml" rel="self" type="application/rss+xml"/><description>Qianle (Bill) Chen - Academic CV</description><generator>Hugo Blox Builder (https://hugoblox.com)</generator><language>en-us</language><lastBuildDate>Mon, 24 Oct 2022 00:00:00 +0000</lastBuildDate><image><url>https://qianlechen.github.io/media/icon_hu_2bb485f65b31684d.png</url><title>Qianle (Bill) Chen - Academic CV</title><link>https://qianlechen.github.io/</link></image><item><title>Getting Started</title><link>https://qianlechen.github.io/courses/hugo-blox/getting-started/</link><pubDate>Sat, 17 Feb 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/courses/hugo-blox/getting-started/</guid><description>&lt;h2 id="quick-start-from-template"&gt;Quick Start from Template&lt;/h2&gt;
&lt;div class="hb-steps"&gt;
&lt;h3 id="create-a-site"&gt;Create a site&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id="configure-your-new-site"&gt;Configure your new site&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id="add-your-content"&gt;Add your content&lt;/h3&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;h3 id="publish-your-site"&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="next"&gt;Next&lt;/h2&gt;
&lt;p&gt;Let&amp;rsquo;s customize your new site:&lt;/p&gt;
&lt;div class="hb-cards mt-4 grid gap-4 not-prose" style="--hb-cols: 1;"&gt;
&lt;a
class="hb-card group"href="../guide/project-structure" &gt;
&lt;span class="hb-card-title p-4"&gt;
&lt;svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;Project Structure&lt;/span&gt;&lt;/a&gt;
&lt;a
class="hb-card group"href="../guide/configuration" &gt;
&lt;span class="hb-card-title p-4"&gt;
&lt;svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;Configuration&lt;/span&gt;&lt;/a&gt;
&lt;a
class="hb-card group"href="../guide/formatting" &gt;
&lt;span class="hb-card-title p-4"&gt;
&lt;svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;Create content&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;</description></item><item><title>Customizing Hugo</title><link>https://qianlechen.github.io/courses/hugo-blox/reference/customization/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/courses/hugo-blox/reference/customization/</guid><description>&lt;p&gt;View the full docs at
&lt;/p&gt;</description></item><item><title>Project Structure</title><link>https://qianlechen.github.io/courses/hugo-blox/guide/project-structure/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/courses/hugo-blox/guide/project-structure/</guid><description>&lt;h2 id="folder-structure"&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="hugo-file-naming-convention"&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="docs-navigation"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="l"&gt;My Example&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="l"&gt;My Test&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="m"&gt;2&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&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://qianlechen.github.io/courses/hugo-blox/guide/configuration/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.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="full-documentation"&gt;Full Documentation&lt;/h2&gt;
&lt;p&gt;See
&lt;/p&gt;
&lt;h2 id="navigation"&gt;Navigation&lt;/h2&gt;
&lt;h3 id="menu"&gt;Menu&lt;/h3&gt;
&lt;p&gt;See
&lt;/p&gt;
&lt;h2 id="left-sidebar"&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="extra-links"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nt"&gt;menu&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;sidebar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;- &lt;span class="nt"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;Need help?&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;params&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="l"&gt;separator&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;- &lt;span class="nt"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;A page&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;pageRef&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;/page-filename-here&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="m"&gt;2&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;- &lt;span class="nt"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;An external link ↗&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;https://hugoblox.com&amp;#34;&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;weight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="m"&gt;3&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="right-sidebar"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-yaml" data-lang="yaml"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="l"&gt;My Page&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nt"&gt;toc&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="w"&gt;&lt;/span&gt;&lt;span class="nn"&gt;---&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description></item><item><title>Lingua Harmonia &amp; UCLA Linguistics Research</title><link>https://qianlechen.github.io/events/language/</link><pubDate>Sun, 02 Nov 2025 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/events/language/</guid><description>&lt;p&gt;As the &lt;strong&gt;Founder and CEO of Lingua Harmonia&lt;/strong&gt;, I created a student-led linguistics organization dedicated to promoting &lt;strong&gt;language diversity, cross-cultural communication, and equitable access to language learning&lt;/strong&gt;.&lt;br&gt;
Our team provides &lt;strong&gt;free tutoring and educational workshops&lt;/strong&gt; for underserved youth to explore the relationship between &lt;strong&gt;language, identity, and culture&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;In collaboration with &lt;strong&gt;Dr. Nina Bjekovic&lt;/strong&gt; from the &lt;strong&gt;UCLA Department of Linguistics&lt;/strong&gt;, I conducted research on &lt;strong&gt;language diversity and sociolinguistic variation&lt;/strong&gt;, integrating field study observations into Lingua Harmonia’s outreach curriculum.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Position/Leadership (≤50):&lt;/strong&gt; CEO of Lingua Harmonia &amp;amp; Linguistics Researcher&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Organizations:&lt;/strong&gt; UCLA Department of Linguistics; Lingua Harmonia&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Description (≤150):&lt;/strong&gt; Collaborated with UCLA Dr. Nina Bjekovic to study language diversity; founded Lingua Harmonia to tutor underserved youth and raise cultural awareness.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Participation:&lt;/strong&gt; Grades &lt;strong&gt;11, 12, Continuing&lt;/strong&gt; — &lt;strong&gt;All Year&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Hours:&lt;/strong&gt; ~6 hrs/week × 35 weeks/year&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="program-highlights"&gt;Program Highlights&lt;/h2&gt;
&lt;p&gt;Through Lingua Harmonia, I have:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Designed bilingual tutoring materials in &lt;strong&gt;English, Mandarin, and Spanish&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Led community workshops on &lt;strong&gt;language identity and sociolinguistics&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Partnered with UCLA students and linguists for guest lectures&lt;/li&gt;
&lt;li&gt;Organized cultural exchange activities connecting &lt;strong&gt;youth with multilingual mentors&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This work combines &lt;strong&gt;academic research and public outreach&lt;/strong&gt;, showing how linguistic diversity can strengthen community understanding and empathy.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="photo-gallery"&gt;Photo Gallery&lt;/h2&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="featured.jpg" alt="Lingua Harmonia Founding Event" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Founding event of Lingua Harmonia at UCLA — promoting multilingual education.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="pic1.jpg" alt="UCLA Linguistics Event" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Presenting Lingua Harmonia at a UCLA language diversity fair.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="pic2.jpg" alt="Lingua Harmonia Booth at UCLA" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Outreach booth with UCLA linguistics mentors to raise awareness on language diversity.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Pic3.jpg" alt="Teaching Linguistics to Youth" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Leading an interactive linguistics workshop for young students, exploring language patterns and cultural identity.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Pic4.jpg" alt="Lecturing Youth on Language Diversity" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Teaching kids about the importance of linguistic diversity and cross-cultural communication through Lingua Harmonia.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h3 id="teaching-materials--curriculum"&gt;Teaching Materials &amp;amp; Curriculum&lt;/h3&gt;
&lt;p&gt;Example slides from the first English lesson designed for ESL students, using interactive guided questions to support comprehension.&lt;/p&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Pic5.1.png" alt="English Lesson Slide 1" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Pic5.2.png" alt="English Lesson Slide 2" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Comprehension exercises designed to help ESL students practice language skills in a supportive learning environment.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr&gt;
&lt;h2 id="activity-summary-for-applications"&gt;Activity Summary (for Applications)&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;CEO of Lingua Harmonia and Linguistics Researcher&lt;/strong&gt;&lt;br&gt;
Collaborated with UCLA Dr. Nina Bjekovic to study language diversity; founded Lingua Harmonia to tutor underserved youth and raise cultural awareness.&lt;br&gt;
Grades 11–12, Continuing • 6 hrs/week • 35 weeks/year • All Year&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="impact"&gt;Impact&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Promoted &lt;strong&gt;language equity and inclusion&lt;/strong&gt; across student communities&lt;/li&gt;
&lt;li&gt;Created &lt;strong&gt;accessible linguistics education&lt;/strong&gt; for underrepresented youth&lt;/li&gt;
&lt;li&gt;Strengthened &lt;strong&gt;academic collaboration&lt;/strong&gt; between UCLA and high school linguistics learners&lt;/li&gt;
&lt;li&gt;Fostered cross-cultural empathy and global awareness&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"&gt;
&lt;p&gt;This initiative combines &lt;strong&gt;linguistics research and educational outreach&lt;/strong&gt;, turning academic insight into real-world impact.&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>Satellite Measurements of Evapotranspiration Predict Plant Water Stress</title><link>https://qianlechen.github.io/publications/conference-paper/</link><pubDate>Wed, 01 Oct 2025 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/publications/conference-paper/</guid><description>&lt;h2 id="abstract"&gt;Abstract&lt;/h2&gt;
&lt;p&gt;This project tests whether NASA ECOSTRESS evapotranspiration (ET) can track plant water
status across species and sites. ECOSTRESS ET was paired with PSInet predawn and midday
leaf water potentials within seven days. Lower ET aligned with more negative water potentials,
with significant correlations for 9 of 26 species at midday and 7 of 28 at predawn. Effect sizes
varied by functional traits and site, suggesting that ECOSTRESS ET provides a scalable,
non-invasive indicator of plant drought stress that complements field measurements and
management decisions.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="poster-presentation"&gt;Poster Presentation&lt;/h2&gt;
&lt;p&gt;This research was &lt;strong&gt;presented at the 2025 NASA ECOSTRESS Annual Science Team Meeting&lt;/strong&gt;.&lt;br&gt;
Highlighting the integration of satellite-derived evapotranspiration data with field-measured
leaf water potentials to assess drought stress at a global scale.&lt;br&gt;
The poster summarizes cross-species analyses showing significant relationships between
ECOSTRESS-derived evapotranspiration and plant water potential.&lt;/p&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Poster.png" alt="Satellite Measurements of Evapotranspiration Predict Plant Water Stress Poster" style="width: 100%; max-width: 1000px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.15);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Poster presented at the NASA ECOSTRESS Annual Science Team Meeting — demonstrating ECOSTRESS evapotranspiration as a global-scale indicator of plant drought stress.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr&gt;
&lt;h2 id="download"&gt;Download&lt;/h2&gt;
&lt;p&gt;
{download}&lt;/p&gt;
&lt;p&gt;For more projects and publications, visit my&lt;br&gt;
.&lt;/p&gt;</description></item><item><title>GIS - Southern France Wildfire</title><link>https://qianlechen.github.io/publications/ecostress-headpage/</link><pubDate>Wed, 06 Aug 2025 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/publications/ecostress-headpage/</guid><description>&lt;h2 id="nasas-ecostress-wildfire-observation-featured-on-nasa-homepage"&gt;NASA’s ECOSTRESS Wildfire Observation Featured on NASA Homepage&lt;/h2&gt;
&lt;p&gt;For &lt;strong&gt;over a month&lt;/strong&gt;, NASA highlighted this ECOSTRESS product on its public homepage to recognize its value in &lt;strong&gt;real-time wildfire monitoring&lt;/strong&gt; and &lt;strong&gt;international emergency response&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;On &lt;strong&gt;August 6, 2025&lt;/strong&gt;, the ECOSTRESS (ECOsystem Spaceborne Thermal Radiometer Experiment on Space Station) instrument acquired &lt;strong&gt;high-resolution thermal imagery&lt;/strong&gt; of an &lt;strong&gt;active wildfire front&lt;/strong&gt; in the &lt;strong&gt;Aude department of southern France&lt;/strong&gt;. The imagery showed land surface temperatures during a peak growth phase of the fire, with values ranging from elevated background temperatures to very hot active-fire pixels.&lt;/p&gt;
&lt;p&gt;Because ECOSTRESS can measure &lt;strong&gt;land surface temperature and plant stress from the International Space Station&lt;/strong&gt;, these data were shared as a &lt;strong&gt;critical reference layer&lt;/strong&gt; for the &lt;strong&gt;France Fire Department&lt;/strong&gt; and regional incident teams. The product supported:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Rapid assessment of &lt;strong&gt;where the fire was hottest&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Better understanding of &lt;strong&gt;fire behavior across mixed terrain&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Communication of &lt;strong&gt;fireline location and severity&lt;/strong&gt; to decision makers&lt;/li&gt;
&lt;li&gt;Broader demonstration of &lt;strong&gt;space-based thermal data for disaster management&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This feature also illustrated ECOSTRESS’s broader mission: using thermal imaging to track &lt;strong&gt;water stress, agricultural impacts, urban heat, and extreme events&lt;/strong&gt; from space.&lt;/p&gt;
&lt;blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"&gt;
&lt;p&gt;&lt;strong&gt;Why It Was Recognized&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Placed on the &lt;strong&gt;NASA homepage for &amp;gt;1 month&lt;/strong&gt; as an example of actionable Earth-observing science&lt;/li&gt;
&lt;li&gt;Demonstrated &lt;strong&gt;ISS-based thermal sensing&lt;/strong&gt; for an &lt;strong&gt;ongoing&lt;/strong&gt; emergency, not just retrospective science&lt;/li&gt;
&lt;li&gt;Created in collaboration with &lt;strong&gt;NASA JPL&lt;/strong&gt;, &lt;strong&gt;ECOSTRESS science team&lt;/strong&gt;, and a student contributor from &lt;strong&gt;Arnold O. Beckman High School&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;hr&gt;
&lt;h2 id="research-image"&gt;Research Image&lt;/h2&gt;
&lt;style&gt;
.full-width-image-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 100vw;
}
.full-width-image-container img {
width: 100%;
height: auto;
display: block;
}
.full-width-caption {
text-align: center;
margin-top: 1rem;
font-style: italic;
color: #666;
padding: 0 2rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
&lt;/style&gt;
&lt;div class="full-width-image-container"&gt;
&lt;img src="ecostress.jpl.nasa.gov_.png" alt="ECOSTRESS High-Resolution Thermal Imagery of the Southern France Wildfire, August 6, 2025"&gt;
&lt;p class="full-width-caption"&gt;
ECOSTRESS thermal map of the August 6, 2025 southern France wildfire, featured on the NASA homepage for over a month and used by France Fire Department as a situational layer. Image credit: NASA / JPL-Caltech / ECOSTRESS.
&lt;/p&gt;
&lt;/div&gt;</description></item><item><title>GIS – Portugal Wildfires 2025</title><link>https://qianlechen.github.io/publications/ecostress-s1/</link><pubDate>Tue, 29 Jul 2025 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/publications/ecostress-s1/</guid><description>&lt;h2 id="portugal-wildfires--july-29-2025"&gt;Portugal Wildfires – July 29, 2025&lt;/h2&gt;
&lt;p&gt;NASA’s &lt;strong&gt;ECOSTRESS (ECOsystem Spaceborne Thermal Radiometer Experiment on Space Station)&lt;/strong&gt; recorded thermal anomalies during the 2025 Portugal wildfires.&lt;br&gt;
The dataset shows &lt;strong&gt;land surface temperatures exceeding 111°C (242°F)&lt;/strong&gt; across multiple fronts in the northern region. These measurements provided key insights into &lt;strong&gt;fire intensity, spread, and local impacts&lt;/strong&gt;, supporting environmental monitoring and emergency response.&lt;/p&gt;
&lt;p&gt;This visualization was produced in collaboration with &lt;strong&gt;Dr. Joshua Fisher (Chapman University)&lt;/strong&gt;, and has been &lt;strong&gt;published in the NASA ECOSTRESS Gallery&lt;/strong&gt; for public access.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="research-image"&gt;Research Image&lt;/h2&gt;
&lt;style&gt;
.full-width-image-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 100vw;
}
.full-width-image-container img {
width: 100%;
height: auto;
display: block;
}
.full-width-caption {
text-align: center;
margin-top: 1rem;
font-style: italic;
color: #666;
padding: 0 2rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
&lt;/style&gt;
&lt;div class="full-width-image-container"&gt;
&lt;img src="GIS Portugal Widfires.png" alt="ECOSTRESS Portugal Wildfires Thermal Map, July 29, 2025"&gt;
&lt;p class="full-width-caption"&gt;
ECOSTRESS thermal imagery showing multiple active fire zones in Portugal on July 29, 2025. Visualization published on NASA ECOSTRESS Gallery. Image credit: NASA / JPL-Caltech / ECOSTRESS.
&lt;/p&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;h2 id="credits"&gt;Credits&lt;/h2&gt;
&lt;p&gt;Created in collaboration with:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Bill Chen (Arnold O. Beckman High School)&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dr. Joshua R. Fisher (Chapman University)&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="related-links"&gt;Related Links&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;🌍
&lt;/li&gt;
&lt;li&gt;🛰️
&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>GIS – Serabigões Wildfire, Northern Portugal 2025</title><link>https://qianlechen.github.io/publications/ecostress-s2/</link><pubDate>Tue, 29 Jul 2025 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/publications/ecostress-s2/</guid><description>&lt;h2 id="serabigões-wildfire--july-29-2025"&gt;Serabigões Wildfire – July 29, 2025&lt;/h2&gt;
&lt;p&gt;NASA’s &lt;strong&gt;ECOSTRESS (ECOsystem Spaceborne Thermal Radiometer Experiment on Space Station)&lt;/strong&gt; recorded high-resolution thermal data of the &lt;strong&gt;Serabigões fire front&lt;/strong&gt; in northern Portugal.&lt;br&gt;
The thermal map captured &lt;strong&gt;land surface temperatures from 26.7°C (80°F) to 96.7°C (206°F)&lt;/strong&gt;, identifying multiple active burn zones during a critical afternoon period under extreme heat and dry conditions.&lt;/p&gt;
&lt;p&gt;This segment of the &lt;strong&gt;Severe Fire Complex&lt;/strong&gt; affected rural areas around Serabigões and surrounding hills, continuing through late July. The dataset supports &lt;strong&gt;fire behavior analysis, damage assessment, and emergency response coordination&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;The visualization was created in collaboration with &lt;strong&gt;Dr. Joshua R. Fisher (Chapman University)&lt;/strong&gt; and &lt;strong&gt;Bill Chen (Arnold O. Beckman High School)&lt;/strong&gt; and has been &lt;strong&gt;published in the NASA ECOSTRESS Gallery&lt;/strong&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="research-image"&gt;Research Image&lt;/h2&gt;
&lt;style&gt;
.full-width-image-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 100vw;
}
.full-width-image-container img {
width: 100%;
height: auto;
display: block;
}
.full-width-caption {
text-align: center;
margin-top: 1rem;
font-style: italic;
color: #666;
padding: 0 2rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
&lt;/style&gt;
&lt;div class="full-width-image-container"&gt;
&lt;img src="Serabigoes Northern Portugal.png" alt="ECOSTRESS Serabigões Portugal Wildfire Heat Map, July 29, 2025"&gt;
&lt;p class="full-width-caption"&gt;
ECOSTRESS thermal imagery showing active fire zones near Serabigões, northern Portugal, on July 29, 2025. Published in NASA ECOSTRESS Gallery. Image credit: NASA / JPL-Caltech / ECOSTRESS.
&lt;/p&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;h2 id="credits"&gt;Credits&lt;/h2&gt;
&lt;p&gt;Created in collaboration with:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Bill Chen (Arnold O. Beckman High School)&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dr. Joshua R. Fisher (Chapman University)&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="related-links"&gt;Related Links&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;🌍
&lt;/li&gt;
&lt;li&gt;🛰️
&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>The Little Tree That Could: An Illustrated Children's Book</title><link>https://qianlechen.github.io/publications/book/</link><pubDate>Mon, 18 Nov 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/publications/book/</guid><description>&lt;h2 id="about-the-book"&gt;About The Book&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;&amp;ldquo;The Little Tree That Could&amp;rdquo;&lt;/strong&gt; is an illustrated children&amp;rsquo;s book that uses creative storytelling to inspire young readers to care about environmental protection and conservation. Written during my 11th grade year, this project combines my passion for environmental stewardship with the power of narrative to reach the next generation of environmental advocates.&lt;/p&gt;
&lt;h2 id="recognition--impact"&gt;Recognition &amp;amp; Impact&lt;/h2&gt;
&lt;h3 id="barnes--noble-recognition"&gt;Barnes &amp;amp; Noble Recognition&lt;/h3&gt;
&lt;p&gt;The book has gained recognition from &lt;strong&gt;Barnes &amp;amp; Noble&lt;/strong&gt;, one of the largest booksellers in the United States, affirming its quality and educational value in children&amp;rsquo;s environmental literature.&lt;/p&gt;
&lt;h3 id="environmental-impact-500-trees-planted"&gt;Environmental Impact: 500+ Trees Planted&lt;/h3&gt;
&lt;p&gt;What makes this project truly impactful is its direct contribution to environmental restoration:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;100% of proceeds&lt;/strong&gt; donated to
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;500+ trees funded&lt;/strong&gt; through book sales&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Global reach&lt;/strong&gt;: Trees planted in deforested areas and urban zones worldwide&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Climate action&lt;/strong&gt;: Direct contribution to carbon sequestration and global warming mitigation&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Ecosystem restoration&lt;/strong&gt;: Supporting biodiversity and habitat regeneration&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="real-world-change"&gt;Real-World Change&lt;/h3&gt;
&lt;p&gt;Every book purchased doesn&amp;rsquo;t just educate—it actively contributes to reforestation efforts:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Deforested Areas&lt;/strong&gt;: Restoring natural habitats destroyed by logging and agriculture&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Urban Zones&lt;/strong&gt;: Improving air quality and creating green spaces in cities&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Carbon Offset&lt;/strong&gt;: Each tree absorbs approximately 48 pounds of CO₂ per year&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Biodiversity&lt;/strong&gt;: Supporting wildlife habitats and ecological balance&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="the-story-behind-the-story"&gt;The Story Behind the Story&lt;/h2&gt;
&lt;h3 id="inspiration"&gt;Inspiration&lt;/h3&gt;
&lt;p&gt;As a high school student deeply passionate about environmental science and sustainability, I wanted to create something that could:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Reach young audiences&lt;/strong&gt; at a formative age when environmental values are developing&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Make abstract concepts tangible&lt;/strong&gt; through relatable characters and narratives&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Create measurable impact&lt;/strong&gt; by directly funding reforestation&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Demonstrate youth leadership&lt;/strong&gt; in environmental advocacy&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id="creative-process"&gt;Creative Process&lt;/h3&gt;
&lt;p&gt;The creation of &amp;ldquo;The Little Tree That Could&amp;rdquo; involved:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Research&lt;/strong&gt;: Understanding effective environmental education for children&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Storytelling&lt;/strong&gt;: Crafting an engaging narrative with memorable characters&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Illustration Coordination&lt;/strong&gt;: Working with artists to bring the story to visual life&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Self-Publishing&lt;/strong&gt;: Navigating the independent publishing process on Amazon&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Impact Planning&lt;/strong&gt;: Establishing the donation mechanism to One Tree Planted&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="educational-value"&gt;Educational Value&lt;/h2&gt;
&lt;p&gt;The book serves multiple educational purposes:&lt;/p&gt;
&lt;h3 id="for-children"&gt;For Children:&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Environmental Awareness&lt;/strong&gt;: Introduction to conservation concepts&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Empowerment&lt;/strong&gt;: Showing how individual actions matter&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Connection to Nature&lt;/strong&gt;: Fostering appreciation for trees and ecosystems&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Problem-Solving&lt;/strong&gt;: Demonstrating resilience and determination&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="for-educators--parents"&gt;For Educators &amp;amp; Parents:&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Discussion Starter&lt;/strong&gt;: Foundation for conversations about environmental responsibility&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Values Education&lt;/strong&gt;: Teaching care for the planet and future generations&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Real-World Connection&lt;/strong&gt;: Link between reading and tangible environmental action&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="future-expansion"&gt;Future Expansion&lt;/h2&gt;
&lt;p&gt;The success and impact of &amp;ldquo;The Little Tree That Could&amp;rdquo; have inspired plans for expansion:&lt;/p&gt;
&lt;h3 id="series-development"&gt;Series Development&lt;/h3&gt;
&lt;p&gt;Currently working on:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Additional titles&lt;/strong&gt; expanding the environmental storytelling universe&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;New characters and themes&lt;/strong&gt; addressing different environmental challenges&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Age-appropriate variations&lt;/strong&gt; for different reading levels&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Multilingual editions&lt;/strong&gt; to reach global audiences&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="educational-programs"&gt;Educational Programs&lt;/h3&gt;
&lt;p&gt;Developing complementary educational initiatives:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Classroom curriculum guides&lt;/strong&gt; for teachers&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Interactive activities&lt;/strong&gt; reinforcing environmental concepts&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;School presentation programs&lt;/strong&gt; sharing the story behind the story&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Tree planting events&lt;/strong&gt; connecting readers to real-world action&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Author visits&lt;/strong&gt; to schools and libraries&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="partnership-opportunities"&gt;Partnership Opportunities&lt;/h3&gt;
&lt;p&gt;Exploring collaborations with:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Environmental organizations&lt;/strong&gt; for broader impact&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Educational institutions&lt;/strong&gt; for curriculum integration&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Libraries and bookstores&lt;/strong&gt; for community events&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Schools&lt;/strong&gt; for environmental literacy programs&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="impact-metrics"&gt;Impact Metrics&lt;/h2&gt;
&lt;h3 id="environmental-contributions"&gt;Environmental Contributions&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;📚 &lt;strong&gt;Book Sales&lt;/strong&gt;: Ongoing on Amazon&lt;/li&gt;
&lt;li&gt;🌳 &lt;strong&gt;Trees Planted&lt;/strong&gt;: 500+ and counting&lt;/li&gt;
&lt;li&gt;🌍 &lt;strong&gt;Global Reach&lt;/strong&gt;: Multiple countries and continents&lt;/li&gt;
&lt;li&gt;♻️ &lt;strong&gt;Carbon Offset&lt;/strong&gt;: Significant CO₂ absorption through funded plantings&lt;/li&gt;
&lt;li&gt;🏆 &lt;strong&gt;Recognition&lt;/strong&gt;: Barnes &amp;amp; Noble acknowledgment&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="educational-reach"&gt;Educational Reach&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;👧👦 &lt;strong&gt;Young Readers&lt;/strong&gt;: Teaching environmental values&lt;/li&gt;
&lt;li&gt;📖 &lt;strong&gt;Libraries&lt;/strong&gt;: Available in school and public libraries&lt;/li&gt;
&lt;li&gt;🎓 &lt;strong&gt;Classrooms&lt;/strong&gt;: Used as educational resource&lt;/li&gt;
&lt;li&gt;👨‍👩‍👧‍👦 &lt;strong&gt;Families&lt;/strong&gt;: Fostering parent-child environmental conversations&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="why-this-matters"&gt;Why This Matters&lt;/h2&gt;
&lt;p&gt;&amp;ldquo;The Little Tree That Could&amp;rdquo; represents the intersection of:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Youth Leadership&lt;/strong&gt;: Demonstrating that young people can create meaningful change&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Creative Activism&lt;/strong&gt;: Using art and storytelling for environmental advocacy&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Measurable Impact&lt;/strong&gt;: Direct, quantifiable contribution to global reforestation&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Education&lt;/strong&gt;: Reaching the next generation at a critical developmental stage&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Systemic Thinking&lt;/strong&gt;: Connecting individual action to global environmental challenges&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="purchase--support"&gt;Purchase &amp;amp; Support&lt;/h2&gt;
&lt;p&gt;Every purchase of &amp;ldquo;The Little Tree That Could&amp;rdquo; directly funds tree plantings through One Tree Planted:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;📚 Available on Amazon&lt;/strong&gt;:
&lt;/p&gt;
&lt;p&gt;When you buy this book, you&amp;rsquo;re not just reading a story—you&amp;rsquo;re planting trees, supporting reforestation, and teaching children that their actions can make a difference in protecting our planet.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="awards--recognition"&gt;Awards &amp;amp; Recognition&lt;/h2&gt;
&lt;p&gt;🏆 &lt;strong&gt;Barnes &amp;amp; Noble Recognition&lt;/strong&gt; - Acknowledged for quality children&amp;rsquo;s environmental literature&lt;/p&gt;
&lt;p&gt;🌳 &lt;strong&gt;Environmental Impact&lt;/strong&gt; - 500+ trees funded through proceeds&lt;/p&gt;
&lt;p&gt;📈 &lt;strong&gt;Growing Movement&lt;/strong&gt; - Expanding series and educational programs&lt;/p&gt;
&lt;hr&gt;
&lt;div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="note"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Note&lt;/div&gt;
&lt;div class="callout-body"&gt;&lt;p&gt;This project demonstrates how creative expression can drive real environmental change. Through storytelling, we can inspire the next generation of environmental stewards while making a tangible impact on global reforestation efforts.&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id="get-involved"&gt;Get Involved&lt;/h2&gt;
&lt;p&gt;Interested in supporting this initiative?&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Purchase the book&lt;/strong&gt;:
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Request author visits&lt;/strong&gt; for schools and libraries&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Share the story&lt;/strong&gt; with young readers in your life&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Follow the expansion&lt;/strong&gt; of the series and educational programs&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Together, we can plant seeds of environmental awareness—one story, one tree, one reader at a time. 🌱&lt;/p&gt;</description></item><item><title>Air Quality Sensor Development Project</title><link>https://qianlechen.github.io/projects/atmoflow/</link><pubDate>Tue, 01 Oct 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/projects/atmoflow/</guid><description>&lt;p&gt;Engineered a continuous environmental monitoring system that leverages BME280, LTR-559, and MICS6814 sensor technology with Python-based analytics for comprehensive, real-time pollutant tracking.&lt;/p&gt;
&lt;h2 id="project-overview"&gt;Project Overview&lt;/h2&gt;
&lt;p&gt;Developed a sophisticated air quality monitoring system that provides real-time data on environmental pollutants and conditions.&lt;/p&gt;
&lt;h2 id="key-features"&gt;Key Features&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Continuous Monitoring:&lt;/strong&gt; BME280, LTR-559, and MICS6814 sensor integration for comprehensive environmental data collection&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Python Analytics:&lt;/strong&gt; Real-time data processing and analytics for accurate pollutant tracking&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Mobile Application:&lt;/strong&gt; AtmoFlow app for Android and iOS that provides live air quality data tracking&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;User-Centered Design:&lt;/strong&gt; Cross-platform mobile app ensuring accessibility and a seamless user experience&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Real-Time Updates:&lt;/strong&gt; Live tracking of air quality metrics with user-friendly visualizations&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="technical-stack"&gt;Technical Stack&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Hardware:&lt;/strong&gt; BME280 (temperature, humidity, pressure), LTR-559 (light), MICS6814 (gas sensors)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Software:&lt;/strong&gt; Python for data analytics and sensor integration&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Mobile:&lt;/strong&gt; Cross-platform development for iOS and Android&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Data Visualization:&lt;/strong&gt; Real-time charting and environmental data display&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="impact"&gt;Impact&lt;/h2&gt;
&lt;p&gt;This project demonstrates the practical application of IoT technology and data science to address environmental health concerns, making air quality data accessible to the general public through an intuitive mobile interface.&lt;/p&gt;</description></item><item><title>GIS – Airport Fire, Southern California 2024</title><link>https://qianlechen.github.io/publications/ecostress-s4/</link><pubDate>Sun, 15 Sep 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/publications/ecostress-s4/</guid><description>&lt;h2 id="airport-fire--september-15-2024"&gt;Airport Fire – September 15, 2024&lt;/h2&gt;
&lt;p&gt;NASA’s &lt;strong&gt;ECOSTRESS (ECOsystem Spaceborne Thermal Radiometer Experiment on Space Station)&lt;/strong&gt; recorded &lt;strong&gt;thermal imagery of the Airport Fire&lt;/strong&gt; during its active expansion across &lt;strong&gt;Orange and Riverside Counties&lt;/strong&gt;, Southern California.&lt;br&gt;
At 1:03 AM PST, ECOSTRESS detected &lt;strong&gt;land surface temperatures from 62°F (17°C) in unburned regions&lt;/strong&gt; to &lt;strong&gt;177°F (77°C)&lt;/strong&gt; in active burn zones, highlighting two intense fire clusters moving under &lt;strong&gt;Santa Ana wind&lt;/strong&gt; conditions.&lt;/p&gt;
&lt;p&gt;The &lt;strong&gt;Airport Fire&lt;/strong&gt; ignited on &lt;strong&gt;September 9, 2024&lt;/strong&gt;, due to equipment use during vegetation clearance, and spread rapidly through rugged terrain and dry vegetation. It was fully contained on &lt;strong&gt;October 5, 2024&lt;/strong&gt;, after burning more than &lt;strong&gt;23,526 acres (9,521 ha)&lt;/strong&gt;. ECOSTRESS data provided valuable insights into &lt;strong&gt;fire spread, intensity patterns, and thermal behavior&lt;/strong&gt; for post-event analysis.&lt;/p&gt;
&lt;p&gt;This visualization was created by &lt;strong&gt;Bill Chen (Arnold O. Beckman High School)&lt;/strong&gt; in collaboration with &lt;strong&gt;Dr. Joshua R. Fisher (Chapman University)&lt;/strong&gt; and has been &lt;strong&gt;published in NASA’s ECOSTRESS Gallery&lt;/strong&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="research-image"&gt;Research Image&lt;/h2&gt;
&lt;style&gt;
.full-width-image-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 100vw;
}
.full-width-image-container img {
width: 100%;
height: auto;
display: block;
}
.full-width-caption {
text-align: center;
margin-top: 1rem;
font-style: italic;
color: #666;
padding: 0 2rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
&lt;/style&gt;
&lt;div class="full-width-image-container"&gt;
&lt;img src="Airport Fire, Southern California.png" alt="ECOSTRESS Airport Fire Thermal Map, Orange &amp; Riverside Counties, September 15, 2024"&gt;
&lt;p class="full-width-caption"&gt;
ECOSTRESS thermal map of the Airport Fire across Orange and Riverside Counties, California, on September 15, 2024. Published in NASA ECOSTRESS Gallery. Image credit: NASA / JPL-Caltech / ECOSTRESS.
&lt;/p&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;h2 id="credits"&gt;Credits&lt;/h2&gt;
&lt;p&gt;Created in collaboration with:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Bill Chen (Arnold O. Beckman High School)&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dr. Joshua R. Fisher (Chapman University)&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="related-links"&gt;Related Links&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;🌍
&lt;/li&gt;
&lt;li&gt;🛰️
&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>UCLA COSMOS 2024 Summer Program</title><link>https://qianlechen.github.io/blog/ucla-cosmos/</link><pubDate>Mon, 15 Jul 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/blog/ucla-cosmos/</guid><description>&lt;p&gt;During the summer, I had the incredible opportunity to participate in the UCLA COSMOS program, where I engaged in hands-on scientific research and collaborated with fellow students passionate about STEM.&lt;/p&gt;
&lt;h2 id="program-experience"&gt;Program Experience&lt;/h2&gt;
&lt;p&gt;The UCLA COSMOS program provided an immersive experience in scientific research and exploration. Throughout the program, I worked on various projects, attended lectures from leading researchers, and built lasting connections with peers from across California.&lt;/p&gt;
&lt;h2 id="photo-gallery"&gt;Photo Gallery&lt;/h2&gt;
&lt;p&gt;Here are some memorable moments from my time at UCLA COSMOS:&lt;/p&gt;
&lt;!-- ### Method 1: Simple Image Grid (Markdown)
![COSMOS Experience](IMG_0308.jpeg "Campus activities and learning")
![Research Work](IMG_0310.jpeg "Hands-on research experience")
![Lab Sessions](IMG_0353.jpeg "Collaborative learning environment")
![Program Activities](IMG_0361.jpeg "COSMOS community")
### Method 2: Two-Column Layout
&lt;div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0;"&gt;
&lt;div&gt;
&lt;img src="IMG_0308.jpeg" alt="COSMOS Campus" style="width: 100%; border-radius: 8px;"&gt;
&lt;p style="text-align: center; margin-top: 0.5rem; font-style: italic;"&gt;Campus Life&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;img src="IMG_0310.jpeg" alt="Research Activities" style="width: 100%; border-radius: 8px;"&gt;
&lt;p style="text-align: center; margin-top: 0.5rem; font-style: italic;"&gt;Research Sessions&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;img src="IMG_0353.jpeg" alt="Lab Work" style="width: 100%; border-radius: 8px;"&gt;
&lt;p style="text-align: center; margin-top: 0.5rem; font-style: italic;"&gt;Laboratory Work&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;img src="IMG_0361.jpeg" alt="Team Projects" style="width: 100%; border-radius: 8px;"&gt;
&lt;p style="text-align: center; margin-top: 0.5rem; font-style: italic;"&gt;Collaborative Projects&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
### Method 3: Single Column with Captions --&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_0308.jpeg" alt="UCLA COSMOS Campus" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Exploring the beautiful UCLA campus during the COSMOS program&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_0310.jpeg" alt="Research Activities" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Principle Investigator Dr. Lawrence Sack&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_03531.jpeg" alt="Laboratory Sessions" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Principle Investigator Dr. Joshua B. Fisher&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_0361.jpeg" alt="COSMOS Community" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Presented Poster at Conference&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id="key-takeaways"&gt;Key Takeaways&lt;/h2&gt;
&lt;p&gt;The UCLA COSMOS program was a transformative experience that:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Enhanced my understanding of scientific research methodologies&lt;/li&gt;
&lt;li&gt;Provided exposure to advanced laboratory techniques&lt;/li&gt;
&lt;li&gt;Connected me with mentors and peers passionate about STEM&lt;/li&gt;
&lt;li&gt;Strengthened my commitment to pursuing scientific research&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="note"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Note&lt;/div&gt;
&lt;div class="callout-body"&gt;&lt;p&gt;This program significantly influenced my academic interests and career aspirations in science and research.&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id="looking-forward"&gt;Looking Forward&lt;/h2&gt;
&lt;p&gt;The skills and knowledge I gained at UCLA COSMOS continue to inspire my academic pursuits and research interests. The connections I made and the experiences I had will undoubtedly shape my future in STEM.&lt;/p&gt;</description></item><item><title>🌍 Yale Young Global Scholars</title><link>https://qianlechen.github.io/blog/yale-young-global-scholars/</link><pubDate>Mon, 01 Jul 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/blog/yale-young-global-scholars/</guid><description>&lt;p&gt;As a &lt;strong&gt;Speaker and Scholar&lt;/strong&gt; at the prestigious Yale Young Global Scholars (YYGS) program, I participated in an intensive two-week session focused on &lt;strong&gt;Solving Global Challenges&lt;/strong&gt;. This transformative experience at Yale University brought together exceptional students from around the world to explore pressing global issues and develop innovative solutions.&lt;/p&gt;
&lt;h2 id="program-overview"&gt;Program Overview&lt;/h2&gt;
&lt;p&gt;Yale Young Global Scholars is a highly competitive academic enrichment program that provides outstanding high school students with the opportunity to engage in rigorous academic coursework, collaborate with peers from diverse backgrounds, and learn from Yale faculty and global leaders.&lt;/p&gt;
&lt;p&gt;During my time at YYGS, I immersed myself in:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;50 hours per week&lt;/strong&gt; of intensive academic activities&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;2 weeks&lt;/strong&gt; of collaborative learning and global engagement&lt;/li&gt;
&lt;li&gt;Interdisciplinary discussions on environmental challenges&lt;/li&gt;
&lt;li&gt;Leadership development and global citizenship training&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="featured-speaker-role"&gt;Featured Speaker Role&lt;/h2&gt;
&lt;h3 id="yygs-speaker-series---plastic-pollution-talk"&gt;YYGS Speaker Series - Plastic Pollution Talk&lt;/h3&gt;
&lt;p&gt;One of the highlights of my YYGS experience was being selected to deliver a &lt;strong&gt;featured talk on plastic pollution&lt;/strong&gt; for the Pierson School through the &lt;strong&gt;YYGS Speaker Series&lt;/strong&gt;. This opportunity allowed me to:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Present research and insights on global plastic pollution challenges&lt;/li&gt;
&lt;li&gt;Share innovative solutions for reducing plastic waste&lt;/li&gt;
&lt;li&gt;Engage with the Yale community on environmental sustainability&lt;/li&gt;
&lt;li&gt;Demonstrate leadership in environmental advocacy&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The speaker series provided a platform to address one of the most critical environmental challenges of our time and contribute to the broader dialogue on sustainable practices.&lt;/p&gt;
&lt;h2 id="academic-engagement"&gt;Academic Engagement&lt;/h2&gt;
&lt;h3 id="leading-discussions-on-environmental-challenges"&gt;Leading Discussions on Environmental Challenges&lt;/h3&gt;
&lt;p&gt;Throughout the program, I took an active leadership role by:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Leading discussions&lt;/strong&gt; on pressing environmental challenges facing our planet&lt;/li&gt;
&lt;li&gt;Facilitating collaborative problem-solving sessions with international peers&lt;/li&gt;
&lt;li&gt;Analyzing case studies on climate change, resource management, and sustainability&lt;/li&gt;
&lt;li&gt;Developing policy recommendations for environmental conservation&lt;/li&gt;
&lt;li&gt;Engaging with Yale faculty experts on environmental science and policy&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These discussions fostered critical thinking and cross-cultural understanding while addressing real-world global challenges.&lt;/p&gt;
&lt;h2 id="photo-gallery"&gt;Photo Gallery&lt;/h2&gt;
&lt;p&gt;Memorable moments from my Yale Young Global Scholars experience:&lt;/p&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_1129.jpeg" alt="Yale Campus" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Exploring Yale University's historic campus and world-class facilities&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_1568.jpeg" alt="YYGS Seminar" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Engaging in intensive seminar discussions on global challenges and solutions&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_1945.JPG" alt="Speaker Presentation" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Delivering my featured talk on plastic pollution for the YYGS Speaker Series at Pierson School&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_2924.JPG" alt="Global Scholars Collaboration" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Collaborating with fellow global scholars from diverse backgrounds and cultures&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_3452.JPG" alt="YYGS Community" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Building lasting connections with the Yale Young Global Scholars community&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id="skills-and-leadership-development"&gt;Skills and Leadership Development&lt;/h2&gt;
&lt;p&gt;My YYGS experience cultivated essential skills for global leadership:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Public Speaking&lt;/strong&gt;: Delivering presentations to diverse, international audiences&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Cross-Cultural Communication&lt;/strong&gt;: Collaborating with scholars from over 100 countries&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Critical Analysis&lt;/strong&gt;: Evaluating complex global challenges from multiple perspectives&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Environmental Advocacy&lt;/strong&gt;: Championing sustainable solutions to pressing ecological issues&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Leadership&lt;/strong&gt;: Facilitating discussions and guiding collaborative problem-solving&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="key-takeaways"&gt;Key Takeaways&lt;/h2&gt;
&lt;p&gt;The Yale Young Global Scholars program was an intensive and transformative experience that:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Connected me with exceptional peers and mentors from around the world&lt;/li&gt;
&lt;li&gt;Deepened my understanding of global environmental challenges&lt;/li&gt;
&lt;li&gt;Provided a platform to share my voice on plastic pollution and sustainability&lt;/li&gt;
&lt;li&gt;Strengthened my commitment to environmental stewardship and global citizenship&lt;/li&gt;
&lt;li&gt;Exposed me to Yale&amp;rsquo;s academic rigor and intellectual community&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="note"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Note&lt;/div&gt;
&lt;div class="callout-body"&gt;&lt;p&gt;This program reinforced my dedication to addressing global environmental challenges and inspired me to continue advocating for sustainable solutions.&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id="impact-on-future-goals"&gt;Impact on Future Goals&lt;/h2&gt;
&lt;p&gt;The intensive two-week YYGS experience has profoundly influenced my academic and career aspirations:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Global Perspective&lt;/strong&gt;: Gained nuanced understanding of interconnected global challenges&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Environmental Focus&lt;/strong&gt;: Solidified my commitment to environmental science and policy&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Leadership Confidence&lt;/strong&gt;: Developed skills to lead discussions and inspire action&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Academic Preparation&lt;/strong&gt;: Experienced Yale-level academic rigor and intellectual discourse&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Network&lt;/strong&gt;: Built lasting relationships with future global leaders&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="looking-forward"&gt;Looking Forward&lt;/h2&gt;
&lt;p&gt;The connections made, skills developed, and insights gained at Yale Young Global Scholars continue to shape my approach to problem-solving and global citizenship. This experience has prepared me to contribute meaningfully to addressing the environmental challenges that define our generation.&lt;/p&gt;</description></item><item><title>🎺 Wind Ensemble &amp; Harmony Sounds Outreach</title><link>https://qianlechen.github.io/blog/wind-ensemble/</link><pubDate>Sat, 15 Jun 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/blog/wind-ensemble/</guid><description>&lt;p&gt;Throughout my four years of high school, music has been an integral part of my life, serving as both a creative outlet and a platform for community service. I&amp;rsquo;ve dedicated approximately 7 hours per week, 40 weeks per year to various musical pursuits and leadership roles.&lt;/p&gt;
&lt;h2 id="harmony-sounds-outreach"&gt;Harmony Sounds Outreach&lt;/h2&gt;
&lt;h3 id="founder-and-president"&gt;Founder and President&lt;/h3&gt;
&lt;p&gt;I founded &lt;strong&gt;Harmony Sounds Outreach&lt;/strong&gt;, a student-led initiative dedicated to bringing the joy of music to elderly community members. As Founder and President, I:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Established and led the organization from the ground up&lt;/li&gt;
&lt;li&gt;Organized regular performances at senior centers and retirement communities&lt;/li&gt;
&lt;li&gt;Successfully raised over &lt;strong&gt;$1,000&lt;/strong&gt; to support our outreach activities&lt;/li&gt;
&lt;li&gt;Coordinated with local venues and community partners&lt;/li&gt;
&lt;li&gt;Built a team of dedicated student musicians committed to service&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The experience of connecting with elderly audiences through music has been incredibly rewarding, teaching me about leadership, community engagement, and the universal power of music to bridge generational gaps.&lt;/p&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="CommunityService.jpg" alt="Harmony Sounds Outreach Community Service" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Performing at senior centers through Harmony Sounds Outreach - bringing music to elderly community members&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id="performance-ensembles"&gt;Performance Ensembles&lt;/h2&gt;
&lt;h3 id="all-state-band"&gt;All-State Band&lt;/h3&gt;
&lt;p&gt;Selected for the prestigious &lt;strong&gt;California All-State Band&lt;/strong&gt;, representing the top student musicians across the state. This honor recognized my dedication to musical excellence and provided opportunities to perform with the finest young musicians in California.&lt;/p&gt;
&lt;h3 id="tustin-unified-school-district-honor-band"&gt;Tustin Unified School District Honor Band&lt;/h3&gt;
&lt;p&gt;As a member of the &lt;strong&gt;Tustin Unified School District Honor Band&lt;/strong&gt;, I performed in elite ensembles showcasing the district&amp;rsquo;s most accomplished musicians. This experience enhanced my technical skills and collaborative abilities.&lt;/p&gt;
&lt;h3 id="wind-ensemble---1st-chair-tuba"&gt;Wind Ensemble - 1st Chair Tuba&lt;/h3&gt;
&lt;p&gt;Earned and maintained the position of &lt;strong&gt;1st Chair Tuba&lt;/strong&gt; in my school&amp;rsquo;s top Wind Ensemble throughout my high school career. This leadership role involved:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Performing challenging repertoire at the highest level&lt;/li&gt;
&lt;li&gt;Setting the standard for the tuba section&lt;/li&gt;
&lt;li&gt;Mentoring other brass players&lt;/li&gt;
&lt;li&gt;Contributing to ensemble balance and interpretation&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="low-brass-section-leader"&gt;Low Brass Section Leader&lt;/h3&gt;
&lt;p&gt;As &lt;strong&gt;Low Brass Section Leader&lt;/strong&gt;, I took on additional responsibilities beyond my chair position:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Led sectional rehearsals for tubas, euphoniums, and trombones&lt;/li&gt;
&lt;li&gt;Provided technical guidance and musical direction&lt;/li&gt;
&lt;li&gt;Fostered team cohesion and collaborative spirit&lt;/li&gt;
&lt;li&gt;Served as liaison between section members and conductors&lt;/li&gt;
&lt;/ul&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="StagePhoto.jpg" alt="Wind Ensemble Stage Performance" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Performing as 1st Chair Tuba with the Wind Ensemble on stage&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_6455.jpeg" alt="Low Brass Section with Peers" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Low Brass Section with music peers&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id="musical-achievement"&gt;Musical Achievement&lt;/h2&gt;
&lt;h3 id="mtac-level-10---euphonium"&gt;MTAC Level 10 - Euphonium&lt;/h3&gt;
&lt;p&gt;Achieved &lt;strong&gt;Music Teachers&amp;rsquo; Association of California (MTAC) Level 10 certification&lt;/strong&gt; on euphonium, the highest level in the MTAC Certificate of Merit program. This accomplishment demonstrates:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Advanced technical proficiency&lt;/li&gt;
&lt;li&gt;Comprehensive music theory knowledge&lt;/li&gt;
&lt;li&gt;Sight-reading excellence&lt;/li&gt;
&lt;li&gt;Performance mastery across diverse repertoire&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="impact-and-growth"&gt;Impact and Growth&lt;/h2&gt;
&lt;p&gt;My involvement in these musical activities over four years (grades 9-12) has shaped my character and skills in profound ways:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Leadership&lt;/strong&gt;: Developed strong leadership abilities through founding Harmony Sounds Outreach and serving as section leader&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dedication&lt;/strong&gt;: Maintained consistent commitment with year-round participation&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Community Service&lt;/strong&gt;: Created meaningful connections through music outreach to elderly populations&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Musical Excellence&lt;/strong&gt;: Achieved recognition at district and state levels&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Teamwork&lt;/strong&gt;: Collaborated with diverse groups of musicians in various ensemble settings&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="note"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Note&lt;/div&gt;
&lt;div class="callout-body"&gt;&lt;p&gt;These experiences have reinforced my belief in music&amp;rsquo;s power to bring people together and create positive change in communities.&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id="looking-forward"&gt;Looking Forward&lt;/h2&gt;
&lt;p&gt;The skills I&amp;rsquo;ve developed through music—discipline, collaboration, leadership, and creative expression—continue to influence my approach to all areas of life. The connections made and lessons learned through these musical endeavors will undoubtedly guide my future pursuits, whether in music, community service, or beyond.&lt;/p&gt;</description></item><item><title>🔬 UCLA Joint Science Researcher</title><link>https://qianlechen.github.io/events/ucla-joint-science-researcher-1.37.33-pm/</link><pubDate>Sat, 01 Jun 2024 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/events/ucla-joint-science-researcher-1.37.33-pm/</guid><description>&lt;p&gt;As a UCLA Joint Science Researcher, I have had the privilege of participating in advanced scientific research, working alongside faculty and graduate students to explore complex scientific questions and contribute to ongoing research projects.&lt;/p&gt;
&lt;h2 id="research-experience"&gt;Research Experience&lt;/h2&gt;
&lt;p&gt;My role as a joint science researcher at UCLA has provided me with hands-on experience in laboratory techniques, data analysis, and scientific methodology. This opportunity has deepened my understanding of the research process and strengthened my commitment to pursuing scientific inquiry.&lt;/p&gt;
&lt;h2 id="research-highlights"&gt;Research Highlights&lt;/h2&gt;
&lt;p&gt;Throughout this research experience, I have:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Collaborated with UCLA faculty and research teams&lt;/li&gt;
&lt;li&gt;Conducted experiments and collected data using advanced laboratory equipment&lt;/li&gt;
&lt;li&gt;Analyzed research findings and contributed to project outcomes&lt;/li&gt;
&lt;li&gt;Developed critical thinking and problem-solving skills in a research environment&lt;/li&gt;
&lt;li&gt;Gained exposure to cutting-edge scientific methodologies and technologies&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="photo-gallery"&gt;Photo Gallery&lt;/h2&gt;
&lt;p&gt;Here are some memorable moments from my research experience at UCLA:&lt;/p&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_0129.jpeg" alt="UCLA Research Laboratory" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Working in the state-of-the-art research laboratory at UCLA&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_0133.jpeg" alt="Laboratory Equipment" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Utilizing advanced scientific instruments for data collection and analysis&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_0144.jpeg" alt="Research Team Collaboration" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Collaborating with research mentors and team members on experimental procedures&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_4991.jpeg" alt="Research Presentation" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Presenting research findings and discussing methodologies with faculty advisors&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_8106.jpeg" alt="Experimental Setup" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Setting up experimental apparatus for controlled scientific investigations&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="IMG_8116.jpeg" alt="Data Analysis" style="width: 100%; max-width: 800px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;Analyzing experimental data and contributing to research conclusions&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h2 id="skills-developed"&gt;Skills Developed&lt;/h2&gt;
&lt;p&gt;This research experience has helped me develop essential skills for scientific inquiry:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Technical Proficiency&lt;/strong&gt;: Mastery of laboratory equipment and experimental techniques&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Analytical Thinking&lt;/strong&gt;: Critical evaluation of data and research outcomes&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Collaboration&lt;/strong&gt;: Working effectively within a diverse research team&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Scientific Communication&lt;/strong&gt;: Presenting findings and discussing research with peers and mentors&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Problem-Solving&lt;/strong&gt;: Addressing experimental challenges and adapting methodologies&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="impact-and-learning"&gt;Impact and Learning&lt;/h2&gt;
&lt;p&gt;Participating as a UCLA Joint Science Researcher has been transformative for my academic and professional development. The experience has:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Reinforced my passion for scientific research&lt;/li&gt;
&lt;li&gt;Provided practical application of theoretical knowledge&lt;/li&gt;
&lt;li&gt;Connected me with mentors and researchers in the field&lt;/li&gt;
&lt;li&gt;Enhanced my understanding of the scientific method and research ethics&lt;/li&gt;
&lt;li&gt;Prepared me for future academic pursuits in STEM&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="note"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Note&lt;/div&gt;
&lt;div class="callout-body"&gt;&lt;p&gt;This research experience at UCLA has been instrumental in shaping my academic interests and career aspirations in scientific research.&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id="looking-forward"&gt;Looking Forward&lt;/h2&gt;
&lt;p&gt;The skills, knowledge, and connections I&amp;rsquo;ve gained through this research opportunity continue to influence my academic trajectory. This experience has solidified my commitment to pursuing advanced scientific research and contributing to the broader scientific community.&lt;/p&gt;</description></item><item><title>PADI Marine Debris Clean-Up &amp; Rescue Diving</title><link>https://qianlechen.github.io/blog/diving/</link><pubDate>Thu, 02 Nov 2023 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/blog/diving/</guid><description>&lt;p&gt;During high school I trained and served as a &lt;strong&gt;PADI-Certified Rescue Diver&lt;/strong&gt; specialties in &lt;strong&gt;AWARE Dive Against Debris&lt;/strong&gt;, participating in &lt;strong&gt;year-round underwater marine clean-up dives&lt;/strong&gt; to protect local coastal ecosystems. On these dives, our group &lt;strong&gt;removed more than 300 lbs of debris&lt;/strong&gt; — including fishing lines, nets, plastics, and dock materials — to reduce entanglement risks for marine life.&lt;/p&gt;
&lt;p&gt;I also completed &lt;strong&gt;three American Red Cross certifications&lt;/strong&gt; — &lt;strong&gt;First Aid&lt;/strong&gt;, &lt;strong&gt;CPR/AED&lt;/strong&gt;, and &lt;strong&gt;Lifeguard/Water Safety&lt;/strong&gt; — and worked as a &lt;strong&gt;summer lifeguard at Northpark Community Aquatics&lt;/strong&gt; (~4 hrs/week, ~30 weeks/year). This let me contribute both &lt;strong&gt;in the water (diving)&lt;/strong&gt; and &lt;strong&gt;at the surface (public safety).&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Position/Leadership (≤50):&lt;/strong&gt; PADI-Certified Advanced Open Water / Rescue Diver&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Organizations:&lt;/strong&gt; PADI; American Red Cross; Northpark Community Aquatics&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Participation:&lt;/strong&gt; Grades &lt;strong&gt;9, 10, 11, 12&lt;/strong&gt; — &lt;strong&gt;All Year&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Hours:&lt;/strong&gt; ~4 hrs/week × 30 weeks/year&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="dive-photos"&gt;Dive Photos&lt;/h2&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="featured.jpg" alt="Underwater team dive" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.08);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Debris-removal dive with team — practicing PADI rescue skills and buddy checks.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Dive2.jpg" alt="Two divers working together underwater" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.08);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Buddy dive in low visibility while collecting lines and plastic fragments.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Dive3.jpg" alt="Divers collecting debris from seafloor" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.08);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Removing debris from the seafloor to protect fish, invertebrates, and eelgrass habitat.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Dive4.jpg" alt="Group of divers underwater" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.08);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Team formation before ascent — practicing controlled surfacing and safety stops.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;img src="Dive5.jpg" alt="Dock and dive preparation" style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.08);"&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Surface prep and gear check — loading equipment before the clean-up dive.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr&gt;
&lt;h2 id="dive-video"&gt;Dive Video&lt;/h2&gt;
&lt;figure style="margin: 2rem 0;"&gt;
&lt;video src="DiveVideo.mp4" controls style="width: 100%; max-width: 900px; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,0.12);"&gt;&lt;/video&gt;
&lt;figcaption style="text-align: center; margin-top: 1rem; font-style: italic; color: #666;"&gt;
Underwater footage from the clean-up dive — shows visibility, teamwork, and debris collection.
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;hr&gt;
&lt;h2 id="activity-version-150-chars"&gt;Activity Version (150 chars)&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Led marine clean-up dives removing 300+ lbs of debris; certified in Red Cross First Aid, CPR/AED, and Lifeguard training.&lt;/strong&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="why-it-matters"&gt;Why It Matters&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Directly improved &lt;strong&gt;local marine ecosystems&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Practiced &lt;strong&gt;rescue diver&lt;/strong&gt; and &lt;strong&gt;safety protocols&lt;/strong&gt; in real dives&lt;/li&gt;
&lt;li&gt;Connected &lt;strong&gt;PADI training&lt;/strong&gt; with &lt;strong&gt;community environmental service&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;Demonstrated &lt;strong&gt;long-term commitment&lt;/strong&gt; (grades 9–12, all year)&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"&gt;
&lt;p&gt;This page documents the media and description I will use for my college applications to show sustained environmental service, technical diving skills, and public safety training.&lt;/p&gt;
&lt;/blockquote&gt;</description></item><item><title>Embed Media</title><link>https://qianlechen.github.io/courses/hugo-blox/guide/formatting/media/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://qianlechen.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 Hugo Blox Builder 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="video"&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="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"&gt;
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="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" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"&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="podcast"&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="ambient-piano.mp3" type="audio/mpeg"&gt;
&lt;/audio&gt;
&lt;h2 id="test-students"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&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="line"&gt;&lt;span class="cl"&gt;You found me!
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&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="spoiler " id="spoiler-2"&gt;
&lt;summary class="cursor-pointer"&gt;👉 Click to view the solution&lt;/summary&gt;
&lt;div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2"&gt;
You found me 🎉
&lt;/div&gt;
&lt;/details&gt;
&lt;h2 id="math"&gt;Math&lt;/h2&gt;
&lt;p&gt;Hugo Blox Builder 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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="note"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Note&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-latex" data-lang="latex"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nb"&gt;{{&lt;/span&gt;&amp;lt; math &amp;gt;&lt;span class="nb"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="sb"&gt;$$&lt;/span&gt;&lt;span class="nb"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nb"&gt;&lt;/span&gt;&lt;span class="nv"&gt;\gamma&lt;/span&gt;&lt;span class="nb"&gt;_{n} &lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\frac&lt;/span&gt;&lt;span class="nb"&gt;{ &lt;/span&gt;&lt;span class="nv"&gt;\left&lt;/span&gt;&lt;span class="nb"&gt; | &lt;/span&gt;&lt;span class="nv"&gt;\left&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;\mathbf&lt;/span&gt;&lt;span class="nb"&gt; x_{n} &lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\mathbf&lt;/span&gt;&lt;span class="nb"&gt; x_{n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="nb"&gt;} &lt;/span&gt;&lt;span class="nv"&gt;\right&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt;^T &lt;/span&gt;&lt;span class="nv"&gt;\left&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;\nabla&lt;/span&gt;&lt;span class="nb"&gt; F &lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;\mathbf&lt;/span&gt;&lt;span class="nb"&gt; x_{n}&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\nabla&lt;/span&gt;&lt;span class="nb"&gt; F &lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;\mathbf&lt;/span&gt;&lt;span class="nb"&gt; x_{n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="nb"&gt;}&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\right&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\right&lt;/span&gt;&lt;span class="nb"&gt; |}{&lt;/span&gt;&lt;span class="nv"&gt;\left&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\|\nabla&lt;/span&gt;&lt;span class="nb"&gt; F&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;\mathbf&lt;/span&gt;&lt;span class="nb"&gt;{x}_{n}&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\nabla&lt;/span&gt;&lt;span class="nb"&gt; F&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;\mathbf&lt;/span&gt;&lt;span class="nb"&gt;{x}_{n&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="nb"&gt;}&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\right&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\|&lt;/span&gt;&lt;span class="nb"&gt;^&lt;/span&gt;&lt;span class="m"&gt;2&lt;/span&gt;&lt;span class="nb"&gt;}
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nb"&gt;&lt;/span&gt;&lt;span class="s"&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nb"&gt;{{&lt;/span&gt;&amp;lt; /math &amp;gt;&lt;span class="nb"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-latex" data-lang="latex"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nb"&gt;{{&lt;/span&gt;&amp;lt; math &amp;gt;&lt;span class="nb"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="sb"&gt;$$&lt;/span&gt;&lt;span class="nb"&gt;f&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;k;p_{&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="nb"&gt;}^{&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="nb"&gt;}&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nb"&gt; &lt;/span&gt;&lt;span class="nv"&gt;\begin&lt;/span&gt;&lt;span class="nb"&gt;{cases}p_{&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="nb"&gt;}^{&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="nb"&gt;} &amp;amp; &lt;/span&gt;&lt;span class="nv"&gt;\text&lt;/span&gt;&lt;span class="nb"&gt;{if }k&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="nb"&gt;, &lt;/span&gt;&lt;span class="nv"&gt;\\&lt;/span&gt;&lt;span class="nb"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nb"&gt;&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nb"&gt;p_{&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="nb"&gt;}^{&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="nb"&gt;} &amp;amp; &lt;/span&gt;&lt;span class="nv"&gt;\text&lt;/span&gt;&lt;span class="nb"&gt;{if }k&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt;&lt;span class="nv"&gt;\end&lt;/span&gt;&lt;span class="nb"&gt;{cases}&lt;/span&gt;&lt;span class="s"&gt;$$&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nb"&gt;{{&lt;/span&gt;&amp;lt; /math &amp;gt;&lt;span class="nb"&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="code"&gt;Code&lt;/h2&gt;
&lt;p&gt;Hugo Blox Builder 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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-python" data-lang="python"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;pandas&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nn"&gt;pd&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;pd&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;read_csv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;data.csv&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;head&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="inline-images"&gt;Inline Images&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go" data-lang="go"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;{{&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;python&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;&amp;gt;}}&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;Python&lt;/span&gt;&lt;span class="w"&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="inline-block pr-1"&gt;
&lt;svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor"&gt;&lt;path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/&gt;&lt;/svg&gt;
&lt;/span&gt; Python&lt;/p&gt;
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-"&gt;Did you find this page helpful? Consider sharing it 🙌&lt;/h2&gt;</description></item><item><title>Experience</title><link>https://qianlechen.github.io/experience/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/experience/</guid><description/></item><item><title>The Little Tree That Could</title><link>https://qianlechen.github.io/projects/treecould/</link><pubDate>Thu, 01 Jun 2023 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/projects/treecould/</guid><description>&lt;p&gt;Wrote and self-published an illustrated book on urban reforestation and environmental stewardship, categorized under Forest &amp;amp; Tree Books and Recycling &amp;amp; Green Living Books.&lt;/p&gt;
&lt;h2 id="book-overview"&gt;Book Overview&lt;/h2&gt;
&lt;p&gt;&lt;em&gt;The Little Tree That Could&lt;/em&gt; is an illustrated children&amp;rsquo;s book that tells a compelling story about urban reforestation and environmental stewardship, inspiring young readers to care about nature and conservation.&lt;/p&gt;
&lt;h2 id="publication-details"&gt;Publication Details&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Author:&lt;/strong&gt; Qianle (Bill) Chen&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Category:&lt;/strong&gt; Forest &amp;amp; Tree Books; Recycling &amp;amp; Green Living Books&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Format:&lt;/strong&gt; Illustrated book suitable for all ages&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Theme:&lt;/strong&gt; Urban reforestation, environmental stewardship, hope, and resilience&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="book-launch--impact"&gt;Book Launch &amp;amp; Impact&lt;/h2&gt;
&lt;h3 id="community-engagement"&gt;Community Engagement&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Launch Event:&lt;/strong&gt; Organized a book launch with 50+ attendees&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Social Impact:&lt;/strong&gt; Donated all proceeds to One Tree Planted NPO&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Environmental Impact:&lt;/strong&gt; Supported the planting of over 500 trees in deforested and urban areas worldwide&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Educational Reach:&lt;/strong&gt; Inspired readers of all ages to engage with environmental conservation&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="charitable-contribution"&gt;Charitable Contribution&lt;/h3&gt;
&lt;p&gt;100% of book proceeds were donated to One Tree Planted, a nonprofit focused on global reforestation efforts. This contribution directly funded:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Tree planting in deforested areas&lt;/li&gt;
&lt;li&gt;Urban forestry projects in cities worldwide&lt;/li&gt;
&lt;li&gt;Ecosystem restoration and biodiversity conservation&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="themes--messages"&gt;Themes &amp;amp; Messages&lt;/h2&gt;
&lt;p&gt;The book explores:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Urban Reforestation:&lt;/strong&gt; The importance of bringing green spaces back to cities&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Environmental Stewardship:&lt;/strong&gt; Individual and collective responsibility for nature&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Hope &amp;amp; Resilience:&lt;/strong&gt; How small actions can lead to significant environmental impact&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Community Action:&lt;/strong&gt; The power of working together for a common cause&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="recognition--reach"&gt;Recognition &amp;amp; Reach&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Successfully self-published and launched with community support&lt;/li&gt;
&lt;li&gt;Engaged 50+ attendees at book launch event&lt;/li&gt;
&lt;li&gt;All proceeds donated to environmental causes&lt;/li&gt;
&lt;li&gt;Over 500 trees planted through fundraising efforts&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="future-plans"&gt;Future Plans&lt;/h2&gt;
&lt;!-- TODO: Add information about future editions, translations, or related projects --&gt;
&lt;ul&gt;
&lt;li&gt;Potential expanded editions with additional environmental themes&lt;/li&gt;
&lt;li&gt;Educational program development for schools&lt;/li&gt;
&lt;li&gt;Continued partnership with environmental nonprofits&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>Harmony with Nature Non-Profit 501(c)(3)</title><link>https://qianlechen.github.io/projects/501c3/</link><pubDate>Mon, 01 Aug 2022 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/projects/501c3/</guid><description>&lt;p&gt;Founded and lead an environmental stewardship club promoting sustainability on campus and in Orange County through educational workshops, clean-up activities, and community engagement programs.&lt;/p&gt;
&lt;h2 id="mission--vision"&gt;Mission &amp;amp; Vision&lt;/h2&gt;
&lt;p&gt;Harmony with Nature is a 501(c)(3) nonprofit organization dedicated to promoting environmental sustainability and conservation through education, community engagement, and hands-on stewardship activities.&lt;/p&gt;
&lt;h2 id="founder--president-role"&gt;Founder &amp;amp; President Role&lt;/h2&gt;
&lt;p&gt;As Founder and President since August 2022, I have:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Established Infrastructure:&lt;/strong&gt; Created an environmental stewardship nonprofit from the ground up, obtaining 501(c)(3) tax-exempt status&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Board Development:&lt;/strong&gt; Organized and managed 15+ board members, fostering collaborative leadership&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Program Development:&lt;/strong&gt; Designed and implemented educational workshops on campus and community-wide&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Community Impact:&lt;/strong&gt; Engaged 300+ participants through workshops, clean-up activities, and sustainability initiatives&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Outreach &amp;amp; Partnerships:&lt;/strong&gt; Built relationships with environmental organizations and community stakeholders in Orange County&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="key-programs--initiatives"&gt;Key Programs &amp;amp; Initiatives&lt;/h2&gt;
&lt;h3 id="educational-workshops"&gt;Educational Workshops&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Campus-based sustainability education programs&lt;/li&gt;
&lt;li&gt;Environmental awareness sessions for students and community members&lt;/li&gt;
&lt;li&gt;Topics: Climate change, conservation, sustainable living practices&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="clean-up-activities"&gt;Clean-Up Activities&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Organized regular environmental clean-up events&lt;/li&gt;
&lt;li&gt;Partnered with local organizations to remove debris and pollution&lt;/li&gt;
&lt;li&gt;Hands-on stewardship activities engaging community volunteers&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="community-engagement"&gt;Community Engagement&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Outreach to 300+ participants across Orange County&lt;/li&gt;
&lt;li&gt;Youth leadership development in environmental advocacy&lt;/li&gt;
&lt;li&gt;Collaboration with schools, nonprofits, and local government&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="impact--outcomes"&gt;Impact &amp;amp; Outcomes&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;501(c)(3) Status:&lt;/strong&gt; Successfully established legal nonprofit framework&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Community Reach:&lt;/strong&gt; 300+ participants engaged in environmental programs&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Youth Leadership:&lt;/strong&gt; 15+ board members trained in environmental advocacy and nonprofit management&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Educational Programs:&lt;/strong&gt; Multiple workshops promoting sustainability on campus and in the community&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="future-goals"&gt;Future Goals&lt;/h2&gt;
&lt;!-- TODO: Add your future goals and upcoming programs here --&gt;
&lt;ul&gt;
&lt;li&gt;Expand educational programs to additional schools and communities&lt;/li&gt;
&lt;li&gt;Develop partnerships with environmental research institutions&lt;/li&gt;
&lt;li&gt;Launch new sustainability initiatives focused on climate action&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>GIS – Silverado Fire, Southern California 2020</title><link>https://qianlechen.github.io/publications/ecostress-s3/</link><pubDate>Thu, 29 Oct 2020 00:00:00 +0000</pubDate><guid>https://qianlechen.github.io/publications/ecostress-s3/</guid><description>&lt;h2 id="silverado-fire--october-29-2020"&gt;Silverado Fire – October 29, 2020&lt;/h2&gt;
&lt;p&gt;NASA’s &lt;strong&gt;ECOSTRESS (ECOsystem Spaceborne Thermal Radiometer Experiment on Space Station)&lt;/strong&gt; captured high-resolution land surface temperature data of the &lt;strong&gt;Silverado Fire&lt;/strong&gt; across Orange County, California.&lt;br&gt;
At 6:21 PM PST, ECOSTRESS recorded temperatures ranging from &lt;strong&gt;68°F (20°C)&lt;/strong&gt; in unaffected terrain to &lt;strong&gt;176°F (80°C)&lt;/strong&gt; in the most intense fire zones, revealing multiple high-temperature cores and the fire’s spread through canyon foothills under &lt;strong&gt;Santa Ana wind conditions&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;The &lt;strong&gt;Silverado Fire&lt;/strong&gt; began on October 26, 2020, and was fully contained by November 7 after burning more than &lt;strong&gt;12,466 acres (5,046 ha)&lt;/strong&gt;. ECOSTRESS imagery provided valuable insight for emergency coordination and scientific analysis of &lt;strong&gt;fire behavior, drought stress, and post-fire recovery&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;The visualization was created by &lt;strong&gt;Bill Chen (Arnold O. Beckman High School)&lt;/strong&gt; in collaboration with &lt;strong&gt;Dr. Joshua R. Fisher (Chapman University)&lt;/strong&gt; and has been &lt;strong&gt;published in NASA’s ECOSTRESS Gallery&lt;/strong&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id="research-image"&gt;Research Image&lt;/h2&gt;
&lt;style&gt;
.full-width-image-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 100vw;
}
.full-width-image-container img {
width: 100%;
height: auto;
display: block;
}
.full-width-caption {
text-align: center;
margin-top: 1rem;
font-style: italic;
color: #666;
padding: 0 2rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
&lt;/style&gt;
&lt;div class="full-width-image-container"&gt;
&lt;img src="Silverado Fire, Southern California.png" alt="ECOSTRESS Silverado Fire Thermal Map, Orange County, October 29, 2020"&gt;
&lt;p class="full-width-caption"&gt;
ECOSTRESS thermal map of the Silverado Fire in Orange County, California, on October 29, 2020. Published in NASA ECOSTRESS Gallery. Image credit: NASA / JPL-Caltech / ECOSTRESS.
&lt;/p&gt;
&lt;/div&gt;
&lt;hr&gt;
&lt;h2 id="credits"&gt;Credits&lt;/h2&gt;
&lt;p&gt;Created in collaboration with:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Bill Chen (Arnold O. Beckman High School)&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Dr. Joshua R. Fisher (Chapman University)&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;h2 id="related-links"&gt;Related Links&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;🌍
&lt;/li&gt;
&lt;li&gt;🛰️
&lt;/li&gt;
&lt;/ul&gt;</description></item><item><title>Buttons</title><link>https://qianlechen.github.io/courses/hugo-blox/guide/formatting/button/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.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="basic-usage"&gt;Basic Usage&lt;/h2&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-351ac412531c23e422b81c6422c17da5"
href="https://qianlechen.github.io/contact"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Contact Us"
&gt;
&lt;span&gt;Contact Us&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-99f90e9d2b754ffe3fc7b4f9d280ab9e"
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Visit External Site"
&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;/contact&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Contact Us&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;https://example.com&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;new_tab&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Visit External Site&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="style-variants"&gt;Style Variants&lt;/h2&gt;
&lt;h3 id="primary-default"&gt;Primary (Default)&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-33f0c5949dceb4f2158940543a6d11f0"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Primary Button"
&gt;
&lt;span&gt;Primary Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Primary Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="secondary"&gt;Secondary&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-654c665d9c02125e00b3c2638e02ff31"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Secondary Button"
&gt;
&lt;span&gt;Secondary Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Secondary Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="outline"&gt;Outline&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-569954ebe8d760dfbd5f8dd8d491e972"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Outline Button"
&gt;
&lt;span&gt;Outline Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;outline&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Outline Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="ghost"&gt;Ghost&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-e8d694dcc82ccc6b692376347eb1210c"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 active:bg-primary-100 dark:active:bg-primary-950 hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Ghost Button"
&gt;
&lt;span&gt;Ghost Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;ghost&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Ghost Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="sizes"&gt;Sizes&lt;/h2&gt;
&lt;h3 id="small"&gt;Small&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-9edd9a4164984b892472dc4cb0d94acb"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-3 py-1.5 text-sm rounded-lg"
role="button"
aria-label="Small Button"
&gt;
&lt;span&gt;Small Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="medium-default"&gt;Medium (Default)&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-917c91b5df194ee244bcb8dd7d4916c5"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Medium Button"
&gt;
&lt;span&gt;Medium Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="large"&gt;Large&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-c9ef1eeebbeac0de80c5666baeda508c"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-lg"
role="button"
aria-label="Large Button"
&gt;
&lt;span&gt;Large Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="extra-large"&gt;Extra Large&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-c38da6a61bc9a2511c12a071b05d1527"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-8 py-4 text-xl rounded-lg"
role="button"
aria-label="Extra Large"
&gt;
&lt;span&gt;Extra Large&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;sm&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Small Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;md&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Medium Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Large Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;xl&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Extra Large&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="alignment"&gt;Alignment&lt;/h2&gt;
&lt;h3 id="left-default"&gt;Left (Default)&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-46275a2130718485193b07442854e305"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Left Aligned"
&gt;
&lt;span&gt;Left Aligned&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="center"&gt;Center&lt;/h3&gt;
&lt;div class="text-center"&gt;
&lt;a
id="button-2e7c6d0545131be865f91f4dcb47ebd3"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Center Aligned"
&gt;
&lt;span&gt;Center Aligned&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="right"&gt;Right&lt;/h3&gt;
&lt;div class="text-right"&gt;
&lt;a
id="button-09d01d6786049ba2a63f2cafd484e60e"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Right Aligned"
&gt;
&lt;span&gt;Right Aligned&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;left&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Left Aligned&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Center Aligned&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Right Aligned&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="with-icons"&gt;With Icons&lt;/h2&gt;
&lt;h3 id="icon-before-text"&gt;Icon Before Text&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-2070b64a1b12b8165d04699a5e4f0a4d"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Download"
&gt;
&lt;span class="flex-shrink-0"&gt;
&lt;svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;span&gt;Download&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="icon-after-text"&gt;Icon After Text&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-213c46a162adc66071b38a55c26716e3"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Continue"
&gt;
&lt;span&gt;Continue&lt;/span&gt;
&lt;span class="flex-shrink-0"&gt;
&lt;svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;arrow-down-tray&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Download&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;arrow-right&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon_position&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Continue&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="rounded-corners"&gt;Rounded Corners&lt;/h2&gt;
&lt;h3 id="small-radius"&gt;Small Radius&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-f306324e9ea3297cc7149761131e0e41"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded"
role="button"
aria-label="Small Radius"
&gt;
&lt;span&gt;Small Radius&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="medium-radius-default"&gt;Medium Radius (Default)&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-d519a3255417739cb8197b9869248dec"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="Medium Radius"
&gt;
&lt;span&gt;Medium Radius&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="large-radius"&gt;Large Radius&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-920afdfab9e2ab0e88cb5046924cd223"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-xl"
role="button"
aria-label="Large Radius"
&gt;
&lt;span&gt;Large Radius&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;h3 id="pill-shape"&gt;Pill Shape&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-464be1a963c8f63cf75275ea2137551a"
href="#"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-full"
role="button"
aria-label="Pill Button"
&gt;
&lt;span&gt;Pill Button&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;rounded&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;sm&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Small Radius&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;rounded&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;md&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Medium Radius&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;rounded&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Large Radius&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;#&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;rounded&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Pill Button&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="advanced-examples"&gt;Advanced Examples&lt;/h2&gt;
&lt;h3 id="call-to-action-button"&gt;Call-to-Action Button&lt;/h3&gt;
&lt;div class="text-center"&gt;
&lt;a
id="button-62059f8d62052633590d3f60ec092595"
href="https://qianlechen.github.io/signup"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-lg"
role="button"
aria-label="Get Started Today"
&gt;
&lt;span class="flex-shrink-0"&gt;
&lt;svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7a15.53 15.53 0 0 1-.311.06a15.09 15.09 0 0 1-2.448-2.448a14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306a4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"/&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;/signup&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;primary&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;lg&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;center&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;rocket-launch&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Get Started Today&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="external-link-with-new-tab"&gt;External Link with New Tab&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-2cb1bb8bbb2590cc46a8ead690d2da77"
href="https://github.com/hugo-blox/hugo-blox-builder"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg"
role="button"
aria-label="View on GitHub"
&gt;
&lt;span&gt;View on GitHub&lt;/span&gt;
&lt;span class="flex-shrink-0"&gt;
&lt;svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;https://github.com/hugo-blox/hugo-blox-builder&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;new_tab&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;true&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;outline&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;arrow-top-right-on-square&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon_position&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;right&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;View on GitHub&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="download-button"&gt;Download Button&lt;/h3&gt;
&lt;div class="text-left"&gt;
&lt;a
id="button-72ec86801f391f16b84b269ade9d2995"
href="https://qianlechen.github.io/files/document.pdf"
class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-full"
role="button"
aria-label="Download PDF"
&gt;
&lt;span class="flex-shrink-0"&gt;
&lt;svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;span&gt;Download PDF&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-go-html-template" data-lang="go-html-template"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;/files/document.pdf&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;secondary&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;icon&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;document-arrow-down&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;rounded&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s"&gt;&amp;#34;full&amp;#34;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;Download PDF&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="err"&gt;&amp;lt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;&amp;gt;&lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="parameters"&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="security-features"&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="accessibility"&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://qianlechen.github.io/courses/hugo-blox/guide/formatting/callout/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.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="usage"&gt;Usage&lt;/h2&gt;
&lt;h3 id="basic-callout-types"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!NOTE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="note"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Note&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!INFO]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="info"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Info&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!ABSTRACT]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-cyan-100 dark:bg-cyan-900 border-cyan-500"
data-callout="abstract"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-cyan-600 dark:text-cyan-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Abstract&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!TODO]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500"
data-callout="todo"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Todo&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!TIP]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500"
data-callout="tip"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Tip&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!SUCCESS]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-green-100 dark:bg-green-900 border-green-500"
data-callout="success"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-green-600 dark:text-green-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15L15 9.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Success&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!QUESTION]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-yellow-100 dark:bg-yellow-900 border-yellow-500"
data-callout="question"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-yellow-700 dark:text-yellow-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Question&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!EXAMPLE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500"
data-callout="example"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21a48.25 48.25 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Example&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!QUOTE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-gray-100 dark:bg-gray-800 border-gray-500"
data-callout="quote"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-gray-600 dark:text-gray-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193c-.34.027-.68.052-1.02.072v3.091l-3-3a49.5 49.5 0 0 1-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095a48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402c-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235c.577.075 1.157.14 1.74.194V21l4.155-4.155"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Quote&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!WARNING]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500"
data-callout="warning"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Warning&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!CAUTION]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500"
data-callout="caution"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Caution&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!IMPORTANT]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500"
data-callout="important"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Important&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!DANGER]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500"
data-callout="danger"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Danger&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!FAILURE]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500"
data-callout="failure"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Failure&lt;/div&gt;
&lt;div class="callout-body"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!BUG]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-red-100 dark:bg-red-900 border-red-500"
data-callout="bug"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-red-600 dark:text-red-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Bug&lt;/div&gt;
&lt;div class="callout-body"&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="custom-titles"&gt;Custom Titles&lt;/h3&gt;
&lt;p&gt;You can customize the title of any callout:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&gt;[!WARNING]+ Custom Warning Title
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="ge"&gt;&lt;/span&gt;&lt;span class="k"&gt;&amp;gt; &lt;/span&gt;&lt;span class="ge"&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="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500"
data-callout="warning"
data-callout-metadata=""&gt;
&lt;span class="callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300"&gt;
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;div class="callout-content dark:text-neutral-300"&gt;
&lt;div class="callout-title font-semibold mb-1"&gt;Custom Warning Title&lt;br&gt;&lt;/div&gt;
&lt;div class="callout-body"&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="legacy-syntax-deprecated"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-markdown" data-lang="markdown"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; callout note &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;This still works but is deprecated. Use the Markdown syntax above!
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; /callout &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id="css-customization"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-css" data-lang="css"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c"&gt;/* Customize NOTE callouts */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;callout&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;data-callout&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;note&amp;#34;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;border-left-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;box-shadow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt; &lt;span class="mi"&gt;-1&lt;/span&gt;&lt;span class="kt"&gt;px&lt;/span&gt; &lt;span class="nb"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mf"&gt;0.1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c"&gt;/* Make SUCCESS callouts pulse */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;callout&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;data-callout&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;success&amp;#34;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;animation&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;pulse&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="kt"&gt;s&lt;/span&gt; &lt;span class="kc"&gt;infinite&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c"&gt;/* Custom icon styling */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;callout-icon&lt;/span&gt; &lt;span class="nt"&gt;svg&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="k"&gt;transform&lt;/span&gt; &lt;span class="mf"&gt;0.2&lt;/span&gt;&lt;span class="kt"&gt;s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;callout&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nd"&gt;hover&lt;/span&gt; &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;callout-icon&lt;/span&gt; &lt;span class="nt"&gt;svg&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;transform&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;scale&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;1.1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c"&gt;/* Dark mode overrides */&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="k"&gt;media&lt;/span&gt; &lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;prefers-color-scheme&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nt"&gt;dark&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;callout&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;data-callout&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;warning&amp;#34;&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;92&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="k"&gt;border-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;rgb&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;245&lt;/span&gt; &lt;span class="mi"&gt;158&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&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="benefits-of-the-new-syntax"&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://qianlechen.github.io/courses/hugo-blox/guide/formatting/cards/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.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="usage"&gt;Usage&lt;/h2&gt;
&lt;div class="hb-cards mt-4 grid gap-4 not-prose" style="--hb-cols: 1;"&gt;
&lt;a
class="hb-card group"href="../" &gt;
&lt;span class="hb-card-title p-4"&gt;
&lt;svg style="height: 1em; width: 1em;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="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"/&gt;&lt;/svg&gt;Learn Shortcodes&lt;/span&gt;&lt;/a&gt;
&lt;a
class="hb-card group"&gt;
&lt;span class="hb-card-title p-4"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; cards &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&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="line"&gt;&lt;span class="cl"&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="line"&gt;&lt;span class="cl"&gt;{{&amp;lt; /cards &amp;gt;}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id="options"&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://qianlechen.github.io/courses/hugo-blox/reference/i18n/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.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>Spoilers</title><link>https://qianlechen.github.io/courses/hugo-blox/guide/formatting/toggle/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.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="example"&gt;Example&lt;/h2&gt;
&lt;details class="spoiler " id="spoiler-0"&gt;
&lt;summary class="cursor-pointer"&gt;Click to view the spoiler&lt;/summary&gt;
&lt;div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2"&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="usage"&gt;Usage&lt;/h2&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&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="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;This is the content of the details.
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;Markdown is **supported**.
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&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://qianlechen.github.io/courses/hugo-blox/guide/formatting/steps/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://qianlechen.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="example"&gt;Example&lt;/h2&gt;
&lt;div class="hb-steps"&gt;
&lt;h3 id="step-1"&gt;Step 1&lt;/h3&gt;
&lt;p&gt;The first step here&amp;hellip;&lt;/p&gt;
&lt;h3 id="step-2"&gt;Step 2&lt;/h3&gt;
&lt;p&gt;The second step here&amp;hellip;&lt;/p&gt;
&lt;h3 id="step-3"&gt;Step 3&lt;/h3&gt;
&lt;p&gt;The third step here&amp;hellip;&lt;/p&gt;
&lt;/div&gt;
&lt;h2 id="usage"&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="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{% steps %}}
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;### Step 1
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;The first step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;### Step 2
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;The second step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;### Step 3
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;The third step here...
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;{{% /steps %}}
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description></item></channel></rss>