adde shapes, tilt and particle animation

animations.js

@@ -0,0 +1,135 @@
+// back to top 
+document.addEventListener('DOMContentLoaded', () => {
+    const backToTopButton = document.getElementById('back-to-top');
+    const progressRing = backToTopButton.querySelector('.progress-ring__circle');
+    const radius = progressRing.r.baseVal.value;
+    const circumference = radius * 2 * Math.PI;
+
+    progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
+    progressRing.style.strokeDashoffset = circumference;
+
+    function setProgress(percent) {
+        const offset = circumference - percent / 100 * circumference;
+        progressRing.style.strokeDashoffset = offset;
+    }
+
+    function scrollHandler() {
+        const scrollTotal = document.documentElement.scrollHeight - window.innerHeight;
+        const scrolled = window.scrollY;
+        const scrollPercent = (scrolled / scrollTotal) * 100;
+
+        if (scrolled > 300) {
+            backToTopButton.classList.add('show');
+        } else {
+            backToTopButton.classList.remove('show');
+        }
+
+        setProgress(scrollPercent);
+    }
+
+    function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+
+    window.addEventListener('scroll', scrollHandler);
+    backToTopButton.addEventListener('click', scrollToTop);
+  });
+
+
+
+  // custom cursor js
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const cursorOuter = document.querySelector(".cursor-outer");
+    const cursorInner = document.querySelector(".cursor-inner");
+    let lastX = 0, lastY = 0;
+
+    document.addEventListener("mousemove", (e) => {
+        const x = e.clientX;
+        const y = e.clientY;
+
+        cursorOuter.style.left = x + "px";
+        cursorOuter.style.top = y + "px";
+
+        cursorInner.style.left = x + "px";
+        cursorInner.style.top = y + "px";
+
+        // Smooth movement for inner cursor
+        lastX += (x - lastX) * 0.2;
+        lastY += (y - lastY) * 0.2;
+        cursorInner.style.left = lastX + "px";
+        cursorInner.style.top = lastY + "px";
+    });
+
+    document.addEventListener("mousedown", () => {
+        cursorOuter.style.width = "40px";
+        cursorOuter.style.height = "40px";
+        cursorInner.style.width = "12px";
+        cursorInner.style.height = "12px";
+    });
+
+    document.addEventListener("mouseup", () => {
+        cursorOuter.style.width = "50px";
+        cursorOuter.style.height = "50px";
+        cursorInner.style.width = "8px";
+        cursorInner.style.height = "8px";
+    });
+
+    document.addEventListener("mouseenter", () => {
+        cursorOuter.style.opacity = "1";
+        cursorInner.style.opacity = "1";
+    });
+
+    document.addEventListener("mouseleave", () => {
+        cursorOuter.style.opacity = "0";
+        cursorInner.style.opacity = "0";
+    });
+  });
+
+
+  // services section ux js
+
+// Vanilla Tilt.js for 3D card effect
+VanillaTilt.init(document.querySelectorAll(".service-card"), {
+    max: 25,
+    speed: 400,
+    glare: true,
+    "max-glare": 0.5,
+});
+
+// Intersection Observer for fade-in effect
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('fade-in');
+        }
+    });
+}, { threshold: 0.1 });
+
+document.querySelectorAll('.service-card').forEach((card) => {
+    observer.observe(card);
+});
+
+// Particle background
+particlesJS("services", {
+    particles: {
+        number: { value: 80, density: { enable: true, value_area: 800 } },
+        color: { value: "#5755fe" },
+        shape: { type: "circle" },
+        opacity: { value: 0.5, random: false },
+        size: { value: 3, random: true },
+        line_linked: { enable: true, distance: 150, color: "#007bff", opacity: 0.4, width: 1 },
+        move: { enable: true, speed: 6, direction: "none", random: false, straight: false, out_mode: "out", bounce: false }
+    },
+    interactivity: {
+        detect_on: "canvas",
+        events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true },
+        modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } }
+    },
+    retina_detect: true
+});
+
+

certificates.js

@@ -0,0 +1 @@
+console.log("CERTJS loaded...")

projects.js

