GH-91 About us gallery

src/components/about/About.vue

@@ -1,88 +1,103 @@
 <template>
   <section id="about">
-    <div class="card-ab">
-      <div class="row">
-        <div class="col-lg-6 col-md-12">
-          <h1>&nbsp;{{ $t("message.about.title") }}</h1>
-          <p>{{ $t("message.about.p1") }}</p>
-
-          <p>{{ $t("message.about.p2") }}</p>
-
-          <p>{{ $t("message.about.p3") }}</p>
-
-        </div>
-        <div class="intellij-container col-lg-6 col-md-12">
-          <img alt="intellij" class="intellij" src="/assets/img/header/about/eternalcore-intellij.webp">
-        </div>
-      </div>
+    <h1 class="title">{{ $t("message.about-us.title") }}</h1>
+    <font-awesome-icon icon="fa-solid fa-dinosaur"/>
+    <div class="gallery">
+      <Gallery
+          v-for="(item, index) in items"
+          :key="index"
+          :title="$t('message.about-us.title' + (index + 1))"
+          :description="$t('message.about-us.desc' + (index + 1))"
+          :icon="item.icon"
+          :image="item.image"
+          :isActive="item.isActive"
+          @toggle-active="handleToggleActive(index)"
+
+      />
     </div>
   </section>
 </template>
 
 <script>
 
+import Gallery from "@/components/about/components/Gallery.vue";
+
 export default {
   name: "about",
+  components: {Gallery},
+  data() {
+    return {
+      items: [
+        {
+          icon: "/assets/img/about/people-icon.webp",
+          image: "/assets/img/about/raports-screenshot.webp",
+          isActive: false
+        },
+        {
+          icon: "/assets/img/about/repositories-icon.webp",
+          image: "/assets/img/about/repos-screenshot.webp",
+          isActive: false
+        },
+        {
+          icon: "/assets/img/about/discord-icon.webp",
+          image: "/assets/img/about/discord-screenshot.webp",
+          isActive: false
+        },
+        {
+          icon: "/assets/img/about/gamepad-icon.webp",
+          image: "/assets/img/about/games-screenshot.webp",
+          isActive: false
+        }
+      ]
+    };
+  },
+  methods: {
+    handleToggleActive(index) {
+      this.items.forEach((item, i) => {
+        if (i === index) {
+          item.isActive = !item.isActive;
+        } else {
+          item.isActive = false;
+        }
+      });
+    }
+  }
 };
 </script>
 
 <style>
-@media only screen and (max-width: 1000px) {
-  #about {
-    padding: 0 7% 3% 8%;
-  }
-
-  .card-ab {
-    border-radius: 12px;
-    padding: 15% 15% 4% 10%;
-  }
-
-  .card-ab h1 {
-    border-left: 5px solid var(--black);
-  }
-
-  .card-ab p {
-    margin-top: 8%;
-  }
-}
-
-.card-ab {
-  border-radius: 12px;
-  padding: 5% 5%;
-
-  background: rgb(63, 94, 251);
-  background: -moz-linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
-  background: -webkit-linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
-  background: linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f5efb", endColorstr="#fc466b", GradientType=1);
+.title {
   color: var(--white);
 }
 
-.card-ab h1 {
-  font-weight: 800;
-  border-left: 5px solid var(--white);
-}
-
-.card-ab p {
-  margin-top: 6%;
+.gallery {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  overflow: hidden;
+  width: 100%;
 }
 
 #about {
   padding: 0 12% 3% 12%;
 }
 
-.intellij-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 10px !important;
-}
-
+@media only screen and (max-width: 1000px) {
+  #about {
+    padding: 0 7% 3% 8%;
+  }
 
-.intellij {
-  box-shadow: var(--black) 0 0 15px;
-  width: 100%;
-  border-radius: 15px;
+  .gallery {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    overflow: hidden;
+    width: 100%;
+  }
 }
 
 </style>

