From 40f7a901f75e528174fa6bdbcfa18d63414ca683 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Sun, 28 Jan 2024 18:45:06 +0530
Subject: [PATCH 1/2] Skill update

---
 dark.css   |  22 +++++-
 index.html | 186 +++++++++++++++++++++++++++-----------------
 styles.css | 220 ++++++++++++++++++++++++++---------------------------
 3 files changed, 242 insertions(+), 186 deletions(-)

diff --git a/dark.css b/dark.css
index 61a4479..9bdf841 100644
--- a/dark.css
+++ b/dark.css
@@ -26,7 +26,7 @@ body {
 
 #navbarSupportedContent > ul > li.active > a {
   color: #2f78a8;
-  font-weight: bold ;
+  font-weight: bold;
 }
 
 .hori-selector {
@@ -88,8 +88,8 @@ body {
   background-color: black;
 }
 
-.skill span {
-  color: #042bff;
+#head-skill {
+  color: white;
 }
 
 .skills {
@@ -100,6 +100,22 @@ body {
   color: whitesmoke;
 }
 
+.circle-bar {
+  box-shadow: inset 0 0 7px #0d1b2a;
+  border-left-color: #013a63;
+  border-top-color: #2a6f97;
+  border-right-color: #61a5c2;
+  border-bottom-color: #00172c;
+}
+
+.circle-bar .cic-name {
+  color: white;
+}
+
+#b {
+  border-right-color: #00172c;
+}
+
 #projects {
   background-color: #c5cfd6;
 }
diff --git a/index.html b/index.html
index 2d170f9..f0d555b 100644
--- a/index.html
+++ b/index.html
@@ -95,13 +95,6 @@
           <li class="nav-item" id="li_experience">
             <a class="nav-link" href="#experience">Experience</a>
           </li>
-          <!-- Not much important -->
-          <!-- <li class="nav-item" id="li_certificates">
-            <a class="nav-link" href="#certificates">Certificates</a>
-          </li>
-          <li class="nav-item" id="li_faq_section">
-            <a class="nav-link" href="#faq_section">FAQ</a>
-          </li> -->
           <li class="nav-item" id="li_contact">
             <a class="nav-link" href="#contact">Contact</a>
           </li>
@@ -112,7 +105,14 @@
     <!-- Home Section -->
     <section id="home">
       <div class="text">
-        <p>Hey there <img src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif" width="40px"> !</p>
+        <p>
+          Hey there
+          <img
+            src="https://raw.githubusercontent.com/MartinHeinz/MartinHeinz/master/wave.gif"
+            width="40px"
+          />
+          !
+        </p>
         <h1>I am <span>Ariana.</span></h1>
         <h1>
           <a
@@ -219,53 +219,104 @@ <h1>
     <!-- Skills section -->
     <section id="skill_section" class="skills">
       <div class="container">
-        <h2>Skills</h2>
-        <!-- Frontend -->
+        <h2 id="head-skill">Skills</h2>
+
         <div class="skill-category">
-          <h3>Frontend Development</h3>
+          <h3>Technical Skills</h3>
           <div class="skills-list">
-            <div class="skill" data-aos="zoom-in">
-              <div class="skill-icon">
-                <i class="fab fa-html5"></i>
+            <div class="skill-item">
+              <i class="fa-brands fa-html5"></i
+              ><span class="skill-name">HTML</span>
+              <div class="prg">
+                <progress class="skillset" value="95" max="100"></progress>
+                <span class="amt">95%</span>
+              </div>
+            </div>
+            <div class="skill-item">
+              <i class="fa-brands fa-css3-alt"></i
+              ><span class="skill-name">CSS</span>
+              <div class="prg">
+                <progress class="skillset" value="90" max="100"></progress>
+                <span class="amt">90%</span>
+              </div>
+            </div>
+            <div class="skill-item">
+              <i class="fa-brands fa-js"></i
+              ><span class="skill-name">JavaScript</span>
+              <div class="prg">
+                <progress class="skillset" value="84" max="100"></progress>
+                <span class="amt">84%</span>
+              </div>
+            </div>
+            <div class="skill-item">
+              <i class="fa-brands fa-react"></i
+              ><span class="skill-name">React</span>
+              <div class="prg">
+                <progress class="skillset" value="80" max="100"></progress>
+                <span class="amt">80%</span>
+              </div>
+            </div>
+            <div class="skill-item">
+              <i class="fa-brands fa-angular"></i
+              ><span class="skill-name">Angular</span>
+              <div class="prg">
+                <progress class="skillset" value="60" max="100"></progress>
+                <span class="amt">60%</span>
               </div>
