init

theme/AppTheme.ts

@@ -0,0 +1,47 @@
+import { extendTheme, ThemeConfig } from "@chakra-ui/react";
+import { createBreakpoints } from "@chakra-ui/theme-tools";
+import buttons from "./components/buttonStyles";
+
+const config: ThemeConfig = {
+  initialColorMode: "dark",
+  useSystemColorMode: false,
+};
+
+// const breakpoints = createBreakpoints({
+//   sm: "30em",
+//   md: "48em",
+//   lg: "75em",
+//   xl: "85em",
+//   "2xl": "100em",
+// });
+
+const AppTheme = extendTheme({
+  config,
+  colors: {
+    brand: {
+      main: "#3138dc",
+      primary: "#0068ff",
+      secondary: "#0086ff",
+      hover: "#00aec1",
+      warning: "#ffbd48",
+      danger: "#FC8181",
+      valid: "#00c17c",
+      footer: "#0097a7",
+      footerText: "black",
+      content: "#2d3748",
+    },
+  },
+  styles: {
+    global: {
+      body: {
+        bg: "gray.900",
+      },
+    },
+  },
+  components: {
+    Button: buttons,
+  },
+  // breakpoints,
+});
+
+export default AppTheme;

theme/components/buttonStyles.ts

@@ -0,0 +1,165 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import {
+  darken,
+  mode,
+  StyleFunctionProps,
+  whiten,
+} from "@chakra-ui/theme-tools";
+import { Dict } from "@chakra-ui/utils";
+
+const buttonStyles = {
+  // style object for base or default style
+  baseStyle: {},
+  // styles for different sizes ("sm", "md", "lg")
+  sizes: {},
+  // styles for different visual variants ("outline", "solid")
+  variants: {
+    contactPrimary: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "rgba(255, 255, 255, .15)",
+      fontSize: "xl",
+      p: "2",
+      _hover: {
+        bg: mode(
+          whiten("brand.primary", 20),
+          darken("brand.primary", 20)
+        )(props),
+      },
+    }),
+    contactSecondary: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.primary",
+      fontSize: "xl",
+      p: "2",
+      _hover: {
+        bg: mode(
+          whiten("brand.primary", 20),
+          darken("brand.primary", 20)
+        )(props),
+      },
+    }),
+    project: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "transparent",
+      fontSize: "md",
+      py: 2,
+      px: 4,
+      boxShadow:
+        "rgba(0, 134, 255, 0.2) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
+      border: "1px solid rgba(0, 134, 255, 0.4)",
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props),
+        boxShadow:
+          "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px",
+      },
+    }),
+    nav: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "transparent",
+      fontSize: "md",
+      px: "2",
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props),
+      },
+    }),
+    stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
+      bg: "transparent",
+      fontSize: "md",
+      px: "2",
+      _hover: {
+        textDecoration: "underline",
+      },
+    }),
+    credits: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.main",
+      fontSize: "lg",
+      p: 3,
+      color: "whiteAlpha",
+      _hover: {
+        bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props),
+      },
+    }),
+    backToTop: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "rgba(23, 25, 35, 0.5)",
+      fontSize: "lg",
+      py: 2,
+      px: 4,
+      color: "rgba(0, 134, 255, 0.6)",
+      boxShadow:
+        "rgba(0, 134, 255, 0.05) 0px 0px 15px, rgba(0, 134, 255, 0.1) 0px 0px 3px 1px",
+      border: "1px solid rgba(0, 134, 255, 0.15)",
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props),
+        boxShadow:
+          "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px",
+        color: "whiteAlpha.900",
+        border: "1px solid rgba(0, 134, 255, 1)",
+      },
+    }),
+    collapse: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "transparent",
+      fontSize: "md",
+      p: 2,
+      h: 8,
+      color: "brand.hover",
+      textDecoration: "underline",
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props),
+        color: "whiteAlpha.900",
+        textDecoration: "none",
+      },
+    }),
+    submit: (props: Dict<never> | StyleFunctionProps) => ({
+      fontSize: "lg",
+      py: 2,
+      px: 4,
+      type: "submit",
+      _hover: {
+        color: "whiteAlpha.900",
+        bg: mode(whiten("brand.valid", 20), darken("brand.valid", 20))(props),
+        _disabled: {
+          color: mode(
+            whiten("brand.danger", 20),
+            darken("brand.danger", 20)
+          )(props),
+          boxShadow:
+            "rgba(252, 129, 129, .95) 0px 0px 15px, rgba(252, 129, 129, 0.75) 0px 0px 3px 1px",
+          border: "1px solid #FC8181",
+        },
+      },
+    }),
+    mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
+      // bg: "transparent",
+      fontSize: "md",
+      px: "2",
+      boxShadow:
+        "rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props),
+        boxShadow:
+          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
+      },
+      _expanded: {
+        bg: "brand.primary",
+        boxShadow:
+          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
+        border: "1px solid #0068ff",
+      },
+    }),
+  },
+  // default values for `size` and `variant`
+  defaultProps: {},
+};
+
+export default buttonStyles;

