Add projects page, move guestbook to new page, add navigation menu, made menu and footer partials

scripts/projects.js

@@ -0,0 +1,139 @@
+const data = [{
+   title: "Gold Rush",
+   description: "A web-based incremental game about collecting gold",
+   date: "2019",
+   image: "../images/projects/goldrush.png",
+   link: "https://goldrush.hnasheralneam.dev",
+   github: "https://github.com/hnasheralneam/gold-rush"
+},
+{
+   title: "Vegetable Dash",
+   description: "A farming game built for the browser",
+   date: "2020",
+   image: "../images/projects/vegetabledash.png",
+   link: "https://vegetabledash.hnasheralneam.dev",
+   github: "https://github.com/hnasheralneam/vegetable-dash"
+},
+{
+   title: "Git Organized",
+   description: "A project management app built around managing cards",
+   date: "2022",
+   image: "../images/projects/gitorganized.png",
+   link: "https://gitorganized.hnasheralneam.dev",
+   github: "https://github.com/hnasheralneam/git-organized"
+},
+{
+   title: "FetchCV",
+   description: "Your centralized developer profile",
+   date: "2024",
+   image: "../images/projects/fetchcv.png",
+   link: "https://fetchcv.hnasheralneam.dev",
+   github: "https://github.com/FetchCV/fetchcv"
+},
+{
+   title: "Activity Log",
+   description: "A time tracking application",
+   date: "2022",
+   image: "../images/projects/activitylog.png",
+   link: "https://activitylog.hnasheralneam.dev",
+   github: "https://github.com/hnasheralneam/activity-log"
+},
+{
+   title: "Medium Rare",
+   description: "A multiplayer co-op cooking game made for a hackathon",
+   date: "2024",
+   image: "../images/projects/mediumrare.png",
+   link: "https://mediumrare.hnasheralneam.dev/",
+   github: "https://github.com/hnasheralneam/medium-rare"
+},
+{
+   title: "Sleepwalker",
+   description: "A terminal-looking web game, built for an overnight hackathon",
+   date: "2024",
+   image: "../images/projects/sleepwalker.png",
+   link: "https://sleepwalker.quest",
+   github: "https://github.com/MichaByte/sleepwalker"
+},
+{
+   title: "Produced Demand",
+   description: "A bus maanagement game",
+   date: "2025",
+   image: "../images/projects/produceddemand.png",
+   link: "https://hnasheralneam.itch.io/produced-demand",
+   github: "https://github.com/produced-demand/produced-demand"
+}
+];
+
+data.forEach((item) => {
+   let element = document.createElement("div");
+   element.classList.add("carousel-item");
+   element.innerHTML = `
+            <div class="carousel-item-inner">
+                <img src="${item.image}">
+                <div class="text-items">
+                    <h2>${item.title}</h2>
+                    <p>${item.description}</p>
+                    <p class="more">
+                        <span class="started">Started ${item.date}</span>&nbsp;|&nbsp;
+                        <a href="${item.link}">Try it</a>&nbsp;|&nbsp;
+                        <a href="${item.github}">GitHub Repository</a>
+                    </p>
+                </div>
+        </div>`;
+   document.querySelector(".carousel-inner").append(element);
+});
+
+// + prayertimes
+
+const items = document.querySelectorAll(".carousel-item");
+let activeIndex = 1;
+let carouselLoop;
+let lastChange = Date.now();
+
+function updateCarousel() {
+   const total = items.length;
+   items.forEach((item, index) => {
+      item.classList.remove("prev", "active", "next", "hidden-left", "hidden-right");
+
+      const diff = (index - activeIndex + total) % total;
+
+      if (index === activeIndex) item.classList.add("active");
+      else if (diff === total - 1) item.classList.add("prev");
+      else if (diff === 1) item.classList.add("next");
+      else if (diff < total / 2) item.classList.add("hidden-right");
+      else item.classList.add("hidden-left");
+   });
+}
+
+document.querySelector(".carousel").addEventListener("click", (event) => {
+   if (event.target.parentElement.parentElement.classList.contains("next")) {
+      if ((Date.now() - lastChange) < 500) return;
+      nextSlide();
+      resetCarouselLoop();
+      lastChange = Date.now();
+   } else if (event.target.parentElement.parentElement.classList.contains("prev")) {
+      if ((Date.now() - lastChange) < 500) return;
+      lastSlide();
+      resetCarouselLoop();
+      lastChange = Date.now();
+   }
+});
+
+function nextSlide() {
+   activeIndex = (activeIndex + 1) % items.length;
+   updateCarousel();
+}
+
+function lastSlide() {
+   activeIndex = (activeIndex - 1 + items.length) % items.length;
+   updateCarousel();
+}
+
+updateCarousel();
+carouselLoop = setInterval(nextSlide, 2000);
+
+function resetCarouselLoop() {
+   lastChange = Date.now();
+   clearInterval(carouselLoop);
+   carouselLoop = setInterval(nextSlide, 2000);
+}