-              <span>HTML5</span>
             </div>
-            <div class="skill" data-aos="zoom-in">
-              <div class="skill-icon">
-                <i class="fab fa-css3-alt"></i>
+            <div class="skill-item">
+              <i class="fa-brands fa-node-js"></i
+              ><span class="skill-name">Node.js</span>
+              <div class="prg">
+                <progress class="skillset" value="70" max="100"></progress>
+                <span class="amt">70%</span>
               </div>
-              <span>CSS3</span>
             </div>
-            <div class="skill" data-aos="zoom-in">
-              <div class="skill-icon">
-                <i class="fab fa-js"></i>
+            <div class="skill-item">
+              <i class="fa-brands fa-python"></i
+              ><span class="skill-name">Python</span>
+              <div class="prg">
+                <progress class="skillset" value="85" max="100"></progress>
+                <span class="amt">85%</span>
               </div>
-              <span>JavaScript</span>
             </div>
-            <div class="skill" data-aos="zoom-in">
-              <div class="skill-icon">
-                <i class="fab fa-react"></i>
+            <div class="skill-item">
+              <i class="fa-solid fa-database"></i
+              ><span class="skill-name">MongoDB</span>
+              <div class="prg">
+                <progress class="skillset" value="65" max="100"></progress>
+                <span class="amt">65%</span>
               </div>
-              <span>React.js</span>
             </div>
-            <!-- Add more skills with similar structure -->
           </div>
         </div>
-        <!-- Backend -->
+
         <div class="skill-category">
-          <h3>Backend Development</h3>
+          <h3>Professional Skills</h3>
           <div class="skills-list">
-            <div class="skill" data-aos="zoom-in">
-              <div class="skill-icon">
-                <i class="fab fa-node"></i>
+            <div class="skill-item">
+              <div class="circle-bar">
+                <div class="cic-value">85%</div>
+                <div class="cic-name">Creativity</div>
+              </div>
+            </div>
+            <div class="skill-item">
+              <div class="circle-bar" id="b">
+                <div class="cic-value">60%</div>
+                <div class="cic-name">Communication</div>
               </div>
-              <span>Node.js</span>
             </div>
-            <div class="skill" data-aos="zoom-in">
-              <div class="skill-icon">
-                <i class="fas fa-database"></i>
+            <div class="skill-item">
+              <div class="circle-bar">
+                <div class="cic-value">90%</div>
+                <div class="cic-name">Problem Solving</div>
+              </div>
+            </div>
+            <div class="skill-item">
+              <div class="circle-bar">
+                <div class="cic-value">80%</div>
+                <div class="cic-name">Teamwork</div>
               </div>
-              <span>MongoDB</span>
             </div>
           </div>
         </div>
@@ -571,6 +622,7 @@ <h6 class="test-head">
               </div>
             </div>
             <div class="carousel-item">
+              <i class="fa-brands fa-"></i>
               <img src="assets/test_icons/2.png" alt="Profile Photo" />
               <h6 class="test-head">Riya Jain | Project Admin | Google</h6>
               <p class="test-desc">
@@ -592,6 +644,7 @@ <h6 class="test-head">Riya Jain | Project Admin | Google</h6>
               </div>
             </div>
             <div class="carousel-item">
+              <i class="fa-brands fa-"></i>
               <img src="assets/test_icons/3.png" alt="Profile Photo" />
               <h6 class="test-head">
                 Aayush Gupta | Freelancer | GSoC Contributor
