GH-91 About us gallery

src/components/about/About.vue

@@ -1,88 +1,108 @@
 <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>
+    <p class="desc">{{$t("message.about-us.desc")}}</p>
+    <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%;
-  }
+.title {
+  color: var(--primary-title);
 }
 
-.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);
-  color: var(--white);
+.desc {
+  color: var(--secondary-title);
 }
 
-.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,22 @@
       "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 🎉",
+      "desc": "Learn more about our organization and our members!",
+      "title1": "Members:",
+      "desc1": "Our open source organization consists of eight computer science enthusiasts, including several experienced programmers. Our main area of work is Minecraft plugins written in Java and projects in other languages such as Vue and JavaScript. We have opened several repositories on GitHub, which are constantly being developed and improved to provide the best possible 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 programming 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 enthusiasts like us 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 many games, such as 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!",