add: grid item interface

bonzonkim · Jan 19, 2024 · 7915f7c · 7915f7c
1 parent 990b9f6
commit 7915f7c
Show file tree

Hide file tree

Showing 18 changed files with 376 additions and 349 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,12 @@
 # Address
+
 [bumgu.com](https://bumgu.com)
 
 # run on local
+
 ```
-git clone https://github.com/bonzonkim/bumgu.com  
-cd bumgu.com  
+git clone https://github.com/bonzonkim/bumgu.com
+cd bumgu.com
 yarn install
-yarn dev 
+yarn dev
 ```
diff --git a/components/grid-item.tsx b/components/grid-item.tsx
@@ -1,66 +1,95 @@
-import Image from 'next/image';
-import {Box, Text, LinkBox, LinkOverlay, Center} from '@chakra-ui/react';
+import Image, { StaticImageData } from 'next/image';
+import { Box, Text, LinkBox, LinkOverlay, Center } from '@chakra-ui/react';
 import { Global } from '@emotion/react';
 
-export const GridItem = ({ children, href, title, thumbnail }) => (
-    <Center>
-      <Box w="100%">
-        <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>
-    </Center>
-);
+// export const GridItem = ({ children, href, title, thumbnail }) => (
+//   <Center>
+//     <Box w="100%">
+//       <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>
+//   </Center>
+// );
+
+interface GridItemProps {
+  children: string;
+  title: string;
+  thumbnail: StaticImageData;
+}
 
-export const ProjectGridItem = ({ children, title, thumbnail }) => (
-    <Center>
-      <Box w="100%">
-            <Image
-              src={thumbnail}
-              alt={title}
-              className="grid-item-thumbnail"
-              placeholder="blur"
-              onClick={() => window.open(`https://github.com/bonzonkim/${title}`, "_blank")}  
-            />
-              <Text mt={2} fontSize={20}>
-                {title}
-              </Text>
-            <Text fontSize={14}>{children}</Text>
-      </Box>
-    </Center>
+export const ProjectGridItem = ({
+  children,
+  title,
+  thumbnail,
+}: GridItemProps) => (
+  <Center>
+    <Box w="100%">
+      <Image
+        src={thumbnail}
+        alt={title}
+        className="grid-item-thumbnail"
+        placeholder="blur"
+        loading="lazy"
+        onClick={() =>
+          window.open(`https://github.com/bonzonkim/${title}`, '_blank')
+        }
+      />
+      <Text
+        mt={2}
+        fontSize={20}
+        className="grid-item-text"
+        onClick={() =>
+          window.open(`https://github.com/bonzonkim${title}`, '_blank')
+        }
+      >
+        {title}
+      </Text>
+      <Text fontSize={14}>{children}</Text>
+    </Box>
+  </Center>
 );
-export const CareerGridItem = ({ children, title, thumbnail }) => (
-    <Center>
-      <Box w="100%">
-            <Image
-              src={thumbnail}
-              alt={title}
-              className="grid-item-thumbnail"
-              placeholder="blur"
-            />
-              <Text mt={2} fontSize={20}>
-                {title}
-              </Text>
-            <Text fontSize={14}>{children}</Text>
-      </Box>
-    </Center>
+export const CareerGridItem = ({
+  children,
+  title,
+  thumbnail,
+}: GridItemProps) => (
+  <Center>
+    <Box w="100%">
+      <Image
+        src={thumbnail}
+        alt={title}
+        className="grid-item-thumbnail"
+        placeholder="blur"
+        loading="lazy"
+      />
+      <Text mt={2} fontSize={20}>
+        {title}
+      </Text>
+      <Text fontSize={14}>{children}</Text>
+    </Box>
+  </Center>
 );
 
 export const GridItemStyle = () => (
   <Global
     styles={`
         .grid-item-thumbnail {
             border-radius: 12px;
+            cursor: pointer;
+        }
+        .grid-item-text {
+            cursor: pointer;
         }
   `}
   />

diff --git a/components/layouts/article.tsx b/components/layouts/article.tsx
@@ -1,14 +1,20 @@
 import { motion } from 'framer-motion';
 import Head from 'next/head';
 import { GridItemStyle } from '../grid-item';
+import { ReactNode } from 'react';
 
 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 }) => (
+interface MainLayoutProps {
+  children: ReactNode;
+  title: string;
+}
+
+const Layout = ({ children, title }: MainLayoutProps) => (
   <motion.article
     initial="hidden"
     animate="enter"
@@ -20,7 +26,7 @@ const Layout = ({ children, title }) => (
     <>
       {title && (
         <Head>
-          <title {...title}> - Bumgu Kelly Kang</title>
+          <title>Bumgu Kang | Software Developer</title>
         </Head>
       )}
       {children}

diff --git a/components/layouts/main.tsx b/components/layouts/main.tsx
@@ -7,8 +7,16 @@ const Main = ({ children, router }) => {
   return (
     <Box as="main" pb={8}>
       <Head>
+        <title>Bumgu Kang | Software Developer</title>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>Bumgu Kelly Kang</title>
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="Software Developer" />
+        <meta
+          property="og:description"
+          content="Software Developer based in Seoul, Korea"
+        />
+        <meta property="og:url" content="https://bumgu.com" />
+        <meta property="og:locale" content="en-US" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 

diff --git a/components/logo.tsx b/components/logo.tsx
@@ -15,29 +15,28 @@ const LogoBox = styled.span`
   > Image {
     transition: 200ms ease;
   }
-
 `;
 
 const Logo = () => {
   return (
     <Link href="/" scroll={false}>
-        <LogoBox>
-        <Image 
-                src="/images/HealthyFlower.JPG"
-                alt="logo"
-                width={30}
-                height={30}
-                borderRadius="50%"
+      <LogoBox>
+        <Image
+          src="/images/HealthyFlower.JPG"
+          alt="logo"
+          width={30}
+          height={30}
+          borderRadius="50%"
         />
-          <Text
-            color={useColorModeValue('gray.800', 'whiteAlpha.900')}
-            fontFamily='M PLUS Rounded 1c", sans-serif'
-            fontWeight="bold"
-            ml={3}
-          >
-            Bumgu Kang
-            </Text>
-        </LogoBox>
+        <Text
+          color={useColorModeValue('gray.800', 'whiteAlpha.900')}
+          fontFamily='M PLUS Rounded 1c", sans-serif'
+          fontWeight="bold"
+          ml={3}
+        >
+          Bumgu Kang
+        </Text>
+      </LogoBox>
     </Link>
   );
 };

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -18,11 +18,7 @@ import { HamburgerIcon } from '@chakra-ui/icons';
 import ThemeToggleButton from './theme-toggle-button';
 
 const LinkItem = ({ href, path, children }) => {
-  return (
-    <NextLink href={href}>
-        {children}
-    </NextLink>
-  );
+  return <NextLink href={href}>{children}</NextLink>;
 };
 
 const Navbar = (props: any) => {
@@ -61,7 +57,10 @@ const Navbar = (props: any) => {
           <LinkItem href="/projects" path={path}>
             Projects
           </LinkItem>
-          <LinkItem href="https://github.com/bonzonkim/kellyb9-homepage" path={path}>
+          <LinkItem
+            href="https://github.com/bonzonkim/kellyb9-homepage"
+            path={path}
+          >
             Sources
           </LinkItem>
           <LinkItem href="/career" path={path}>
@@ -80,16 +79,19 @@ const Navbar = (props: any) => {
                 aria-label="Options"
               />
               <MenuList>
-                  <MenuItem href="/" as={NextLink} >
+                <MenuItem href="/" as={NextLink}>
                   About me
-                  </MenuItem>
-                  <MenuItem href="/projects" as={NextLink}>
+                </MenuItem>
+                <MenuItem href="/projects" as={NextLink}>
                   Projects
-                  </MenuItem>
-                <MenuItem href="https://github.com/bonzonkim/kellyb9-homepage" as={NextLink} >
+                </MenuItem>
+                <MenuItem
+                  href="https://github.com/bonzonkim/kellyb9-homepage"
+                  as={NextLink}
+                >
                   Sources
                 </MenuItem>
-                <MenuItem href="/career" as={NextLink} >
+                <MenuItem href="/career" as={NextLink}>
                   Career
                 </MenuItem>
               </MenuList>

diff --git a/components/paragraph.tsx b/components/paragraph.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 const Paragraph = styled.p`
   text-align: justify;
- /* text-indent: 1em; */
+  /* text-indent: 1em; */
 `;
 
 export default Paragraph;
diff --git a/components/section.tsx b/components/section.tsx
@@ -7,18 +7,16 @@ const StyleDiv = chakra(motion.div, {
   },
 });
 
-const Section = ({ children}) => {
-    return(
-        <StyleDiv
-            initial={{ y: 10, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            mb={6}
-          >
-            {children}
-          </StyleDiv>
-    )
-
+const Section = ({ children }) => {
+  return (
+    <StyleDiv
+      initial={{ y: 10, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      mb={6}
+    >
+      {children}
+    </StyleDiv>
+  );
 };
 
 export default Section;
-
diff --git a/components/theme-toggle-button.tsx b/components/theme-toggle-button.tsx
@@ -1,28 +1,31 @@
 import { AnimatePresence, motion } from 'framer-motion';
-import { Flex, IconButton, useColorMode, useColorModeValue } from '@chakra-ui/react';
+import {
+  IconButton,
+  useColorMode,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import { SunIcon, MoonIcon } from '@chakra-ui/icons';
-import React from "react";
+import React from 'react';
 
 const ThemeToggleButton = () => {
   const { toggleColorMode } = useColorMode();
 
   return (
     <AnimatePresence initial={false} mode={'wait'}>
       <motion.div
-        style={{ display: 'inline-block',
-                }}
+        style={{ display: 'inline-block' }}
         key={useColorModeValue('light', 'dark')}
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         exit={{ y: 20, opacity: 0 }}
         transition={{ duration: 0.2 }}
       >
-            <IconButton
-              aria-label="Toggle theme"
-              colorScheme={useColorModeValue('purple', 'orange')}
-              icon={useColorModeValue(<MoonIcon />, <SunIcon />)}
-              onClick={toggleColorMode}
-            />
+        <IconButton
+          aria-label="Toggle theme"
+          colorScheme={useColorModeValue('purple', 'orange')}
+          icon={useColorModeValue(<MoonIcon />, <SunIcon />)}
+          onClick={toggleColorMode}
+        />
       </motion.div>
     </AnimatePresence>
   );