improved features

AXC-Git · Jul 31, 2024 · c3cee78 · c3cee78
1 parent 073568e
commit c3cee78
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,13 @@
-# Portfolio-new
+# Portfolio
+
+Welcome to my Portfolio website! This project showcases my skills in web development and design.
+
+## Live Link
+
+Check out the live version of my portfolio [here](https://axc-git.github.io/Portfolio-new/).
+
+## Features
+
+- **Responsive Design**: The website is designed to be responsive and works well on various screen sizes.
+- **Dark Mode Toggle**: A dark mode feature is included, allowing users to switch between light and dark themes.
+- **Interactive Elements**: The website includes interactive elements such as buttons and icons.
diff --git a/index.html b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -31,7 +30,7 @@ <h2><a href="#home">Portfolio</a></h2>
   <section id="home">
     <div class="left">
       <span>Hello</span>
-      <h3>Web Design</h3>
+      <h3>World</h3>
       <span class="des">Developing And Designing Website.</span>
       <button><a href="#skills">View My Skills</a></button>
     </div>

diff --git a/script.js b/script.js
@@ -48,4 +48,24 @@ window.addEventListener('scroll', () => {
   }
 })
 
+document.addEventListener('DOMContentLoaded', function() {
+  const toggle = document.querySelector('.switchcircle');
+  const body = document.body;
+  const icon = document.querySelector('.switchcircle ion-icon');
+  let isDarkMode = false;
 
+  toggle.addEventListener('click', function() {
+      if (isDarkMode) {
+          // Switch to light mode
+          body.style.backgroundColor = 'white';
+          body.style.color = 'black';
+          icon.setAttribute('name', 'moon-outline');
+      } else {
+          // Switch to dark mode
+          body.style.backgroundColor = 'black';
+          body.style.color = 'white';
+          icon.setAttribute('name', 'sunny-outline');
+      }
+      isDarkMode = !isDarkMode;
+  });
+});
diff --git a/style.css b/style.css
@@ -33,11 +33,11 @@ header {
 
 }
 
-/* header h2 {
+ /* header h2 {
   font-size: 40px;
   color: #1f67db;
   text-transform: uppercase;
-} */
+}*/
 
 header h2 a{
   font-size: 40px;