Home page shell content

package.json

@@ -16,17 +16,19 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
+    "react-typical": "^0.1.3",
+    "styled-components": "^6.1.12",
     "typescript": "^5.5.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-  "start": "react-scripts start",
-  "build": "react-scripts build",
-  "predeploy": "npm run build",
-  "deploy": "gh-pages -d build",
-  "test": "react-scripts test",
-  "eject": "react-scripts eject"
-},
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

src/App.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import Container from './Components/Home/Content/content';
 
 const App: React.FC = () => {
   return (
     <div className="App">
-      <h1>Hello, world!</h1>
+      <Container />
     </div>
   );
 }

src/Components/Home/Content/content.css

@@ -0,0 +1,57 @@
+.ContentContainer {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background-color: #f9fbf7;
+    color: #1c2211;
+    overflow: hidden;
+  }
+
+  @media (min-width: 768px) {
+    .ContentContainer {
+      flex-direction: row;
+    }
+  }
+
+  .LeftContainer {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding: 120px 40px 60px 80px; /* top, right, bottom, left */
+  }
+
+  @media (max-width: 768px) {
+    .LeftContainer {
+      flex: 0 0 25%;
+      padding-left: 40px;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .LeftContainer {
+      flex: 0 0 35%;
+    }
+  }
+
+  .RightContainer {
+    flex: 1;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  @media (min-width: 768px) {
+    .RightContainer {
+      flex: 0 0 65%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .RightContainer {
+      flex: 0 0 75%;
+    }
+  }
+

src/Components/Home/Content/content.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import './content.css';
+
+const Content: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [direction, setDirection] = useState(1);
+  const [hoverIndex, setHoverIndex] = useState(-1);
+  const imageNames = ['idleSprite0.png', 'idleSprite1.png', 'idleSprite2.png', 'idleSprite3.png'];
+  const hoverImageNames = ['hoverIdleSprite0.png', 'hoverIdleSprite1.png', 'hoverIdleSprite2.png', 'hoverIdleSprite3.png'];
+  const totalImages = imageNames.length;
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => {
+        let nextIndex = prevIndex + direction;
+        if (nextIndex >= totalImages) {
+          nextIndex = totalImages - 1;
+          setDirection(-1);
+        } else if (nextIndex < 0) {
+          nextIndex = 0;
+          setDirection(1);
+        }
+        return nextIndex;
+      });
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, [totalImages, direction]);
+
+  useEffect(() => {
+    let hoverInterval: NodeJS.Timeout | null = null;
+    if (hoverIndex !== -1) {
+      hoverInterval = setInterval(() => {
+        setHoverIndex((prevIndex) => {
+          let nextIndex = prevIndex + direction;
+          if (nextIndex >= totalImages) {
+            nextIndex = totalImages - 1;
+            setDirection(-1);
+          } else if (nextIndex < 0) {
+            nextIndex = 0;
+            setDirection(1);
+          }
+          return nextIndex;
+        });
+      }, 500);
+    }
+    return () => { if (hoverInterval) clearInterval(hoverInterval); };
+  }, [hoverIndex, totalImages, direction]);
+
+  const handleMouseEnter = (index: number) => setHoverIndex(index);
+  const handleMouseLeave = () => setHoverIndex(-1);
+
+  return (
+    <div className="ContentContainer">
+      <div className="LeftContainer">
+        <h1>Hi, I'm Carson</h1>
+        <p>I like building cool things.</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"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Content;