src/components/about/components/Gallery.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="gallery-section" @click="toggleActive" :class="isActive ? 'active' : '' "
+       :style="{ backgroundImage: 'url(' + image + ')' }">
+    <div class="shadow"></div>
+    <div class="icon" :class="isActive ? 'active' : '' ">
+      <img :src="icon" alt="Gallery Image" class="gallery-icon"/>
+    </div>
+    <div class="description" :class="isActive ? 'active' : '' ">
+      <h1>{{ title }}</h1>
+      <p class="text">{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "Gallery",
+  props: {
+    key: Number,
+    title: "",
+    description: "",
+    icon: String,
+    image: String,
+    isActive: Boolean
+  },
+  methods: {
+    toggleActive() {
+      this.$emit('toggle-active', this.key);
+    }
+  }
+
+
+  /*
+        let activeElements = document.querySelectorAll('.active');
+        //if this element is active remove class only from this element
+        if (this.isActive) {
+          console.log('method #1');
+          this.isActive = !this.isActive;
+
+          console.log("activated");
+        }
+        //if this element is not active remove class from all active elements and then add class to this element
+        else {
+          console.log('method #2');
+          activeElements.forEach((el) => {
+            el.classList.remove('active');
+            console.log("deactivated");
+          });
+          this.isActive = !this.isActive;
+
+          console.log("activated");
+        }
+      }
+    }
+  */
+};
+</script>
+
+<style scoped>
+
+.gallery-section {
+  position: relative;
+  width: 15%;
+  overflow: hidden;
+  max-height: 70vh;
+  height: 700px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  background-repeat: no-repeat;
+  background-size: auto 120%;
+  background-position: center;
+  border: 5px solid var(--light-gray);
+  cursor: pointer;
+  min-width: 150px;
+  margin: 10px;
+  padding: 10px;
+  transition: .5s cubic-bezier(0.05, 0.61, 0.41, 0.95) all;
+}
+
+
+.gallery-section.active {
+  flex-grow: 10000;
+  transform: scale(1);
+  max-width: 1000px;
+  margin: 0;
+  border-radius: 40px;
+  background-size: auto 100%;
+}
+
+.gallery-section:not(.active) {
+  flex-grow: 1;
+  max-width: 100px;
+  border-radius: 30px;
+}
+
+.icon {
+  align-items: center;
+  top: 80%;
+  left: 17%;
+  z-index: 3;
+  width: 80px;
+  height: 80px;
+  background: transparent;
+  border-radius: 50%;
+  border: var(--primary-dark-gray) 4px solid;
+  padding: 5px;
+  position: relative;
+}
+
+.icon.active {
+  display: none;
+  opacity: 0;
+}
+
+.gallery-icon {
+  width: 60%;
+  height: auto;
+  z-index: 3;
+  filter: brightness(0) invert(0.40);
+  position: absolute; /* position the gallery-icon absolutely */
+  top: 50%; /* position it at 50% from the top of the parent div */
+  left: 50%; /* position it at 50% from the left of the parent div */
+  transform: translate(-50%, -50%); /* center it precisely by translating it -50% from both top and left */
+  align-items: center;
+  justify-content: center;
+}
+
+.description {
+  display: none;
+  z-index: 3;
+  width: 100%;
+}
+
+.description.active {
+  display: block;
+  z-index: 3;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  color: var(--white-gray);
+  padding: 10px;
+  background: var(--primary-dark-gray);
+}
+
+.shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  transition: .5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+
+@media only screen and (max-width: 1000px) {
+  .gallery-section {
+    width: 100%;
+    height: 70vh;
+    margin: 10px;
+    align-items: center;
+    justify-content: center;
+    max-width: max-content;
+    flex-grow: inherit;
+  }
+
+  .icon {
+    display: none;
+  }
+
+  .description {
+    display: block;
+    z-index: 3;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    color: var(--white-gray);
+    padding: 10px;
+    background: var(--primary-dark-gray);
+  }
+
+  .gallery-section:not(.active) {
+    flex-grow: inherit;
+    max-width: none;
+    border-radius: 30px;
+  }
+}
+</style>

src/lang/en.json

@@ -12,12 +12,17 @@
       "hello": "Hello there! 👋",
       "motto": "EternalCode is a fantastic community of developers!"
     },
-    "about": {
-      "title": "About 🎉",
-      "p1": "We are a team of programmers with many years of experience, offering a lot of services related to the IT industry!",
-      "p2": "A close-knit team is what sets us apart, we are a pioneer of this type of service in the market. Among other things, we offer help with games, Linux & Windows servers. support related to the choice of hosting, security of server machines and we love to share our programming knowledge!",
-      "p3": "Do you need something more? Or maybe you want us to do a top-notch design for you on commission? We can accomplish everything without much difficulty! We are open to any type of cooperation!"
-    },
+    "about-us": {
+      "title": "About us 🎉",
+      "title1": "Members:",
+      "desc1": "Our open source organization consists of eight IT enthusiasts, including several experienced programmers. Our main area of work is Minecraft plugins written in Java and projects in other languages such as PHP and HTML. We have opened several repositories on GitHub, which are constantly being developed and improved to provide the best possible Minecraft experience for users.",
+      "title2": "Repositories:",
+      "desc2": "Thanks to our openness and commitment, our organization is constantly growing and becoming more and more known in the Minecraft community and among open source developers. We are proud of our work and always strive to provide high-quality solutions for our users.",
+      "title3": "Discord:",
+      "desc3": "As an open source organization, we value openness and collaboration. We often sit on Discord, giving advice and sharing knowledge about creating Minecraft servers. We want to help other developers and Minecraft enthusiasts develop their projects and achieve success in this field.",
+      "title4": "Entertainment:",
+      "desc4": "In addition to working on open source projects, our members also value their free time and entertainment. We often play Minecraft and Fortnite to relax and enjoy playing together. Moreover, we like to play Sons of the Forest and Witcher, as well as watch anime and other movies to broaden our horizons and draw inspiration for creating our projects."
+      },
     "skills": {
       "title": "Our magic powers!",
       "java": "In our lineup you will find many programmers specializing in Java!",