Change Project Landing Page

script.js

@@ -1,54 +1,53 @@
-jQuery(document).ready(function() {
-    jQuery('.toggle').click(function() {
-      jQuery('body').toggleClass("day");
-      jQuery('body').toggleClass("night");
-    });
+jQuery(document).ready(function () {
+  jQuery(".toggle").click(function () {
+    jQuery("body").toggleClass("day");
+    jQuery("body").toggleClass("night");
   });
-
+});
+
 const nav = document.querySelector(".nav");
 
 let projects = [];
-const experi = document.getElementById('cardd');
+const experi = document.getElementById("cardd");
 const searchBar = document.getElementById("searchbar");
 
-searchBar.addEventListener('keyup', (e) => {
+searchBar.addEventListener("keyup", (e) => {
   const searchString = e.target.value;
-  const filteredProjects = projects.filter( projects => {
-
-      return projects.name.toLowerCase().includes(searchString.toLowerCase());
+  const filteredProjects = projects.filter((projects) => {
+    return projects.name.toLowerCase().includes(searchString.toLowerCase());
   });
 
-  console.log(filteredProjects)
+  // console.log(filteredProjects);
   displayProjects(filteredProjects);
 });
 
-const getProject = fetch('cards.json')
-                .then(response => response.json())
-                .then(data => {
-                    projects = data;
-                    displayProjects(projects)
-                    console.log(projects)
-
-});
+const getProject = fetch("./cards.json")
+  .then((response) => response.json())
+  .then((data) => {
+    projects = data;
+    displayProjects(projects);
+    // REMOVING CONSOLE.LOG DECLARATIONS
+    // console.log(projects);
+  });
 
 const displayProjects = (projects) => {
-  const htmlString = projects
-.map((project) => {
-  return`<div class="stylebox">
-  <p class="card-heading">${project.name}</p>
-       <div class="image" >
-           <img src="${project.image}" alt="">
-        </div>
-        <div class="card-data">
-            <a href=${project.link} target="_blank"><button class="btnn">View</button></a>
+  const htmlString = projects.map((project, key) => {
+    return `
+        <div key="${key}" class="project_box">
+          <div class="project_box_image">
+            <img src="${project.image}" alt="js-project" />
+          </div>
+          <p class="project_box_name">${project.name}</p>
+          <a href="${project.link}" target="_blank">
+            <div class="project_box_link">
+                  <i class="fa-solid fa-up-right-from-square"></i> <p>Live</p>
+            </div>
+          </a>
         </div>
-
-    </div>`;
-
-})
-
-experi.innerHTML = htmlString;
+    `;
+  });
 
-}
+  experi.innerHTML = htmlString;
+};
 
 getProject();

script2.js

@@ -0,0 +1,113 @@
+/* PRELOADER FUNCTION */
+document.addEventListener("DOMContentLoaded", () => {
+  const preloader = document.querySelector("#preLoading");
+  preloader.classList.remove("hidden");
+  preloader.classList.add("preloader");
+
+  setTimeout(() => {
+    preloader.classList.add("hidden");
+  }, 2000);
+});
+
+const preLoadingHide = () => {
+  p.style.display = "none";
+};
+
+/* BACT TO TOP */
+const btnScrollToTop = document.querySelector("#back-to-top");
+btnScrollToTop.addEventListener("click", () => {
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: "smooth",
+  });
+});
+
+const toogleBtn = document.querySelector(".toogle_btn");
+const toogleBtnIcon = document.querySelector(".toogle_btn i");
+const menu = document.querySelector(".dropdown_menu");
+const menuLists = document.querySelectorAll(".menu_lists li");
+
+/* NAV-FUNCTIONS */
+
+/* ACTIVE LINKS */
+const removeActive = () => {
+  menuLists.forEach((link) => {
+    link.classList.remove("active");
+  });
+};
+
+menuLists.forEach((link) => {
+  link.addEventListener("click", () => {
+    removeActive();
+    link.classList.add("active");
+  });
+});
+
+toogleBtn.onclick = () => {
+  console.log("click", "click");
+  menu.classList.toggle("open");
+
+  const isOpen = menu.classList.contains("open");
+
+  toogleBtnIcon.classList = isOpen ? "fa fa-times" : "fa fa-bars";
+};
+
+const isClose = () => {
+  const isClose = menu.classList.remove("open");
+
+  toogleBtnIcon.classList = isClose ? "fa fa-times" : "fa fa-bars";
+};
+
+document.onclick = (e) => {
+  if (!toogleBtn.contains(e.target) && !menu.contains(e.target)) {
+    isClose();
+  }
+};
+document.onscroll = (e) => {
+  if (!toogleBtn.contains(e.target) && !menu.contains(e.target)) {
+    isClose();
+  }
+};
+
+const animationUp = document.querySelectorAll(".animations_up");
+const animationDown = document.querySelectorAll(".animations_down");
+const animationLeft = document.querySelectorAll(".animations_left");
+const animationRight = document.querySelectorAll(".animations_right");
+
+const scrollObserver = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("scroll-animation");
+      } else {
+        entry.target.classList.remove("scroll-animation");
+      }
+    });
+  },
+  { threshold: 0.1 }
+);
+
+for (let i = 0; i < animationUp.length; i++) {
+  const elements = animationUp[i];
+
+  scrollObserver.observe(elements);
+}
+/*  */
+for (let i = 0; i < animationDown.length; i++) {
+  const elements = animationDown[i];
+
+  scrollObserver.observe(elements);
+}
+/*  */
+for (let i = 0; i < animationLeft.length; i++) {
+  const elements = animationLeft[i];
+
+  scrollObserver.observe(elements);
+}
+/*  */
+for (let i = 0; i < animationRight.length; i++) {
+  const elements = animationRight[i];
+
+  scrollObserver.observe(elements);
+}

styles/_colors.scss

@@ -0,0 +1,32 @@
+$white: #fff;
+$black: #000;
+$main_bg: #f3f5f8;
+$dark_text: #131313;
+$nav_link_hover: #ff914d;
+$light_text: #757575;
+$light_border: #e5e9ef;
+$shadow_box: 0px 0px 30px 0px rgba(14, 41, 50, 0.08);
+$shadow_hover: rgba(0, 0, 0, 0.09) 0px 3px 12px;
+
+/* MEDIA SCREENS 
+@media screen and (min-width: 1500px) {
+
+ }
+@media screen and (min-width: 1200px) {
+
+ }
+    @media screen and (min-width: 992px) {
+
+    }
+
+    @media screen and (min-width: 768px) {
+
+    }
+    @media screen and (min-width: 576px) {
+
+    }
+
+      @media screen and (min-width: 400px) {
+
+      }
+*/