From 3673dd6ace47ff21342107f119f93efa3e918abd Mon Sep 17 00:00:00 2001 From: HediKhemiri3001 Date: Tue, 14 Jun 2022 20:23:19 +0100 Subject: [PATCH] Initial commit --- components/bio.js | 12 + components/chakra.js | 73 + components/footer.js | 15 + components/grid-item.js | 53 + components/layouts/article.js | 38 + components/layouts/main.js | 39 + components/navbar.js | 145 + components/paragraph.js | 8 + components/section.js | 21 + components/theme-toggle-button.js | 29 + next.config.js | 9 +- package-lock.json | 8741 +++++++++++++++++++++++++++++ package.json | 5 + pages/_app.js | 30 +- pages/index.js | 175 +- pages/projects.js | 52 + public/avatar.png | Bin 0 -> 3293953 bytes yarn.lock | 4384 ++++++++++----- 18 files changed, 12215 insertions(+), 1614 deletions(-) create mode 100644 components/bio.js create mode 100644 components/chakra.js create mode 100644 components/footer.js create mode 100644 components/grid-item.js create mode 100644 components/layouts/article.js create mode 100644 components/layouts/main.js create mode 100644 components/navbar.js create mode 100644 components/paragraph.js create mode 100644 components/section.js create mode 100644 components/theme-toggle-button.js create mode 100644 package-lock.json create mode 100644 pages/projects.js create mode 100644 public/avatar.png 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} +