@@ -615,6 +668,7 @@ <h6 class="test-head">
               </div>
             </div>
             <div class="carousel-item">
+              <i class="fa-brands fa-"></i>
               <img src="assets/test_icons/4.png" alt="Profile Photo" />
               <h6 class="test-head">Neha Sharma | HR at Infosys | Recruiter</h6>
               <p class="test-desc">
@@ -636,6 +690,7 @@ <h6 class="test-head">Neha Sharma | HR at Infosys | Recruiter</h6>
               </div>
             </div>
             <div class="carousel-item">
+              <i class="fa-brands fa-"></i>
               <img src="assets/test_icons/5.png" alt="Profile Photo" />
               <h6 class="test-head">Prof. Dr. Anubhav Singh | IGDTUW</h6>
               <p class="test-desc">
@@ -707,44 +762,33 @@ <h2 id="certificate-heading">Certificates</h2>
             style="margin-left: 105px"
           />
         </div>
-
         <h1>
           <span id="faq-head">Frequently Asked Questions?</span>
         </h1>
         <div class="tabss-container">
-          <section>
-        <div class="tabss" data-aos="zoom-in">
-          <input type="checkbox" name="acc1" id="acc1" />
-          <label for="acc1">
-          01 In which year do I study? 
-          </label>
-          <div class="contentfaqs"><p>I currently study in 2nd year.</p></div>
-        </div>
-      </section>
-      <section>
-        <div class="tabss" data-aos="zoom-in">
-          <input type="checkbox" name="acc2" id="acc2" />
-          <label for="acc2">
-            02 Am I a member of any of the college societies? 
-          </label>
-          <div class="contentfaqs">
-            <p>Yes, I am the part of college societies named_____</p>
+          <div class="tabss" data-aos="zoom-in">
+            <input type="checkbox" name="acc1" id="acc1" />
+            <label for="acc1"> 01 In which year do I study? </label>
+            <div class="contentfaqs"><p>I currently study in 2nd year.</p></div>
           </div>
-        </div>
-         </section>
-         <section>
-        <div class="tabss" data-aos="zoom-in">
-          <input type="checkbox" name="acc3" id="acc3" />
-          <label for="acc3">
-           03 What are my hobbies? 
-          </label>
-          <div class="contentfaqs">
-            <p>I have various hobbies, I like to ___name of hobbies___</p>
+          <div class="tabss" data-aos="zoom-in">
+            <input type="checkbox" name="acc2" id="acc2" />
+            <label for="acc2">
+              02 Am I a member of any of the college societies?
+            </label>
+            <div class="contentfaqs">
+              <p>Yes, I am the part of college societies named_____</p>
+            </div>
+          </div>
+          <div class="tabss" data-aos="zoom-in">
+            <input type="checkbox" name="acc3" id="acc3" />
+            <label for="acc3"> 03 What are my hobbies? </label>
+            <div class="contentfaqs">
+              <p>I have various hobbies, I like to ___name of hobbies___</p>
+            </div>
           </div>
-        </section>
         </div>
       </div>
-      </div>
     </section>
     <!----FAQ Section ending------------->
 
@@ -754,7 +798,7 @@ <h1>
         <h1><span class="feedback-title">Feedback</span></h1>
         <div class="contact-right">
           <form class="feedback-form" name="submit-to-google-sheet">
-            <h4 id="feed-item">Your Name</h4>
+            <h4 id="feed-item"><i class="fa-brands fa-"></i>Your Name</h4>
             <p>
               <textarea
                 type="text"
@@ -764,7 +808,7 @@ <h4 id="feed-item">Your Name</h4>
                 data-aos="zoom-in"
               ></textarea>
             </p>
-            <h4 id="feed-item">Your Email</h4>
+            <h4 id="feed-item"><i class="fa-brands fa-"></i>Your Email</h4>
             <p>
               <textarea
                 type="email"
@@ -774,7 +818,7 @@ <h4 id="feed-item">Your Email</h4>
                 data-aos="zoom-in"
               ></textarea>
             </p>
