diff --git a/package-lock.json b/package-lock.json index ab5a596..86a5673 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 566c11d..e73cf98 100644 --- a/package.json +++ b/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" diff --git a/src/App.css b/src/App.css index 74b5e05..dbc64d2 100644 --- a/src/App.css +++ b/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); } } + diff --git a/src/App.js b/src/App.js index 7fcaa55..740ae14 100644 --- a/src/App.js +++ b/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 (
+
); } diff --git a/src/assets/img/Screenshot 2024-07-14 020546.png b/src/assets/img/Screenshot 2024-07-14 020546.png new file mode 100644 index 0000000..9ba164c Binary files /dev/null and b/src/assets/img/Screenshot 2024-07-14 020546.png differ diff --git a/src/components/banner.js b/src/components/banner.js new file mode 100644 index 0000000..24f7629 --- /dev/null +++ b/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 ( +
+ + + + welcome to my portfolio +

{`Hi my name is Khang, a `} + {text} +

+

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!

+ + + + Header Img + + + +
+ ); +} + +export default Banner;