diff --git a/.env.example b/.env.example index b56750f6..3a64aba8 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,4 @@ MONGODB_URI= - GITHUB_CLIENT_SECRET= GITHUB_CLIENT_ID= diff --git a/components/UI/Contact.jsx b/components/UI/Contact.jsx index b8e699ec..70b4575b 100644 --- a/components/UI/Contact.jsx +++ b/components/UI/Contact.jsx @@ -8,6 +8,7 @@ import axios from "axios"; import { useState } from "react"; import NewTwitterLogo from "./NewTwitterlogo"; import { RiYoutubeFill, RiGithubFill, RiTwitterFill, RiLinkedinFill } from "react-icons/ri"; +import ScrollToTop from "./ScrollToTop"; const Contact = () => { const [submitted, setSubmitted] = useState(false); const handleSubmit = async (event) => { @@ -139,7 +140,9 @@ const Contact = () => { )} + + {/* diff --git a/components/UI/ScrollToTop.jsx b/components/UI/ScrollToTop.jsx new file mode 100644 index 00000000..5d9f67fc --- /dev/null +++ b/components/UI/ScrollToTop.jsx @@ -0,0 +1,59 @@ +import React, { useState, useEffect } from 'react'; +const ScrollToTop = () => { + const [isVisible, setIsVisible] = useState(false); + + // Show button when page is scrolled down by 300px + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true); + } else { + setIsVisible(false); + } + }; + + // Scroll the window to the top smoothly + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }; + + useEffect(() => { + window.addEventListener('scroll', toggleVisibility); + return () => { + window.removeEventListener('scroll', toggleVisibility); + }; + }, []); + + return ( + <> + {isVisible && ( + + )} + + ); +}; + +export default ScrollToTop; diff --git a/package.json b/package.json index 07e9ec38..8350fdd7 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react-dom": "18.2.0", "react-icons": "^4.9.0", "react-loader-spinner": "^5.3.4", + "react-scroll": "^1.9.3", "react-slick": "^0.29.0", "react-terminal": "^1.3.0", "reactstrap": "^9.1.1", diff --git a/yarn.lock b/yarn.lock index d05640ae..2d5aaec3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2812,6 +2812,11 @@ lodash.merge@^4.6.2: resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz" + integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ== + lodash@^4.17.21: version "4.17.21" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz" @@ -3328,6 +3333,14 @@ react-popper@^2.2.4: react-fast-compare "^3.0.1" warning "^4.0.2" +react-scroll@^1.9.3: + version "1.9.3" + resolved "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.3.tgz" + integrity sha512-xv7FXqF3k63aSLNu4/NjFvRNI0ge7DmmmsbeGarP7LZVAlJMSjUuW3dTtLxp1Afijyv0lS2qwC0GiFHvx1KBHQ== + dependencies: + lodash.throttle "^4.1.1" + prop-types "^15.7.2" + react-slick@^0.29.0: version "0.29.0" resolved "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz"