banner added

package-lock.json

@@ -14,6 +14,7 @@
         "bootstrap": "^5.3.3",
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.4",
+        "react-bootstrap-icons": "^1.11.4",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -14963,6 +14964,17 @@
         }
       }
     },
+    "node_modules/react-bootstrap-icons": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.4.tgz",
+      "integrity": "sha512-lnkOpNEZ/Zr7mNxvjA9efuarCPSgtOuGA55XiRj7ASJnBjb1wEAdtJOd2Aiv9t07r7FLI1IgyZPg9P6jqWD/IA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -28903,6 +28915,14 @@
         "warning": "^4.0.3"
       }
     },
+    "react-bootstrap-icons": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.4.tgz",
+      "integrity": "sha512-lnkOpNEZ/Zr7mNxvjA9efuarCPSgtOuGA55XiRj7ASJnBjb1wEAdtJOd2Aiv9t07r7FLI1IgyZPg9P6jqWD/IA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "bootstrap": "^5.3.3",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
+    "react-bootstrap-icons": "^1.11.4",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.css

@@ -1,3 +1,253 @@
+/* custom fonts */
+@font-face {
+  font-family: centra;
+  src: url('./assets/font/CentraNo2-Bold.ttf');
+  font-weight: bold;
+}
+@font-face {
+  font-family: centra;
+  src: url('./assets/font/CentraNo2-Medium.ttf');
+  font-weight: 500;
+}
+@font-face {
+  font-family: centra;
+  src: url('./assets/font/CentraNo2-Book.ttf');
+  font-weight: 400;
+}
+
+/* default CSS */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+} 
+
+html { 
+  scroll-behavior: smooth;
+  scroll-padding-top: 75px;
+} 
+
+body { 
+  font-weight: 400;
+  overflow: hidden;
+  position: relative;
+  background-color: #61dafb !important;
+  color: #685454 !important;
+  font-family: 'Centra', sans-serif !important;
+} 
+h1, h2, h3, h4, h5, h6 {  
+  margin: 0;              
+  padding: 0;             
+  line-height: normal;    
+}                         
+
+
+p, a, li, button, ul {
+  margin: 0;
+  padding: 0;
+  line-height: normal;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+button {
+  border: 0;
+  background-color: transparent;
+}
+
+input:focus, textarea:focus, select:focus {
+  outline: none;
+}
+
+@media (min-width:1700px) {
+	main .container {
+		max-width: 100%;
+		padding: 0 150px;
+	}
+}
+
+p.success {
+	color: green;
+}
+
+p.danger {
+	color: red;
+}
+/************ Navbar Css ************/
+nav.navbar {
+  padding: 18px 0;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 9999;
+  transition:  0.32s ease-in-out;
+}
+nav.navbar.scrolled {
+  padding: 0px 0;
+  background-color: #121212;
+}
+nav.navbar a.navbar-brand {
+    width: 9%;
+}
+nav.navbar .navbar-nav .nav-link.navbar-link {
+  font-weight: 400;
+  color: #fff !important;
+  letter-spacing: 0.8px;
+  padding: 0 25px;
+  font-size: 18px;
+  opacity: 0.75;
+}
+nav.navbar .navbar-nav a.nav-link.navbar-link:hover,
+nav.navbar .navbar-nav a.nav-link.navbar-link.active {
+    opacity: 1;
+}
+span.navbar-text {
+    display: flex;
+    align-items: center;
+}
+.social-icon {
+    display: inline-block;
+    margin-left: 14px;
+}
+.social-icon a {
+    width: 42px;
+    height: 42px;
+    background: rgba(217, 217, 217, 0.1);
+    display: inline-flex;
+    border-radius: 50%;
+    margin-right: 6px;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.social-icon a::before {
+    content: "";
+    width: 42px;
+    height: 42px;
+    position: absolute;
+    background-color: #ffffff;
+    border-radius: 50%;
+    transform: scale(0);
+	transition: 0.3s ease-in-out;
+}
+.social-icon a:hover::before {
+    transform: scale(1);
+}
+.social-icon a img {
+	width: 40%;
+	z-index: 1;
+	transition: 0.3s ease-in-out;
+}
+.social-icon a:hover img {
+	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(98%) hue-rotate(346deg) brightness(95%) contrast(86%);
+}
+.navbar-text button {
+  font-weight: 700;
+  color: #fff;
+  border: 1px solid #fff;
+  padding: 18px 34px;
+  font-size: 18px;
+  margin-left: 18px;
+	position: relative;
+	background-color: transparent;
+	transition: 0.3s ease-in-out;
+}
+.navbar-text button span {
+  z-index: 1;
+}
+.navbar-text button::before {
+  content: "";
+  width: 0%;
+  height: 100%;
+  position: absolute;
+  background-color: #fff;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  transition: 0.3s ease-in-out;
+}
+.navbar-text button:hover {
+  color: #121212;
+}
+.navbar-text button:hover::before {
+	content: "";
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}
+nav.navbar .navbar-toggler:active,
+nav.navbar .navbar-toggler:focus {
+	outline: none;
+    box-shadow: none;
+}
+nav.navbar .navbar-toggler-icon {
+  width: 24px;
+  height: 17px;
+  background-image: none;
+  position: relative;
+  border-bottom: 2px solid #fff;
+  transition: all 300ms linear;
+  top: -2px;
+}
+nav.navbar .navbar-toggler-icon:focus {
+	border-bottom: 2px solid #fff;
+}
+nav.navbar .navbar-toggler-icon:after,
+nav.navbar .navbar-toggler-icon:before {
+	width: 24px;
+	position: absolute;
+	height: 2px;
+	background-color: #fff;
+	top: 0;
+	left: 0;
+	content: '';
+	z-index: 2;
+	transition: all 300ms linear;
+}
+nav.navbar .navbar-toggler-icon:after {
+	top: 8px;
+}
+nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
+	transform: rotate(45deg);
+	background-color: #fff;
+	height: 2px;
+}
+nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
+	transform: translateY(8px) rotate(-45deg);
+	background-color: #fff;
+	height: 2px;
+}
+nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+	border-color: transparent;
+}
+/* banner configuration */
+.banner {
+  padding-top: 100px; /* Adjust the value as needed */
+  padding-bottom: 50px; /* Optional: Add some padding to the bottom for spacing */
+  position: relative; /* Ensure the content is positioned correctly */
+  z-index: 1; /* Ensure the banner content is above the background */
+}
+
+.banner img {
+  max-width: 100%; /* Ensure the image scales properly */
+  height: auto; /* Maintain aspect ratio */
+  display: block; /* Remove any inline-block spacing */
+  margin: 0 auto; /* Center the image horizontally */
+  background-color: transparent; /* Ensure the image background is transparent */
+}
+
+
+
 .App {
   text-align: center;
 }
