Certificate UI Reset

index.html

@@ -667,122 +667,21 @@ <h6 class="test-head">Prof. Dr. Anubhav Singh | IGDTUW</h6>
     </section>
 
     <!-- Certificates -->
-    <section id="certificates" class="container">
-      <div id="certificate-heading" class="container" data-aos="zoom-in">
-        <h1>Certificates</h1>
-        <div
-          id="certificateCarousel"
-          class="carousel"
-          data-bs-ride="carousel"
-          data-bs-pause="false"
-        >
-          <div class="carousel-indicators">
-            <button
-              type="button"
-              data-bs-target="#carouselIndicators"
-              data-bs-slide-to="0"
-              class="active"
-              aria-current="true"
-              aria-label="Slide 1"
-            ></button>
-            <button
-              type="button"
-              data-bs-target="#carouselIndicators"
-              data-bs-slide-to="1"
-              aria-label="Slide 2"
-            ></button>
-            <button
-              type="button"
-              data-bs-target="#carouselIndicators"
-              data-bs-slide-to="2"
-              aria-label="Slide 3"
-            ></button>
-            <button
-              type="button"
-              data-bs-target="#carouselIndicators"
-              data-bs-slide-to="3"
-              aria-label="Slide 4"
-            ></button>
-            <button
-              type="button"
-              data-bs-target="#carouselIndicators"
-              data-bs-slide-to="4"
-              aria-label="Slide 5"
-            ></button>
-          </div>
-          <div class="carousel-inner">
-            <div class="carousel-item active">
-              <h6 class="test-head">Certificate 1</h6>
-              <p class="test-desc">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut. Turpis egestas sed tempus urna et.
-                Commodo elit at imperdiet dui accumsan sit amet. Auctor augue
-                mauris augue neque gravida in. Felis bibendum ut tristique et.
-                Urna id volutpat lacus laoreet. Nibh sit amet commodo nulla
-                facilisi nullam vehicula ipsum a.
-              </p>
-            </div>
-            <div class="carousel-item">
-              <h6 class="test-head">Certificate 2</h6>
-              <p class="test-desc">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut. Turpis egestas sed tempus urna et.
-                Commodo elit at imperdiet dui accumsan sit amet. Auctor augue
-                mauris augue neque gravida in. Felis bibendum ut tristique et.
-                Urna id volutpat lacus laoreet. Nibh sit amet commodo nulla
-                facilisi nullam vehicula ipsum a.
-              </p>
-            </div>
-            <div class="carousel-item">
-              <h6 class="test-head">Certificate 3</h6>
-              <p class="test-desc">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut. Turpis egestas sed tempus urna et.
-                Commodo elit at imperdiet dui accumsan sit amet. Auctor augue
-                mauris augue neque gravida in. Felis bibendum ut tristique et.
-                Urna id volutpat lacus laoreet. Nibh sit amet commodo nulla
-                facilisi nullam vehicula ipsum a.
-              </p>
-            </div>
-            <div class="carousel-item">
-              <h6 class="test-head">Certificate 4</h6>
-              <p class="test-desc">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut. Turpis egestas sed tempus urna et.
-                Commodo elit at imperdiet dui accumsan sit amet. Auctor augue
-                mauris augue neque gravida in. Felis bibendum ut tristique et.
-                Urna id volutpat lacus laoreet. Nibh sit amet commodo nulla
-                facilisi nullam vehicula ipsum a.
-              </p>
-            </div>
-            <div class="carousel-item">
-              <h6 class="test-head">Certificate 5</h6>
-              <p class="test-desc">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-                eiusmod tempor incididunt ut. Turpis egestas sed tempus urna et.
-                Commodo elit at imperdiet dui accumsan sit amet. Auctor augue
-                mauris augue neque gravida in. Felis bibendum ut tristique et.
-                Urna id volutpat lacus laoreet. Nibh sit amet commodo nulla
-                facilisi nullam vehicula ipsum a.
-              </p>
-            </div>
+    <section id="certificates" class="container wide">
+      <div class="c-container">
+        <h2 id="certificate-heading">Certificates</h2>
+        <div class="certified">
+          <img
+            src="/assets/certificates/c1.jpeg"
+            alt="Certificate"
+            id="c-img"
+          />
+          <div id="c-desc">
+            Achieved by showcasing innovative problem-solving skills and
+            collaborative teamwork in a national hackathon competition. This
+            certificate attests to my ability to devise creative solutions and
+            contribute effectively to complex web development challenges.
           </div>
-          <button
-            class="carousel-control-prev"
-            type="button"
-            data-bs-target="#certificateCarousel"
-            data-bs-slide="prev"
-          >
-            <i class="fa-solid fa-angles-left swipe"></i>
-          </button>
-          <button
-            class="carousel-control-next"
-            type="button"
-            data-bs-target="#certificateCarousel"
-            data-bs-slide="next"
-          >
-            <i class="fa-solid fa-angles-right swipe"></i>
-          </button>
         </div>
       </div>
     </section>

