Project Gallery

A Project Gallery with an interactive modal

ReactHTML

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/project-gallery-html.json

Usage

Define a section with class="project-gallery" and id="project-gallery".

<section id="project-gallery" class="project-gallery">...</section>

Define your projects inside the section as follows.

<section id="project-gallery" class="project-gallery">
  <a href="#" class="gallery-item">
    <div class="project-image-container" style="background-color: #efe8d3">
      <img src="https://atlasui.dev/assets/atlas-ui.png" alt="Atlas UI" />
    </div>
    <h2>Atlas UI</h2>
    <p>Frontend</p>
  </a>
 
  <a href="#" class="gallery-item">
    <div class="project-image-container" style="background-color: #706d63">
      <img src="https://atlasui.dev/assets/portfolio.png" alt="Portfolio" />
    </div>
    <h2>Portfolio</h2>
    <p>Design &amp; Development</p>
  </a>
</section>
Animated Mobile NavbarParallax Sections