Impproved UI

public/index.html

@@ -5,6 +5,9 @@
 			html {
 				scroll-behavior: smooth;
 			}
+			body {
+    overscroll-behavior: none;
+}
 			a {
 				all: unset;
 			}

src/components/AboutMe.scss

@@ -1,6 +1,5 @@
 @import "../res/theme/variable";
 :root {
-  --green: #{$green};
   --red: #{$red};
 }
 
@@ -10,9 +9,9 @@
 @media (min-width: 360px) and (max-width: 600px) {
   .about-section {
     padding-top: 3rem;
-    padding-bottom: 6rem;
+    padding-bottom: 3rem;
     align-items: center;
-    display: inline;
+    background-color: var(--black);
   }
 
   .logo {
@@ -22,16 +21,17 @@
   .about-title {
     font-weight: bold;
     font-size: 2rem;
+    padding-left: 2.5rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
   }
 
   .about-text {
     text-align: justify;
-    margin: 2rem;
+    margin: 2.5rem;
     color: var(--white);
     font-size: 1.5rem;
     span {
@@ -44,21 +44,23 @@
 /* Tablets iPads (Portrait) */
 @media (min-width: 600px) and (max-width: 1024px) {
   .about-section {
-    padding-top: 3rem;
+    padding-top: 6rem;
     padding-bottom: 3rem;
     align-items: center;
     display: flex;
+    background-color: var(--black);
   }
 
   .logo {
-    height: 25rem;
+    height: 26rem;
   }
 
   .about-title {
     font-weight: bold;
-    font-size: 2.5rem;
+    font-size: 2.4rem;
+    padding-left: 2rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
@@ -68,7 +70,7 @@
     text-align: justify;
     margin: 2rem;
     color: var(--white);
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     span {
       color: var(--red);
     }
@@ -83,6 +85,7 @@
     padding-bottom: 3rem;
     align-items: center;
     display: flex;
+    background-color: var(--black);
   }
   .logo {
     height: 35rem;
@@ -91,16 +94,17 @@
   .about-title {
     font-weight: bold;
     font-size: 2rem;
+    margin-left: 2rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
   }
 
   .about-text {
     text-align: justify;
-    margin: 5rem;
+    margin: 2rem;
     color: var(--white);
     font-size: 1.5rem;
     span {
@@ -113,11 +117,10 @@
 /* Big Monitors */
 @media only screen and (min-width: 1281px) {
   .about-section {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
     display: grid;
-    align-items: center;
-    gap: 50px;
+    padding-top: 6rem;
+    box-sizing: border-box;
+    background-color: var(--black);
     grid-template-columns: 0.5fr 1.5fr;
   }
 
@@ -127,24 +130,22 @@
 
   .about-title {
     font-weight: bold;
-    font-size: 2rem;
+    font-size: 2.5rem;
+    padding-left: 5rem;
     text-align: start;
-    color: white;
+    color: var(--white);
     span {
       color: var(--red);
     }
   }
 
   .about-text {
     text-align: justify;
-    margin: 5rem;
+    margin-inline: 5rem;
     color: var(--white);
     font-size: 1.5rem;
     span {
       color: var(--red);
     }
   }
-  .text-contain {
-    text-align: center;
-  }
 }

src/components/AboutMe.tsx

@@ -2,36 +2,34 @@ import React from "react";
 import "../components/AboutMe.scss";
 export default function SecondSection() {
   return (
-    <div style={{ backgroundColor: "#000000" }} id="aboutMe">
-      <div className="about-section">
-        <img
-          alt="about-me"
-          src={require("../res/background3.png")}
-          className="logo"
-        />
-        <div className="text-contain">
-          <p className="about-text">
-            <h3 className="about-title">
-              About <span className="about-me">Me</span>
-            </h3>
-            My self <span>Vishal Dhanotiya</span>. I am a Frontend developer. My
-            expertise lies in frontend technologies, including
-            <span> React Native</span>,<span> React.js</span>, and
-            <span> JavaScript</span>. Currently, I'm deeply engaged with
-            <span> HTML</span>,<span> CSS</span> and
-            <span> TypeScript</span>, pushing the boundaries of what can be
-            achieved. I maintain a perpetual commitment to honing my skills and
-            keeping pace with the ever-evolving landscape of industry trends.
-            <br></br>
-            <br></br>
-            <br></br>
-            I'm also a passionate to share my expertise and insights into the
-            world of frontend development. I enjoy sharing my knowledge with
-            others and helping fellow developers understand and be creative with
-            web and mobile technologies.
-          </p>
-        </div>
+    <section className="about-section" id="aboutMe">
+      <img
+        alt="about-me"
+        src={require("../res/background3.png")}
+        className="logo"
+      />
+      <div>
+        <h2 className="about-title">
+          About <span className="about-me">Me</span>
+        </h2>
+        <p className="about-text">
+          My self <span>Vishal Dhanotiya</span>. I am a Frontend developer. My
+          expertise lies in frontend technologies, including
+          <span> React Native</span>,<span> React.js</span>, and
+          <span> JavaScript</span>. Currently, I'm deeply engaged with
+          <span> HTML</span>,<span> CSS</span> and
+          <span> TypeScript</span>, pushing the boundaries of what can be
+          achieved. I maintain a perpetual commitment to honing my skills and
+          keeping pace with the ever-evolving landscape of industry trends.
+          <br></br>
+          <br></br>
+          <br></br>
+          I'm also a passionate to share my expertise and insights into the
+          world of frontend development. I enjoy sharing my knowledge with
+          others and helping fellow developers understand and be creative with
+          web and mobile technologies.
+        </p>
       </div>
-    </div>
+    </section>
   );
 }