-
Portfolio
-
View Overview
+
+
+
Explore My Full Portfolio
+
+ Dive deeper into case studies, architecture diagrams, and comprehensive project overviews.
+
+ View Portfolio Overview
+
+
diff --git a/js/about.js b/js/about.js
index 6cf2d6f..12528c4 100644
--- a/js/about.js
+++ b/js/about.js
@@ -4,3 +4,37 @@
// This function ensures the about link overrides that behavior.
// 1️⃣ Force "About" Link Active
// Code was removed because common.js handles this with ScrollSpy.
+
+// ===== localStorage theme handling =====
+const darkModeToggle = document.getElementById("darkModeToggle");
+const body = document.body;
+
+// Apply saved theme on load
+if (localStorage.getItem("theme") === "dark") {
+ document.documentElement.classList.add("dark");
+ body.classList.add("dark");
+ darkModeToggle.textContent = "☀️"; // show sun icon if dark mode is active
+} else {
+ darkModeToggle.textContent = "🌙"; // show moon icon if light mode is active
+}
+
+// ===== Dark Mode Persist Across Pages =====
+darkModeToggle.addEventListener("click", () => {
+ const isDark = body.classList.toggle("dark");
+ darkModeToggle.textContent = isDark ? "☀️" : "🌙";
+ localStorage.setItem("theme", isDark ? "dark" : "light");
+
+ // ===== Optional for Services Page =====
+ if (typeof updateOverlayGradient === "function") updateOverlayGradient();
+
+ // Rebuild particles only if available
+ if (typeof initParticles === "function") {
+ setTimeout(() => {
+ if (window.pJSDom && pJSDom.length) {
+ pJSDom[0].pJS.fn.vendors.destroypJS();
+ document.getElementById("particles-js").innerHTML = "";
+ }
+ initParticles();
+ }, 300);
+ }
+});
\ No newline at end of file
diff --git a/js/contact.js b/js/contact.js
index d59a78d..1806ab0 100644
--- a/js/contact.js
+++ b/js/contact.js
@@ -148,3 +148,36 @@ document.addEventListener("DOMContentLoaded", function () {
}
}
});
+// ===== localStorage theme handling =====
+const darkModeToggle = document.getElementById("darkModeToggle");
+const body = document.body;
+
+// Apply saved theme on load
+if (localStorage.getItem("theme") === "dark") {
+ document.documentElement.classList.add("dark");
+ body.classList.add("dark");
+ darkModeToggle.textContent = "☀️"; // show sun icon if dark mode is active
+} else {
+ darkModeToggle.textContent = "🌙"; // show moon icon if light mode is active
+}
+
+// ===== Dark Mode Persist Across Pages =====
+darkModeToggle.addEventListener("click", () => {
+ const isDark = body.classList.toggle("dark");
+ darkModeToggle.textContent = isDark ? "☀️" : "🌙";
+ localStorage.setItem("theme", isDark ? "dark" : "light");
+
+ // ===== Optional for Services Page =====
+ if (typeof updateOverlayGradient === "function") updateOverlayGradient();
+
+ // Rebuild particles only if available
+ if (typeof initParticles === "function") {
+ setTimeout(() => {
+ if (window.pJSDom && pJSDom.length) {
+ pJSDom[0].pJS.fn.vendors.destroypJS();
+ document.getElementById("particles-js").innerHTML = "";
+ }
+ initParticles();
+ }, 300);
+ }
+});
\ No newline at end of file
diff --git a/js/expertise.js b/js/expertise.js
index c9dcedb..ed49769 100644
--- a/js/expertise.js
+++ b/js/expertise.js
@@ -1,33 +1,213 @@
-// ===== localStorage theme handling =====
-const darkModeToggle = document.getElementById("darkModeToggle");
-const body = document.body;
-
-// Apply saved theme on load
-if (localStorage.getItem("theme") === "dark") {
- document.documentElement.classList.add("dark");
- body.classList.add("dark");
- darkModeToggle.textContent = "☀️"; // show sun icon if dark mode is active
-} else {
- darkModeToggle.textContent = "🌙"; // show moon icon if light mode is active
+// ===================================================
+// ===== 1. PARTICLES INITIALIZATION =====
+// ===================================================
+function initParticles() {
+ const isDark = document.body.classList.contains("dark");
+
+ particlesJS("particles-js", {
+ "particles": {
+ "number": { "value": 70, "density": { "enable": true, "value_area": 900 } },
+ "color": { "value": isDark ? "#00e5ff" : "#ff9800" },
+ "shape": { "type": "circle" },
+ "opacity": { "value": 0.6, "random": true, "anim": { "enable": true, "speed": 0.5, "opacity_min": 0.1, "sync": false } },
+ "size": { "value": 3, "random": true },
+ "line_linked": {
+ "enable": true,
+ "distance": 120,
+ "color": isDark ? "#00bcd4" : "#ffb74d",
+ "opacity": isDark ? 0.4 : 0.35,
+ "width": 1
+ },
+ "move": {
+ "enable": true,
+ "speed": 2,
+ "direction": "none",
+ "random": true,
+ "straight": false,
+ "bounce": false
+ }
+ },
+ "interactivity": {
+ "detect_on": "canvas",
+ "events": {
+ "onhover": { "enable": true, "mode": "grab" },
+ "onclick": { "enable": false },
+ "resize": true
+ },
+ "modes": {
+ "grab": { "distance": 200, "line_linked": { "opacity": 0.8 } }
+ }
+ },
+ "retina_detect": true
+ });
+}
+
+function reloadParticles() {
+ if (window.pJSDom && window.pJSDom.length > 0) {
+ window.pJSDom[0].pJS.fn.vendors.destroypJS();
+ window.pJSDom = [];
+ }
+ const container = document.getElementById("particles-js");
+ if (container) container.innerHTML = "";
+ initParticles();
}
-// ===== Dark Mode Persist Across Pages =====
-darkModeToggle.addEventListener("click", () => {
- const isDark = body.classList.toggle("dark");
- darkModeToggle.textContent = isDark ? "☀️" : "🌙";
- localStorage.setItem("theme", isDark ? "dark" : "light");
-
- // ===== Optional for Services Page =====
- if (typeof updateOverlayGradient === "function") updateOverlayGradient();
-
- // Rebuild particles only if available
- if (typeof initParticles === "function") {
- setTimeout(() => {
- if (window.pJSDom && pJSDom.length) {
- pJSDom[0].pJS.fn.vendors.destroypJS();
- document.getElementById("particles-js").innerHTML = "";
+// ===================================================
+// ===== 2. CUSTOM PHYSICS (IDLE TIMER + EXPLOSION) ==
+// ===================================================
+let mouseX = -9999;
+let mouseY = -9999;
+let isMousePresent = false;
+let hasActuallyMoved = false;
+
+// THE FIX: Idle Timer variables
+let isMouseActive = false;
+let idleTimeout = null;
+let initialX = null;
+let initialY = null;
+
+document.addEventListener("mousemove", (e) => {
+ // 25-Pixel Deadzone Lock
+ if (!hasActuallyMoved) {
+ if (initialX === null && initialY === null) {
+ initialX = e.clientX;
+ initialY = e.clientY;
+ return;
+ }
+ const dx = e.clientX - initialX;
+ const dy = e.clientY - initialY;
+ if (Math.sqrt(dx * dx + dy * dy) < 25) return;
+ hasActuallyMoved = true;
+ }
+
+ // Update coordinates
+ mouseX = e.clientX;
+ mouseY = e.clientY;
+ isMousePresent = true;
+
+ // Turn the magnet ON because the mouse is currently moving
+ isMouseActive = true;
+
+ // Reset the Idle Timer every time the mouse moves
+ clearTimeout(idleTimeout);
+ idleTimeout = setTimeout(() => {
+ // If the mouse stops moving for 1 second, turn the magnet OFF
+ isMouseActive = false;
+ }, 1000);
+});
+
+document.addEventListener("mouseleave", () => {
+ isMousePresent = false;
+ isMouseActive = false; // Turn off magnet if mouse leaves window
+});
+
+// Click to Explode (Now uses exact click coordinates)
+document.addEventListener("click", (e) => {
+ if (!window.pJSDom || window.pJSDom.length === 0) return;
+
+ const clickX = e.clientX;
+ const clickY = e.clientY;
+ const particles = window.pJSDom[0].pJS.particles.array;
+
+ particles.forEach(p => {
+ const dx = p.x - clickX;
+ const dy = p.y - clickY;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+
+ if (dist < 400 && dist > 0) {
+ const force = (400 - dist) / 400;
+ p.vx += (dx / dist) * force * 35;
+ p.vy += (dy / dist) * force * 35;
+ }
+ });
+});
+
+// The Physics Engine Loop
+function applyCustomPhysics() {
+ if (window.pJSDom && window.pJSDom.length > 0) {
+ const pJS = window.pJSDom[0].pJS;
+ const particles = pJS.particles.array;
+
+ // Hide native library cursor tracking if idle or deadzone locked
+ if (!hasActuallyMoved || !isMouseActive) {
+ pJS.interactivity.mouse.pos_x = null;
+ pJS.interactivity.mouse.pos_y = null;
+ } else {
+ pJS.interactivity.mouse.pos_x = mouseX;
+ pJS.interactivity.mouse.pos_y = mouseY;
+ }
+
+ particles.forEach(p => {
+ // Air Resistance (Slows them down after explosion)
+ if (Math.abs(p.vx) > 1.0 || Math.abs(p.vy) > 1.0) {
+ p.vx *= 0.88;
+ p.vy *= 0.88;
+ }
+
+ // Magnetic Pull (ONLY runs if the mouse is actively moving)
+ if (isMouseActive && isMousePresent) {
+ const dx = mouseX - p.x;
+ const dy = mouseY - p.y;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+
+ if (dist < 250 && dist > 0) {
+ p.x += dx * 0.015;
+ p.y += dy * 0.015;
+ }
}
- initParticles();
- }, 300);
+ });
+ }
+ requestAnimationFrame(applyCustomPhysics);
+}
+
+applyCustomPhysics();
+
+// ===================================================
+// ===== 3. UI, THEME =====
+// ===================================================
+function updateOverlayGradient() {
+ const overlay = document.querySelector(".gradient-overlay");
+ if (!overlay) return;
+ if (document.body.classList.contains("dark")) {
+ overlay.style.background = "linear-gradient(45deg, rgba(0,150,255,0.25), rgba(0,0,0,0.3), rgba(0,200,255,0.25))";
+ } else {
+ overlay.style.background = "linear-gradient(45deg, rgba(255,140,0,0.25), rgba(255,255,255,0.15), rgba(255,215,64,0.25))";
+ }
+}
+
+function updateToggleIcon() {
+ const darkModeToggle = document.getElementById("darkModeToggle");
+ if (!darkModeToggle) return;
+ if (document.body.classList.contains("dark")) {
+ darkModeToggle.textContent = "☀️";
+ darkModeToggle.title = "Switch to light mode";
+ darkModeToggle.style.background = "#00bcd4";
+ darkModeToggle.style.color = "#000";
+ } else {
+ darkModeToggle.textContent = "🌙";
+ darkModeToggle.title = "Switch to dark mode";
+ darkModeToggle.style.background = "#000000";
+ darkModeToggle.style.color = "#fff";
+ }
+}
+
+const darkModeToggle = document.getElementById("darkModeToggle");
+if (darkModeToggle) {
+ darkModeToggle.addEventListener("click", () => {
+ const isDark = document.body.classList.toggle("dark");
+ localStorage.setItem("theme", isDark ? "dark" : "light");
+ updateOverlayGradient();
+ updateToggleIcon();
+ reloadParticles();
+ });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+ if (localStorage.getItem("theme") === "dark") {
+ document.body.classList.add("dark");
+ document.documentElement.classList.add("dark");
}
+ updateOverlayGradient();
+ updateToggleIcon();
+ initParticles();
});
\ No newline at end of file
diff --git a/services/index.html b/services/index.html
index fa01fa0..8743db1 100644
--- a/services/index.html
+++ b/services/index.html
@@ -228,9 +228,9 @@
-
Our Professional Services
+ Our Professional Services
Handling Virtual Infrastructure
- Software Architect
+ Software Architect
We help startups and businesses build scalable, secure, and
@@ -435,7 +435,7 @@
Consulting
-
+
Live Websites & Systems
Check out some of the systems currently running in production.