diff --git a/components/bio.js b/components/bio.js new file mode 100644 index 0000000..599a99c --- /dev/null +++ b/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; +`; diff --git a/components/chakra.js b/components/chakra.js new file mode 100644 index 0000000..bd40f6e --- /dev/null +++ b/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 ( + + {children} + + ); +} + +export async function getServerSideProps({ req }) { + return { + props: { + cookies: req.headers.cookie ?? "", + }, + }; +} diff --git a/components/footer.js b/components/footer.js new file mode 100644 index 0000000..bb0a743 --- /dev/null +++ b/components/footer.js @@ -0,0 +1,15 @@ +import { Box, Link } from "@chakra-ui/react"; + +const Footer = () => { + return ( + + © {new Date().getFullYear()} Khemiri Mohamed Hedi. All Rights + Reserved. largely inspired by{" "} + + craftzdog + + + ); +}; + +export default Footer; diff --git a/components/grid-item.js b/components/grid-item.js new file mode 100644 index 0000000..e405289 --- /dev/null +++ b/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 }) => ( + + + {title} + + {title} + + {children} + + +); + +export const WorkGridItem = ({ children, id, title, thumbnail }) => ( + + + + {title} + + + {title} + + + {children} + + + +); + +export const GridItemStyle = () => ( + +); diff --git a/components/layouts/article.js b/components/layouts/article.js new file mode 100644 index 0000000..412f5b6 --- /dev/null +++ b/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 ( + + <> + {title && ( + + {t} + + + + )} + {children} + + + + + ); +}; + +export default Layout; diff --git a/components/layouts/main.js b/components/layouts/main.js new file mode 100644 index 0000000..43c67d7 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + + + + Khemiri Mohamed Hedi - Homepage + + + + + + {children} +