fNe

.devcontainer/devcontainer.json

@@ -0,0 +1,22 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye"
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

assets/js/script.js

@@ -0,0 +1,129 @@
+// Jvascript
+/* 
+
+const scrollTimeline = new ScrollTimeline({
+    scrollSource: document.scrollingElement,
+    orientation: 'block',
+    timeRange: 1,
+});
+
+document.styleSheets[0].insertRule(`@scroll-timeline scrollAnimation { source: ${scrollTimeline}; }`);
+
+window.addEventListener('scroll', function() {
+    updateProgressBar();
+  });
+
+  function updateProgressBar() {
+    var progressBar = document.getElementById('progressBar');
+    var totalHeight = document.body.scrollHeight - window.innerHeight;
+    var progress = (window.scrollY / totalHeight) * 100;
+    progressBar.style.width = progress + '%';
+  } 
+
+  */
+
+  // scroll for updated on 2/28/2024 11:42PM
+  // const header = document.querySelector("header");
+  // const sectionOne = document.querySelector(".home-intro");
+
+  const faders = document.querySelectorAll(".fade-in");
+  const sliders = document.querySelectorAll(".slide-in");
+
+  // const sectionOneOptions = {
+  //   rootMargin: "-200px 0px 0px 0px"
+  // };
+
+  // const sectionOneObserver = new IntersectionObserver(function(
+  //   entries,
+  //   sectionOneObserver
+  //  ) {
+  //   entries.forEach(entry => {
+  //     if (!entry.isIntersecting) {
+  //      header.classList.add("nev-scrolled");
+  //     } else {
+  //       header.classList.remove("nav-scrolled")
+  //     }
+  //   });
+  // },
+  // sectionOneOptions);
+
+  // sectionOneObserver.observe(sectionOne);
+
+  const appearOptions = {
+   threshold: 0,
+   rootMargin: "0px 0px -100px 0px"
+  };
+
+  const appearOnScroll = new IntersectionObserver(function(
+    entries,
+    appearOnScroll
+  ) {
+    entries.forEach(entry => {
+      if (!entry.isIntersecting) {
+        return;
+      } else {
+        entry.target.classList.add("appear");
+        appearOnScroll.unobserve(entry.target);
+      }
+    });
+  },
+  appearOptions);
+
+  faders.forEach(fader => {
+    appearOnScroll.observe(fader);
+  });
+
+  sliders.forEach(silder => {
+    appearOnScroll.observe(silder);
+  });
+
+
+  // Projects counters 
+
+  const options = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.5 // Trigger when 50% of the element is visible
+  };
+
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        animateNumbers(entry.target);
+      }
+    });
+  }, options);
+
+  document.querySelectorAll('.p-count').forEach(div => {
+    observer.observe(div);
+  });
+
+  function animateNumbers(targetElement) {
+    const counter = targetElement.querySelector('.number');
+    const target = +counter.getAttribute('data-count');
+    const duration = 2000; // Total animation duration
+    const speed = 120; // Animation speed (milliseconds per frame)
+
+    let count = 0;
+    const increment = target / (duration / speed);
+
+    const updateCount = () => {
+      count += increment;
+      if (count < target) {
+        counter.innerText = Math.ceil(count);
+        setTimeout(updateCount, speed);
+      } else {
+        counter.innerText = target;
+      }
+    };
+
+    updateCount();
+  }
+
+  window.addEventListener('load', () => {
+    document.querySelectorAll('.p-count').forEach(div => {
+      if (div.getBoundingClientRect().top < window.innerHeight) {
+        animateNumbers(div);
+      }
+    });
+  });

assets/js/test.js

@@ -0,0 +1 @@
+function