From dd5e066efd919471ec9a9e8b459d2b6eb3e17b9a Mon Sep 17 00:00:00 2001
From: Nicholas Krebs <nicholas@nicholas-krebs.ch>
Date: Sun, 18 Feb 2024 13:54:51 +0100
Subject: [PATCH 1/6] remove percentage in skills

---
 src/components/skills/Progress.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/skills/Progress.tsx b/src/components/skills/Progress.tsx
index 41e41f4..295a4fa 100644
--- a/src/components/skills/Progress.tsx
+++ b/src/components/skills/Progress.tsx
@@ -14,9 +14,6 @@ export default function Progress({text, icon, progress}: Props) {
 				<Box sx={{width: "100%", mr: 0}}>
 					<LinearProgress variant="determinate" value={progress} sx={{p: ".5rem"}} />
 				</Box>
-				<Box sx={{minWidth: "2rem"}}>
-					<Typography>{progress}% </Typography>
-				</Box>
 			</Stack>
 		</Box>
 	);

From 4ea3f2458f59a64172d298970b286a0a9bdf7810 Mon Sep 17 00:00:00 2001
From: Nicholas Krebs <nicholas@nicholas-krebs.ch>
Date: Sun, 18 Feb 2024 14:24:50 +0100
Subject: [PATCH 2/6] fix: header color bug

---
 src/components/common/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 26fb825..dd0c4f1 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -22,7 +22,7 @@ type Props = {
 export default function Header({toggleTheme, checked}: Props) {
 	const {t} = useTranslation("components");
 	return (
-		<AppBar position="fixed" enableColorOnDark>
+		<AppBar position="fixed" enableColorOnDark variant="outlined">
 			<Container>
 				<Navbar collapseOnSelect expand="md" bg="none" variant="dark">
 					<Navbar.Brand href="#">

From 760148a7843aef9a6ea74da8e7dfdb34a31eff7e Mon Sep 17 00:00:00 2001
From: Nicholas Krebs <nicholas@nicholas-krebs.ch>
Date: Sun, 18 Feb 2024 15:07:17 +0100
Subject: [PATCH 3/6] add nav scrolling

---
 package-lock.json                | 19 +++++++++++
 package.json                     |  1 +
 src/components/common/Header.tsx | 54 ++++++++++++++++++++++++--------
 3 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9a15972..2d4263c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
 				"react-icons": "^4.4.0",
 				"react-router-dom": "^6.12.0",
 				"react-scripts": "^5.0.1",
+				"react-scroll": "^1.9.0",
 				"sass": "^1.54.9",
 				"typescript": "^4.8.3"
 			},
@@ -11014,6 +11015,11 @@
 			"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
 			"integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
 		},
+		"node_modules/lodash.throttle": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+			"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+		},
 		"node_modules/lodash.uniq": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -13740,6 +13746,19 @@
 				}
 			}
 		},
