Initial commit

components/bio.js

@@ -0,0 +1,12 @@
+import { Box } from "@chakra-ui/react";
+import styled from "@emotion/styled";
+
+export const BioSection = styled(Box)`
+  padding-left: 3.4em;
+  text-indent: -3.4em;
+`;
+
+export const BioYear = styled.span`
+  font-weight: bold;
+  margin-right: 1em;
+`;

components/chakra.js

@@ -0,0 +1,73 @@
+import {
+  ChakraProvider,
+  cookieStorageManager,
+  localStorageManager,
+} from "@chakra-ui/react";
+import { extendTheme } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
+
+const styles = {
+  global: (props) => ({
+    body: {
+      bg: mode("#f0e7db", "#202023")(props),
+    },
+  }),
+};
+
+const components = {
+  Heading: {
+    variants: {
+      "section-title": {
+        textDecoration: "underline",
+        fontSize: 20,
+        textUnderlineOffset: 6,
+        textDecorationColor: "#525252",
+        textDecorationThickness: 4,
+        marginTop: 3,
+        marginBottom: 4,
+      },
+    },
+  },
+  Link: {
+    baseStyle: (props) => ({
+      color: mode("#3d7aed", "#ff63c3")(props),
+      textUnderlineOffset: 3,
+    }),
+  },
+};
+
+const fonts = {
+  heading: "'M PLUS Rounded 1c'",
+};
+
+const colors = {
+  grassTeal: "#88ccca",
+};
+
+const config = {
+  initialColorMode: "dark",
+  useSystemColorMode: true,
+};
+
+const theme = extendTheme({ config, styles, components, fonts, colors });
+
+export default function Chakra({ cookies, children }) {
+  const colorModeManager =
+    typeof cookies === "string"
+      ? cookieStorageManager(cookies)
+      : localStorageManager;
+
+  return (
+    <ChakraProvider theme={theme} colorModeManager={colorModeManager}>
+      {children}
+    </ChakraProvider>
+  );
+}
+
+export async function getServerSideProps({ req }) {
+  return {
+    props: {
+      cookies: req.headers.cookie ?? "",
+    },
+  };
+}

components/footer.js

@@ -0,0 +1,15 @@
+import { Box, Link } from "@chakra-ui/react";
+
+const Footer = () => {
+  return (
+    <Box align="center" opacity={0.4} fontSize="sm">
+      &copy; {new Date().getFullYear()} Khemiri Mohamed Hedi. All Rights
+      Reserved. largely inspired by{" "}
+      <Link href="https://github.com/craftzdog/craftzdog-homepage">
+        craftzdog
+      </Link>
+    </Box>
+  );
+};
+
+export default Footer;

components/grid-item.js

@@ -0,0 +1,53 @@
+import NextLink from "next/link";
+import Image from "next/image";
+import { Box, Text, LinkBox, LinkOverlay } from "@chakra-ui/react";
+import { Global } from "@emotion/react";
+
+export const GridItem = ({ children, href, title, thumbnail }) => (
+  <Box w="100%" textAlign="center">
+    <LinkBox cursor="pointer">
+      <Image
+        src={thumbnail}
+        alt={title}
+        className="grid-item-thumbnail"
+        placeholder="blur"
+        loading="lazy"
+      />
+      <LinkOverlay href={href} target="_blank">
+        <Text mt={2}>{title}</Text>
+      </LinkOverlay>
+      <Text fontSize={14}>{children}</Text>
+    </LinkBox>
+  </Box>
+);
+
+export const WorkGridItem = ({ children, id, title, thumbnail }) => (
+  <Box w="100%" textAlign="center">
+    <NextLink href={`/works/${id}`} passHref scroll={false}>
+      <LinkBox cursor="pointer">
+        <Image
+          src={thumbnail}
+          alt={title}
+          className="grid-item-thumbnail"
+          placeholder="blur"
+        />
+        <LinkOverlay href={`/works/${id}`}>
+          <Text mt={2} fontSize={20}>
+            {title}
+          </Text>
+        </LinkOverlay>
+        <Text fontSize={14}>{children}</Text>
+      </LinkBox>
+    </NextLink>
+  </Box>
+);
+
+export const GridItemStyle = () => (
+  <Global
+    styles={`
+      .grid-item-thumbnail {
+        border-radius: 12px;
+      }
+    `}
+  />
+);

components/layouts/article.js

@@ -0,0 +1,38 @@
+import { motion } from "framer-motion";
+import Head from "next/head";
+import { GridItemStyle } from "../grid-item";
+
+const variants = {
+  hidden: { opacity: 0, x: 0, y: 20 },
+  enter: { opacity: 1, x: 0, y: 0 },
+  exit: { opacity: 0, x: -0, y: 20 },
+};
+
+const Layout = ({ children, title }) => {
+  const t = `${title} - Khemiri Mohamed Hedi`;
+  return (
+    <motion.article
+      initial="hidden"
+      animate="enter"
+      exit="exit"
+      variants={variants}
+      transition={{ duration: 0.4, type: "easeInOut" }}
+      style={{ position: "relative" }}
+    >
+      <>
+        {title && (
+          <Head>
+            <title>{t}</title>
+            <meta name="twitter:title" content={t} />
+            <meta property="og:title" content={t} />
+          </Head>
+        )}
+        {children}
+
+        <GridItemStyle />
+      </>
+    </motion.article>
+  );
+};
+
+export default Layout;