theme/layout/BackToTopButton.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { Button, Flex, Link } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+
+interface BackToTopButtonProps {
+  show: boolean;
+}
+
+const BackToTopButton: FC<BackToTopButtonProps> = ({
+  show,
+}: BackToTopButtonProps) => {
+  return (
+    <Flex
+      d={show ? "flex" : "none"}
+      pos="fixed"
+      top="85vh"
+      right={{ base: "1.25rem", sm: "2rem", md: "3rem" }}
+    >
+      <Link href="/#top">
+        <Button variant="backToTop">
+          <Icon icon="akar-icons:chevron-up" />
+        </Button>
+      </Link>
+    </Flex>
+  );
+};
+
+export default BackToTopButton;

theme/layout/DesktopNav.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import { Button, HStack, Link } from "@chakra-ui/react";
+import navItems, { NavItem } from "./navItems";
+
+interface DesktopNavProps {
+  sticky?: boolean;
+}
+
+const DesktopNav: FC<DesktopNavProps> = ({ sticky }: DesktopNavProps) => {
+  return (
+    <HStack
+      as="nav"
+      d={{ base: "none", lg: "flex" }}
+      h="auto"
+      w="auto"
+      spacing={4}
+      // m="auto"
+      justifyContent="center"
+      alignContent="center"
+      alignItems="center"
+    >
+      {navItems.map((navItem: NavItem) => {
+        return (
+          <Link id={"dekstop-" + navItem[0]} key={navItem[0]} href={navItem[1]}>
+            <Button variant={sticky ? "stickyNav" : "nav"}>{navItem[0]}</Button>
+          </Link>
+        );
+      })}
+    </HStack>
+  );
+};
+
+export default DesktopNav;

theme/layout/Footer.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Box,
+  // HStack,
+  Text,
+  VStack,
+  Link,
+  // Icon,
+  // Image,
+  // Button,
+  // BoxProps,
+} from "@chakra-ui/react";
+// import BackToTopButton from "./BackToTopButton";
+// import { motion } from "framer-motion";
+
+// export const MotionBox = motion<BoxProps>(Box);
+
+const Footer = (): JSX.Element => {
+  // const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
+  // const lastScroll = useRef<number>(0);
+
+  // const handleScroll = (): void => {
+  //   if (window.scrollY >= 500) {
+  //     setShowBackToTop(true);
+  //   } else {
+  //     setShowBackToTop(false);
+  //   }
+
+  //   const currentScroll =
+  //     window.pageYOffset || document.documentElement.scrollTop;
+
+  //   lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
+  // };
+
+  // useEffect(() => {
+  //   if (!window) {
+  //     console.log("waiting for mount");
+  //   } else if (window) {
+  //     window.addEventListener("scroll", handleScroll);
+  //   }
+
+  //   return () => window.removeEventListener("scroll", handleScroll);
+  // }, []);
+  return (
+    <Box bg="brand.footer" as="footer" w="100%" h="auto">
+      {/* <BackToTopButton show={showBackToTop} /> */}
+      <VStack
+        h="auto"
+        w="auto"
+        py={12}
+        spacing={5}
+        justifyItems="center"
+        justifyContent="center"
+      >
+        {/* <HStack color="brand.footerText" spacing={2}>
+          <Text fontSize="xl">Deployed by</Text>
+          <Link
+            aria-label="Vercel"
+            href="https://vercel.com/"
+            rel="noopener"
+            target="_blank"
+          >
+            <Icon fontSize="1.75rem" icon="logos:vercel" />
+          </Link>
+        </HStack> */}
+        <VStack spacing={2}>
+          {/* <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+            <Link
+              href="https://github.com/LucidCreationsMedia"
+              target="_blank"
+              rel="noopener"
+            >
+              <Button
+                color="whiteAlpha"
+                variant="credits"
+                leftIcon={<Icon icon="akar-icons:github-fill" />}
+              >
+                View Codebase
+              </Button>
+            </Link>
+          </MotionBox> */}
+          <Text color="brand.footerText" fontSize="xs">
+            &copy; 2021 - {new Date().getFullYear()}
+            <Link
+              href="https://lucidcreations.media"
+              rel="noopener"
+              target="_blank"
+            >
+              Lucid Creations Media
+            </Link>
+          </Text>
+        </VStack>
+      </VStack>
+    </Box>
+  );
+};
+
+export default Footer;

