Embed

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
:root{
  --lcd-red:#c8102e;
  --lcd-text:#181818;
  --lcd-line:#dddddd;
}

.lcd-projects-wrap{
  max-width:1240px;
  margin:34px auto 90px auto;
  padding:0 28px;
  font-family:'Space Grotesk',sans-serif;
  color:var(--lcd-text);
  box-sizing:border-box;
}

.lcd-topline{
  height:1px;
  background:var(--lcd-line);
  margin-bottom:20px;
}

.lcd-projects-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:42px;
  flex-wrap:wrap;
}

.lcd-project-nav{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.lcd-cat{
  background:none;
  border:none;
  padding:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  color:#111;
  transition:.2s ease;
}

.lcd-cat.active,
.lcd-cat:hover,
.lcd-current-view{
  color:var(--lcd-red);
}

.lcd-current-view{
  font-size:14px;
  letter-spacing:.04em;
}

/* LANDING GRID */

.lcd-project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px 24px;
}

.lcd-project-card{
  cursor:pointer;
}

.lcd-project-image{
  position:relative;
  overflow:hidden;
  aspect-ratio:1.35/1;
  background:#f2f2f2;
}

.lcd-project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s cubic-bezier(.19,1,.22,1);
}

.lcd-project-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05));
  opacity:0;
  transition:.3s ease;
}

.lcd-project-info{
  position:absolute;
  left:20px;
  bottom:18px;
  color:#fff;
  opacity:0;
  transform:translateY(10px);
  transition:.3s ease;
}

.lcd-project-title{
  font-size:17px;
  letter-spacing:.04em;
  margin-bottom:4px;
}

.lcd-project-meta{
  font-size:12px;
  opacity:.9;
  letter-spacing:.06em;
}

.lcd-project-card:hover img{
  transform:scale(1.05);
}

.lcd-project-card:hover .lcd-project-overlay,
.lcd-project-card:hover .lcd-project-info{
  opacity:1;
  transform:translateY(0);
}

/* PROJECT VIEW */

.lcd-project-view{
  display:none;
  animation:lcdFade .35s ease;
}

.lcd-project-view.active{
  display:block;
}

.lcd-back-btn{
  background:none;
  border:none;
  padding:0;
  margin-bottom:26px;
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  cursor:pointer;
  color:#111;
}

.lcd-back-btn:hover{
  color:var(--lcd-red);
}

/* PROJECT IMAGE GRID — 6 ACROSS */

.lcd-inner-gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  margin-bottom:50px;
}

.lcd-inner-image{
  overflow:hidden;
  cursor:pointer;
  background:#f2f2f2;
  aspect-ratio:1/1;
}

.lcd-inner-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease, opacity .25s ease;
}

.lcd-inner-image:hover img{
  transform:scale(1.05);
  opacity:.94;
}

/* TEXT BELOW IMAGES */

.lcd-project-info-block{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:70px;
  border-top:1px solid var(--lcd-line);
  padding-top:34px;
}

.lcd-project-info-block h2{
  font-size:38px;
  font-weight:500;
  margin:0 0 14px 0;
  letter-spacing:.01em;
}

.lcd-project-desc{
  font-size:16px;
  line-height:1.8;
  color:#444;
  max-width:720px;
}

.lcd-project-details{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.lcd-detail{
  border-top:1px solid #ddd;
  padding-top:13px;
}

.lcd-detail-label{
  font-size:11px;
  color:#999;
  letter-spacing:.16em;
  margin-bottom:6px;
}

.lcd-detail-value{
  font-size:15px;
}

/* LIGHTBOX */

.lcd-lightbox{
  position:fixed;
  inset:0;
  background:rgba(245,245,245,.97);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:44px;
}

.lcd-lightbox.active{
  display:flex;
}

.lcd-lightbox-img{
  max-width:90vw;
  max-height:86vh;
  object-fit:contain;
}

.lcd-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  background:rgba(255,255,255,.88);
  color:var(--lcd-red);
  font-size:24px;
  cursor:pointer;
  transition:.2s ease;
}

.lcd-arrow:hover{
  background:#fff;
}

.lcd-arrow.left{ left:28px; }
.lcd-arrow.right{ right:28px; }

.lcd-lightbox-count{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  font-size:13px;
  color:#555;
  letter-spacing:.08em;
}

.lcd-close{
  position:absolute;
  right:30px;
  bottom:26px;
  width:38px;
  height:38px;
  border:1px solid #bcbcbc;
  background:#ededed;
  color:#666;
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  cursor:pointer;
  transition:.2s ease;
}

.lcd-close:hover{
  background:#e5e5e5;
  color:var(--lcd-red);
}

