thisproject is MyPortfolio

YasminAhmed1456 · Dec 2, 2024 · d021c33 · d021c33
commit d021c33
Show file tree

Hide file tree

Showing 47 changed files with 1,366 additions and 0 deletions.
diff --git a/images/Card_3D designer-1.png b/images/Card_3D designer-1.png
diff --git a/images/Card_3D designer.png b/images/Card_3D designer.png
diff --git a/images/Gradient-1.png b/images/Gradient-1.png
diff --git a/images/Gradient-2.png b/images/Gradient-2.png
diff --git a/images/Gradient.png b/images/Gradient.png
diff --git a/images/Group.png b/images/Group.png
diff --git a/images/Portfolio-1.png b/images/Portfolio-1.png
diff --git a/images/Portfolio-2.png b/images/Portfolio-2.png
diff --git a/images/Portfolio.png b/images/Portfolio.png
diff --git a/images/Rectangle 27.png b/images/Rectangle 27.png
diff --git a/images/Screenshot 2022-09-30 at 10.49 1-1.png b/images/Screenshot 2022-09-30 at 10.49 1-1.png
diff --git a/images/Screenshot 2022-09-30 at 10.49 1-2.png b/images/Screenshot 2022-09-30 at 10.49 1-2.png
diff --git a/images/Screenshot 2022-09-30 at 10.49 1.png b/images/Screenshot 2022-09-30 at 10.49 1.png
diff --git a/images/Screenshot 2022-09-30 at 10.49 3-1.png b/images/Screenshot 2022-09-30 at 10.49 3-1.png
diff --git a/images/Screenshot 2022-09-30 at 10.49 3-2.png b/images/Screenshot 2022-09-30 at 10.49 3-2.png
diff --git a/images/Screenshot 2022-09-30 at 10.49 3.png b/images/Screenshot 2022-09-30 at 10.49 3.png
diff --git a/images/akar-icons_pinterest-fill.png b/images/akar-icons_pinterest-fill.png
diff --git a/images/cenetr.png b/images/cenetr.png
diff --git a/images/iMac - 5.png b/images/iMac - 5.png
diff --git a/images/image 2.png b/images/image 2.png
diff --git a/images/img.jpg b/images/img.jpg
diff --git a/images/img1.png b/images/img1.png
diff --git a/images/img_blog1.png b/images/img_blog1.png
diff --git a/images/img_blog2.png b/images/img_blog2.png
diff --git a/images/img_blog3.png b/images/img_blog3.png
diff --git a/images/img_blog4.png b/images/img_blog4.png
diff --git a/images/img_blog5.png b/images/img_blog5.png
diff --git a/images/img_blog6.png b/images/img_blog6.png
diff --git a/images/img_center bottom rigth.png b/images/img_center bottom rigth.png
diff --git a/images/img_center bottom.png b/images/img_center bottom.png
diff --git a/images/img_home.svg b/images/img_home.svg
diff --git a/images/img_icon.png b/images/img_icon.png
diff --git a/images/img_icon2.png b/images/img_icon2.png
diff --git a/images/img_icon3.png b/images/img_icon3.png
diff --git a/images/img_left bottom.png b/images/img_left bottom.png
diff --git a/images/img_left rigth.png b/images/img_left rigth.png
diff --git a/images/img_left top.png b/images/img_left top.png
diff --git a/images/img_left topl.png b/images/img_left topl.png
diff --git a/images/img_review.png b/images/img_review.png
diff --git a/images/img_rigth top.png b/images/img_rigth top.png
diff --git a/images/img_rigth top2.png b/images/img_rigth top2.png
diff --git a/images/port.jpg b/images/port.jpg
diff --git a/images/portfolio.jpg b/images/portfolio.jpg
diff --git a/images/yasmin.jpg b/images/yasmin.jpg
diff --git a/index.html b/index.html
diff --git a/script.js b/script.js
@@ -0,0 +1,44 @@
+const body = document.body;
+const toggleThemeBtn = document.getElementById('toggle-theme');
+const themeIcon = toggleThemeBtn.querySelector('i');
+
+toggleThemeBtn.addEventListener('click', () => {
+const currentTheme = body.getAttribute('data-theme');
+if (currentTheme === 'dark') {
+    body.setAttribute('data-theme', 'light');
+    toggleThemeBtn.classList.replace('btn-outline-light', 'btn-outline-dark');
+    themeIcon.classList.replace('bi-moon-fill', 'bi-sun-fill');
+    toggleThemeBtn.innerHTML = '<i class="bi bi-sun-fill"></i> Light Mode';
+} else {
+    body.setAttribute('data-theme', 'dark');
+    toggleThemeBtn.classList.replace('btn-outline-dark', 'btn-outline-light');
+    themeIcon.classList.replace('bi-sun-fill', 'bi-moon-fill');
+    toggleThemeBtn.innerHTML = '<i class="bi bi-moon-fill"></i> Dark Mode';
+}
+});
+
+// Add hover effects to service boxes 
+document.querySelectorAll('.service-box').forEach((box) => {
+        box.addEventListener('mouseover', () => {
+        box.style.transform = 'scale(1.05)';
+        });
+        box.addEventListener('mouseout', () => {
+        box.style.transform = 'scale(1)';
+        });
+});
+
+
+const toggleButton = document.getElementById("toggle-mode");
+const contactSection = document.getElementById("contact");
+
+toggleButton.addEventListener("click", () => {
+    // Toggle the "dark-mode" class
+    contactSection.classList.toggle("dark-mode");
+
+    // Update the button text
+    if (contactSection.classList.contains("dark-mode")) {
+        toggleButton.textContent = "Switch to Light Mode";
+    } else {
+        toggleButton.textContent = "Switch to Dark Mode";
+    }
+});