theme/layout/Header.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  Heading,
+  HStack,
+  Box,
+  IconButton,
+  Flex,
+  Menu,
+  MenuButton,
+} from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import DesktopNav from "./DesktopNav";
+import MobileNav from "./MobileNav";
+
+const Header = (): JSX.Element => {
+  // Sticky Navbar, Scroll Direction, and Back to Top Button Visibility
+  const [stickyNavbar, setStickyNavbar] = useState<boolean>(false);
+  const lastScroll = useRef<number>(0);
+  const [scrollDirection, setScrollDirection] = useState<"up" | "down" | "top">(
+    "top"
+  );
+  // const [scroll, setScroll] = useState<number>(0);
+
+  const handleScroll = (): void => {
+    // Sticky Nav
+    if (window.scrollY >= 20) {
+      setStickyNavbar(true);
+    } else {
+      setStickyNavbar(false);
+    }
+
+    // Scroll Direction
+    const currentScroll =
+      window.scrollY || window.pageYOffset || document.body.scrollTop;
+
+    if (currentScroll > lastScroll.current) {
+      setScrollDirection("down");
+    } else if (currentScroll <= 20) {
+      setScrollDirection("top");
+    } else {
+      setScrollDirection("up");
+    }
+
+    lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
+    // setScroll(lastScroll.current = currentScroll <= 0 ? 0 : currentScroll)
+  };
+
+  useEffect(() => {
+    if (!window) {
+      console.log("waiting for mount");
+    } else if (window) {
+      window.addEventListener("scroll", handleScroll);
+    }
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  // Mobile Menu Icon && Open/Close
+  const [open, setOpen] = useState<boolean>(false);
+  const [hover, setHover] = useState<boolean>(false);
+
+  const menuIcon = (): JSX.Element => {
+    const iconType = {
+      default: <Icon icon="bx:bx-menu-alt-right" />,
+      hover: <Icon icon="bx:bx-menu" />,
+      open: <Icon icon="bx:bx-x" />,
+    };
+
+    if (open) {
+      return iconType.open;
+    } else if (hover) {
+      return iconType.hover;
+    } else {
+      return iconType.default;
+    }
+  };
+
+  return (
+    <Box
+      zIndex={1000000}
+      w="100%"
+      pos="fixed"
+      top="0"
+      alignItems={"center"}
+      boxShadow={
+        open
+          ? "none"
+          : stickyNavbar
+          ? "rgba(0, 134, 255, 0.75) 0px 0px 15px, rgba(0, 134, 255, 0.5) 0px 0px 3px 1px"
+          : "none"
+      }
+      bg={
+        open
+          ? "brand.main"
+          : stickyNavbar
+          ? "rgba(49, 56, 220, 0.9)"
+          : "transparent"
+      }
+      d={
+        scrollDirection === "up" || scrollDirection === "top" ? "block" : "none"
+      }
+      transition=".5s ease"
+      borderRadius="0px 0px 10px 10px"
+      _hover={{
+        bg: open ? "brand.main" : stickyNavbar ? "brand.main" : "transparent",
+        boxShadow: open
+          ? "none"
+          : stickyNavbar
+          ? "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px"
+          : "none",
+      }}
+      h={open ? "125px" : "auto"}
+    >
+      {/* Logo | Site Name */}
+      <Flex
+        width="100%"
+        justifyContent={{ base: "flex-start", sm: "center" }}
+        alignItems="center"
+        height={12}
+        top={0}
+        position="absolute"
+        ml={4}
+        d={{ base: "flex", lg: "none" }}
+      >
+        <Heading as="h1" fontSize="lg">
+          LCM Potty Chart
+        </Heading>
+      </Flex>
+
+      {/* Desktop Nav Items and Mobile Menu Button */}
+      <Box h="auto" w="100%" px={4}>
+        <Flex h={12} alignItems={"center"} justifyContent={"space-between"}>
+          <HStack
+            w="100%"
+            h="auto"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <Box w="auto" d={{ base: "flex", lg: "none " }}></Box>
+            <Box w="100%" d={{ base: "none", lg: "flex" }} m="auto">
+              <Heading as="h1" size="md">
+                LCM Potty Chart
+              </Heading>
+            </Box>
+            <DesktopNav sticky={stickyNavbar} />
+          </HStack>
+          <Menu isLazy lazyBehavior="unmount" isOpen={open}>
+            <MenuButton
+              as={IconButton}
+              aria-label="Mobile Menu"
+              icon={menuIcon()}
+              onClick={() => setOpen(!open)}
+              onMouseEnter={() => setHover(true)}
+              onMouseLeave={() => setHover(false)}
+              d={{ base: "inline-flex", lg: "none" }}
+              variant="mobileNav"
+              bg={stickyNavbar ? "transparent" : "rgba(255, 255, 255, .15)"}
+              type="button"
+              border={stickyNavbar ? "1px solid #0068ff" : "none"}
+              id="mobile-menu-button"
+            />
+            <MobileNav updateOpen={setOpen} />
+          </Menu>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
+
+export default Header;

theme/layout/Layout.tsx

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from "react";
+
+import type { AppProps } from "next/app";
+import Header from "../layout/Header";
+import { Box } from "@chakra-ui/layout";
+import Footer from "./Footer";
+
+interface LayoutProps {
+  children: ReactNode;
+  elementType?: string;
+}
+
+const Layout: FC<LayoutProps> = (
+  { children }: LayoutProps,
+  { pageProps }: AppProps
+) => {
+  return (
+    <Box w="100%">
+      <Header {...pageProps} />
+      <main>{children}</main>
+      <Footer />
+    </Box>
+  );
+};
+export default Layout;

theme/layout/MobileNav.tsx

@@ -0,0 +1,53 @@
+import React, { FC, Fragment } from "react";
+import {
+  Button,
+  Link,
+  MenuDivider,
+  MenuItem,
+  MenuList,
+} from "@chakra-ui/react";
+import navItems, { NavItem } from "./navItems";
+
+interface MobileNavProps {
+  updateOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
+  return (
+    <MenuList
+      as="nav"
+      d={{ base: "block", lg: "none" }}
+      bg="brand.main"
+      h="auto"
+      w="100%"
+      p={0}
+      border="none"
+      boxShadow="none"
+    >
+      {navItems.map((navItem: NavItem, index: number) => {
+        return (
+          <MenuItem
+            id={"mobile-" + navItem[0]}
+            key={navItem[0]}
+            w="auto"
+            h="auto"
+            p={0}
+            _hover={{
+              backgroundColor: "none",
+            }}
+          >
+            <Link onClick={() => updateOpen(false)} href={navItem[1]}>
+              {index === 0 ? <MenuDivider /> : <Fragment></Fragment>}
+              <Button w="100vw" variant={"nav"} p={0} m="auto">
+                {navItem[0]}
+              </Button>
+              <MenuDivider />
+            </Link>
+          </MenuItem>
+        );
+      })}
+    </MenuList>
+  );
+};
+
+export default MobileNav;

theme/layout/navItems.ts

@@ -0,0 +1,6 @@
+export type NavItem = [string, string];
+export type NavItems = NavItem[];
+
+const navItems: NavItems = [["Home", "#top"]];
+
+export default navItems;