diff --git a/package-lock.json b/package-lock.json index f218206..a4e401a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,11 @@ "name": "portfolio-web", "version": "0.0.0", "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", @@ -458,6 +463,75 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz", + "integrity": "sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz", + "integrity": "sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz", + "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/package.json b/package.json index 73d7526..b06c132 100644 --- a/package.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index f128052..04f09f2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,7 @@ 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() { @@ -8,6 +9,7 @@ function App() { <> + ); diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx index 60de678..363556a 100644 --- a/src/components/Contact/Contact.jsx +++ b/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 (
@@ -54,6 +57,7 @@ const Contact = () => {

©CopyRight @ DevalentineOmonya {currentYear}

+

Have a blessed {dayName}

); diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx index b798f94..47b9fbb 100644 --- a/src/components/Hero/Hero.jsx +++ b/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", }} >
diff --git a/src/components/Hero/hero.css b/src/components/Hero/hero.css index 80b66b6..05170b4 100644 --- a/src/components/Hero/hero.css +++ b/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 { diff --git a/src/components/SocialLinks/SocialLinks.jsx b/src/components/SocialLinks/SocialLinks.jsx new file mode 100644 index 0000000..0010960 --- /dev/null +++ b/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 =
; + +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 ( + + ); +}; + +export default SocialLinks; diff --git a/src/components/SocialLinks/socialinks.css b/src/components/SocialLinks/socialinks.css new file mode 100644 index 0000000..35a0b1b --- /dev/null +++ b/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%; + } +} \ No newline at end of file