From e81692140d571cbfcdc54cefa282b8f99aa9c9f0 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Tue, 23 Jan 2024 15:58:32 +0530
Subject: [PATCH 1/4] Slider add

---
 index.html |  70 +++++++++++++++++++++++------------
 script.js  |  13 +++++++
 styles.css | 105 +++++++++++++++++++++++++++++++++++++++--------------
 3 files changed, 137 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index 9a69d49..a7c6e97 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,16 @@
       <div class="📦"></div>
     </div>
 
+    <!-- Switch Mode Light&Dark -->
+
+    <div id="mode">
+      <input type="checkbox" id="toggle-mode" />
+      <label for="toggle-mode" id="slider">
+        <i class="fa-regular fa-sun"></i>
+        <i class="fa-solid fa-moon"></i>
+      </label>
+    </div>
+
     <!-- Scroll-to-top button -->
     <div class="scroll-up-btn">
       <i class="fas fa-angle-up"></i>
@@ -174,23 +184,37 @@ <h1>
           </p>
         </div>
 
-        <section id="about">
-          <div id="xp">
-            <div class="vab-box" data-aos="flip-left" data-aos-easing="ease-out-cubic">
-              <div class="num-box" id="inc">26</div>
-              <div class="text-box">Projects Created</div>
-            </div>
-            <div class="vab-box" data-aos="flip-left" data-aos-delay="500" data-aos-easing="ease-out-cubic">
-              <div class="num-box" id="speed">25000</div>
-              <div class="text-box">Lines of Code Written</div>
-            </div>
-            <div class="vab-box" data-aos="flip-left" data-aos-delay="1000" data-aos-easing="ease-out-cubic">
-              <div class="num-box" id="tick">14</div>
-              <div class="text-box">Hackathons Participated</div>
-            </div>
+        <div id="xp">
+          <div
+            class="vab-box"
+            data-aos="flip-left"
+            data-aos-easing="ease-out-cubic"
+          >
+            <div class="num-box" id="inc">26</div>
+            <div class="text-box">Projects Created</div>
           </div>
-        </section>
-        
+          <div
+            class="vab-box"
+            data-aos="flip-left"
+            data-aos-delay="500"
+            data-aos-easing="ease-out-cubic"
+          >
+            <div class="num-box" id="speed">25000</div>
+            <div class="text-box">Lines of Code Written</div>
+          </div>
+          <div
+            class="vab-box"
+            data-aos="flip-left"
+            data-aos-delay="1000"
+            data-aos-easing="ease-out-cubic"
+          >
+            <div class="num-box" id="tick">14</div>
+            <div class="text-box">Hackathons Participated</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- Skills section -->
     <section id="skill_section" class="skills">
       <div class="container">
@@ -338,13 +362,13 @@ <h3>Project 1</h3>
             <div class="project" data-aos="fade-right">
               <h3>Project 2</h3>
               <p>
-                Built a full-stack web app with Node.js and MongoDB, featuring
-                user authentication and third-party API integration for enhanced
+                Built a full-stack web app with Node.js, featuring user
+                authentication and third-party API integration for enhanced
                 functionality.
               </p>
               <p>
                 <strong>Skills and Tools:</strong> HTML, CSS, JavaScript,
-                Node.js
+                Node.js, MongoDB
               </p>
               <div class="buttons">
                 <button>
@@ -397,13 +421,13 @@ <h3>Project 3</h3>
             <div class="project" data-aos="fade-left">
               <h3>Project 4</h3>
               <p>
-                Built a mobile-responsive website using React.js. Integrated
-                state management for a seamless user interface and employed
-                RESTful API communication.
+                Social networking app for sharing multimedia content. Features
+                include user profiles, posts, comments, and real-time
+                notifications.
               </p>
               <p>
                 <strong>Skills and Tools:</strong> HTML, CSS, JavaScript,
-                React.js
+                Angular, Flask, MySQL
               </p>
               <div class="buttons">
                 <button>
