Added social media icons

package.json

@@ -10,6 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-owl-carousel": "^2.3.3",

src/App.jsx

@@ -1,13 +1,15 @@
 import "./App.css";
 import BackToTop from "./components/BackToTop/BackToTop";
 import Navbar from "./components/NavBar/Navbar";
+import SocialLinks from "./components/SocialLinks/SocialLinks";
 import Home from "./pages/Home"
 
 function App() {
   return (
     <>
      <Navbar/>
    <Home/>
+   <SocialLinks/>
    <BackToTop/>
     </>
   );

src/components/Contact/Contact.jsx

@@ -5,6 +5,9 @@ import emailLogo from "../../assets/images/email.png";
 import telephoneLogo from "../../assets/images/telephone.png";
 const Contact = () => {
     const currentYear = new Date().getFullYear();
+    const today = new Date();
+    const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    const dayName = dayNames[today.getDay()];
   return (
     <div className="contact-section" id="contact">
       <div className="contact-form">
@@ -54,6 +57,7 @@ const Contact = () => {
           </div>
         </div>
         <p>&copy;CopyRight @ DevalentineOmonya {currentYear}</p>
+        <p>Have a blessed {dayName}</p>
       </div>
     </div>
   );

src/components/Hero/Hero.jsx

@@ -25,7 +25,7 @@ const Hero = () => {
         zIndex: "1",
         background: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(${sliderImage})`,       
         transition: "0.4s",
-        animation: "zoomBackground 8s infinite",
+        animation: "zoomBackground 8s infinite",        
       }}
     >
       <div className="hero-content">

src/components/Hero/hero.css

@@ -41,7 +41,7 @@
     justify-content: center;
     flex-direction: column;
     position: relative;
-    top: -20px;
+    top: 50px;
 }
 
 .hero-text-container p {

src/components/SocialLinks/SocialLinks.jsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./socialinks.css";
+import { faFacebook, faGit } from "@fortawesome/free-brands-svg-icons";
+import { faTwitter } from "@fortawesome/free-brands-svg-icons";
+import { faInstagram } from "@fortawesome/free-brands-svg-icons";
+import { faYoutube } from "@fortawesome/free-brands-svg-icons";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
+
+const element = <div></div>;
+
+const SocialLinks = () => {
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setIsSticky(true);
+      } else {
+        setIsSticky(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <div className={`social-links ${isSticky ? "sticky" : ""}`}>
+      <a href="https://www.facebook.com/devalentineomonya" target="_blank" className="social-link">
+        <FontAwesomeIcon icon={faFacebook} />
+      </a>
+      <a href="https://www.instagram.com/devalentineomonya" target="_blank" className="social-link">
+        <FontAwesomeIcon icon={faInstagram} />
+      </a>
+      <a href="https://www.linkedin.com/in/devalentineomonya" target="_blank" className="social-link">
+        <FontAwesomeIcon icon={faLinkedin} />
+      </a>
+      <a href="https://www.youtube.com/@devalentineomonya" target="_blank" className="social-link">
+        <FontAwesomeIcon icon={faYoutube} />
+      </a>
+      <a href="https://twitter.com/devalenthcohen" target="_blank" className="social-link">
+        <FontAwesomeIcon icon={faTwitter} />
+      </a>
+      <a href="https://github.com/devalentineomonya" target="_blank" className="social-link">
+        <FontAwesomeIcon icon={faGithub} />
+      </a>
+    </div>
+  );
+};
+
+export default SocialLinks;

src/components/SocialLinks/socialinks.css

@@ -0,0 +1,98 @@
+.social-links, .sticky {
+    position: fixed;
+    bottom: 50%;
+    left: 2%;
+    transform: translate(-50%, 50%);
+    z-index: 1500;
+    transition: 0.3s ease-in-out;
+}
+
+.social-links {
+    display: flex;
+    flex-direction: column;
+    row-gap: 30px;
+    justify-content: center;
+    align-items: center;
+}
+
+.sticky {
+    background-color: #fff;
+    padding: 20px 10px;
+    border-radius: 50px;
+}
+
+
+
+
+.social-link {
+    margin: 5px;
+    text-decoration: none;
+    transition: transform 0.3s ease;
+    flex-direction: column;
+    row-gap: 30px;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 26px;
+    position: sticky;
+    margin-top: -10px;
+    z-index: 1200;
+
+
+}
+
+.social-link:hover {
+    transform: scale(1.2);
+}
+
+.social-link:first {
+
+    transition: 0.4s ease-in-out;
+}
+
+.social-link:nth-child(2) {
+    margin-left: 50px;
+    margin-top: -20px;
+    transition: 0.5s ease-in-out;
+}
+
+.social-link:nth-child(3) {
+    margin-left: 80px;
+    margin-top: -20px;
+    transition: 0.6s ease-in-out;
+}
+
+.social-link:nth-child(4) {
+    margin-left: 80px;
+    margin-top: -10px;
+    transition: 0.7s ease-in-out;
+}
+
+.social-link:nth-child(5) {
+    margin-left: 50px;
+    margin-top: -20px;
+    transition: 0.8s ease-in-out;
+}
+
+.social-link:nth-child(6) {
+    transition: 0.9s ease-in-out;
+}
+
+.sticky .social-link {
+    color: #000;
+    margin-left: 0;
+    margin-top: 0;
+}
+
+@media screen and (max-width:576px) {
+
+    .social-links {
+
+        left: 5%;
+
+    }
+
+    .sticky {
+
+        left: 5%;
+    }
+}