Fix Header Links

package.json

@@ -34,11 +34,9 @@
 		"@mui/icons-material": "^5.10.6",
 		"@mui/material": "^5.10.6",
 		"@vercel/analytics": "^1.0.1",
-		"axios": "^0.27.2",
 		"bootstrap": "^5.2.1",
 		"i18next": "^21.9.2",
 		"i18next-browser-languagedetector": "^6.1.5",
-		"jquery": "^3.6.1",
 		"react": "^18.2.0",
 		"react-bootstrap": "^2.5.0",
 		"react-cookie": "^4.1.1",
@@ -49,11 +47,9 @@
 		"react-router-dom": "^6.12.0",
 		"react-scripts": "^5.0.1",
 		"sass": "^1.54.9",
-		"swiper": "^8.4.2",
 		"typescript": "^4.8.3"
 	},
 	"devDependencies": {
-		"@types/jquery": "^3.5.14",
 		"@types/node": "^18.7.18",
 		"@types/react": "^18.0.20",
 		"@types/react-dom": "^18.0.6",

src/components/common/Header.tsx

@@ -1,13 +1,14 @@
+import { useEffect, useState } from "react";
 import { AppBar, Container, Stack, Typography } from "@mui/material";
 import { Nav, Navbar } from "react-bootstrap";
 import { MaterialUISwitch } from "./ThemeSwitch";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 import { useTranslation } from "react-i18next";
 import { Image } from "./Text";
 import { Sections } from "../../type/page";
+import Meta, { constructTitle } from "./Meta";
 
 const sections = [
-	{key: "welcome", href: `#${Sections.Welcome}`},
 	{key: "about", href: `#${Sections.About}`},
 	{key: "skills", href: `#${Sections.Skills}`},
 	{key: "stats", href: `#${Sections.Stats}`},
@@ -20,11 +21,60 @@
 }
 export default function Header({toggleTheme, checked}: Props) {
 	const {t} = useTranslation("components");
+
+	const initialSection = window?.location.href.split("#")[1];
+	const [activeSection, setActiveSection] = useState(initialSection || "#");
+
+	useEffect(() => {
+		const handleScroll = () => {
+			const scrollPosition = window.scrollY;
+			const sections: NodeListOf<HTMLElement> = document.querySelectorAll("section:not(.noIndex)");
+
+			sections.forEach((section) => {
+				const sectionTop = section.offsetTop;
+				const sectionHeight = section.offsetHeight;
+				const EM = 16;
+
+				if (
+					scrollPosition >= sectionTop - 6 * EM - 50 && // Adjust the offset as needed
+					scrollPosition < sectionTop + sectionHeight - 6 * EM - 50 // Adjust the offset as needed
+				) {
+					setActiveSection(section.id);
+				}
+			});
+		};
+
+		window.addEventListener("scroll", handleScroll);
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
+	useEffect(() => {
+		const handleUrlAnchorChange = () => {
+			const sectionFromUrl = window.location.hash.substr(1);
+			setActiveSection(sectionFromUrl);
+		};
+
+		window.addEventListener("hashchange", handleUrlAnchorChange);
+		return () => {
+			window.removeEventListener("hashchange", handleUrlAnchorChange);
+		};
+	}, []);
+
+	useEffect(() => {
+		window.location.hash = activeSection;
+	}, [activeSection]);
+
+	const pageTitle = constructTitle();
+	document.title = pageTitle;
+
 	return (
 		<AppBar position="fixed" enableColorOnDark>
+			<Meta />
 			<Container>
 				<Navbar collapseOnSelect expand="md" bg="none" variant="dark">
-					<Navbar.Brand href="/">
+					<Navbar.Brand href="#">
 						<Image src="/assets/logo-white-transparent.svg" alt="logo" width={50} height={50} />
 						<Typography component="span" variant="h6" sx={{marginLeft: "1rem"}}>
 							{t("header.title")}
@@ -37,9 +87,9 @@
 						<Nav className="me-auto" />
 						<Nav>
 							{sections.map(page => (
-								<Nav.Link key={page.key} href={page.href}>
+								<Link key={page.key} href={page.href} active={activeSection === page.key}>
 									{t(`header.links.${page.key}`)}
-								</Nav.Link>
+								</Link>
 							))}
 						</Nav>
 						<Stack direction="row" sx={{alignItems: "center", justifyContent: "start"}}>
@@ -52,3 +102,17 @@
 		</AppBar>
 	);
 }
+
+type LinkProps = {
+	children: React.ReactNode;
+	href: string;
+	active: boolean;
+}
+
+function Link({children, href, active}: LinkProps) {
+	return (
+		<a /*href={href}*/ className={(active ? "active" : "") + " nav-link"}>
+			{children}
+		</a>
+	);
+}

src/components/common/Meta.tsx

@@ -3,15 +3,30 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { PageUrl } from "../../type/page";
+import { useState } from "react";
+
+export const constructTitle = () => {
+	const {t} = useTranslation("components");
+
+	const pageTitle = (function() {
+		const {t} = useTranslation("meta");
+		return t("title");
+	})();
+	const currentSection = window?.location.href.split("#")[1];
+	const section = currentSection ? `${t(`header.links.${currentSection}`)}` : null;
+
+	return `${section ? `${section} |` : ""} ${pageTitle}`;
+};
 
 export default function Meta() {
 	const {t} = useTranslation("meta");
 
-	const title = t("title");
 	const description = t("description");
 
+	const [title, setTitle] = useState(constructTitle());
+
 	const openGraph = {
-		title: `${title} | Nicholas Krebs`,
+		title,
 		description,
 		image: `${PageUrl}/assets/logo-white-transparent.svg`,
 		url: `${PageUrl}`,

src/components/common/Section.tsx

@@ -4,11 +4,12 @@ import { Card } from "@mui/material";
 type Props = {
 	name: string,
 	noCard?: boolean
+	noindex?: boolean
 	children: React.ReactNode,
 }
-export default function Section({name, noCard, children}: Props) {
+export default function Section({name, noCard, noindex, children}: Props) {
 	return (
-		<section id={name}>
+		<section id={name} className={noindex ? "noIndex" : undefined}>
 			{noCard ? children : <Card sx={{padding: "2rem"}}>{children}</Card>}
 		</section>
 	);

src/index.tsx

@@ -4,8 +4,6 @@ import { Box, Container, createTheme, CssBaseline, ThemeProvider, useMediaQuery
 import { useCookies } from "react-cookie";
 import { inject } from "@vercel/analytics";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-
-// styles
 import "bootstrap/dist/css/bootstrap.min.css";
 import "./styles/main.sass";
 
@@ -89,6 +87,7 @@ function App() {
 			<Box sx={{height: "150px", marginTop: "3rem"}} />
 			<Container sx={{mt: "2rem", mb: "2rem"}}>
 				<main>
+					<section id="" style={{height: "1rem"}} />
 					<RoutingWrapper>
 						{sections.map((section, index) => (
 							<React.Fragment key={index}>

src/layouts/Welcome.tsx

@@ -7,7 +7,7 @@ export default function Welcome() {
 	const {t} = useTranslation("sections");
 
 	return (
-		<Section name={Sections.Welcome} noCard>
+		<Section name={Sections.Welcome} noCard noindex>
 			<Typography variant="h3" component="h1" sx={{color: "primary.main"}}>
 				{t(`${Sections.Welcome}.welcome`)}
 			</Typography>

src/locales/de.ts

@@ -10,7 +10,6 @@ export default function de(): Translation {
 			header: {
 				title: "Nicholas Krebs",
 				links: {
-					welcome: "Willkommen",
 					about: "Über",
 					skills: "Skills",
 					stats: "Statistik",

src/locales/en.ts

@@ -10,7 +10,6 @@ export default function en(): Translation {
 			header: {
 				title: "Nicholas Krebs",
 				links: {
-					welcome: "Welcome",
 					about: "About",
 					skills: "Skills",
 					stats: "Stats",