-            <h4 id="feed-item">Feedback</h4>
+            <h4 id="feed-item"><i class="fa-brands fa-"></i>Feedback</h4>
             <p>
               <textarea
                 name="Message"
diff --git a/styles.css b/styles.css
index 56b0429..13a1331 100644
--- a/styles.css
+++ b/styles.css
@@ -254,66 +254,64 @@ input[type="file"] {
 }
 
 #faq-head {
-  color:#0277bd;
+  color: #0277bd;
 }
 
 .tabss-container {
   section {
-    background-color:#ffffff;
+    background-color: #ffffff;
     label {
-     border-bottom: 1px solid #416378;
-     background-color:#1b577c;
-     padding: 15px 10px 0;
-     box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05);
-     cursor:pointer;
-     display:block;
-     color:#fff;
-     margin:10px;
-     position:relative;
-     font-size: 20px;
-     &::after{
-      content:"+";
-      position:absolute;
-      right:20px;
-      top:50%;
-      transform:translateY(-50%);
+      border-bottom: 1px solid #416378;
+      background-color: #1b577c;
+      padding: 15px 10px 0;
+      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05);
+      cursor: pointer;
+      display: block;
       color: #fff;
-      opacity:0.5;
-      font-weight:bold;
-      font-size:20px;
-     }
+      margin: 10px;
+      position: relative;
+      font-size: 20px;
+      &::after {
+        content: "+";
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #fff;
+        opacity: 0.5;
+        font-weight: bold;
+        font-size: 20px;
+      }
     }
     .contentfaqs {
-      max-height:0;
-      visibility:hidden;
-      overflow:hidden;
+      max-height: 0;
+      visibility: hidden;
+      overflow: hidden;
       padding: 0 20px;
-      max-width:650px;
+      max-width: 650px;
       * {
-        opacity:0;
+        opacity: 0;
       }
     }
-    input{
-     &:checked + label + .contentfaqs {
-      max-height:100vh;
-      visibility:visible;
-      opacity:1;
-      padding:20px;
-      * {
-        opacity:1;
+    input {
+      &:checked + label + .contentfaqs {
+        max-height: 100vh;
+        visibility: visible;
+        opacity: 1;
+        padding: 20px;
+        * {
+          opacity: 1;
+        }
+      }
+      &:checked + label::after {
+        content: "X";
+        font-weight: bold;
+        font-size: 16px;
       }
-     }
-     &:checked + label::after {
-      content:"X";
-      font-weight: bold;
-      font-size: 16px;
-    }
     }
   }
 }
 
-
-
 /*************FAQs section ending********************/
 
 /************Feedback section starting********************/
@@ -933,12 +931,6 @@ input[type="file"] {
   padding-top: 3rem;
 }
 