script.js

@@ -96,35 +96,6 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 });
 
-let scrollContainer = document.querySelector(".gallery");
-let backBtn = document.getElementById("backbutton");
-let nextBtn = document.getElementById("nextbutton");
-
-scrollContainer.addEventListener("wheel", (evt) => {
-  // evt.preventDefault();
-  scrollContainer.scrollleft += evt.deltaY;
-});
-
-nextBtn.addEventListener("click", () => {
-  scrollContainer.style.scrollBehavior = "smooth";
-  scrollContainer.scrollLeft += 370;
-});
-backBtn.addEventListener("click", () => {
-  scrollContainer.style.scrollBehavior = "smooth";
-  scrollContainer.scrollLeft -= 370;
-});
-
-function displayImage(input) {
-  var file = input.files[0];
-  if (file) {
-    var reader = new FileReader();
-    reader.onload = function (e) {
-      document.getElementById("uploadedImage").src = e.target.result;
-    };
-    reader.readAsDataURL(file);
-  }
-}
-
 // Syncing Active Navbar Links with Scroll
 
 let sec = document.querySelectorAll("section");
@@ -268,3 +239,64 @@ function hideScroll() {
   let doc = document.querySelector("body");
   doc.classList.add("hide-scroll");
 }
+
+// -------- Certificate Section ------------
+
+let certImage = document.getElementById("c-img");
+let cDesc = document.getElementById("c-desc");
+let cIndex = 0;
+
+let certified = [
+  {
+    filePath: "/assets/certificates/c1.jpeg",
+    desc: "Achieved by showcasing innovative problem-solving skills and collaborative teamwork in a national hackathon competition. This certificate attests to my ability to devise creative solutions and contribute effectively to complex web development challenges.",
+  },
+  {
+    filePath: "/assets/certificates/c2.jpeg",
+    desc: "Secured by emerging as a top performer in a national hackathon competition, showcasing adept problem-solving and collaboration skills. This certificate underscores my prowess as a Java and web developer, contributing significantly to the success of the team and solving intricate challenges.",
+  },
+  {
+    filePath: "/assets/certificates/c3.jpeg",
+    desc: "Awarded for outstanding performance during a challenging web development internship. This certificate reflects my practical experience, adaptability, and ability to contribute meaningfully to real-world projects, gaining valuable insights into the professional landscape.",
+  },
+  {
+    filePath: "/assets/certificates/c4.jpeg",
+    desc: "Earned through the successful completion of an intensive web development course, demonstrating proficiency in various programming languages, frameworks, and best practices. This certification validates my commitment to continuous learning and staying abreast of the latest industry trends.",
+  },
+  {
+    filePath: "/assets/certificates/c5.jpeg",
+    desc: "Attained upon successfully finishing a comprehensive Java programming course, affirming my proficiency in this language. This certification signifies my commitment to mastering Java, a fundamental skill for any web developer, and serves as a testament to my dedication to continuous learning in the ever-evolving tech landscape.",
+  },
+  {
+    filePath: "/assets/certificates/c6.jpeg",
+    desc: "Awarded for the successful completion of an intensive web development course, emphasizing proficiency in various web technologies and frameworks. This certificate reinforces my expertise in crafting dynamic and responsive web applications, reflecting my commitment to staying current with the latest advancements in web development.",
+  },
+];
+
+function setCertificate() {
+  cDesc.style.opacity = 0;
+  certImage.style.opacity = 0;
+  cDesc.style.transform = "translate(0px, 10px)";
+  certImage.style.transform = `rotateY(0deg)`;
+  setTimeout(() => {
+    certImage.style.transform = `rotateY(360deg)`;
+    cDesc.style.transform = "translate(0px, 0px)";
+    cDesc.style.opacity = 1;
+    certImage.style.opacity = 1;
+    certImage.src = certified[cIndex].filePath;
+    cDesc.innerText = certified[cIndex].desc;
+  }, 1000);
+}
+
+function changeContent() {
+  if (cIndex <= 4) {
+    cIndex += 1;
+  } else {
+    cIndex = 0;
+  }
+  setCertificate();
+}
+
+window.addEventListener("load", () => {
+  setInterval(changeContent, 7000);
+});

styles.css

@@ -1398,6 +1398,38 @@ h2 {
 
 /* -------------Testimonials Ends---------- */
 
+/* ------------- Certificates --------------- */
+
+.certified {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  padding: 3rem 0px;
+  margin-bottom: 2rem;
+}
+
+.wide {
+  width: 100%;
+}
+
+#c-img {
+  height: 18rem;
+  border: 4px solid black;
+  border-radius: 10px;
+  transition: transform 1s ease-in-out, opacity 0.6s ease-in-out;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+
+#c-desc {
+  width: 35%;
+  text-align: justify;
+  font-size: 1.2rem;
+  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
+}
+
+/* certificate End */
+
 ::-webkit-scrollbar {
   width: 8px;
 }