[베이직 포트폴리오] 둥둥 떠오르는 박스

      <section id="skillSection" class="section-content">
        <div class="list-container">
          <div>
            <p class="list-title">FrontEnd</p>
            <ul id="frontend-list"></ul>
          </div>
          <div>
            <p class="list-title">BackEnd</p>
            <ul id="backend-list"></ul>
          </div>
        </div>
      </section>

.list-container {
  width: 100%;
  display: flex;
  margin: 1%;
  flex-direction: row;
  justify-content: space-around;

  .list-title {
    color: aqua;
    font-weight: bold;
    font-size: 2vw;
  }

  div {
    width: 48%;
    height: 40vh;
    padding: 3% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: brightness(50%);
  }

  div:hover {
    border: 10px solid rgb(255, 151, 0);
    box-shadow: 0 0 20px 8px rgb(255, 151, 0);
    filter: brightness(100%);
    animation: flightBox 2s ease-in-out infinite;
  }

  ul {
    list-style: none;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
  }
  li {
    img {
      width: 80px;
      height: 80px;
      border-radius: 5px;
    }
    img:hover {
      box-shadow: 0 0 20px 8px white;
    }
  }
}

@keyframes flightBox {
  50% {
    transform: translateY(-1vw);
  }
  100% {
    transform: translateY(0);
  }
}

 

 

동적으로 이미지를 넣어주기 위한 js

유지보수를 쉽게 하기 위해 적용했다

const frontendImages = [
  { src: "/img/icons/next.png", alt: "Next.js" },
  { src: "/img/icons/js.png", alt: "JavaScript" },
  { src: "/img/icons/ts.png", alt: "Typescript" },
  { src: "/img/icons/redux.png", alt: "Redux" },
  { src: "/img/icons/zustand.png", alt: "Zustand" },
  { src: "/img/icons/axios.png", alt: "Axios" },
  { src: "/img/icons/query.png", alt: "TanStack-Query" },
  { src: "/img/icons/tailwind.png", alt: "Tailwind css" },
  { src: "/img/icons/style.png", alt: "Styled-components" },
];

const backendImages = [
  { src: "/img/icons/Java.png", alt: "Java" },
  { src: "/img/icons/cat.png", alt: "Apache Tomcat" },
  { src: "/img/icons/oracle.png", alt: "Oracle" },
  { src: "/img/icons/sql.png", alt: "SQL" },
  { src: "/img/icons/my.png", alt: "MySQL" },
];

const frontendList = document.getElementById("frontend-list");
const backendList = document.getElementById("backend-list");

frontendImages.forEach((image) => {
  const li = document.createElement("li");
  const img = document.createElement("img");
  img.src = image.src;
  img.alt = image.alt;
  li.appendChild(img);
  frontendList.appendChild(li);
});

backendImages.forEach((image) => {
  const li = document.createElement("li");
  const img = document.createElement("img");
  img.src = image.src;
  img.alt = image.alt;
  li.appendChild(img);
  backendList.appendChild(li);
});