diff --git a/script.js b/script.js
index 499e956..872cd36 100644
--- a/script.js
+++ b/script.js
@@ -300,3 +300,16 @@ function changeContent() {
 window.addEventListener("load", () => {
   setInterval(changeContent, 7000);
 });
+
+// ------ Toggle Mode --------
+
+// let modeBtn = document.getElementById("mode");
+
+// function toggleMode() {
+//   let mode = document.body;
+//   mode.classList.toggle("dark");
+// }
+
+// modeBtn.addEventListener("click", () => {
+//   toggleMode();
+// });
diff --git a/styles.css b/styles.css
index 7089644..1c39c50 100644
--- a/styles.css
+++ b/styles.css
@@ -27,6 +27,59 @@ body {
   z-index: 1000;
 }
 
+/* -----Mode Switch--- */
+#slider {
+  width: 5rem;
+  height: 2.5rem;
+  padding: 0.4rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  bottom: 2rem;
+  left: 3rem;
+  z-index: 50;
+  /* border: 2px solid black; */
+  border-radius: 20px;
+  cursor: pointer;
+  background: #ebebeb;
+  box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
+    inset 0px -5px 15px rgba(255, 255, 255, 0.4);
+}
+
+#slider:after {
+  content: "";
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  background: linear-gradient(180deg, #81afce, #3489db);
+  border-radius: 180px;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+input {
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+
+input:checked + #slider {
+  background: #242424;
+}
+
+input:checked + #slider:after {
+  left: 12px;
+  transform: translateX(100%);
+  background: linear-gradient(180deg, #777, #3a3a3a);
+}
+
+#slider,
+#slider:after {
+  transition: 0.3s;
+}
+
+/* Mode end */
+
 #uploadContainer {
   position: relative;
 }
@@ -721,24 +774,25 @@ input[type="file"] {
 /* ------------------About Me Section ----------------- */
 #about {
   background-color: #e0f7fa;
-  padding: 20px; 
+  padding: 20px;
 }
 
 #xp {
   display: flex;
-  flex-wrap: wrap; 
+  flex-wrap: wrap;
   justify-content: space-between;
