add wip

Author: ndthanhdev

gatsby-config.js

@@ -21,7 +21,7 @@ const config = {
 		{
 			resolve: "gatsby-plugin-manifest",
 			options: {
-				icon: "src/shell/icon.png",
+				icon: "src/shell/icon.svg",
 			},
 		},
 		"gatsby-plugin-mdx",

src/components/wip.tsx

@@ -0,0 +1,28 @@
+import { AppTheme } from "@/shell/theme";
+import { css } from "@emotion/react";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import * as React from "react";
+
+export type WipProps = React.PropsWithChildren<{}>;
+
+const styles = {
+	root: (theme: AppTheme) =>
+		css({
+			minHeight: "90vh",
+		}),
+	description: (theme: AppTheme) =>
+		css({
+			fontWeight: theme.typography.fontWeightMedium,
+		}),
+};
+
+export const Wip = ({}: WipProps) => {
+	return (
+		<Stack css={styles.root} justifyContent="center" alignItems="center">
+			<Typography css={styles.description} variant="h1">
+				{"Wip ;)"}
+			</Typography>
+		</Stack>
+	);
+};

src/layouts/main/main.tsx

@@ -37,8 +37,6 @@ const styles = {
 				gridArea: "left",
 				textTransform: "uppercase",
 			}),
-
-		brand: (theme: AppTheme) => css({}),
 	},
 
 	right: {
@@ -59,6 +57,11 @@ const styles = {
 			`,
 			alignItems: "center",
 		}),
+
+	brand: (theme: AppTheme) =>
+		css({
+			fontWeight: theme.typography.fontWeightBold,
+		}),
 };
 
 export const MainLayout = ({
@@ -75,7 +78,7 @@ export const MainLayout = ({
 						<Stack css={styles.left.root} direction="row" alignItems="center">
 							<Link
 								component={GatsbyLink}
-								css={styles.left.brand}
+								css={styles.brand}
 								variant="h6"
 								underline="none"
 								to="/"
@@ -86,9 +89,17 @@ export const MainLayout = ({
 								component={GatsbyLink}
 								variant="text"
 								size="large"
-								to="/posts"
+								to="/about"
+							>
+								about
+							</Button>
+							<Button
+								component={GatsbyLink}
+								variant="text"
+								size="large"
+								to="/projects"
 							>
-								Posts
+								Projects
 							</Button>
 						</Stack>
 						<Stack css={styles.right.root} direction="row" alignItems="center">

src/pages/about.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Link, navigate } from "gatsby";
+import { Shell } from "@/shell";
+import { MainLayoutContainer } from "@/layouts/main";
+import Stack from "@mui/material/Stack";
+import { css } from "@emotion/react";
+import { AppTheme } from "@/shell/theme";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+
+const styles = {
+	mainWrapper: (theme: AppTheme) =>
+		css({
+			minHeight: "90vh",
+		}),
+
+	brief: (theme: AppTheme) =>
+		css({
+			fontWeight: theme.typography.fontWeightMedium,
+		}),
+};
+
+function Index() {
+	return (
+		<Shell>
+			<MainLayoutContainer>
+				<Container maxWidth="lg">
+					<Stack
+						css={styles.mainWrapper}
+						justifyContent="center"
+						alignItems="center"
+					>
+						<Typography css={styles.brief} variant="h1">
+							{"A developer, an open source lover and a gamer"}
+						</Typography>
+					</Stack>
+				</Container>
+			</MainLayoutContainer>
+		</Shell>
+	);
+}
+
+export default Index;

src/pages/index.tsx

@@ -3,12 +3,13 @@ import { Link, navigate } from "gatsby";
 import { Shell } from "@/shell";
 import { MainLayoutContainer } from "@/layouts/main";
 import Stack from "@mui/material/Stack";
+import { Wip } from "@/components/wip";
 
 function Index() {
 	return (
 		<Shell>
 			<MainLayoutContainer>
-				<Stack>Home</Stack>
+				<Wip />
 			</MainLayoutContainer>
 		</Shell>
 	);

src/pages/posts.tsx src/pages/projects.tsxsrc/pages/posts.tsx renamed to src/pages/projects.tsx

@@ -3,15 +3,16 @@ import { Link, navigate } from "gatsby";
 import { Shell } from "@/shell";
 import { MainLayoutContainer } from "@/layouts/main";
 import Stack from "@mui/material/Stack";
+import { Wip } from "@/components/wip";
 
-function Index() {
+function Projects() {
 	return (
 		<Shell>
 			<MainLayoutContainer>
-				<Stack>Posts</Stack>
+				<Wip />
 			</MainLayoutContainer>
 		</Shell>
 	);
 }
 
-export default Index;
+export default Projects;

src/shell/icon.png

@@ -3,6 +3,7 @@ import {
 	ThemeProvider as MuiThemeProvider,
 	createTheme,
 	Theme as MuiTheme,
+	ThemeOptions,
 } from "@mui/material";
 import * as React from "react";
 import { create } from "zustand";
@@ -19,9 +20,24 @@ export enum ThemeMode {
 	Dark = "dark",
 }
 
-export const lightTheme = createTheme({});
+const themeOption = {
+	palette: {
+		primary: {
+			main: "#6750A4",
+		},
+		secondary: {
+			main: "#958da4",
+		},
+	},
+} satisfies ThemeOptions;
+
+export const lightTheme = createTheme({
+	...themeOption,
+});
 export const darkTheme = createTheme({
+	...themeOption,
 	palette: {
+		...themeOption.palette,
 		mode: "dark",
 	},
 });
@@ -34,7 +50,7 @@ export type ThemeModeState = {
 export const useThemeMode = create(
 	persist<ThemeModeState>(
 		(set) => ({
-			themeMode: ThemeMode.Light,
+			themeMode: ThemeMode.Dark,
 			setThemeMode: (mode) =>
 				set((state) => ({
 					themeMode: mode,