reformatted home page

cvega21 · Oct 26, 2022 · d2ae9c6 · d2ae9c6
1 parent 24f0186
commit d2ae9c6
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 79 deletions.
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
@@ -24,6 +24,8 @@ const ActionButton = ({ link, navigation }: ActionButtonProps) => {
     linkTo = resume
   } else if (link === 'aboutme') {
     text = 'About Me '
+    computedContainerClassName = 'ActionButtonContainer-Large';
+    computedClassName = 'ActionButton-Large';
   }
   else if (link) {
     let textArray: Array<string> = link.split('-');

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,21 +1,22 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, MutableRefObject } from 'react';
 import ActionButton from '../components/ActionButton'
 import Typed from 'typed.js';
 
 const Home = () => {
   const typedElement: any = useRef(null);
-  const typed: any = useRef(null);
+  const typed: MutableRefObject<null|Typed> = useRef(null);
 
   useEffect(() => {
-    const options = {
-      strings: [`^800I'm Christian.^800 Welcome to my portfolio website!`],
+    typed.current = new Typed(typedElement.current as Element, {
+      strings: [`^800I'm Christian.^800 <br> Welcome to my portfolio website!`],
       typeSpeed: 17,
-      backSpeed: 50
-    };
-
-    typed.current = new Typed(typedElement.current as Element, options);
+      backSpeed: 50,
+    });
+
     return () => {
-      typed.current.destroy();
+      if (typed && typed.current) {
+        typed.current.destroy();
+      }
     }
   }, [])
 
@@ -24,7 +25,7 @@ const Home = () => {
       <div className="HomeContent">
           <div className="HeyThere">
             <h1>Hey there </h1>
-            <h1 className="WavingHand">👋🏽</h1>
+            <span className="WavingHand">👋🏽</span>
           </div>
           <div className="TypingContainer">
             <span ref={typedElement}></span>

diff --git a/src/styles/ActionButton.scss b/src/styles/ActionButton.scss
@@ -3,6 +3,13 @@
   text-decoration: none;
   max-width: 500px;
   width: 80%;
+
+  &-Large{
+    @extend .ActionButtonContainer;
+    width: 100%!important;
+    max-width: none!important;
+    // padding: 15px 30px;
+  }
 }
 
 .ActionButtonContactContainer {
@@ -22,7 +29,15 @@
   font-weight: 500;
   padding: 10px 15px 10px 15px;
   min-width: auto;
-  width: 100%;
+  width: 100%; 
+
+  &-Large{
+    @extend .ActionButton;
+    font-size: x-large;
+    width: 100%!important;
+    max-width: none!important;
+    // padding: 15px 30px;
+  }
 }
 
 .ActionButton.Contact {

diff --git a/src/styles/Home.scss b/src/styles/Home.scss
@@ -1,5 +1,5 @@
 .HomeContainer {
-  align-items: flex-start;
+  align-items: center;
   display: flex;
   min-height: 100vh;
   height: 100%;
@@ -11,7 +11,7 @@
 
 .HomeContent {  
   margin: 0px 0px 0px 0px;
-  width: 100%;
+  width: 320px;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -22,38 +22,39 @@
 .HomeContent h1, .GenericContainer > h1 {
   font-family: 'Lato', sans-serif;
   font-weight: bold;
-  font-size: 100px;
-  margin: 50px 0px 0px 0px;
+  margin: 0px 0px 0px 0px;
   letter-spacing: -0.04em;
+  white-space: nowrap;
 }
 
 .HomeContent {
-  >div {
-    margin: 0px 0px 0px 0px;
-    width: 60%;
-    max-width: 750px;
-  }
+  // max-width: 750px;
 
   .HeyThere {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
-    width: 80%;
+    width: 100%;
+    // padding: 0% 10%;
     animation: fadedown 1s;
+    margin: 0px 0px 0px 0px;
+    // width: 60%;
+    font-size: 25px;
+    // max-width: 750px;
+    // border: 1px solid black;
   }
 }
 
-.HomeContent h1 {
-  font-size: 135px;
-}
-
 .HomeContent .WavingHand {
-  font-size: 150px;
+  font-size: 2em;
+  margin-left: 1rem;
+  margin-top: 0.55rem;
 }
 
 .HomeContent {
   a {
-    margin-bottom: 40px;
+    // margin-bottom: 40px;
   }
 }
 
@@ -75,19 +76,85 @@
 }
 
 .TypingContainer {
-  min-height: 200px;
-  margin-bottom: 10px!important;
-  width: 90%;
-}
-
-.HomeContent span {
+  // min-height: 200px;
+  width: 100%;
+  text-align: left;
   font-family: 'Fira Sans', sans-serif;
   font-weight: lighter;
-  font-size: 50px;
-  margin: 0px 0px 0px 0px; 
+  font-size: 20px;
+  margin: 0px 0px 20px 0px; 
   text-align: left;
+  min-height: 50px;
 }
 
+@media (min-width: 500px) {
+  .HomeContent {
+    max-width: 500px;
+    min-width: 450px;
+  }
+
+  .WavingHand {
+    margin-left: 1.5rem!important;
+  }
+
+  .HeyThere {
+    // flex-direction: column!important;
+    margin: 0px 0px 10px 0px!important;
+    font-size: 40px!important;
+
+    h1 {
+      margin: 0px!important;
+    }
+
+  }
+
+  .TypingContainer {
+    margin: 0px 0px 40px 0px; 
+
+    span {
+      font-size: 1.35em!important;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  .HomeContent {
+    width: 600px;
+    max-width: none;
+  }
+
+  .HeyThere {
+    font-size: 48px!important;
+    margin: 0px 0px 0px 0px!important;
+
+    h1 {
+      white-space: nowrap;
+      margin: 0px!important;
+      // font-size: 120px;
+      // min-width: 90vw!important;
+    }
+  }
+
+  .TypingContainer {
+    // min-height: 95px!important;
+    // padding-bottom: 10px;
+    min-height: 100px!important;
+    margin: 10px 0px 50px 0px;
+
+    span {
+      font-size: 1.95em!important;
+    }
+  }
+}
+
+// .HomeContent span {
+//   font-family: 'Fira Sans', sans-serif;
+//   font-weight: lighter;
+//   font-size: 40px;
+//   margin: 0px 0px 0px 0px; 
+//   text-align: left;
+// }
+
 .typed-cursor.typed-cursor--blink {
   color: var(--primary-color)
 }
diff --git a/src/styles/NavBar.scss b/src/styles/NavBar.scss
@@ -313,29 +313,6 @@ nav {
     }
   }
 
-  .HeyThere {
-    flex-direction: column!important;
-    margin: 0px 0px 10px 0px!important;
-
-    h1 {
-      margin: 0px!important;
-      font-size: 120px!important;
-      min-width: 90vw!important;
-    }
-
-    .WavingHand {
-      font-size: 70px!important;
-    }
-  }
-
-  .TypingContainer {
-    min-height: 95px!important;
-    padding-bottom: 10px;
-
-    span {
-      font-size: 2.05em!important;
-    }
-  }
 
   .HomeContainer {
     min-height: 80vh!important;
@@ -479,26 +456,6 @@ nav {
 
 
   @media (max-width: 500px) {
-    .HeyThere {
-      flex-direction: column!important;
-      margin: 0px 0px 10px 0px!important;
-
-      h1 {
-        margin: 0px!important;
-        font-size: 75px!important;
-      }
-
-      .WavingHand {
-        font-size: 70px!important;
-      }
-    }
-
-    .TypingContainer {
-
-      span {
-        font-size: 1.55em!important;
-      }
-    }
     .ProfileContainer {
       >div>img {
         margin: 25px!important;