+  margin-top: 3rem;
 }
 
 .vab-box {
-  flex: 0 0 calc(33.33% - 20px); 
+  /* flex: 0 0 calc(33.33% - 20px); */
   background-color: white;
   padding: 2rem;
   font-size: 1.3rem;
   text-align: center;
   border-radius: 1rem;
   box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
-  margin-bottom: 20px; 
+  margin-bottom: 1.4rem;
 }
 
 .container {
@@ -750,6 +804,10 @@ input[type="file"] {
   box-sizing: border-box;
 }
 
+.line {
+  display: flex;
+}
+
 .num-box {
   font: 600 1.4rem system-ui;
 }
@@ -758,13 +816,13 @@ input[type="file"] {
   content: "+";
 }
 
-@media (max-width: 767px) {
-  .vab-box {
-    flex: 0 0 100%; 
+@media screen and (max-width: 918px) {
+  #xp {
+    flex-direction: column;
+    justify-content: center;
   }
 }
 
-
 /* ----------------About Me Section Ends------------------- */
 
 #about-heading,
@@ -856,8 +914,8 @@ input[type="file"] {
   }
 }
 
-@media screen and (max-width: 600px){
-  .project{
+@media screen and (max-width: 600px) {
+  .project {
     margin: 20px 0;
     max-width: calc(100% - 50px);
   }
@@ -994,16 +1052,6 @@ label:hover {
   cursor: pointer;
 }
 
-label::before {
-  content: "⏵";
-  font-size: 1.5rem;
-  height: 4rem;
-  display: flex;
-  align-items: center;
-  margin-right: 0.5rem;
-  transition: rotate 200ms 400ms ease-out;
-}
-
 div.faq-content {
   padding: 0 10px;
   width: 80%;
@@ -1019,8 +1067,6 @@ details:has(input:checked) label::before {
   transition: rotate 200ms ease-out;
 }
 
-
-
 .scroll-up-btn {
   position: fixed;
   height: 45px;
@@ -1397,8 +1443,8 @@ h2 {
 }
 
 /* contact-item */
-.contact-item {
-  display: flex;
+.contact-items {
+  text-decoration: none;
 }
 
 /* Experience */
@@ -1535,10 +1581,6 @@ ul li:nth-child(even) .circle {
   transform: translate(-50%, -50%);
 }
 
-.contact-items {
-  text-decoration: none;
-}
-
 /* Media Queries  */
 
 @media screen and (max-width: 450px) {
@@ -1822,3 +1864,10 @@ ul li:nth-child(even) .circle {
     transform: scalex(1.3) scaley(0.7);
   }
 }
+
+/* Dark mode */
+
+.dark {
+  background-color: black;
+  color: white;
+}

From b6e257d9fb4ddbb99c95126545fc15b06993e025 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Tue, 23 Jan 2024 17:42:43 +0530
Subject: [PATCH 2/4] theme toggle

---
 index.html |  4 ++--
 script.js  | 16 ++++++++--------
 styles.css | 25 ++++++++++++++++++++++++-
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index a7c6e97..d3a96cf 100644
--- a/index.html
+++ b/index.html
@@ -48,8 +48,8 @@
     <div id="mode">
       <input type="checkbox" id="toggle-mode" />
       <label for="toggle-mode" id="slider">
-        <i class="fa-regular fa-sun"></i>
-        <i class="fa-solid fa-moon"></i>
+        <i class="fa-regular fa-sun iswitch" id="light"></i>
+        <i class="fa-regular fa-moon iswitch" id="dark"></i>
       </label>
     </div>
 
diff --git a/script.js b/script.js
index 872cd36..06037b0 100644
--- a/script.js
+++ b/script.js
@@ -303,13 +303,13 @@ window.addEventListener("load", () => {
 
 // ------ Toggle Mode --------
 
-// let modeBtn = document.getElementById("mode");
+let modeBtn = document.getElementById("slider");
 
-// function toggleMode() {
-//   let mode = document.body;
-//   mode.classList.toggle("dark");
-// }
+function toggleMode() {
+  let display = document.body;
+  display.classList.toggle("dark");
+}
 
-// modeBtn.addEventListener("click", () => {
-//   toggleMode();
-// });
+modeBtn.addEventListener("click", () => {
+  toggleMode();
+});
diff --git a/styles.css b/styles.css
index 1c39c50..1eb8375 100644
--- a/styles.css
+++ b/styles.css
@@ -39,7 +39,6 @@ body {
   bottom: 2rem;
   left: 3rem;
   z-index: 50;
-  /* border: 2px solid black; */
   border-radius: 20px;
   cursor: pointer;
   background: #ebebeb;
@@ -57,6 +56,20 @@ body {
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
 }
 
+.iswitch {
+  padding: 0px 0.5rem;
+  z-index: 101;
+}
+
+#light {
+  color: white;
+}
+
+#dark {
+  color: black;
+  opacity: 0.4;
+}
+
 input {
   width: 0;
   height: 0;
@@ -78,6 +91,16 @@ input:checked + #slider:after {
   transition: 0.3s;
 }
 
+input:checked + label #light {
+  color: #7e7e7e;
+  opacity: 0.4;
+}
+
+input:checked + label #dark {
+  color: #fff;
+  opacity: 1;
+}
+
 /* Mode end */
 
 #uploadContainer {

From 4276687df8989507878e27457a203bde9ddf65e2 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Tue, 23 Jan 2024 20:01:31 +0530
Subject: [PATCH 3/4] Added dark theme

---
 dark.css   | 196 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |  18 ++---
 styles.css |  32 ++++-----
 3 files changed, 218 insertions(+), 28 deletions(-)
 create mode 100644 dark.css

diff --git a/dark.css b/dark.css
new file mode 100644
index 0000000..d5afa92
--- /dev/null
+++ b/dark.css
@@ -0,0 +1,196 @@
+body {
+  background-color: black;
+  color: white;
+}
+
+.preloader {
+  background-color: black;
+}
+
+.timeline::after {
+  background-color: #1c4966;
+}
+
+.contain::after {
+  background-color: black;
+  border-color: #1c4966;
+}
+
+.navbar-mainbg {
+  background-color: #003366;
+}
+
+#navbarSupportedContent ul li a {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+#navbarSupportedContent > ul > li.active > a {
+  color: whitesmoke;
+}
+
+.hori-selector {
+  background-color: black;
+}
+
+.hori-selector .rightSide,
+.hori-selector .leftSide {
+  background-color: black;
+}
+
+.hori-selector .rightSide:before,
+.hori-selector .leftSide:before {
+  background-color: #003366;
+}
+
+#home {
+  background: linear-gradient(45deg, black 50%, #003366);
+}
+
+#home span {
+  color: #00c9ff;
+}
+
+.icons i:hover {
+  color: #00c9ff;
+}
+
+.fab {
+  color: white;
+}
+
+.btn_resume {
+  background-color: #1c4966;
+  color: black;
+}
+
+.btn_resume a {
+  color: white;
+}
+
+.btn_resume:hover {
+  background-color: #2f83ba !important;
+}
+
+#about {
+  background-color: #00172c;
+}
+
+.vab-box {
+  background-color: black;
+}
+
+.skill-category h3 {
+  color: #3dceff;
+}
+
+.skill {
+  background-color: black;
+}
+
+.skill span {
+  color: #042bff;
+}
+
+.skills {
+  background-color: #00172c;
+}
+
+.skill i {
+  color: whitesmoke;
+}
+
+#projects {
+  background-color: #c5cfd6;
+}
+
+#project-heading h1 {
+  color: #0080ff;
+}
+
+#projects {
+  background-color: rgb(5, 0, 27);
+}
+
+.project {
+  background-color: black;
+}
+
+.project:hover {
+  transform: scale(1.05);
+  background-color: #242323;
+}
+
+.project button a {
+  color: black;
+}
+
+.scroll-up-btn {
+  color: black;
+  background: #3785b9;
+}
+
+h2 {
+  color: #eff2f3;
+}
+
+.exp ul li p {
+  color: white;
+}
+
+.testimonial-section {
+  background-color: #01022a;
+}
+
+#c-img {
+  border-color: whitesmoke;
+}
+
+.faqs,
+.feedbacksssection {
+  background: linear-gradient(
+    45deg,
+    #061a40,
+    #0d3b66,
+    #061a40,
+    #0d3b66,
+    #061a40
+  );
+}
+
+.containerfaqs .tabss {
+  background-color: black;
+}
+
+.containerfaqs .tabss label {
+  background-color: black;
+}
+
+.containerfaqs .tabss:hover label::after {
+  color: whitesmoke;
+}
+
+#faq-head {
+  color: whitesmoke;
+  text-decoration-color: wheat;
+}
+
+.feedbacksssection h1 span {
+  color: whitesmoke;
+  text-decoration-color: wheat;
+}
+
+#feed-item {
+  color: wheat;
+}
+
+.footer-section {
+  background-color: black;
+}
+
+.cta-text h4 {
+  color: whitesmoke;
+}
+
+.copyright-area {
+  background-color: black;
+}
diff --git a/index.html b/index.html
index d3a96cf..2ebf3c1 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,7 @@
       crossorigin="anonymous"
     />
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="styles.css" id="theme" />
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
     <link rel="icon" href="assets/head_icon.png" />