@keyframes lcdFade{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

@media(max-width:1100px){
  .lcd-inner-gallery{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:900px){
  .lcd-project-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .lcd-project-info-block{
    grid-template-columns:1fr;
    gap:40px;
  }
}

@media(max-width:680px){
  .lcd-project-grid,
  .lcd-inner-gallery{
    grid-template-columns:1fr;
  }

  .lcd-project-info-block h2{
    font-size:30px;
  }
}
</style>

<div class="lcd-projects-wrap">

  <div class="lcd-topline"></div>

  <div id="lcd-overview">

    <div class="lcd-projects-top">

      <div class="lcd-project-nav">
        <button class="lcd-cat active" data-cat="all">All Projects</button>
        <button class="lcd-cat" data-cat="residential">Residential</button>
        <button class="lcd-cat" data-cat="commercial">Commercial</button>
        <button class="lcd-cat" data-cat="historic">Historic</button>
        <button class="lcd-cat" data-cat="interior">Interior</button>
      </div>

      <div class="lcd-current-view">Featured Architectural Projects</div>

    </div>

    <div class="lcd-project-grid" id="lcd-project-grid"></div>

  </div>

  <div class="lcd-project-view" id="lcd-project-view"></div>

</div>

<div class="lcd-lightbox" id="lcd-lightbox">
  <button class="lcd-arrow left" id="lcd-prev">&#10094;</button>
  <img class="lcd-lightbox-img" id="lcd-lightbox-img" src="">
  <button class="lcd-arrow right" id="lcd-next">&#10095;</button>
  <div class="lcd-lightbox-count" id="lcd-count">1 / 6</div>
  <button class="lcd-close" id="lcd-close">X</button>
</div>

<script>
(function(){

const projects = [

{
  category:"commercial",
  title:"Cornerstone Building",
  location:"Downtown Hartford",
  service:"Commercial Redevelopment",
  description:"A mixed-use urban redevelopment project focused on revitalizing historic commercial infrastructure while enhancing long-term functionality and community engagement.",
  cover:"https://cdn.durable.co/blocks/35XP91AbU021C3zi4GQGVqRjFA1VRnk5uyrhfCIm0KjrcUrqfvOYntde71AZA8Vz.png",
  images:[
    "https://cdn.durable.co/blocks/35XP91AbU021C3zi4GQGVqRjFA1VRnk5uyrhfCIm0KjrcUrqfvOYntde71AZA8Vz.png",
    "https://cdn.durable.co/covers/80aulopMCYsAkvV09I4wwIoVlNoF2sfSGDcp4J7ZdxFCsiPkrB3Bz6Na9ELk2Rco.jpg",
    "https://cdn.durable.co/blocks/bAv8jVQs2flOeBH2dTAWi7nPu1DX0GXUy4oyeYrnyPdtjVvmrq9E86WLTaFxNCeV.jpg",
    "https://cdn.durable.co/blocks/3CYgvck2T3JXlEYdVIiBPIDWj8LmGOil859OrxNElMkX2DuV6GyLl4hmmGboZpYF.jpg",
    "https://cdn.durable.co/blocks/36hYrybm81q0rQMCHMFoZpTvdqfXPyJzdrvKxfdCHA2hAW73E0cyWpo1c14CgeTK.jpg",
    "https://cdn.durable.co/blocks/39w6nXvuT0DkMc0YKOJlFi6L5yCTEW5foS3h2gqXkFvyXomKMtHA8IwsenHk42EL.jpg"
  ]
},

{
  category:"residential",
  title:"Residential Collection",
  location:"Connecticut",
  service:"Residential Design",
  description:"A refined residential collection focused on comfort, natural light, proportion, and elegant modern living.",
  cover:"https://cdn.durable.co/blocks/33cUzLHqaRriM3vtcWCkWelWYxCvak6bkDXNxbfzWJCxE5rZ4iVWf8nXpEVWE6bg.jpg",
  images:[
    "https://cdn.durable.co/blocks/33cUzLHqaRriM3vtcWCkWelWYxCvak6bkDXNxbfzWJCxE5rZ4iVWf8nXpEVWE6bg.jpg",
    "https://cdn.durable.co/blocks/35nq2WG5sTAqPkyqf8HqaMxt0yTZRPXhLhxj6Yor7rasjqoIrsNkVdQHM63MdKsl.jpg",
    "https://cdn.durable.co/blocks/36ghUOvBImAy7GWz00QriJ5G9V7wO7RlhFMPxEJGkpEkwTa9xNAZdZt8rPf6Ygt0.jpg",
    "https://cdn.durable.co/blocks/30pIkcSGWHhJv36QxFN9PkhlhgAeVnlOxtO5dHzrYcg9t4nGcqKj3yQocdT2CqCN.jpg",
    "https://cdn.durable.co/blocks/38qeUsCb6L2uEKDNmFkShxmYXTN6eBWsmfwVQJIkJE3ZQJZEXnjQpFhHkTuD13Uv.jpg",
    "https://cdn.durable.co/blocks/3bh7GThrjrvSGCU4Ic7mcgka1VHpT8kVEIzrj9e7gDP0RIV379vSg5R5pvDgbiGJ.jpg"
  ]
},

{
  category:"interior",
  title:"Interior Design Collection",
  location:"Hartford, Connecticut",
  service:"Interior Design",
  description:"Interior environments shaped through atmosphere, texture, circulation, and refined architectural detail.",
  cover:"https://cdn.durable.co/blocks/2bI2zFrfVjGw8BwTEHN62KoemCTkfAak22AXAxX5yOsp3xu66fVgycLD38spUuzy.jpg",
  images:[
    "https://cdn.durable.co/blocks/2bI2zFrfVjGw8BwTEHN62KoemCTkfAak22AXAxX5yOsp3xu66fVgycLD38spUuzy.jpg",
    "https://cdn.durable.co/blocks/12THpTfSvaiMo6bvbsAeMlY3FS9x6qVc45V6znAanYAzRYW7gzTdko58FwecGi5J.jpg",
    "https://cdn.durable.co/blocks/15KBuop8bk4BT1nkIukOfzuqXJyd9Hv7QvyEvM9v6YZnjqwjZzAGu5xkGl2IpD0F.jpg",
    "https://cdn.durable.co/blocks/199ysSDJmWkhVo0iTxwpcGBLdgWoFtl00aFmSA0gTSP7IZkcJoKHDkBqRZWPCNIM.jpg",
    "https://cdn.durable.co/blocks/22c9OH50rkCJRoeqDI3ehIv8oZW8Q7aX2wfyfJBkkhK4JJo0GOB5sIN8UmkuKjfo.jpg",
    "https://cdn.durable.co/blocks/88xgkhSd1Q6FVGBVEc2IYcjPI7bMaoFEPwBBxylWEo5huaiAOT1J7mspsVHArhmr.jpg"
  ]
},

{
  category:"historic",
  title:"Historic Restoration",
  location:"Hartford, Connecticut",
  service:"Historic Restoration",
  description:"Restoration work that preserves architectural memory while adapting existing structures for renewed public, residential, and commercial use.",
  cover:"https://cdn.durable.co/blocks/30bkSHB3q2MwAh8vsI3ghuPxZFDKqnmeoucUGJKz41Cjm2x1UA0kKQ2julZcPHmN.png",
  images:[
    "https://cdn.durable.co/blocks/30bkSHB3q2MwAh8vsI3ghuPxZFDKqnmeoucUGJKz41Cjm2x1UA0kKQ2julZcPHmN.png",
    "https://images.unsplash.com/photo-1728379909828-c715c09fc49e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyNjI5NjF8MHwxfHNlYXJjaHwxNnx8UmVwdXJwb3Npbmd8ZW58MHx8fHwxNzMxMDk3ODcwfDA&ixlib=rb-4.0.3&q=80&w=1080",
    "https://cdn.durable.co/blocks/2eXNBVNtcrChRObIRY8Po11MLszR4T2LUqKw4m3oRXJbxIYOxDEC1MeKeh5GCSVZ.jpg",
    "https://cdn.durable.co/blocks/2deKmWwnU9yhFFedQ086A4t2EWO5PqnDFQy2HeVHz1h67TRmvBQQsjuqmdyePxEN.jpg",
    "https://cdn.durable.co/blocks/2fvQ3LBb1ceIZtVy72UEmuGlGW270fHcrVx6avsPRG109o2wxzhW2Rzw2unf1Bzk.jpg",
    "https://cdn.durable.co/blocks/25CqKfKMBkb3n7En0AFjWL3cBjBLdLFJN2fg0HiGPBCqTZChD4LntmN4icgncore.jpg"
  ]
},

{
  category:"commercial",
  title:"Planning + Adaptive Reuse",
  location:"Connecticut",
  service:"Planning",
  description:"Planning and adaptive reuse concepts that help existing structures serve new community, business, and residential needs.",
  cover:"https://cdn.durable.co/blocks/25ugcnI5nU7lZie8NVHxYTp6lKo6ehwwJy07HVWxShehPJjCeMD21RxAZJWBWCGT.jpg",
  images:[
    "https://cdn.durable.co/blocks/25ugcnI5nU7lZie8NVHxYTp6lKo6ehwwJy07HVWxShehPJjCeMD21RxAZJWBWCGT.jpg",
    "https://cdn.durable.co/blocks/2fS3zvbOw8YFNtESHeW9bSYx2Y9UGWhO9EfZyEDts9HgOGEUkM4zpDJBHdte8JpH.jpg",
    "https://cdn.durable.co/blocks/27tyuGq0aS5ysFwMAfZ04kf4eesZrVg1ca4lZbeC67N30NvgSPPtj3QkmMvnz6tL.jpg",
    "https://cdn.durable.co/blocks/2aMj3mbdxk6YKLDQpo2sqebH76Op4qy0D5QPvn7nXYqWQMffDTlsESKY8QtkccPf.jpg",
    "https://cdn.durable.co/blocks/38qeUsCb6L2uEKDNmFkShxmYXTN6eBWsmfwVQJIkJE3ZQJZEXnjQpFhHkTuD13Uv.jpg",
    "https://cdn.durable.co/blocks/2dDYSHbh8D5vz4B7oxnhjz0hamh2k8ZhrCUCrHCc6vVslD86r6ziunLcqchkPRXS.jpg"
  ]
}

];

const grid = document.getElementById("lcd-project-grid");
const overview = document.getElementById("lcd-overview");
const projectView = document.getElementById("lcd-project-view");
const lightbox = document.getElementById("lcd-lightbox");
const lightboxImg = document.getElementById("lcd-lightbox-img");
const count = document.getElementById("lcd-count");

let activeImages = [];
let activeIndex = 0;

function renderProjects(filter="all"){
  const filtered = filter === "all" ? projects : projects.filter(p => p.category === filter);

  grid.innerHTML = filtered.map((p,i)=>`
    <div class="lcd-project-card" data-index="${i}">
      <div class="lcd-project-image">
        <img src="${p.cover}" alt="${p.title}">
        <div class="lcd-project-overlay"></div>
        <div class="lcd-project-info">
          <div class="lcd-project-title">${p.title}</div>
          <div class="lcd-project-meta">${p.service}</div>
        </div>
      </div>
    </div>
  `).join("");

  document.querySelectorAll(".lcd-project-card").forEach(card=>{
    card.addEventListener("click",()=>{
      openProject(filtered[card.dataset.index]);
    });
  });
}

function openProject(project){
  overview.style.display = "none";
  projectView.classList.add("active");

  projectView.innerHTML = `
    <button class="lcd-back-btn" id="lcd-back-btn">← Back to Projects</button>

    <div class="lcd-inner-gallery">
      ${project.images.map((img,i)=>`
        <div class="lcd-inner-image" data-index="${i}">
          <img src="${img}" alt="${project.title} image ${i+1}">
        </div>
      `).join("")}
    </div>

    <div class="lcd-project-info-block">
      <div>
        <h2>${project.title}</h2>
        <div class="lcd-project-desc">${project.description}</div>
      </div>

      <div class="lcd-project-details">
        <div class="lcd-detail">
          <div class="lcd-detail-label">LOCATION</div>
          <div class="lcd-detail-value">${project.location}</div>
        </div>
        <div class="lcd-detail">
          <div class="lcd-detail-label">SERVICE</div>
          <div class="lcd-detail-value">${project.service}</div>
        </div>
      </div>
    </div>
  `;

  document.getElementById("lcd-back-btn").addEventListener("click",()=>{
    projectView.classList.remove("active");
    overview.style.display = "block";
  });

  document.querySelectorAll(".lcd-inner-image").forEach(item=>{
    item.addEventListener("click",()=>{
      activeImages = project.images;
      activeIndex = parseInt(item.dataset.index,10);
      openLightbox();
    });
  });
}

function openLightbox(){
  lightbox.classList.add("active");
  document.body.style.overflow = "hidden";
  updateLightbox();
}

function closeLightbox(){
  lightbox.classList.remove("active");
  document.body.style.overflow = "";
}

function updateLightbox(){
  lightboxImg.src = activeImages[activeIndex];
  count.textContent = `${activeIndex + 1} / ${activeImages.length}`;
}

function nextImage(){
  activeIndex = (activeIndex + 1) % activeImages.length;
  updateLightbox();
}

function prevImage(){
  activeIndex = (activeIndex - 1 + activeImages.length) % activeImages.length;
  updateLightbox();
}

document.getElementById("lcd-next").addEventListener("click",nextImage);
document.getElementById("lcd-prev").addEventListener("click",prevImage);
document.getElementById("lcd-close").addEventListener("click",closeLightbox);

lightbox.addEventListener("click",(e)=>{
  if(e.target === lightbox) closeLightbox();
});

document.addEventListener("keydown",(e)=>{
  if(!lightbox.classList.contains("active")) return;
  if(e.key === "Escape") closeLightbox();
  if(e.key === "ArrowRight") nextImage();
  if(e.key === "ArrowLeft") prevImage();
});

document.querySelectorAll(".lcd-cat").forEach(btn=>{
  btn.addEventListener("click",()=>{
    document.querySelectorAll(".lcd-cat").forEach(b=>b.classList.remove("active"));
    btn.classList.add("active");
    renderProjects(btn.dataset.cat);
  });
});

renderProjects();

})();
</script>