-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(homepage): Implement dynamic and personalized layout (#9)
* feat: Add hero section to the homepage Implemented a new hero section on the homepage to provide a welcoming introduction and quick overview of the site's purpose. This section includes a main banner with a catchy tagline and a call-to-action button. * feat: Integrate Firebase for backend services - Configured Firebase SDK with the React application. - Implemented Firebase Authentication for user sign-in and sign-up. - Set up Firestore Database for storing and retrieving project data. - Prepared Firebase Hosting for future deployment. This integration enables dynamic content management and user authentication, laying the groundwork for a fully functional application.
- Loading branch information
Showing
11 changed files
with
832 additions
and
28 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -36,3 +36,7 @@ | |
| transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| body { | ||
| overflow: hidden; /* Prevent scrolling */ | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+1000 KB
...cter has an oval-shaped face, dark hair, glasses, and is dressed in a moder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |