temporary skill component

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",

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"
   },

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;
 }
-

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>
   );
 }

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;
+export default NavBar;

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;