@@ -127,7 +128,7 @@ <h1>
         <div class="icons">
           <a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a>
           <a href="#" target="_blank"><i class="fab fa-github"></i></a>
-          <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
+          <a href="#" target="_blank"><i class="fab fa-x-twitter"></i></a>
         </div>
         <button class="btn_resume">
           <a href="assets/Resume.pdf" target="_blank">Resume</a>
@@ -708,14 +709,7 @@ <h2 id="certificate-heading">Certificates</h2>
         </div>
 
         <h1>
-          <span
-            style="
-              text-decoration: underline;
-              text-decoration-color: #3252a8;
-              color: #3252a8;
-            "
-            >Frequently Asked Questions?</span
-          >
+          <span id="faq-head">Frequently Asked Questions?</span>
         </h1>
 
         <div class="tabss" data-aos="zoom-in">
@@ -758,7 +752,7 @@ <h3>What are my hobbies?</h3>
         <h1><span class="feedback-title">Feedback</span></h1>
         <div class="contact-right">
           <form class="feedback-form" name="submit-to-google-sheet">
-            <h4 style="color: #3252a8; font-weight: 600">Your Name</h4>
+            <h4 id="feed-item">Your Name</h4>
             <p>
               <textarea
                 type="text"
@@ -768,7 +762,7 @@ <h4 style="color: #3252a8; font-weight: 600">Your Name</h4>
                 data-aos="zoom-in"
               ></textarea>
             </p>
