index.html

---
layout: default
title: "Home"
permalink: /
---

<section id="intro" class="s-intro target-section">
  <div class="s-intro__bg rellax" data-rellax-speed="-5"></div>
  <div class="row s-intro__content">
    <div class="column">
      <div class="s-intro__content-top">
        <div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 10px;">
          <a href="https://orcid.org/0000-0002-4293-6099" style="text-decoration: none;">
            <i class="ai ai-orcid" style="font-size: 2.5em; color: #e63946;"></i>
          </a>
          <a href="https://github.com/comphy-lab" style="text-decoration: none;">
            <i class="fa-brands fa-github" style="font-size: 2.5em; color: #8a2be2;"></i>
          </a>
          <a href="https://scholar.google.com/citations?user=tHb_qZoAAAAJ&hl=en" style="text-decoration: none;">
            <i class="ai ai-google-scholar" style="font-size: 2.5em; color: #4169e1;"></i>
          </a>
        </div>
        <h1 class="s-intro__title">
          Computational Multiphase <br>
          Physics (CoMPhy) Lab
        </h1>
        <div class="s-intro__caption">
          <p>Picture: <a href="/research/#7">Worthington jet</a> formed due to bursting bubble.</p>
        </div>
        <div class="s-intro__subtitle">
          <p style="margin-top: 30px;">
            <a href="#featured" class="smoothscroll" style="display: inline-block; padding: 8px 16px; background-color: rgba(3, 102, 214, 0.9); color: white; text-decoration: none; border-radius: 25px; font-size: 0.9em; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); backdrop-filter: blur(5px);">
                Featured Research
            </a>
        </div>
        </p>
      </div>
    </div>
  </div>
</section>

  <section id="about" class="s-about target-section">
    <div class="row s-about__content" data-animate-block>
      <div class="s-about__grid">
        <div class="s-about__left">
          <div id="about-content" class="s-about__desc" data-animate-el>
            <!-- Markdown content will be loaded here -->
          </div>
        </div>
        <div class="s-about__right">
          <div class="s-about__social" data-animate-el>
            <div class="s-about__social-header">
              <i class="fa-solid fa-newspaper" style="font-size: 1.75em;"></i>
              <h3>News</h3>
            </div>
            <div id="news-content" class="s-about__desc" data-animate-el>
              <!-- News content will be loaded here -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="featured" class="s-featured target-section">
    <div class="row s-featured__content" data-animate-block>
      <div class="s-featured__grid">
        <div class="s-featured__left">
          <div class="s-featured__header">
            <h2 class="text-pretitle" data-animate-el>
              Featured Research
            </h2>
          </div>
          <div class="featured-item" data-animate-el>
            <div class="featured-item__image">
              <!-- Featured papers will be loaded here by JavaScript -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>