Fix homepage phone screen layout

SwapnilAryan97 · May 15, 2024 · 5322a7a · 5322a7a
1 parent b371c27
commit 5322a7a
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 ## Workflow Status
 [![Node.js CI](https://github.com/SwapnilAryan97/react_portfolio/actions/workflows/node.js.yml/badge.svg)](https://github.com/SwapnilAryan97/react_portfolio/actions/workflows/node.js.yml)
 
+[![Production Workflow](https://github.com/SwapnilAryan97/react_portfolio/actions/workflows/prod.yml/badge.svg)](https://github.com/SwapnilAryan97/react_portfolio/actions/workflows/prod.yml)
+
 ## Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

diff --git a/src/components/Home/home.js b/src/components/Home/home.js
@@ -17,7 +17,7 @@ const Home = () => {
   useEffect(() => {
     setTimeout(() => {
       setLetterClass('text-animate-hover')
-    }, 4000)
+    }, 3000)
   }, [])
 
   return (
@@ -26,8 +26,8 @@ const Home = () => {
         {/* <div className={letterClass}>Hi</div>
         <div className={`${letterClass} _12`}>,</div>
         <div className={`${letterClass} _12`}>my name is</div> */}
-        <div className="coding-text double-font-size">Hi, my name is</div>
-        <h1>
+        <h1 className="coding-text first-h1">Hi, my name is</h1>
+        <h1 className="second-h1">
           <AnimatedLetters
             letterClass={letterClass}
             strArray={nameArray}
@@ -46,16 +46,24 @@ const Home = () => {
           />
         </h2> */}
 
-        <h1 className="fade-color fade-in-2">
-          I build things for the Web <br />
+        <h1 className="fade-color fade-in-2 third-h1">
+          I build things for the Web
         </h1>
 
         {/* <h1 className="less-font fade-in-1">Swapnil Aryan Sinha</h1> */}
 
-        <h2>FullStack Developer</h2>
+        <p>
+          Welcome to my corner of the web! I'm a Developer with a passion for
+          building dynamic and responsive websites. My journey in Software
+          Development spans over several years, during which I've had the
+          pleasure of working on a diverse range of projects, from intricate
+          e-commerce platforms to innovative AI applications.
+        </p>
+
+        <p>This webpage is still a WIP, till then feel free to explore and give feedback!</p>
         <br />
-        <Link to="/contact" className="flat-button">
-          CONTACT ME
+        <Link to="/about" className="flat-button">
+          Learn More {'\u2192'}
         </Link>
       </div>
       <Logo />

diff --git a/src/components/Home/home.scss b/src/components/Home/home.scss
@@ -1,11 +1,15 @@
 .home-page {
+  margin-left: 7%;
+  // margin-right: 5%;
+  // padding-right: 5%;
+
   .text-zone {
     position: absolute;
-    left: 15%;
+    // left: 15%;
     top: 40%;
     transform: translateY(-50%);
-    width: 100%;
-    max-height: 90%;
+    // width: 100%;
+    // max-height: 90%;
     // font-family: 'Coolvetica';
     font-size: 1em;
   }
@@ -15,13 +19,13 @@
     animation: fadeIn 1s 1.3s backwards;
 
     &::before {
-      font-family: 'Inter-Regular';
+      font-family: 'sans-serif';
       // position: absolute;
       // left: 15px;
     }
 
     &::after {
-      font-family: 'Inter-Regular';
+      font-family: 'sans-serif';
       animation: fadeIn 1s 1.4s backwards;
     }
 
@@ -35,6 +39,21 @@
       animation-delay: 1.4s;
     }
   }
+  .first-h1 {
+    font-size: 2.2em;
+  }
+
+  .second-h1 {
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+  }
+  .third-h1 {
+    margin-top: -5px;
+    margin-right: 3%;
+    margin-bottom: 15px;
+    padding-bottom: 5px;
+    font-size: 3em;
+  }
   .single-logo {
     width: 32px;
     padding-left: 5px;
@@ -50,20 +69,29 @@
     animation: fadein 1s 2.8s backwards;
   }
 
+  p {
+    font-size: 1.5em;
+    margin-top: 40px;
+    // margin-bottom: 5%;
+    margin-right: 40%;
+    padding-right: 5%;
+  }
+
   .flat-button {
     color: #ffd700;
-    font-size: 1.5em;
+    font-size: 1.7em;
     letter-spacing: 1px;
     font-family: sans-serif;
     text-decoration: none;
     padding: 0.7em 2em;
     border: 1px solid #ffd700;
     animation: fadein 1s 2.8s backwards;
     white-space: nowrap;
+    padding: 10px;
 
     &:hover {
       background: #ffd700;
-      color: #333
+      color: #333;
     }
   }
 
@@ -73,7 +101,7 @@
 
   .fade-color {
     color: #ffffff83;
-    margin-top: -50px;
+    // margin-top: -50px;
   }
 
   .fade-in-1 {
@@ -83,3 +111,82 @@
     animation: fadeIn 1s 3s backwards;
   }
 }
+
+@media screen and (max-width: 1200px) {
+  .tags,
+  .home-page h1:before,
+  .home-page h1:after {
+    display: none;
+    font-size: 0.6em;
+  }
+
+  .home-page .text-zone {
+    position: initial;
+    // width: 100%;
+    transform: none;
+    padding: 2px;
+    box-sizing: border-box;
+    font-size: 0.8em;
+    margin-left: 5%;
+    margin-right: 5%;
+
+    h1 {
+      font-size: 3em;
+      margin-top: 5px;
+      margin-bottom: 5px;
+      margin-right: auto;
+      padding: 0;
+    }
+
+    p {
+      font-size: 1.5em;
+      // margin-top: 40px;
+      margin-bottom: 5%;
+      margin-right: 10%;
+      margin-top: 5px;
+    }
+
+    .first-h1 {
+      font-size: 2em;
+    }
+
+    .second-h1 {
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    .third-h1 {
+      margin-top: -5px;
+      margin-right: 3%;
+      margin-bottom: 15px;
+      padding-bottom: 5px;
+      font-size: 2em;
+    }
+  }
+
+  .home-page .flat-button {
+    float: none;
+    display: block;
+    // margin: 20px auto 0 auto;
+    width: 124px;
+  }
+
+  .logo-container {
+    position: relative;
+    width: 100px;
+    height: auto;
+    top: 50px;
+    right: 0;
+    box-sizing: border-box;
+    margin: auto;
+    left: 0;
+  }
+
+  .logo-container svg {
+    position: absolute;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    margin: auto;
+  }
+}
diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss
@@ -122,3 +122,51 @@
 .double-font-size {
   font-size: 2em;
 }
+
+@media screen and (max-width: 1200px) {
+  .page {
+    position: initial;
+  }
+
+  .container {
+    position: initial;
+    height: auto;
+    min-height: auto;
+
+    &.contact-page,
+    &.about-page,
+    &.portfolio-page {
+      .text-zone {
+        position: initial;
+        transform: none;
+        width: 100%;
+        display: block;
+        padding: 20px;
+        box-sizing: border-box;
+      }
+    }
+
+    &.portfolio-page {
+      width: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+
+      h1.page-title {
+        margin-left: 20px;
+        margin-top: 20px;
+      }
+
+      .image-box {
+        height: 200px;
+        max-width: calc(50% - 10px);
+      }
+    }
+  }
+
+  .stage-cube-cont {
+    position: initial;
+    width: 100%;
+    height: 0%;
+    overflow: visible;
+  }
+}