From 053027af49be991cfc1ccccf7f4d265d249ad4fa Mon Sep 17 00:00:00 2001
From: Niraj <nirajdhanore767@gmail.com>
Date: Fri, 25 Oct 2024 00:04:47 +0530
Subject: [PATCH 1/2] Refactor CSS for Improved Structure, Efficiency, and
 Responsiveness

---
 style.css | 487 ++++++------------------------------------------------
 1 file changed, 49 insertions(+), 438 deletions(-)

diff --git a/style.css b/style.css
index c3925ad..28309a4 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,9 @@
 :root {
     --soft-teal: #003d4d;
+    --deep-teal: #003d4d;
+    --off-white: #f8f9fa;
+    --dark-slate: #2f4f4f;
+    --soft-gold: #d9c79e;
 }
 
 * {
@@ -11,7 +15,7 @@
     border: none;
     text-decoration: none;
     text-transform: capitalize;
-    transition: .2s linear;
+    transition: .3s ease;
 }
 
 html {
@@ -21,6 +25,11 @@ html {
     overflow-x: hidden;
 }
 
+body {
+    background-color: var(--off-white);
+    color: var(--dark-slate);
+}
+
 section {
     padding: 2rem 9%;
 }
@@ -29,50 +38,29 @@ section {
     text-align: center;
     font-size: 4rem;
     color: var(--dark-slate);
-    /* Dark Slate color */
     padding: 1rem;
     margin: 2rem 0;
     background: var(--deep-teal);
-    /* Changed background to Deep Teal */
+    border-radius: 1rem;
 }
 
 .heading span {
     color: var(--soft-gold);
-    /* Soft Gold for span */
 }
 
 .btn {
     display: inline-block;
     margin-top: 1rem;
     border-radius: 5rem;
-    background: var(--soft-gold);
-    /* Soft Gold button background */
-    color: var(--dark-slate);
-    /* Dark Slate text color */
-    padding: 0.9rem 3.5rem;
-    cursor: pointer;
-    font-size: 1.7rem;
-}
-
-.btn:hover {
-    background: var(--deep-teal);
-    /* Deep Teal on hover */
-}
-
-.btn {
-    display: inline-block;
-    margin-top: 1rem;
-    border-radius: 5rem;
-    background: #ffffff;
+    background-color: #3f10ea;
     color: #fff;
     padding: 0.9rem 3.5rem;
     cursor: pointer;
     font-size: 1.7rem;
-    background-color: #3f10ea;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .btn:hover {
-    background: var(--purple);
     background-color: #f03c0b;
     color: white;
 }
@@ -83,67 +71,33 @@ header {
     left: 0;
     right: 0;
     background: var(--soft-teal);
-    /*Changed background to Deep Teal */
     padding: 2rem 9%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     z-index: 1000;
-    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);/
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
 }
 
 header .logo {
     font-size: 3rem;
-
     font-family: 'Poppins', sans-serif;
-    color: #353047;
-
     color: var(--off-white);
-    /* White logo for contrast */
     font-weight: bolder;
 }
 
-.logo img {
-    width: 100px;
-    padding: 0px 6px;
-    margin-right: -14px;
-}
-
 header .logo:hover {
-    font-size: 3rem;
     color: var(--soft-gold);
-    /* Soft Gold on hover for logo */
-    font-weight: bolder;
-    text-decoration: none;
-}
-
-header .logo {
-    font-size: 3rem;
-    color: white;
-    font-weight: bolder;
-    font-size: 2.5rem;
 }
 