-            <h4 style="color: #3252a8; font-weight: 600">Your Email</h4>
+            <h4 id="feed-item">Your Email</h4>
             <p>
               <textarea
                 type="email"
@@ -778,7 +772,7 @@ <h4 style="color: #3252a8; font-weight: 600">Your Email</h4>
                 data-aos="zoom-in"
               ></textarea>
             </p>
-            <h4 style="color: #3252a8; font-weight: 600">Feedback</h4>
+            <h4 id="feed-item">Feedback</h4>
             <p>
               <textarea
                 name="Message"
diff --git a/styles.css b/styles.css
index 1eb8375..2ed13f9 100644
--- a/styles.css
+++ b/styles.css
@@ -244,6 +244,7 @@ input[type="file"] {
     skyblue
   ); /* Change the gradient colors as needed */
   border-radius: 0 !important;
+  padding: 50px 0;
 }
 
 .containerfaqs {
@@ -371,6 +372,12 @@ input[type="file"] {
   font-size: larger;
 }
 
+#faq-head {
+  text-decoration: underline;
+  text-decoration-color: #3252a8;
+  color: #3252a8;
+}
+
 .containerfaqs .tabss .contentfaqs {
   max-height: 0;
   transition: 0.5s;
@@ -464,6 +471,11 @@ input[type="file"] {
   background-color: #1a2c5b;
 }
 
+#feed-item {
+  color: #3252a8;
+  font-weight: 600;
+}
+
 /* Message Styles */
 .feedbacksssection #msg {
   display: block;
@@ -702,6 +714,8 @@ input[type="file"] {
   }
 }
 
+/* ----------Home Section------------- */
+
 #home {
   background: linear-gradient(45deg, white 50%, #3498db);
   display: flex;
@@ -794,6 +808,8 @@ input[type="file"] {
   transform: translateY(-10%);
 }
 
+/* Home ends */
+
 /* ------------------About Me Section ----------------- */
 #about {
   background-color: #e0f7fa;
@@ -808,7 +824,6 @@ input[type="file"] {
 }
 
 .vab-box {
-  /* flex: 0 0 calc(33.33% - 20px); */
   background-color: white;
   padding: 2rem;
   font-size: 1.3rem;
@@ -823,10 +838,6 @@ input[type="file"] {
   flex-direction: column;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 .line {
   display: flex;
 }
@@ -914,7 +925,6 @@ input[type="file"] {
   height: auto;
   width: 100%;
   box-sizing: border-box;
-  background-color: fff;
 }
 
 .project:hover {
@@ -1021,16 +1031,6 @@ input[type="file"] {
   filter: brightness(90%);
 }
 
-/* FAQ section styling */
-.faqs {
-  background-color: #f5f5f5;
-  padding: 50px 0;
-  text-align: left;
-  /* Align content to the left */
-  border-radius: 15px;
-  /* Increase border-radius for the FAQ section */
-}
-
 .container {
   width: 80%;
   margin: 0 auto;

From bb9d84b4744d70cc4b70a9e6dbe23d9e7a5749f7 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Tue, 23 Jan 2024 20:01:58 +0530
Subject: [PATCH 4/4] Button switch

---
 script.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 06037b0..759f7d3 100644
--- a/script.js
+++ b/script.js
@@ -306,10 +306,20 @@ window.addEventListener("load", () => {
 let modeBtn = document.getElementById("slider");
 
 function toggleMode() {
-  let display = document.body;
-  display.classList.toggle("dark");
+  let theme = document.getElementById("theme");
+  const isLight = theme.getAttribute("href") === "styles.css";
+
+  if (isLight) {
+    theme.setAttribute("href", "dark.css");
+  } else {
+    theme.setAttribute("href", "styles.css");
+  }
 }
 
 modeBtn.addEventListener("click", () => {
   toggleMode();
+  document.querySelector(".preloader").style.display = "";
+  setTimeout(function () {
+    document.querySelector(".preloader").style.display = "none";
+  }, 2000);
 });