diff --git a/package-lock.json b/package-lock.json
index 86a5673..4cdf8de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
"react-bootstrap": "^2.10.4",
"react-bootstrap-icons": "^1.11.4",
"react-dom": "^18.3.1",
+ "react-multi-carousel": "^2.8.5",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
@@ -15176,6 +15177,14 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "node_modules/react-multi-carousel": {
+ "version": "2.8.5",
+ "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz",
+ "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -29066,6 +29075,11 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "react-multi-carousel": {
+ "version": "2.8.5",
+ "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz",
+ "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w=="
+ },
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/package.json b/package.json
index e73cf98..f0e37a0 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"react-bootstrap": "^2.10.4",
"react-bootstrap-icons": "^1.11.4",
"react-dom": "^18.3.1",
+ "react-multi-carousel": "^2.8.5",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
diff --git a/src/App.css b/src/App.css
index 11f535b..dce87d6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,6 +16,11 @@
}
/* default CSS */
+/* Set a minimum height for the parent container */
+#root {
+ min-height: 100vh; /* 100% of the viewport height */
+ /* You can adjust this value based on your design */
+}
* {
margin: 0;
@@ -30,7 +35,6 @@ html {
body {
font-weight: 400;
- overflow: hidden;
position: relative;
color: #685454 !important;
font-family: 'Centra', sans-serif !important;
@@ -232,7 +236,6 @@ nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
/* banner */
.banner {
margin-top: 0;
- margin-bottom: 0;
padding: 150px 0 100px 0;
position: relative;
background-image: url('./assets/img/01.jpg');
@@ -302,43 +305,41 @@ nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
border-right: 0.08em solid #666;
}
-
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
+.skill {
+ padding: 0 0 50px 0;
+ position: relative;
}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
+.skill-bx {
+ background: #151515;
+ border-radius: 64px;
+ text-align: center;
+ padding: 60px 50px;
+ margin-top: -60px;
+}
+.skill h2 {
+ font-size: 45px;
+ font-weight: 700;
+}
+.skill p {
+ color: #B8B8B8;
+ font-size: 18px;
+ letter-spacing: 0.8px;
+ line-height: 1.5em;
+ margin: 14px 0 75px 0;
+}
+.skill-slider {
+ width: 80%;
+ margin: 0 auto;
+ position: relative;
}
-
-.App-link {
- color: #61dafb;
+.skill-slider .item img {
+ width: 50%;
+ margin: 0 auto 15px auto;
}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.background-image-left {
+ top: 28%;
+ position: absolute;
+ bottom: 0;
+ width: 40%;
+ z-index: -4;
}
-
diff --git a/src/App.js b/src/App.js
index 740ae14..10189b5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
import './App.css';
import NavBar from './components/Navbar';
import Banner from './components/banner';
+import Skills from './components/Skills';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
@@ -8,6 +9,7 @@ function App() {
<div className ="App">
<NavBar />
<Banner />
+ <Skills />
</div>
);
}
diff --git a/src/assets/img/39668.jpg b/src/assets/img/39668.jpg
new file mode 100644
index 0000000..464c364
Binary files /dev/null and b/src/assets/img/39668.jpg differ
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index c745341..e758b8c 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,17 +1,15 @@
-import Container from 'react-bootstrap/Container';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import { useState, useEffect} from "react";
-import logo from '../assets/img/logo.svg';
-import navIcon1 from '../assets/img/nav-icon1.svg';
-import navIcon3 from '../assets/img/nav-icon2.svg';
-import navIcon2 from '../assets/img/nav-icon3.svg';
-
+import React, { useState, useEffect } from "react";
+import { Container, Nav, Navbar } from "react-bootstrap";
+import logo from "../assets/img/logo.svg";
+import navIcon1 from "../assets/img/nav-icon1.svg";
+import navIcon2 from "../assets/img/nav-icon2.svg";
+import navIcon3 from "../assets/img/nav-icon3.svg";
const NavBar = () => {
- const [activeLink, setActiveLink] = useState('home');
+ const [activeLink, setActiveLink] = useState("home");
const [scrolled, setScrolled] = useState(false);
-//check for scrolling
+
+ // Check for scrolling
useEffect(() => {
const onScroll = () => {
if (window.scrollY > 50) {
@@ -19,43 +17,75 @@ const NavBar = () => {
} else {
setScrolled(false);
}
- }
+ };
window.addEventListener("scroll", onScroll);
- // remove event listener when components unmounts
+
+ // Remove event listener when component unmounts
return () => window.removeEventListener("scroll", onScroll);
- }, [])
+ }, []);
const onUpdateLink = (value) => {
- setActiveLink(value)
- }
+ setActiveLink(value);
+ };
+
return (
- <Navbar expand="lg" className= {scrolled ? "scrolled": ""}>
+ <Navbar expand="lg" className={scrolled ? "scrolled" : ""}>
<Container>
<Navbar.Brand href="#home">
- <img src={logo} alt="logo" />
+ <img src={logo} alt="Logo" />
</Navbar.Brand>
- <Navbar.Toggle/>
+ <Navbar.Toggle />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
- <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('home')}>Home</Nav.Link>
- <Nav.Link href="#skills" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('skills')}>skills</Nav.Link>
- <Nav.Link href="#projects" className={activeLink === 'home' ? 'active navbar-link': 'navbar-link'} onClick={() => onUpdateLink('projects')}>Projects</Nav.Link>
+ <Nav.Link
+ href="#home"
+ className={
+ activeLink === "home" ? "active navbar-link" : "navbar-link"
+ }
+ onClick={() => onUpdateLink("home")}
+ >
+ Home
+ </Nav.Link>
+ <Nav.Link
+ href="#skills"
+ className={
+ activeLink === "skills" ? "active navbar-link" : "navbar-link"
+ }
+ onClick={() => onUpdateLink("skills")}
+ >
+ Skills
+ </Nav.Link>
+ <Nav.Link
+ href="#projects"
+ className={
+ activeLink === "projects" ? "active navbar-link" : "navbar-link"
+ }
+ onClick={() => onUpdateLink("projects")}
+ >
+ Projects
+ </Nav.Link>
</Nav>
<span className="navbar-text">
- <div className="social-icon">
- <a href="#"><img src={navIcon1} alt="nav-icon1" /></a>
- <a href="#"><img src={navIcon2} alt="nav-icon2" /></a>
- <a href="#"><img src={navIcon3} alt="nav-icon3" /></a>
- </div>
- <button className="vvd" onClick={() => console.log('connect')}>
- <span>Let's connect!</span>
- </button>
+ <div className="social-icon">
+ <a href="#">
+ <img src={navIcon1} alt="Social Icon 1" />
+ </a>
+ <a href="#">
+ <img src={navIcon2} alt="Social Icon 2" />
+ </a>
+ <a href="#">
+ <img src={navIcon3} alt="Social Icon 3" />
+ </a>
+ </div>
+ <button className="vvd" onClick={() => console.log("connect")}>
+ <span>Let's connect!</span>
+ </button>
</span>
</Navbar.Collapse>
</Container>
</Navbar>
);
-}
+};
-export default NavBar;
\ No newline at end of file
+export default NavBar;
diff --git a/src/components/Skills.js b/src/components/Skills.js
new file mode 100644
index 0000000..63a8bf7
--- /dev/null
+++ b/src/components/Skills.js
@@ -0,0 +1,64 @@
+import meter1 from "../assets/img/meter1.svg";
+import meter2 from "../assets/img/meter2.svg";
+import meter3 from "../assets/img/meter3.svg";
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+import colorSharp from "../assets/img/color-sharp.png"
+
+const Skills = () => {
+ const responsive = {
+ superLargeDesktop: {
+ // the naming can be any, depends on you.
+ breakpoint: { max: 4000, min: 3000 },
+ items: 5
+ },
+ desktop: {
+ breakpoint: { max: 3000, min: 1024 },
+ items: 3
+ },
+ tablet: {
+ breakpoint: { max: 1024, min: 464 },
+ items: 2
+ },
+ mobile: {
+ breakpoint: { max: 464, min: 0 },
+ items: 1
+ }
+ };
+
+ return (
+ <section className="skill" id="skills">
+ <div className="container">
+ <div className="row">
+ <div className="col-12">
+ <div className="skill-bx wow zoomIn">
+ <h2>Skills</h2>
+ <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br></br> Lorem Ipsum has been the industry's standard dummy text.</p>
+ <Carousel responsive={responsive} infinite={true} className="owl-carousel owl-theme skill-slider">
+ <div className="item">
+ <img src={meter1} alt="Image" />
+ <h5>Web Development</h5>
+ </div>
+ <div className="item">
+ <img src={meter2} alt="Image" />
+ <h5>Brand Identity</h5>
+ </div>
+ <div className="item">
+ <img src={meter3} alt="Image" />
+ <h5>Logo Design</h5>
+ </div>
+ <div className="item">
+ <img src={meter1} alt="Image" />
+ <h5>Web Development</h5>
+ </div>
+ </Carousel>
+ </div>
+ </div>
+ </div>
+ </div>
+ <img className="background-image-left" src={colorSharp} alt="Image" />
+ </section>
+ )
+}
+
+export default Skills;
\ No newline at end of file