Home page

package.json

@@ -11,12 +11,15 @@
     "@types/node": "^20.14.11",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "framer-motion": "^11.3.6",
     "gh-pages": "^6.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
+    "react-simple-typewriter": "^5.0.1",
+    "react-spring": "^9.7.3",
     "react-typical": "^0.1.3",
     "styled-components": "^6.1.12",
     "typescript": "^5.5.3",
@@ -49,6 +52,7 @@
     ]
   },
   "devDependencies": {
-    "prettier": "3.3.3"
+    "prettier": "3.3.3",
+    "sass": "^1.77.8"
   }
 }

src/Components/Home/Hero/Hero.scss

@@ -0,0 +1,116 @@
+/* Colour Variables */
+$primary-color: #2af598;
+$secondary-color: #00715f;
+$tertiary-color: #33b072;
+$quaternary-color: #19621d;
+$background-color: #f9fbf7;
+$text-color: #1c2211;
+$font-color: #61665b;
+
+/* Page styling */
+body {
+  overflow-y: hidden;
+}
+
+/* Hero Container */
+.HeroContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: $background-color;
+  color: $text-color;
+  overflow: hidden;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+}
+
+/* Left Container */
+.LeftContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 160px 40px 60px 40px; /* top, right, bottom, left */
+
+  @media (min-width: 768px) {
+    flex: 0 0 45%;
+  }
+
+  @media (max-width: 768px) {
+    flex: 0 0 25%;
+    padding-left: 40px;
+    padding-top: 15px;
+  }
+}
+
+/* Right Container */
+.RightContainer {
+  flex: 1;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  margin-top: -110px;
+
+  @media (min-width: 768px) {
+    flex: 0 0 55%;
+    margin-left: 50px;
+  }
+
+  @media (max-width: 768px) {
+    flex: 0 0 75%;
+  }
+}
+
+/* Text Styling */
+.HeroText {
+  display: inline-block;
+}
+
+.AnimatedText {
+  background: linear-gradient(90deg, $primary-color, $secondary-color, $tertiary-color, $quaternary-color);
+  background-size: 200% 200%;
+  animation: gradientAnimation 5s ease infinite;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  position: relative;
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+h1 {
+  font-size: 8em;
+  margin-bottom: -0.3em;
+}
+
+p {
+  font-size: 2.5em;
+  padding-top: 0px;
+  font-weight: 600;
+  color: $font-color;
+
+  @media (max-width: 768px) {
+    font-size: 1.5em;
+  }
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 3em;
+    margin-bottom: -0.1em;
+  }
+}

src/Components/Home/Hero/Hero.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import './Hero.css';
+import { Typewriter } from 'react-simple-typewriter';
+import './Hero.scss';
 
-const Content: React.FC = () => {
+const Hero: React.FC = () => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [direction, setDirection] = useState(1);
   const [hoverIndex, setHoverIndex] = useState(-1);
@@ -63,22 +64,34 @@ const Content: React.FC = () => {
   const handleMouseLeave = () => setHoverIndex(-1);
 
   return (
-    <div className="ContentContainer">
+    <div className="HeroContainer">
       <div className="LeftContainer">
-        <h1>Hi, I'm Carson</h1>
-        <p>I like building cool things.</p>
+        <h1 className='HeroText'>
+          Hi, I'm <span className="AnimatedText">Carson</span>
+        </h1>
+        <p>
+          <Typewriter
+            words={['I like building cool things.', 'Soft dev @ Tail\'ed.', 'ML explorer.', 'Leetcode noob.', 'GitHub fanatic.', '']}
+            loop={false}
+            cursor
+            cursorStyle=''
+            typeSpeed={100}
+            deleteSpeed={70}
+            delaySpeed={500}
+          />
+          </p>
       </div>
       <div className="RightContainer">
         <img
           src={`${process.env.PUBLIC_URL}/${hoverIndex !== -1 ? hoverImageNames[hoverIndex] : imageNames[currentIndex]}`}
           alt={`Sprite ${currentIndex}`}
           onMouseEnter={() => handleMouseEnter(currentIndex)}
           onMouseLeave={handleMouseLeave}
-          width="200"
+          width="280"
         />
       </div>
     </div>
   );
 };
 
-export default Content;
+export default Hero;