feat: component formatting

apps/app/content/cv/cv.mdx

@@ -76,13 +76,12 @@ export const Constants = {
 </Divider>
 
 </Stack>
-
-<Typography pt={1} variant="body1" gutterBottom textAlign="center">
-	Open minded Full-stack developer with {Constants.yearsOfExperience}+ years of
+<Typography pt={1} variant="body1"  gutterBottom textAlign="center">
+	{`Open minded Full-stack developer with ${Constants.yearsOfExperience}+ years of
 	comprehensive expertise in Web App Development with willingness to learn and
 	master Gen AI development. I take great care in the code quality, readability,
 	automator, architecture of the things I build. I'm also an open-source
-	enthusiast and love to collaborate with open-source community.
+	enthusiast and love to collaborate with open-source community.`}
 </Typography>
 
 <Typography mt={1} variant="body1" textAlign="center" gutterBottom>
@@ -101,6 +100,7 @@ export const Constants = {
 	<SkillBadge skill="javascript" />
 
     <SkillBadge skill="react" />
+    <SkillBadge skill="next.js" skillLogo="nextdotjs" logoColor="#000000" />
     <SkillBadge skill="redux" logoColor="#764ABC" />
 
     <SkillBadge skill="sass" />
@@ -146,7 +146,7 @@ export const Constants = {
 	/>
 </Stack>
 
-<CvSectionDivider>##### Work experience</CvSectionDivider>
+<CvSectionDivider>Work experience</CvSectionDivider>
 
 **McKinsey & Company**
 
@@ -173,7 +173,7 @@ export const Constants = {
 - **Intern**
   _2018 Jan - 2019 Jun_
 
-<CvSectionDivider>##### Projects</CvSectionDivider>
+<CvSectionDivider>Projects</CvSectionDivider>
 
 **MCP Browser Kit**
 _A pair of MCP server and browser extension that enables AI assistants to interact with your local browsers_
@@ -227,7 +227,7 @@ _A combination of e-commerce website and vending machines, these components comm
 - Developing a single page web app for admin and customer with Angular 2
 - Developing and build a simple vending machine with Arduino and other hardwares
 
-<CvSectionDivider>##### Achievements</CvSectionDivider>
+<CvSectionDivider>Achievements</CvSectionDivider>
 
 **Certificate Of Agile Software Development With Scrum**
 _Axon Active Vietnam - 2016_
@@ -238,12 +238,12 @@ _Microsoft Vietnam - 2015_
 **2ND Prize App Studio**
 _Ton Duc Thang University & Microsoft Vietnam - 2014_
 
-<CvSectionDivider>##### Education</CvSectionDivider>
+<CvSectionDivider>Education</CvSectionDivider>
 
 **BSc in Computer Science**
 _Ton Duc Thang University, Ho Chi Minh - 2018_
 
-<CvSectionDivider>##### Contact info</CvSectionDivider>
+<CvSectionDivider>Contact info</CvSectionDivider>
 
 <Box
 	sx={{
@@ -273,7 +273,7 @@ _Ton Duc Thang University, Ho Chi Minh - 2018_
     		<Typography>
     			{"Ho Chi Minh, Vietnam"}
     		</Typography>
-    </Box>
+    	</Box>
 
 <CvSectionDivider />
 

apps/app/package.json

@@ -10,7 +10,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"devDependencies": {
-		"gatsby": "^5.14.1",
+		"gatsby": "^5.14.5",
 		"typescript": "^5.7.3"
 	},
 	"resolutions": {

apps/app/src/components/fragments/app-footer/index.tsx

@@ -1,5 +1,4 @@
-import GitHubIcon from "@mui/icons-material/GitHub";
-import { Box, Divider, Link } from "@mui/material";
+import { Box, Divider } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 
@@ -18,21 +17,12 @@ export const AppFooter = ({ buildNumber, mode, rev, year }: AppFooterProps) => (
 		<Box css={styles.contentContainer}>
 			<Box css={styles.topWrapper}>
 				<Box css={styles.leftWrapper}>
-					<Typography variant="caption">{`Copyright © ${year}`}</Typography>
 					<Typography variant="caption">{`Rev: ${rev}`}</Typography>
 					<Typography variant="caption">{`Build: ${buildNumber}`}</Typography>
 					<Typography variant="caption">{`Mode: ${mode}`}</Typography>
 				</Box>
 				<Box css={styles.rightWrapper}>
-					<Link
-						color="inherit"
-						href="https://github.com/ndthanhdev/ndthanhdev.github.io"
-						target="_blank"
-						underline="none"
-						variant="h5"
-					>
-						<GitHubIcon />
-					</Link>
+					<Typography variant="caption">{`Copyright © ${year}`}</Typography>
 				</Box>
 			</Box>
 		</Box>

apps/app/src/components/fragments/app-footer/styles.ts

@@ -17,9 +17,11 @@ export const styles = {
 			flexDirection: "column",
 		}),
 
-	rightWrapper: () =>
+	rightWrapper: (theme: AppTheme) =>
 		css({
+			color: theme.palette.text.secondary,
 			display: "flex",
+			flexDirection: "column",
 			justifyContent: "flex-end",
 		}),
 

apps/app/src/components/fragments/app-header/index.tsx

@@ -1,4 +1,5 @@
 import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
+import GitHubIcon from "@mui/icons-material/GitHub";
 import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
 import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
 import AppBar from "@mui/material/AppBar";
@@ -53,7 +54,7 @@ export const AppHeader = ({
 							about
 						</Button>
 						<Button
-							arial-label="Apps"
+							aria-label="Apps"
 							component={GatsbyLink}
 							size="large"
 							to="/projects"
@@ -64,9 +65,18 @@ export const AppHeader = ({
 					</Stack>
 					<Stack alignItems="center" css={styles.right.root} direction="row">
 						<IconButton
-							area-label="Toggle theme mode"
+							aria-label="GitHub"
+							color="primary"
+							component={Link}
+							href="https://github.com/ndthanhdev/ndthanhdev.github.io"
+							size="large"
+							target="_blank"
+						>
+							<GitHubIcon />
+						</IconButton>
+						<IconButton
+							aria-label="Toggle theme mode"
 							color="primary"
-							edge="end"
 							onClick={onToggleThemeMode}
 							size="large"
 						>

apps/app/src/components/fragments/app-header/styles.ts

@@ -25,8 +25,7 @@ export const styles = {
 	},
 
 	right: {
-		root: (theme: AppTheme) =>
-			css({ gap: theme.spacing(2), gridArea: "right" }),
+		root: () => css({ gridArea: "right" }),
 	},
 
 	toolbar: (theme: AppTheme) =>

apps/app/src/components/fragments/cv-section-divider/index.tsx

@@ -1,5 +1,6 @@
 import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import { type ReactNode } from "react";
 
 import { styles } from "./styles";
@@ -9,6 +10,17 @@ export interface CvSectionDividerProps {
 }
 
 export const CvSectionDivider = ({ children }: CvSectionDividerProps) => {
+	const renderChildren = () => {
+		if (typeof children === "string") {
+			return (
+				<Typography gutterBottom variant="subtitle1">
+					{children}
+				</Typography>
+			);
+		}
+		return children;
+	};
+
 	return (
 		<Stack
 			css={styles.stack}
@@ -18,7 +30,7 @@ export const CvSectionDivider = ({ children }: CvSectionDividerProps) => {
 			mt={6}
 		>
 			<Divider css={styles.divider} textAlign="center">
-				{children}
+				{renderChildren()}
 			</Divider>
 		</Stack>
 	);

apps/app/src/providers/mdx-provider.tsx → apps/app/src/providers/mdx-provider/index.tsx

@@ -4,7 +4,7 @@ import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 
-import { styles } from "./mdx-provider/styles";
+import { styles } from "./styles";
 
 export type AppMDXProviderProps = React.PropsWithChildren<object>;
 

etc/scripts/package.json

@@ -5,7 +5,7 @@
 	"devDependencies": {
 		"tsx": "^4.19.2",
 		"typescript": "^5.7.3",
-		"zx": "^8.3.0"
+		"zx": "^8.7.1"
 	},
 	"dependencies": {
 		"luxon": "^3.5.0"

package.json

@@ -25,8 +25,8 @@
 		"@fontsource/roboto": "^5.1.0",
 		"@mdx-js/mdx": "^3.1.0",
 		"@mdx-js/react": "^3.1.0",
-		"@mui/icons-material": "^5.16.12",
-		"@mui/material": "^5.16.12",
+		"@mui/icons-material": "^5.18.0",
+		"@mui/material": "^5.18.0",
 		"@sindresorhus/slugify": "^2.2.1",
 		"@theme-ui/css": "^0.16.2",
 		"@theme-ui/preset-sketchy": "^0.16.2",
@@ -36,28 +36,28 @@
 		"@types/node": "^22.10.2",
 		"@types/prismjs": "^1.26.5",
 		"@types/ramda": "^0.29.12",
-		"@types/react": "^18.3.18",
-		"@types/react-dom": "^18.3.5",
+		"@types/react": "^18.3.23",
+		"@types/react-dom": "^18.3.7",
 		"@types/react-helmet": "^6.1.11",
 		"@typescript-eslint/eslint-plugin": "^7.18.0",
 		"@typescript-eslint/parser": "^7.18.0",
 		"eslint": "^8.57.1",
-		"eslint-config-prettier": "^9.1.0",
+		"eslint-config-prettier": "^9.1.2",
 		"eslint-plugin-jsonc": "^2.18.2",
 		"eslint-plugin-perfectionist": "^4.4.0",
 		"eslint-plugin-prettier": "^5.2.1",
-		"eslint-plugin-react": "^7.37.3",
+		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^4.6.2",
 		"eslint-plugin-unicorn": "^56.0.1",
 		"eslint-plugin-yml": "^1.16.0",
 		"fs-extra": "^11.2.0",
-		"gatsby": "^5.14.1",
+		"gatsby": "^5.14.5",
 		"gatsby-plugin-emotion": "^8.14.0",
 		"gatsby-plugin-google-tagmanager": "^5.14.0",
 		"gatsby-plugin-image": "^3.14.0",
 		"gatsby-plugin-layout": "^4.14.0",
 		"gatsby-plugin-manifest": "^5.14.0",
-		"gatsby-plugin-mdx": "^5.14.0",
+		"gatsby-plugin-mdx": "^5.14.1",
 		"gatsby-plugin-page-creator": "^5.14.0",
 		"gatsby-plugin-sass": "^6.14.0",
 		"gatsby-plugin-sharp": "^5.14.0",
@@ -79,7 +79,7 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-helmet": "^6.1.0",
-		"react-toastify": "^11.0.3",
+		"react-toastify": "^11.0.5",
 		"rooks": "^7.14.1",
 		"sass": "^1.83.4",
 		"syncpack": "^13.0.0",
@@ -89,11 +89,11 @@
 		"type-fest": "^4.30.2",
 		"typescript": "^5.7.3",
 		"typescript-eslint": "^7.18.0",
-		"usehooks-ts": "^3.1.0",
-		"zustand": "^4.5.6",
-		"zx": "^8.3.0"
+		"usehooks-ts": "^3.1.1",
+		"zustand": "^4.5.7",
+		"zx": "^8.7.1"
 	},
 	"engines": {
-		"node": "22.12.0"
+		"node": "^22"
 	}
 }