DizzyZff · DizzyZff · Nov 26, 2023 · Nov 25, 2023 · Nov 25, 2023 · Nov 26, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "firebase": "^10.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -35,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,6 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +20,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Dizzy</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+body {
+  overflow: hidden; /* Prevent scrolling */
+}
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,11 @@
-import logo from './logo.svg';
 import './App.css';
 import HeroSection from './HeroSection';
+import HeaderBar from './HeaderBar';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <HeaderBar></HeaderBar>
       <HeroSection></HeroSection>
     </div>
   );

diff --git a/...cter has an oval-shaped face, dark hair, glasses, and is dressed in a moder.png b/...cter has an oval-shaped face, dark hair, glasses, and is dressed in a moder.png
diff --git a/src/HeaderBar.css b/src/HeaderBar.css
@@ -0,0 +1,48 @@
+.header-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: black;
+    padding: 0.5rem 2rem;
+    color: white;
+    height: 5vh;
+  }
+
+  .brand-name {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+
+  .menu-container {
+    position: relative;
+  }
+
+  .menu-toggle {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    right: 0;
+    background-color: #333;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+
+  .dropdown-menu a {
+    color: white;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+
+  .dropdown-menu a:hover {
+    background-color: #555;
+  }
+
diff --git a/src/HeaderBar.js b/src/HeaderBar.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import './HeaderBar.css'; 
+
+const HeaderBar = () => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <div className="header-bar">
+      <div className="brand-name">Dizzy</div>
+
+      <div className="menu-container">
+        <button className="menu-toggle" onClick={toggleMenu}>
+            Menu
+        </button>
+        {isMenuOpen && (
+          <div className="dropdown-menu">
+            <a href="#home">Home</a>
+            <a href="#about">About</a>
+            <a href="#portfolio">Portfolio</a>
+            <a href="#contact">Contact</a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HeaderBar;
diff --git a/src/HeroSection.css b/src/HeroSection.css
@@ -0,0 +1,75 @@
+.hero-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 95vh;
+    background-color: black; /* Set the background to black */
+    color: white;
+    text-align: left;
+  }
+
+  .hero-content {
+    width: 50%;
+    padding-left: 10%;
+    max-width: 600px; /* Set a max-width if needed */
+  }
+
+  .hero-greeting {
+    font-size: 2rem; /* Smaller font size for the greeting */
+    margin: 0 0 0.5rem 0;
+  }
+
+  .hero-name-title {
+    font-size: 4rem; /* Larger font size for the name/title */
+    margin: 0 0 0.5rem 0;
+  }
+
+  .hero-subtitle {
+    font-size: 1.5rem; /* Smaller font size for the subtitle */
+    margin: 0 0 2rem 0;
+  }
+
+  .hero-cta-button {
+    padding: 1rem 2rem;
+    background-color: transparent;
+    border: 2px solid white;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .hero-cta-button:hover {
+    background-color: white;
+    color: black;
+  }
+
+  .hero-company-link {
+    color: #1800FF; /* Set the color of the link */
+    text-decoration: underline; /* Ensure the link is underlined */
+  }
+
+  .hero-company-link:visited {
+    color: #1800FF; /* Keeps the link color the same even after being clicked */
+  }
+
+  .hero-company-link:hover, 
+  .hero-company-link:focus {
+    color: #1800FF; /* Maintain the color on hover and focus for better UX */
+    text-decoration: underline; /* Maintain underline on hover and focus */
+  }
+
+  .hero-image-container {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hero-image {
+    max-width: 100%; /* Adjust the size as needed */
+    max-height: 100%;
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25); /* Example shadow */
+    border-radius: 10px; /* If you want rounded corners */
+  }
diff --git a/src/HeroSection.js b/src/HeroSection.js
@@ -1,12 +1,31 @@
 import React from 'react';
+import './HeroSection.css'; // Import the CSS file
+import myImage from "./DALL·E 2023-11-26 12.43.28 - A 3D animated character with a cheerful expression, waving hello. The character has an oval-shaped face, dark hair, glasses, and is dressed in a moder.png"
 
-function HeroSection() {
+const HeroSection = () => {
   return (
-    <div className="hero-section">
-      <h1>Welcome to Dizzy!</h1>
-      <p>Your hub for creative and innovative projects.</p>
+    <div className="hero-container">
+      <div className="hero-content">
+        <h2 className="hero-greeting">Hey! I'm Desmond 👋</h2>
+        <br></br>
+        <br></br>
+        <h1 className="hero-name-title">Full Stack Engineer</h1>
+        <h1 className="hero-name-title">& AI/ML Engineer</h1>
+        <h1 className="hero-name-title">@ <a href="http://www.caseguard.com" target="_blank" rel="noopener noreferrer" className="hero-company-link">CaseGuard</a></h1>
+        <br/>
+        <br></br>
+        <p className="hero-subtitle">Developing stuff since 2020</p>
+        <br/>
+        <br></br>
+        <br/>
+        <br></br>
+        <button className="hero-cta-button" onClick={() => { /* Scroll function or other action */ }}>Take a Look</button>
+      </div>
+      <div className="hero-image-container">
+        <img src={myImage} alt="Desmond waving" className="hero-image" />
+      </div>
     </div>
   );
-}
+};
 
 export default HeroSection;
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,3 +36,7 @@ @@
         transform: rotate(360deg);
       }
     }
+    body {
+      overflow: hidden; /* Prevent scrolling */
+    }