JSFiddle - React, Tailwind, and code Playground

by Shuaib Khan

HTML

<section id="projects">
        <div class="content">
          <div id="portfolio"></div>
          <div id="open-modal" class="modal-window"></div>
        </div>
    </section>

JavaScript

const portfolioData  = [
        {
        title: "Example1",
        desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
        tech: "Axure, Photoshop, Illustrator ",
        photo: "images/example.png",
        thumb: "images/thumb1.png"
    },
    {
        title: "Example2",
        desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
        tech: "HTML5, Sass, CSS3, jQuery, Javascript",
        photo: "images/example.png",
        thumb: "images/thumb1.png"
    },
    {
        title: "Example3",
        desc: "Lorem ipsum dolor et miset execut lorem dausum dolor hamburgefonsz odnit",
        tech: "Adobe After Effects, Adobe Premiere",
        photo: "images/example.png",
        thumb: "images/thumb1.png"
    }
    ];

      function portfolioThumb(portfolio) {
        return `
        <div class="project">
            <a class="btn" href="#open-modal"><img class="project-thumb" src="${portfolio.thumb}"></a>
        </div>`;
      }

      document.getElementById("portfolio").innerHTML = ` ${portfolioData.map(portfolioThumb).join("")}`;

      function portfolioModal(modal) {
        return `
        <div>
            <a href="#projects" title="Close" class="modal-close">Close</a>
            <h1 class="project-title">${modal.title}</h1>
            <div class="project-desc">${modal.desc}</div>
            <img class="project-photo" src="${modal.photo}">
            <div class="project-desc">${modal.tech}</div>
        </div>`;
        }

        document.getElementById("open-modal").innerHTML = `
        ${portfolioData.map(portfolioModal).join("")}`;