@@ -0,0 +1,23 @@
+
+  // projects section ux js
+
+// Vanilla Tilt.js for 3D card effect
+VanillaTilt.init(document.querySelectorAll(".project-card"), {
+    max: 25,
+    speed: 400,
+    glare: true,
+    "max-glare": 0.5,
+});
+
+// Intersection Observer for fade-in effect
+const projectObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('fade-in');
+        }
+    });
+}, { threshold: 0.1 });
+
+document.querySelectorAll('.project-card').forEach((card) => {
+    projectObserver.observe(card);
+});

shapes.css

@@ -0,0 +1,130 @@
+/* css for animated shapes */
+
+.shapes {
+    /* position: absolute; */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /* overflow: hidden; */
+    z-index: 0;
+  }
+
+  .shape {
+    position: absolute;
+    opacity: 0.5;
+  }
+
+  .shape1 {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
+    top: 25%;
+    left: 10%;
+  }
+
+  .shape2 {
+    width: 120px;
+    height: 120px;
+    background: linear-gradient(120deg, #84fab0 0%, var(--blue) 100%);
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+    top: 20%;
+    right: 15%;
+  }
+
+  .shape3 {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
+    border-radius: 50%;
+    bottom: 20%;
+    left: 42%;
+  }
+
+  .shape4 {
+    width: 100px;
+    height: 100px;
+    background: linear-gradient(
+      to right,
+      #ff8177 0%,
+      #ff867a 0%,
+      #ff8c7f 21%,
+      #f99185 52%,
+      #cf556c 78%,
+      #b12a5b 100%
+    );
+    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
+    top: 50%;
+    right: 30%;
+  }
+
+  .shape5 {
+    width: 90px;
+    height: 90px;
+    background: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
+    border-radius: 30% 70% 46% 54% / 30% 30% 70% 70%;
+    bottom: 10%;
+    right: 10%;
+  }
+
+  .shape6 {
+    width: 70px;
+    height: 70px;
+    background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);
+    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
+    top: 40%;
+    left: 25%;
+  }
+
+  .shape7 {
+    width: 110px;
+    height: 110px;
+    background: linear-gradient(
+      to right,
+      #f78ca0 0%,
+      #f9748f 19%,
+      #fd868c 60%,
+      #fe9a8b 100%
+    );
+    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+    top: 60%;
+    left: 5%;
+  }
+
+  .shape8 {
+    width: 85px;
+    height: 85px;
+    background: linear-gradient(to top, #0fd850 0%, #f9f047 100%);
+    border-radius: 50%;
+    bottom: 5%;
+    right: 25%
+  }
+
+  @keyframes float {
+    0% {
+      transform: translatey(0px);
+    }
+    50% {
+      transform: translatey(-20px);
+    }
+    100% {
+      transform: translatey(0px);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .hero {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .hero-content {
+      padding-right: 0;
+      margin-bottom: 2rem;
+    }
+
+    .nav-links {
+      display: none;
+    }
+  }

shapes.js

@@ -0,0 +1,51 @@
+function animateShapes() {
+    const shapes = document.querySelectorAll('.shape');
+
+    shapes.forEach(shape => {
+        // Set initial position
+        // setPosition(shape);
+
+        // Animate
+        animateShape(shape);
+    });
+}
+
+
+
+function setPosition(element) {
+    const maxX = window.innerWidth - element.offsetWidth;
+    const maxY = window.innerHeight - element.offsetHeight;
+
+    const x = Math.random() * maxX;
+    const y = Math.random() * maxY;
+
+    element.style.position = 'absolute';
+    element.style.left = `${x}px`;
+    element.style.top = `${y}px`;
+}
+
+
+function animateShape(element) {
+    const animationDuration = 15 + Math.random() * 10; // Between 15 and 25 seconds
+    const xDistance = Math.random() * 100 - 50; // Move between -50px and 50px horizontally
+    const yDistance = Math.random() * 100 - 50; // Move between -50px and 50px vertically
+
+    // Get the current position from the element's style
+    const startX = parseFloat(element.style.left) || 0;
+    const startY = parseFloat(element.style.top) || 0;
+
+    const endX = startX + xDistance;
+    const endY = startY + yDistance;
+
+    element.animate([
+        { transform: `translate(${0}px, ${0}px)` },
+        { transform: `translate(${xDistance}px, ${yDistance}px)` }
+    ], {
+        duration: animationDuration * 1000,
+        easing: 'ease-in-out',
+        iterations: Infinity,
+        direction: 'alternate'
+    });
+}
+// Call the function when the DOM is loaded
+document.addEventListener('DOMContentLoaded', animateShapes);