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

Fix import and attribute names in App and Footer components

Browse Source
This commit is contained in:
dertyp7
2024-01-14 19:11:17 +01:00
parent b0b63903de
commit d4a239a863
2 changed files with 17 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import "@styles/App.scss"; import "@styles/App.scss";
import Header from "@components/Header"; import Header from "@components/Header";
import About from "@sections/About"; import About from "@sections/About";
@@ -21,24 +21,7 @@ export default function App() {
const aboutRef = useRef(null); const aboutRef = useRef(null);
const skillsRef = useRef(null); const skillsRef = useRef(null);
const projectsRef = useRef(null); const projectsRef = useRef(null);
const prevHash = useRef(window.location.hash);
const [isScrolling, setIsScrolling] = useState(false);
useEffect(() => {
const handleScroll = () => {
setIsScrolling(true);
setTimeout(() => {
setIsScrolling(false);
}, 100);
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
useEffect(() => { useEffect(() => {
if (isMobileDevice()) { if (isMobileDevice()) {
@@ -48,10 +31,19 @@ export default function App() {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { (entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (isScrolling) { if (entry.isIntersecting) {
//! WORKAROUND: Prevents the observer from firing when the user scrolls to over a section
//! needs improvement in the future
if (
(prevHash.current === "#projects" &&
window.location.hash === "") ||
(prevHash.current === "#projects" &&
window.location.hash === "#projects")
) {
return; return;
} }
if (entry.isIntersecting) { prevHash.current = window.location.hash;
//! WORKAROUND END
window.location.hash = entry.target.id; window.location.hash = entry.target.id;
entry.target.classList.add("active"); entry.target.classList.add("active");
@@ -67,7 +59,7 @@ export default function App() {
} }
}); });
}, },
{ threshold: 0.1 } { threshold: 0.2 }
); );
if (aboutRef.current) { if (aboutRef.current) {

4
src/components/Footer.tsx
View File

@@ -10,7 +10,7 @@ export default function Footer() {
}} }}
stroke="currentColor" stroke="currentColor"
fill="currentColor" fill="currentColor"
stroke-width="0" strokeWidth="0"
viewBox="0 0 448 512" viewBox="0 0 448 512"
height="1em" height="1em"
width="1em" width="1em"
@@ -24,7 +24,7 @@ export default function Footer() {
}} }}
stroke="currentColor" stroke="currentColor"
fill="currentColor" fill="currentColor"
stroke-width="0" strokeWidth="0"
viewBox="0 0 496 512" viewBox="0 0 496 512"
height="1em" height="1em"
width="1em" width="1em"