components/layouts/main.js

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import dynamic from "next/dynamic";
+import NavBar from "../navbar";
+import { Box, Container } from "@chakra-ui/react";
+import Footer from "../footer";
+
+const Main = ({ children, router }) => {
+  return (
+    <Box as="main" pb={8}>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Khemiri Mohamed Hedi's homepage" />
+        <meta name="author" content="Khemiri Mohamed Hedi" />
+        <meta name="author" content="Khemiri Mohamed Hedi" />
+        <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+        <meta name="twitter:title" content="Khemiri Mohamed Hedi" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@hedi.khe" />
+        <meta name="twitter:creator" content="@hedi.khe" />
+        <meta name="twitter:image" content="https://www.craftz.dog/card.png" />
+        <meta property="og:site_name" content="Khemiri Mohamed Hedi" />
+        <meta name="og:title" content="Khemiri Mohamed Hedi" />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content="https://www.craftz.dog/card.png" />
+        <title>Khemiri Mohamed Hedi - Homepage</title>
+      </Head>
+
+      <NavBar path={router.asPath} />
+
+      <Container maxW="container.md" pt={14}>
+        {children}
+        <Footer />
+      </Container>
+    </Box>
+  );
+};
+
+export default Main;

components/navbar.js

@@ -0,0 +1,145 @@
+import NextLink from "next/link";
+import {
+  Container,
+  Box,
+  Link,
+  Stack,
+  Heading,
+  Flex,
+  Menu,
+  MenuItem,
+  Text,
+  MenuList,
+  MenuButton,
+  IconButton,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import styled from "@emotion/styled";
+import { HamburgerIcon } from "@chakra-ui/icons";
+import ThemeToggleButton from "./theme-toggle-button";
+
+const LogoBox = styled.span`
+  font-weight: bold;
+  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  height: 30px;
+  line-height: 20px;
+  padding: 10px;
+`;
+const LinkItem = ({ href, path, target, children, ...props }) => {
+  const active = path === href;
+  const inactiveColor = useColorModeValue("gray200", "whiteAlpha.900");
+  return (
+    <NextLink href={href} passHref scroll={false}>
+      <Link
+        p={2}
+        bg={active ? "grassTeal" : undefined}
+        color={active ? "#202023" : inactiveColor}
+        target={target}
+        {...props}
+      >
+        {children}
+      </Link>
+    </NextLink>
+  );
+};
+
+const Navbar = (props) => {
+  const { path } = props;
+
+  return (
+    <Box
+      position="fixed"
+      as="nav"
+      w="100%"
+      bg={useColorModeValue("#ffffff40", "#20202380")}
+      css={{ backdropFilter: "blur(10px)" }}
+      zIndex={1}
+      {...props}
+    >
+      <Container
+        display="flex"
+        p={2}
+        maxW="container.md"
+        wrap="wrap"
+        align="center"
+        justify="space-between"
+      >
+        <Flex align="center" mr={5}>
+          <Heading as="h1" size="lg" letterSpacing={"tighter"}>
+            <NextLink href="/" passHref scroll={false}>
+              <Link>
+                <LogoBox>
+                  <Text
+                    color={useColorModeValue("gray.800", "whiteAlpha.900")}
+                    fontFamily='M PLUS Rounded 1c", sans-serif'
+                    fontWeight="bold"
+                    ml={3}
+                  >
+                    Mohamed Hedi Khemiri
+                  </Text>
+                </LogoBox>
+              </Link>
+            </NextLink>
+          </Heading>
+        </Flex>
+
+        <Stack
+          direction={{ base: "column", md: "row" }}
+          display={{ base: "none", md: "flex" }}
+          width={{ base: "full", md: "auto" }}
+          alignItems="center"
+          flexGrow={1}
+          mt={{ base: 4, md: 0 }}
+        >
+          <LinkItem href="/projects" path={path}>
+            Projects
+          </LinkItem>
+          <LinkItem
+            target="_blank"
+            href="https://github.com/craftzdog/craftzdog-homepage"
+            path={path}
+            display="inline-flex"
+            alignItems="center"
+            style={{ gap: 4 }}
+            pl={2}
+          >
+            Source
+          </LinkItem>
+        </Stack>
+
+        <Box flex={1} align="right">
+          <ThemeToggleButton />
+
+          <Box ml={2} display={{ base: "inline-block", md: "none" }}>
+            <Menu isLazy id="navbar-menu">
+              <MenuButton
+                as={IconButton}
+                icon={<HamburgerIcon />}
+                variant="outline"
+                aria-label="Options"
+              />
+              <MenuList>
+                <NextLink href="/" passHref>
+                  <MenuItem as={Link}>About</MenuItem>
+                </NextLink>
+                <NextLink href="/projects" passHref>
+                  <MenuItem as={Link}>Projects</MenuItem>
+                </NextLink>
+                <MenuItem
+                  as={Link}
+                  href="https://github.com/craftzdog/craftzdog-homepage"
+                >
+                  View Source
+                </MenuItem>
+              </MenuList>
+            </Menu>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default Navbar;

components/paragraph.js

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+const Paragraph = styled.p`
+  text-align: justify;
+  text-indent: 1em;
+`;
+
+export default Paragraph;