major change v2

ManasJhaMJ · Jun 27, 2024 · 36214a2 · 36214a2
1 parent 9975471
commit 36214a2
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 22 deletions.
diff --git a/css/pages.css b/css/pages.css
@@ -94,6 +94,7 @@ nav {
     padding: 1px;
     margin: 0;
     background-color: #fff;
+    border: rgb(160, 74, 163) 2px solid;
 }
 
 /* Dropdown Button */
@@ -407,6 +408,10 @@ nav {
     flex-direction: column;
 }
 
+.bullets p {
+    width: 100%;
+}
+
 .about-12 h1 {
     font-size: 2rem;
     font-weight: 600;
@@ -465,7 +470,7 @@ hr {
 
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 788px) {
     .nav-mobile {
         display: none;
     }
@@ -543,10 +548,10 @@ hr {
 
 
     .exp {
-        width: 40%;
+        width: 70%;
+        max-width: 800px;
     }
 
-
     .exp-head,
     .bullets {
         margin: 0.5rem 1rem;

diff --git a/css/styles.css b/css/styles.css
@@ -14,16 +14,19 @@ body {
     font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 0;
+}
+
+.white-mode {
     background-color: #fff;
     color: black;
-    transition: all 0.2s ease-in;
+    transition: all 0.25s ease-in;
     /* background: url(../images/bg-white.avif) no-repeat center center fixed; */
     background-image: linear-gradient(90deg, rgba(178, 253, 238, 0.96) -8.1%, rgba(207, 244, 254, 1) 26.3%, rgba(207, 244, 254, 0.48) 47.5%, rgba(254, 219, 243, 0.63) 61.5%, rgba(254, 219, 243, 1) 78.7%, rgba(254, 207, 210, 1) 109.2%);
 }
 
 
 .dark-mode {
-    transition: all 0.2s ease-in;
+    transition: all 0.25s ease-in;
     background-color: #140439 !important;
     color: #fff !important;
     /* background: url(../images/bg.avif) no-repeat center center fixed; */
@@ -98,6 +101,7 @@ nav {
     padding: 1px;
     margin: 0;
     background-color: #fff;
+    border: rgb(160, 74, 163) 2px solid;
 }
 
 /* Dropdown Button */
@@ -209,25 +213,55 @@ nav {
     padding: 3rem 0rem 60px 0rem;
     margin: 0 2rem;
     text-align: center;
-    height: calc(100vh - 50px);
+    height: calc(100vh);
+    margin-top: 6rem;
 }
 
-#home img {
+.home-img {
     width: 100%;
+}
+
+#home img {
+    width: 80%;
     height: auto;
-    padding-right: 0.5rem;
+    animation-name: blobby;
+    animation-duration: 6s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease;
+    animation-direction: alternate;
+    border: rgb(148, 68, 151) 20px solid;
+}
+
+@keyframes blobby {
+    0% {
+        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    }
+
+    50% {
+        border-radius: 30% 60% 70% 40% / 50% 60% 30%;
+    }
+
+    100% {
+        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    }
+
 }
 
 .home-text {
     text-align: left;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }
 
+
 .home-text h1 {
     font-size: 2rem;
     font-weight: 700;
     margin: 0;
     padding: 1rem 0;
-    width: 80%;
+    width: 100%;
 }
 
 .home-text p {
@@ -279,7 +313,7 @@ nav {
 #des-dev {
     margin: 3rem 2rem;
     text-align: center;
-    height: 100vh;
+    min-height: 100vh;
 }
 
 .des-dev-text {
@@ -497,7 +531,7 @@ footer {
 
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 788px) {
     .nav-mobile {
         display: none;
     }
@@ -553,6 +587,8 @@ footer {
 
     #home {
         flex-direction: row;
+        margin-top: 0rem;
+        padding: 1rem;
     }
 
     .home-img {
@@ -673,7 +709,8 @@ footer {
     }
 
     .skills-bg {
-        width: 40%;
+        width: 100%;
+        max-width: 700px;
         padding: 3rem;
     }
 
@@ -723,10 +760,6 @@ footer {
     }
 
     @media screen and (min-width: 768px) and (max-width : 1024px) {
-        #home {
-            margin-top: 6rem;
-            flex-direction: column;
-        }
 
         .home-img,
         .home-text,

diff --git a/images/background.png b/images/background.png
diff --git a/images/bg-white.avif b/images/bg-white.avif
diff --git a/images/bg.avif b/images/bg.avif
diff --git a/images/designing.png b/images/designing.png
diff --git a/images/dropdown.avif b/images/dropdown.avif
diff --git a/images/hero1.png b/images/hero1.png
diff --git a/images/hero2.png b/images/hero2.png
diff --git a/images/landing.avif b/images/landing.avif
diff --git a/images/landing.jpeg b/images/landing.jpeg
diff --git a/index.html b/index.html
@@ -46,7 +46,7 @@
     <link rel="stylesheet" href="./css/styles.css">
 </head>
 
-<body class="dark-mode">
+<body class="white-mode dark-mode">
     <nav class="nav-mobile">
         <!-- <div class="logo"><img src="./images/profile-pic.gif" alt="profile-pic"> </div> -->
         <div class="extras">
@@ -97,7 +97,7 @@
 
     <section id="home" class="reveal">
         <div class="home-img">
-            <img alt="image" src="./images/landing.png">
+            <img alt="image" src="./images/landing.jpeg">
         </div>
         <div class="home-text">
             <h1>I'm <span class="greentext">Manas Jha</span>, Web Developer and designer.

diff --git a/pages/experience.html b/pages/experience.html
@@ -115,16 +115,16 @@ <h3>Frontend Developer and Designer</h3>
                     </div>
                     <span class="bullets">
                         <span>●</span>
-                        <p>Worked on different frontend projects for clients according to their need and added my
-                            creativity.</p>
+                        <p>developed a user-friendly, interactive and responsive website for
+                            Shashtra Education. </p>
                     </span>
                     <span class="bullets">
                         <span>●</span>
-                        <p>Improved the frontend of BestUPay's website.</p>
+                        <p>Leveraged Figma to create multiple design options before developing.</p>
                     </span>
                     <span class="bullets">
                         <span>●</span>
-                        <p>Created UI designs for websites using Figma and Canva.</p>
+                        <p>Hosted and optimised the performance of the website.</p>
                 </div>
                 </span>
             </div>