fix: header navigation

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"
 	},

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 = {
@@ -22,14 +24,16 @@ 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="#">
-						<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.disabled"}}>
+			<Link
+				activeClass="active"
+				to={href}
+				spy={true}
+				smooth={true}
+				offset={-250}
+				duration={500}
+				style={{cursor: "pointer", textDecoration: "none"}}
+				activeStyle={{color: "white"}}
+			>
+				{children}
+			</Link>
+		</Typography>
+	);
+}

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>
 	);
 }

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>
 	);

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>
 	);

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,13 +29,19 @@ const light = createTheme({
 		mode: "light",
 		primary: {main: "#507cff"},
 		secondary: {main: "#ffffff"},
+		text: {
+			disabled: "#ffffff8c",
+		},
 	},
 });
 const dark = createTheme({
 	palette: {
 		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>

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>
 	);
 }

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