-h2 {
-  color: #333;
-  font-size: 2em;
-  margin-bottom: 30px;
-}
-
 details {
   box-sizing: border-box;
   margin-top: 10px;
@@ -1017,13 +1009,16 @@ details:has(input:checked) label::before {
 }
 
 /* Skills section styling */
+
 .skills {
   padding: 50px 0;
   text-align: center;
+  background-color: #e0f7fa;
 }
 
-h2 {
-  color: #0277bd;
+#head-skill {
+  font-size: 3rem;
+  color: #000;
 }
 
 .skill-category {
@@ -1032,96 +1027,97 @@ h2 {
 
 .skill-category h3 {
   color: #01579b;
+  font-size: 1.7em;
+  margin-bottom: 1rem;
+  text-decoration: underline;
 }
 
 .skills-list {
   display: flex;
-  justify-content: center;
   flex-wrap: wrap;
-  gap: 20px;
-  margin-top: 20px;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.skill {
-  background-color: #ffffff;
-  padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease-in-out;
+.skill-item {
+  width: 50%;
+  text-align: left;
+  padding: 1rem;
 }
 
-.skill:hover {
-  transform: translateY(-5px);
+.skill-item i {
+  font-size: 1.3rem;
+  margin-right: 0.9rem;
 }
 
-.skill i {
-  font-size: 40px;
-  color: #0277bd;
-  margin-bottom: 10px;
-  margin-right: 30px;
-
-  display: block;
+.skill-name {
+  font-size: 1.1rem;
+  font-weight: 600;
 }
 
-.skill span {
-  color: #01579b;
-  font-weight: bold;
+.prg {
+  display: flex;
+  margin: 1rem;
+  align-items: center;
 }
 
-/* design of skills section */
-
-.skills {
-  background-color: #e0f7fa;
-  padding: 50px 0;
+.skillset {
+  width: 75%;
 }
 
-h2 {
-  color: #0277bd;
-  font-size: 2em;
-  margin-bottom: 20px;
+.amt {
+  margin-left: 0.8rem;
 }
 
-.skill-category {
-  margin-top: 40px;
-}
+/* professional skill section */
 
-.skill-category h3 {
-  color: #01579b;
-  font-size: 1.5em;
-  margin-bottom: 15px;
+.circle-bar {
+  position: relative;
+  left: 8rem;
+  display: inline-block;
+  width: 10rem;
+  height: 10rem;
+  border-radius: 9rem;
+  margin: 1.5rem;
+  border: 1.2rem solid #000;
+  box-shadow: inset 0 0 7px grey;
+  border-left-color: #90e0ef;
+  border-top-color: #00b4d8;
+  border-right-color: #0077b6;
+  border-bottom-color: #e0f7fa;
+  text-align: center;
+  box-sizing: border-box;
 }
 
-.skills-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
+#b {
+  border-right-color: #e0f7fa;
 }
 
-.skill {
-  background-color: #ffffff;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease-in-out;
-  width: 200px;
-  margin-bottom: 20px;
+.circle-bar .cic-value {
+  top: 40px;
+  position: absolute;
+  left: 10px;
+  right: 0;
+  font-weight: 700;
+  font-size: 2rem;
 }
 
-.skill:hover {
-  transform: translateY(-5px);
+.circle-bar .cic-name {
+  left: 0;
+  bottom: -2rem;
+  text-shadow: 0 0 4px grey;
+  color: black;
+  position: absolute;
+  width: 100%;
+  font-size: 16px;
 }
 
-.skill-icon {
-  font-size: 40px;
-  color: #0277bd;
-  margin-bottom: 10px;
-  margin-left: 30px;
-}
+/* skill end */
 
-.skill span {
-  color: #01579b;
-  font-weight: bold;
-  display: block;
+h2 {
+  color: #0277bd;
+  font-size: 2em;
+  margin-bottom: 20px;
 }
 
 /* Footer css */

From 1b4b08fcbbc5a428b42ea24cce374e0bf595c082 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Sun, 28 Jan 2024 18:59:43 +0530
Subject: [PATCH 2/2] animate

---
 index.html | 4 ++--
 styles.css | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index f0d555b..4c92955 100644
--- a/index.html
+++ b/index.html
@@ -221,7 +221,7 @@ <h1>
       <div class="container">
         <h2 id="head-skill">Skills</h2>
 
-        <div class="skill-category">
+        <div class="skill-category" data-aos="fade-right">
           <h3>Technical Skills</h3>
           <div class="skills-list">
             <div class="skill-item">
@@ -291,7 +291,7 @@ <h3>Technical Skills</h3>
           </div>
         </div>
 
-        <div class="skill-category">
+        <div class="skill-category" data-aos="fade-left">
           <h3>Professional Skills</h3>
           <div class="skills-list">
             <div class="skill-item">
diff --git a/styles.css b/styles.css
index 13a1331..5e2a8ce 100644
--- a/styles.css
+++ b/styles.css
@@ -1780,9 +1780,8 @@ ul li:nth-child(even) .circle {
   }
 }
 
-/* Dark mode */
-
-.dark {
-  background-color: black;
-  color: white;
+@media screen and (max-width: 979px) {
+  .skill-item {
+    width: 100%;
+  }
 }