janis/dertyp7.github.io
1
0
Fork 0
mirror of https://github.com/DerTyp7/dertyp7.github.io.git synced 2025-10-29 12:52:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor scroll functionality in App component

Browse Source
This commit is contained in:
dertyp7
2024-01-14 13:00:47 +01:00
parent 851148c421
commit 1607c136d8
5 changed files with 107 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
import "@styles/App.scss";
import Header from "@components/Header";
import About from "@components/About";
import ScrollToTop from "@components/ScrollToTop";
import SectionScroll from "@components/SectionScroll";
import Skills from "@components/Skills";
import SectionLine from "@components/SectionLine";
@@ -68,7 +68,7 @@ export default function App() {
</div>
<h4>Website under construction 🚧👷</h4>
<ScrollToTop />
<SectionScroll sections={["about", "skills", "projects"]} />
</div>
);
}

56
src/components/ScrollToTop.tsx
View File

@@ -1,56 +0,0 @@
import { useState, useEffect } from "react";
import "@styles/ScrollToTop.scss";
export default function ScrollToTop() {
const [isScrolledUp, setIsScrolledUp] = useState(false);
const toggleVisibilityAndDirection = () => {
if (window.scrollY < 100) {
setIsScrolledUp(false);
} else {
setIsScrolledUp(window.scrollY === 0 ? false : true);
}
};
const scrollTo = () => {
if (isScrolledUp) {
window.scrollTo({
top: 0,
behavior: "smooth",
});
} else {
const skillsElement = document.getElementById("skills");
if (skillsElement) {
skillsElement.scrollIntoView({ behavior: "smooth" });
}
}
};
useEffect(() => {
window.addEventListener("scroll", toggleVisibilityAndDirection);
return () =>
window.removeEventListener("scroll", toggleVisibilityAndDirection);
}, []);
return (
<div className="scrollToTop">
<div onClick={scrollTo}>
<svg
className={`arrow ${isScrolledUp ? "up" : "down"}`}
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="12" y1="19" x2="12" y2="5"></line>
<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</div>
</div>
);
}

62
src/components/SectionScroll.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { useState } from "react";
import "@styles/SectionScroll.scss";
export default function SectionScroll({ sections }: { sections: string[] }) {
const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
function scrollTo(direction: number) {
let newIndex = currentSectionIndex + direction;
if (newIndex < 0) newIndex = sections.length - 1;
if (newIndex >= sections.length) newIndex = 0;
const sectionElement = document.getElementById(sections[newIndex]);
if (sectionElement) {
sectionElement.scrollIntoView({ behavior: "smooth" });
}
setCurrentSectionIndex(newIndex);
}
return (
<div className="sectionScroll">
{currentSectionIndex > 0 && (
<div onClick={() => scrollTo(-1)}>
<svg
className="arrow up"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="12" y1="19" x2="12" y2="5"></line>
<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</div>
)}
{currentSectionIndex < sections.length - 1 && (
<div onClick={() => scrollTo(1)}>
<svg
className="arrow down"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="12" y1="5" x2="12" y2="19"></line>
<polyline points="19 12 12 19 5 12"></polyline>
</svg>
</div>
)}
</div>
);
}

70
src/styles/ScrollToTop.scss
View File

@@ -1,70 +0,0 @@
.scrollToTop {
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
.arrow {
&.up {
transform: rotate(0deg);
&:hover {
animation: pulseUp 1s 2;
}
@media screen and (min-width: 768px) {
&:hover {
animation: pulseUp 1s infinite;
}
}
}
&.down {
transform: rotate(-180deg);
&:hover {
animation: pulseDown 1s 2;
}
@media screen and (min-width: 768px) {
width: 50px;
height: 50px;
position: fixed;
bottom: 15px;
right: 50%;
&:hover {
animation: pulseDown 1s infinite;
}
}
}
}
&:hover {
color: var(--color-accent);
}
@keyframes pulseUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
@keyframes pulseDown {
0% {
transform: scale(1) rotate(-180deg);
}
50% {
transform: scale(1.4) rotate(-180deg);
}
100% {
transform: scale(1) rotate(-180deg);
}
}
}

43
src/styles/SectionScroll.scss Normal file
View File

@@ -0,0 +1,43 @@
.sectionScroll {
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
div {
.arrow {
&.up {
&:hover {
animation: pulse 1s 2;
}
@media screen and (min-width: 768px) {
&:hover {
animation: pulse 1s infinite;
}
}
}
&.down {
&:hover {
animation: pulse 1s 2;
}
}
&:hover {
color: var(--color-accent);
}
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
}