@@ -36,3 +286,4 @@
     transform: rotate(360deg);
   }
 }
+

src/App.js

@@ -1,11 +1,13 @@
 import './App.css';
 import NavBar from './components/Navbar';
+import Banner from './components/banner';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
     <div className ="App">
           <NavBar />
+          <Banner /> 
     </div>
   );
 }

src/components/banner.js

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+import { ArrowRightCircle } from 'react-bootstrap-icons';
+import HeadImg from '../assets/img/header-img.svg';
+
+const Banner = () => {
+    const job = "Web Developer";
+    const [text, setText] = useState('');
+    const [delta, setDelta] = useState(300); // Set an initial value
+    const period = 2000;
+
+    useEffect(() => {
+        let ticker = setInterval(() => {
+            tick();
+        }, delta);
+        return () => { clearInterval(ticker); };
+    }, [text]);
+
+    const tick = () => {
+      const fullText = job;
+      const updatedText = fullText.substring(0, text.length +1);
+      setText(updatedText);
+
+      if(updatedText === fullText) {
+        setTimeout(() => {
+          setText('');
+          setDelta(300);
+        }, period)
+      }
+    };
+
+    return (
+        <section className='banner' id="home">
+            <Container>
+                <Row className="align-items-center">
+                    <Col xs={12} md={6} xl={7}>
+                        <span className="tagLine">welcome to my portfolio</span>
+                        <h1>{`Hi my name is Khang, a `}
+                            <span className="wrap">{text}</span>
+                        </h1>
+                        <p>Hello, My name is Khang. I am a freshman majoring in computer science at Cal Poly Pomona. As a backend developer, I am proficient in JavaScript, React, Node.js, Python, Django, and MySQL. My passion for coding extends beyond the classroom—I’m also an avid manga enthusiast. Thank you for visiting my portfolio!</p>
+                        <button onClick={() => console.log('connect')}>Let's Connect! <ArrowRightCircle size={20} /></button>
+                    </Col>
+                    <Col xs={12} md={6} xl={5}>
+                        <img src={HeadImg} alt="Header Img" />
+                    </Col>
+                </Row>
+            </Container>
+        </section>
+    );
+}
+
+export default Banner;