-
-
-header .logo span {
-    color: var(--off-white);
-    /* Updated to match logo color */
-
-}
-
-
 header .navbar a {
     font-size: 2rem;
-    padding: 15px;
-    color: white;
+    padding: 1.5rem;
+    color: #fff;
 }
 
 header .navbar a:hover {
     color: var(--soft-gold);
-    /* Soft Gold on hover */
-    text-decoration: none;
-    /* Ensure no underline by default */
 }
 
 header .icons a {
@@ -152,30 +106,8 @@ header .icons a {
     margin-left: 1.5rem;
 }
 
-header .navbar a {
-    font-size: 2rem;
-    padding: 0 1.5rem;
-    color: #ffffff;
-    font-size: 1.8rem;
-}
-
-header .navbar a:hover {
-    color: var(--red);
-    text-decoration: none;
-    color: #ffffff;
-}
-
-header .icons a {
-    font-size: 2.5rem;
-    color: #ffffff;
-    margin-left: 1.5rem;
-    font-size: 2.2rem;
-}
-
 header .icons a:hover {
-    color: var(--purple);
-    color: #ffffff;
-    text-decoration: none;
+    color: var(--soft-gold);
 }
 
 header #toggler {
@@ -184,9 +116,7 @@ header #toggler {
 
 header .fa-bars {
     font-size: 3rem;
-
     color: var(--off-white);
-    /* White for better visibility */
     border-radius: .5rem;
     padding: .5rem 1.5rem;
     cursor: pointer;
@@ -194,120 +124,52 @@ header .fa-bars {
     display: none;
 }
 
-/* Default light mode styles */
-body {
-    background-color: var(--off-white);
-    /* Changed from #ffffff to Off-White */
-    color: var(--dark-slate);
-    /* Changed from #000000 to Dark Slate */
-}
-
-
-
-.dark-mode button {
-    background-color: #1e1e1e;
-    color: #ffffff;
-}
-
-
-.home .content h3 {
-    font-size: 5rem;
-    color: #333;
-    font-size: 4.5rem;
-    font-weight: 600;
-    line-height: 6rem;
-}
-
-/* Add more styles as needed for other elements */
-
+/* Home Section */
 .home {
     display: flex;
     align-items: center;
     min-height: 100vh;
-    background: url(images/background-home.png) no-repeat;
-    background-size: cover;
-    background-position: center;
+    background: url(images/background-home.png) no-repeat center center/cover;
     animation: floatInFromRight 2s ease-out forwards;
-    /* Image floats from right */
-}
-
-.home {
-    display: flex;
-    align-items: center;
-    min-height: 100vh;
-    background: url(images/background-home.png) no-repeat;
-    background-size: cover;
-    background-position: center;
-    min-height: 110vh;
-}
-
-/* Dark mode styles */
-.dark-mode {
-    background-color: #121212;
-    color: #ffffff;
 }
 
 .home .content {
     max-width: 50rem;
     opacity: 0;
-    /* Ensure the text is hidden initially */
-    animation: floatInFromTop 2s ease-out forwards;
-    /* Text floats from top */
-}
-
-.home .content h3,
-.home .content p,
-.home .content a {
-    opacity: 0;
-    /* Initially hidden */
     animation: floatInFromTop 2s ease-out forwards;
-    /* Text enters from the top */
-    animation-delay: 0.5s;
-    /* Delay for a smooth entrance */
-}
-
-.home .content p {
-    font-size: 1.5rem;
-    color: #999;
-    padding: 1rem 0;
-    line-height: 1.5;
-    margin-bottom: 2rem;
-    color: grey;
 }
 
 .home .content h3 {
-    font-size: 5rem;
+    font-size: 4.5rem;
+    font-weight: 600;
     color: var(--dark-slate);
-    /* Changed from #333 to Dark Slate */
+    line-height: 6rem;
 }
 
 .home .content span {
     font-size: 3.5rem;
     color: var(--soft-gold);
-    /* Changed from var(--purple) to Soft Gold */
     padding: 1rem 0;
     line-height: 1.5;
 }
 
 .home .content p {
     font-size: 1.5rem;
-    color: #666;
-    /* Changed from #999 to a darker gray for better readability */
+    color: grey;
     padding: 1rem 0;
     line-height: 1.5;
+    margin-bottom: 2rem;
 }
 
+/* Animations */
 @keyframes floatInFromTop {
     0% {
         opacity: 0;
-        transform: translateY(0);
-        /* Starting position from above */
+        transform: translateY(-50px);
     }
-
     100% {
         opacity: 1;
         transform: translateY(0);
-        /* Final position */
     }
 }
 
@@ -315,375 +177,124 @@ body {
     0% {
         opacity: 0;
         transform: translateX(50px);
-        /* Starting position from the right */
     }
-
     100% {
         opacity: 1;
         transform: translateX(0);
-        /* Final position */
     }
 }
 
-/* footer section styles */
-
-:root {
-    --deep-teal: #003d4d;
-    --off-white: #f8f9fa;
-    --dark-slate: #2f4f4f;
-    --soft-gold: #d9c79e;
-}
-
+/* Footer */
 .footer {
     width: 100%;
     background-color: var(--deep-teal);
     color: white;
-    padding: 13px 0;
+    padding: 2rem 0;
+    text-align: center;
 }
 
 .footer-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-
 }
 
-
 .footer .footer-section h3 {
-    font-size: 18px;
-    margin-bottom: 20px;
-    font-weight: 600;
+    font-size: 2.5rem;
     color: #fff;
+    margin-bottom: 2rem;
     border-bottom: 2px solid #3f10ea;
-    padding-bottom: 10px;
+    padding-bottom: 1rem;
 }
 
-.ul{
-   padding: 0;
-   list-style: none;
-   font-family: Verdana, Geneva, Tahoma, sans-serif;
-   text-align: center;
-
-.ul {
-    padding: 0;
+.footer .footer-section ul {
     list-style: none;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    text-align: center;
-
-
+    padding: 0;
 }
 
-.footer-bottom {
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-    margin: 0px;
-    margin-top: 10px;
+.footer .footer-section ul li {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
 }
 
-
 .footer .footer-section ul li a {
-
-    color: rgb(88, 88, 88);
-
     color: #2f4f4f;
-    text-decoration: none;
     transition: color 0.3s ease;
 }
 
 .footer .footer-section ul li a:hover {
     color: white;
-    text-decoration: none;
-
-    color: #3f10ea;
 }
 
 .footer .footer-section .social-icons a {
-    margin-right: 10px;
+    font-size: 2rem;
+    margin-right: 1.5rem;
     color: #2f4f4f;
-    text-decoration: none;
-    font-size: 18px;
     transition: color 0.3s ease;
 }
 
 .footer .footer-section .social-icons a:hover {
     color: #3f10ea;
-    text-decoration: none;
-}
-
-.footer a {
-    color: var(--soft-gold);
-    text-decoration: none;
-    font-size: 16px;
 }
 
-.social-icons {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px
-}
-
-.social-icons a:hover {
-    color: var(--light-grey);
-    transform: scale(1.2) translateY(-5px);
-}
-
-
-
-.footer a:hover {
-    text-decoration: underline;
-}
-
-.footer-section h3 {
-    margin-bottom: 14px;
-    font-size: 28px;
+.footer-bottom {
+    font-size: 1.4rem;
+    margin-top: 1.5rem;
+    color: #fff;
 }
 
-/* footer section style ends */
-
-
-/* media queries */
+/* Media Queries */
 @media (max-width: 991px) {
     html {
         font-size: 55%;
     }
-
     header {
         padding: 2rem;
-        background-color: 003d4d;
     }
-
     section {
         padding: 2rem;
     }
-
     .home {
         background-position: left;
     }
-
 }
 
 @media (max-width: 768px) {
-    html .fa-bars {
+    header .fa-bars {
         display: block;
     }
-
     header .navbar {
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: #f9f9f9;
-        /* Updated background to a softer light color */
         border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
         clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     }
-
     header #toggler:checked~.navbar {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     }
-
     header .navbar a {
         margin: 1.5rem;
         padding: 1.5rem;
-        background: #ffffff;
-        /* Updated to a cleaner white */
-        border: 0.1rem solid rgba(0, 0, 0, 0.1);
+        background: #fff;
         color: var(--dark-slate);
-        /* Changed text color to Dark Slate */
         display: block;
     }
-
-    header .navbar a:hover {
-        color: var(--soft-gold);
-        /* Hover color set to Soft Gold */
-    }
-
-    .home .content h3 {
-        font-size: 5rem;
-    }
-
-    .home .content span {
-        font-size: 2.5rem;
-    }
-
-    .icons-container .icons h3 {
-        font-size: 2rem;
-    }
-
-    .icons-container .icons span {
-        font-size: 1.7rem;
-    }
-
-    .footer-section h3 {
-        font-size: 18px;
-    }
-
-    .footer a {
-        font-size: 13px;
-    }
-
-    .footer-section {
-        margin-bottom: 0;
-        gap: 18px;
-    }
-
-    .footer-bottom {
-        font-size: 12px;
-        margin: 0px;
-        margin-top: 8px;
-    }
-
-
 }
 
 @media (max-width: 450px) {
     html {
         font-size: 50%;
     }
-
     .heading {
         font-size: 3rem;
     }
-
-
     .footer-section h3 {
-        font-size: 14px;
+        font-size: 1.8rem;
     }
-
-    .footer a {
-        font-size: 11px;
-    }
-
-    .footer-section {
-        margin-bottom: 0;
-
+    .footer-section ul li {
+        font-size: 1.2rem;
     }
-
-    .footer-bottom {
-        font-size: 10px;
-        margin: 0px;
-        margin-top: 5px;
-    }
-}
-
-
-.tab:hover {
-    background-color: rgba(0, 0, 0, 0.8);
-    color: blue;
-}
-
-
-.tab.active {
-    color: blue;
-    font-weight: bold;
-}
-
-.navbar {
-    position: relative;
-}
-
-#tabs {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    display: flex;
-}
-
-.tab {
-    position: relative;
-    cursor: pointer;
-    padding: 10px 20px;
-    font-size: 19px;
-    color: black;
-
-
-    border-radius: 4px;
-    transition: background-color 0.3s;
-}
-
-.tab:hover {
-    background-color: black;
-}
-
-.cursor {
-    position: absolute;
-    height: 24px;
-    width: 24px;
-    background: black;
-    border-radius: 50%;
-    pointer-events: none;
-    transition: all 0.3s ease;
-    opacity: 0;
-}
-
-/* Features section */
-.features h2 {
-    font-weight: 600;
-}
-
-.features-card img {
-    width: 80%;
-    height: 40%;
-    object-fit: cover;
-}
-
-.features-card h3 {
-    color: #003d4d;
 }
-
-.features-card p {
-    margin-bottom: 0;
-    color: grey;
-}
-
-/* testimonials features section */
-.testimonials h2 {
-    font-weight: 600;
-}
-
-.testimonial-card img {
-    height: 9rem;
-    width: 9rem;
-    border: 0.3rem solid white;
-}
-
-.testimonial-card h3 {
-    color: #003d4d;
-    font-size: 2rem;
-}
-
-.testimonial-card p {
-    color: grey;
-
-}
-
-/* Footer section */
-.footer {
-    background-color: #003d4d;
-    padding-bottom: 2rem;
-}
-
-.footer-section h3 {
-    font-size: 2.5rem;
-}
-
-.footer-section ul li {
-    font-size: 1.5rem;
-    font-weight: 500;
-}
-
-.footer-section ul li a {
-    color: #000;
-}
-
-.footer-bottom p {
-    font-size: 1.5rem;
-    font-weight: 500;
-}
-
-.footer-bottom {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-}
\ No newline at end of file

From 672a1316e2fea96108f33ecb8646a56714a9314a Mon Sep 17 00:00:00 2001
From: Niraj <nirajdhanore767@gmail.com>
Date: Fri, 25 Oct 2024 00:21:42 +0530
Subject: [PATCH 2/2] Enhanced CSS Styling for Progress Bars and Form Layout

---
 Resume.css | 130 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 88 insertions(+), 42 deletions(-)

diff --git a/Resume.css b/Resume.css
index b6df35c..e8b6bcc 100644
--- a/Resume.css
+++ b/Resume.css
@@ -5,8 +5,8 @@ body {
     padding: 20px;
 }
 
-/* progress bar section css */
-.progressSec{
+/* Progress bar section CSS */
+.progressSec {
     width: 100%;
     position: relative;
     display: flex;
@@ -19,17 +19,19 @@ body {
     align-items: center;
     justify-content: space-between;
     margin: 20px 0;
+    position: relative;
 }
 
 .step {
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
 }
 
 .circle {
-    width: 30px;
-    height: 30px;
+    width: 35px; /* Increased size */
+    height: 35px;
     border-radius: 50%;
     background-color: lightgray;
     display: flex;
@@ -38,12 +40,27 @@ body {
     font-size: 18px;
     font-weight: bold;
     color: #fff;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.circle:hover {
+    transform: scale(1.1);
 }
 
 .line {
     width: 100px;
     height: 2px;
     background-color: lightgray;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: -1;
+    transform: translateX(-50%);
+    transition: background-color 0.3s;
+}
+
+.line.active {
+    background-color: #007bff;
 }
 
 .label {
@@ -64,98 +81,98 @@ body {
     .line {
         width: 2px;
         height: 50px;
+        transform: translateY(-50%);
     }
 }
 
-
-/* step 1 css  */
+/* Step 1 CSS */
 .form-container {
     width: 90%;
     margin: auto;
     background: #f4f4f4;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
-.pInfo{
+.pInfo {
     display: flex;
     justify-content: space-between;
     position: relative;
 }
-.pInfoLeft{
+.pInfoLeft {
     width: 40%;
 }
-.pInfoRight{
+.pInfoRight {
     width: 50%;
 }
-#profile{
+#profile {
     height: 25rem;
 }
-#education-fields{
+#education-fields {
     position: relative;
     display: flex;
     justify-content: space-between;
     gap: 2rem;
     flex-wrap: wrap;
 }
-.education-entry{
+.education-entry {
     width: 40%;
 }
-#skills-input{
+#skills-input {
     width: 40%;
 }
-.experience-entry{
+.experience-entry {
     display: flex;
     justify-content: space-between;
     position: relative;
 }
-.expLeft{
+.expLeft {
     display: flex;
     flex-direction: column;
     width: 40%;
 }
-.expRight{
+.expRight {
     width: 40%;
 }
-#expdes{
+#expdes {
     height: 25rem;
 }
-.achive{
+.achive {
     display: flex;
     justify-content: space-between;
     position: relative;
 }
-.achiveLeft{
+.achiveLeft {
     width: 40%;
 }
-.achiveRight{
+.achiveRight {
     width: 40%;
 }
-.project-entry{
+.project-entry {
     display: flex;
     justify-content: space-between;
     position: relative;
 }
-.projectLeft{
+.projectLeft {
     width: 40%;
 }
-.projectRight{
+.projectRight {
     width: 40%;
 }
-#projectdesc{
+#projectdesc {
     height: 20rem;
 }
-#languages-input{
+#languages-input {
     width: 40%;
 }
 h2, h3 {
     color: #333;
 }
-h2{
+h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
 }
-h3{
+h3 {
     font-size: 2rem;
     margin-bottom: 1rem;
     font-weight: 400;
@@ -175,7 +192,6 @@ input[type="text"],
 input[type="email"],
 input[type="tel"],
 input[type="url"],
-
 textarea {
     width: 100%;
     padding: 10px;
@@ -194,31 +210,31 @@ button {
     border-radius: 4px;
     cursor: pointer;
     margin-top: 10px;
-    transition: background-color 0.3s, transform 0.3s; /* Added transition for scaling effect */
+    transition: background-color 0.3s, transform 0.3s;
 }
 
 button:hover {
     background-color: #0056b3;
-    transform: scale(1.05); /* Added scaling effect on hover */
+    transform: scale(1.05);
 }
 
 button:focus {
-    outline: none; /* Remove default outline */
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Add custom focus style */
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
 }
 
 /* Step 2 CSS */
-#step-2{
+#step-2 {
     width: 90%;
     margin: auto;
     background: #f4f4f4;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .template-section {
     display: flex;
-    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    flex-wrap: wrap;
     justify-content: space-around;
     margin-top: 20px;
 }
@@ -230,12 +246,12 @@ button:focus {
     text-align: center;
     width: 25%;
     cursor: pointer;
-    transition: transform 0.3s, box-shadow 0.3s; /* Added box-shadow transition */
+    transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .template-card:hover {
     transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Added shadow on hover */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 
 .template-card img {
@@ -243,7 +259,7 @@ button:focus {
     height: auto;
     margin-bottom: 10px;
 }
-.template-card p{
+.template-card p {
     font-size: 1.5rem;
     font-weight: 500;
     margin-top: 1rem;
@@ -267,19 +283,19 @@ button:focus {
 .buttons button:hover {
     background-color: #0056b3;
 }
-.step1btns{
+.step1btns {
     display: flex;
     justify-content: right;
 }
 
 /* Step 3 Styles */
-#step-3{
+#step-3 {
     width: 90%;
     margin: auto;
     background: #f4f4f4;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 .step-section {
     padding: 20px;
@@ -336,3 +352,33 @@ button {
     color: white;
 }
 
+/* Enhanced Line Styling */
+.line {
+    background: linear-gradient(90deg, lightgray 0%, #007bff 100%);
+    height: 3px;
+    width: 100px;
+    position: relative;
+}
+
+.line:before, .line:after {
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: lightgray;
+    position: absolute;
+    top: -4px;
+}
+
+.line:before {
+    left: 0;
+}
+
+.line:after {
+    right: 0;
+}
+
+/* Active line styling */
+.line.active {
+    background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
+}