+		"node_modules/react-scroll": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.0.tgz",
+			"integrity": "sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==",
+			"dependencies": {
+				"lodash.throttle": "^4.1.1",
+				"prop-types": "^15.7.2"
+			},
+			"peerDependencies": {
+				"react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/react-side-effect": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
diff --git a/package.json b/package.json
index 36e458c..cda51f0 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
 		"react-icons": "^4.4.0",
 		"react-router-dom": "^6.12.0",
 		"react-scripts": "^5.0.1",
+		"react-scroll": "^1.9.0",
 		"sass": "^1.54.9",
 		"typescript": "^4.8.3"
 	},
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index dd0c4f1..65f831a 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -5,14 +5,16 @@ import { LanguageSwitcher } from "./LanguageSwitcher";
 import { useTranslation } from "react-i18next";
 import { Image } from "./Text";
 import { Sections } from "../../type/page";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Link } from "react-scroll";
 
 const sections = [
-	{key: "welcome", href: `#${Sections.Welcome}`},
-	{key: "about", href: `#${Sections.About}`},
-	{key: "experience", href: `#${Sections.Experience}`},
-	{key: "skills", href: `#${Sections.Skills}`},
-	{key: "stats", href: `#${Sections.Stats}`},
-	{key: "social", href: `#${Sections.Social}`},
+	{key: Sections.About},
+	{key: Sections.Experience},
+	{key: Sections.Skills},
+	{key: Sections.Stats},
+	{key: Sections.Social},
 ];
 
 type Props = {
@@ -25,11 +27,13 @@ export default function Header({toggleTheme, checked}: Props) {
 		<AppBar position="fixed" enableColorOnDark variant="outlined">
 			<Container>
 				<Navbar collapseOnSelect expand="md" bg="none" variant="dark">
-					<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")}
-						</Typography>
+					<Navbar.Brand>
+						<NavLink href="root">
+							<Image src="/assets/logo-white-transparent.svg" alt="logo" width={50} height={50} />
+							<Typography component="span" variant="h6" sx={{marginLeft: "1rem"}}>
+								{t("header.title")}
+							</Typography>
+						</NavLink>
 					</Navbar.Brand>
 
 					<Navbar.Toggle aria-controls="header-nav" />
@@ -38,9 +42,9 @@ export default function Header({toggleTheme, checked}: Props) {
 						<Nav className="me-auto" />
 						<Nav>
 							{sections.map(page => (
-								<Nav.Link key={page.key} href={page.href}>
+								<NavLink href={page.key} key={page.key}>
 									{t(`header.links.${page.key}`)}
-								</Nav.Link>
+								</NavLink>
 							))}
 						</Nav>
 						<Stack direction="row" sx={{alignItems: "center", justifyContent: "start"}}>
@@ -53,3 +57,27 @@ export default function Header({toggleTheme, checked}: Props) {
 		</AppBar>
 	);
 }
+
+type NavLinkProps = {
+	href: string;
+	children?: React.ReactNode;
+}
+
+function NavLink({children, href}: NavLinkProps) {
+	return (
+		<Typography variant="h6" sx={{margin: "0 .2rem", color: "text.secondary"}}>
+			<Link
+				activeClass="active"
+				to={href}
+				spy={true}
+				smooth={true}
+				offset={-100}
+				duration={500}
+				style={{cursor: "pointer", textDecoration: "none"}}
+				activeStyle={{color: "white"}}
+			>
+				{children}
+			</Link>
+		</Typography>
+	);
+}
\ No newline at end of file

From a3e6a2060cf2e60548c4f02109538d71d2be5750 Mon Sep 17 00:00:00 2001
From: Nicholas Krebs <nicholas@nicholas-krebs.ch>
Date: Sun, 18 Feb 2024 15:14:21 +0100
Subject: [PATCH 4/6] fix: appearance

---
 src/components/common/Header.tsx  | 4 ++--
 src/components/common/Section.tsx | 2 ++
 src/index.tsx                     | 8 ++++++--
 src/styles/main.sass              | 5 +----
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 65f831a..803f8b4 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -65,13 +65,13 @@ type NavLinkProps = {
 
 function NavLink({children, href}: NavLinkProps) {
 	return (
-		<Typography variant="h6" sx={{margin: "0 .2rem", color: "text.secondary"}}>
+		<Typography variant="h6" sx={{margin: "0 .2rem", color: "text.disabled"}}>
 			<Link
 				activeClass="active"
 				to={href}
 				spy={true}
 				smooth={true}
-				offset={-100}
+				offset={-250}
 				duration={500}
 				style={{cursor: "pointer", textDecoration: "none"}}
 				activeStyle={{color: "white"}}
diff --git a/src/components/common/Section.tsx b/src/components/common/Section.tsx
index 949a74e..d6005ad 100644
--- a/src/components/common/Section.tsx
+++ b/src/components/common/Section.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Card } from "@mui/material";
+import { Line } from "./Text";
 
 type Props = {
 	name: string,
@@ -10,6 +11,7 @@ export default function Section({name, noCard, children}: Props) {
 	return (
 		<section id={name}>
 			{noCard ? children : <Card sx={{padding: "2rem"}}>{children}</Card>}
+			<Line top={5} bottom={5} />
 		</section>
 	);
 }
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 6c3403f..2bc91b7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,7 +14,6 @@ import { SpeedInsights } from "@vercel/speed-insights/react";
 import Header from "./components/common/Header";
 import Footer from "./components/common/Footer";
 import ScrollToTop from "./components/common/ScrollToTop";
-import { Line } from "./components/common/Text";
 
 // layouts
 import Welcome from "./layouts/Welcome";
@@ -30,6 +29,9 @@ const light = createTheme({
 		mode: "light",
 		primary: {main: "#507cff"},
 		secondary: {main: "#ffffff"},
+		text: {
+			disabled: "#ffffff8c",
+		},
 	},
 });
 const dark = createTheme({
@@ -37,6 +39,9 @@ const dark = createTheme({
 		mode: "dark",
 		primary: {main: "#507cff"},
 		secondary: {main: "#ffffff"},
+		text: {
+			disabled: "#ffffff8c",
+		},
 	},
 });
 
@@ -96,7 +101,6 @@ function App() {
 						{sections.map((section, index) => (
 							<React.Fragment key={index}>
 								{section}
-								{index !== sections.length - 1 && <Line top={5} bottom={5} />}
 							</React.Fragment>
 						))}
 					</RoutingWrapper>
diff --git a/src/styles/main.sass b/src/styles/main.sass
index 98f9b64..e7336c5 100644
--- a/src/styles/main.sass
+++ b/src/styles/main.sass
@@ -8,6 +8,7 @@
 
 html
 	scroll-padding-top: 6em
+	scroll-behavior: auto !important
 
 body
 	position: relative
@@ -20,10 +21,6 @@ main
 	padding-left: .5rem
 	padding-right: .5rem
 
-/* ********************************************* swiper ********************************************* */
-.swiper-slide
-	max-width: 25rem
-
 /* ********************************************* footer ********************************************* */
 footer
 	a

From 70eff362fb1fc62dcfd19d7ddbe351a3e0fc3d72 Mon Sep 17 00:00:00 2001
From: Nicholas Krebs <nicholas@nicholas-krebs.ch>
Date: Sun, 18 Feb 2024 15:32:56 +0100
Subject: [PATCH 5/6] cleanup Experience.tsx

---
 src/layouts/Experience.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Experience.tsx b/src/layouts/Experience.tsx
index 5925836..d151e30 100644
--- a/src/layouts/Experience.tsx
+++ b/src/layouts/Experience.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import Section from "../components/common/Section";
 import { Sections } from "../type/page";
 import WorkIcon from "@mui/icons-material/Work";
-import { default as TimelineC } from "../components/experience/Timeline";
+import Timeline from "../components/experience/Timeline";
 import TimelineItem from "../components/experience/TimelineItem";
 import { TimelineItem as TimelineItemType } from "@type/timeline";
 
@@ -40,11 +40,11 @@ export default function Experience() {
 			<Typography>
 				{t(`${Sections.Experience}.description`)}
 			</Typography>
-			<TimelineC>
+			<Timeline>
 				{timelineItems.map((item, i) => (
 					<TimelineItem key={i} item={item} />
 				))}
-			</TimelineC>
+			</Timeline>
 		</Section>
 	);
 }

From 3f5b1f14d6a448b20256a11fef676e8b45f74d3b Mon Sep 17 00:00:00 2001
From: Nicholas Krebs <nicholas@nicholas-krebs.ch>
Date: Sun, 18 Feb 2024 15:33:31 +0100
Subject: [PATCH 6/6] fix: mobile timeline

---
 src/components/experience/Timeline.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/experience/Timeline.tsx b/src/components/experience/Timeline.tsx
index 7e6bc26..df3837c 100644
--- a/src/components/experience/Timeline.tsx
+++ b/src/components/experience/Timeline.tsx
@@ -1,11 +1,19 @@
 import { default as MuiTimeline } from "@mui/lab/Timeline";
+import { useMediaQuery, useTheme } from "@mui/material";
+import { timelineOppositeContentClasses } from "@mui/lab";
 
 type Props = {
 	children: React.ReactNode;
 }
 export default function Timeline({children}: Props) {
+	const theme = useTheme();
+	const desktop = useMediaQuery(theme.breakpoints.up("md"));
+
 	return (
-		<MuiTimeline position="alternate">
+		<MuiTimeline
+			position={desktop ? "alternate" : "right"}
+			sx={desktop ? undefined : {[`& .${timelineOppositeContentClasses.root}`]: {flex: 0.2}}}
+		>
 			{children}
 		</MuiTimeline>
 	);