improve layout for About section

YanivWein24 · Apr 29, 2024 · 50fbcdd · 50fbcdd
1 parent 7e26d54
commit 50fbcdd
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 43 deletions.
diff --git a/src/components/About/About.css b/src/components/About/About.css
@@ -4,14 +4,18 @@
   position: relative;
 }
 
+.backgroundLinear {
+  background: linear-gradient(180deg, #01254c 0%, var(--color-primary) 100%);
+}
+
 h1.aboutMeHeader {
   margin: 0 auto 4rem;
   padding-top: 1rem;
 }
 
 .about-me {
-  background: linear-gradient(180deg, #01254c 0%, var(--color-primary) 100%);
-  padding: 0 10rem;
+  width: 80%;
+  max-width: 1600px;
   overflow-x: hidden;
 }
 
@@ -34,8 +38,8 @@ p.bigger {
 }
 
 img.profile {
-  width: 15rem;
-  height: 15rem;
+  width: 13rem;
+  height: 13rem;
   transition: 0.3s ease-in-out;
   border-radius: 100%;
 }
@@ -88,8 +92,6 @@ img.profile {
 
 @media screen and (min-width: 900px) and (max-width: 1300px) {
   img.profile {
-    width: 15rem;
-    height: 15rem;
     margin-bottom: 2rem;
   }
 }
@@ -109,7 +111,7 @@ img.profile {
   }
 
   .about-me {
-    padding: 0 1.5rem;
+    width: 90%;
   }
 
   .about-me p {

diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
@@ -27,44 +27,45 @@ function About() {
       <div className="wave">
         <TopWave />
       </div>
-      <Row className="about-me no-gutters">
-        <Col lg={12} md={12} sm={12} data-aos="fade-down" data-aos-once="true">
-          <h1 className="aboutMeHeader">{Text.headers.aboutMe}</h1>
-        </Col>
-        <Col
-          xl={3}
-          lg={12}
-          md={12}
-          sm={12}
-          data-aos={tabletSize ? "fade-right" : "zoom-in-right"}
-          data-aos-once="true"
-        >
-          <img className="profile" src={Profile} alt="Me" />
-        </Col>
-        <Col xl={9} lg={12} md={12} sm={12}>
-          <div
-            className="textContainer"
-            data-aos={tabletSize ? "fade-left" : "fade-down"}
+      <div className="backgroundLinear">
+        <Row className="about-me no-gutters mx-auto">
+          <Col xs={12} data-aos="fade-down" data-aos-once="true">
+            <h1 className="aboutMeHeader">{Text.headers.aboutMe}</h1>
+          </Col>
+          <Col
+            sm={12}
+            data-aos={tabletSize ? "fade-right" : "fade-up"}
             data-aos-once="true"
+            className="mb-4"
           >
-            <p className="bigger">{Text.AboutMeText}</p>
-          </div>
-          <Row>
-            {bottomSections.map(({ label, text, animation }) => (
-              <Col
-                key={label}
-                lg={6}
-                className="textContainer"
-                data-aos={animation}
-                data-aos-once="true"
-              >
-                <h3>{label}</h3>
-                <p>{text}</p>
-              </Col>
-            ))}
-          </Row>
-        </Col>
-      </Row>
+            <img className="profile" src={Profile} alt="Me" />
+          </Col>
+          <Col xs={12}>
+            <div
+              className="textContainer"
+              data-aos={tabletSize ? "fade-left" : "fade-down"}
+              data-aos-once="true"
+            >
+              <p className="bigger">{Text.AboutMeText}</p>
+            </div>
+            <Row>
+              {bottomSections.map(({ label, text, animation }) => (
+                <Col
+                  key={label}
+                  lg={6}
+                  className="textContainer"
+                  data-aos={animation}
+                  data-aos-once="true"
+                >
+                  <h3>{label}</h3>
+                  <p>{text}</p>
+                </Col>
+              ))}
+            </Row>
+          </Col>
+        </Row>
+      </div>
+
       <div className="bottom-wave">
         <BottomWave />
       </div>