From 7915f7c104c8aedfbafbe1ea3b7ef163ab77721f Mon Sep 17 00:00:00 2001 From: Kelly Kang Date: Fri, 19 Jan 2024 17:47:13 +0900 Subject: [PATCH] add: grid item interface --- README.md | 8 +- components/grid-item.tsx | 133 ++++++++------ components/layouts/article.tsx | 10 +- components/layouts/main.tsx | 10 +- components/logo.tsx | 33 ++-- components/navbar.tsx | 26 +-- components/paragraph.tsx | 2 +- components/section.tsx | 22 ++- components/theme-toggle-button.tsx | 23 +-- eslintrc.json | 22 +-- libs/theme.tsx | 88 +++++----- next.config.js | 6 +- pages/_document.tsx | 2 +- pages/career.tsx | 270 ++++++++++++++--------------- pages/projects.tsx | 26 +-- prettier.config.js | 18 +- tsconfig.json | 20 +-- yarn.lock | 6 +- 18 files changed, 376 insertions(+), 349 deletions(-) diff --git a/README.md b/README.md index 111b9c4..e254972 100644 --- 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 index 341a116..449b641 100644 --- a/components/grid-item.tsx +++ b/components/grid-item.tsx @@ -1,59 +1,84 @@ -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 }) => ( -
- - - {title} - - {title} - - {children} - - -
-); +// export const GridItem = ({ children, href, title, thumbnail }) => ( +//
+// +// +// {title} +// +// {title} +// +// {children} +// +// +//
+// ); + +interface GridItemProps { + children: string; + title: string; + thumbnail: StaticImageData; +} -export const ProjectGridItem = ({ children, title, thumbnail }) => ( -
- - {title} window.open(`https://github.com/bonzonkim/${title}`, "_blank")} - /> - - {title} - - {children} - -
+export const ProjectGridItem = ({ + children, + title, + thumbnail, +}: GridItemProps) => ( +
+ + {title} + window.open(`https://github.com/bonzonkim/${title}`, '_blank') + } + /> + + window.open(`https://github.com/bonzonkim${title}`, '_blank') + } + > + {title} + + {children} + +
); -export const CareerGridItem = ({ children, title, thumbnail }) => ( -
- - {title} - - {title} - - {children} - -
+export const CareerGridItem = ({ + children, + title, + thumbnail, +}: GridItemProps) => ( +
+ + {title} + + {title} + + {children} + +
); export const GridItemStyle = () => ( @@ -61,6 +86,10 @@ export const GridItemStyle = () => ( 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 index 7c4013e..c3517c9 100644 --- a/components/layouts/article.tsx +++ b/components/layouts/article.tsx @@ -1,6 +1,7 @@ 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 }, @@ -8,7 +9,12 @@ const variants = { exit: { opacity: 0, x: 0, y: 20 }, }; -const Layout = ({ children, title }) => ( +interface MainLayoutProps { + children: ReactNode; + title: string; +} + +const Layout = ({ children, title }: MainLayoutProps) => ( ( <> {title && ( - - Bumgu Kelly Kang + Bumgu Kang | Software Developer )} {children} diff --git a/components/layouts/main.tsx b/components/layouts/main.tsx index 5916bc2..0ab3567 100644 --- a/components/layouts/main.tsx +++ b/components/layouts/main.tsx @@ -7,8 +7,16 @@ const Main = ({ children, router }) => { return ( + Bumgu Kang | Software Developer - Bumgu Kelly Kang + + + + + diff --git a/components/logo.tsx b/components/logo.tsx index cfcc344..efce3ce 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -15,29 +15,28 @@ const LogoBox = styled.span` > Image { transition: 200ms ease; } - `; const Logo = () => { return ( - - logo + logo - - Bumgu Kang - - + + Bumgu Kang + + ); }; diff --git a/components/navbar.tsx b/components/navbar.tsx index 327366f..9c325f8 100644 --- 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 ( - - {children} - - ); + return {children}; }; const Navbar = (props: any) => { @@ -61,7 +57,10 @@ const Navbar = (props: any) => { Projects - + Sources @@ -80,16 +79,19 @@ const Navbar = (props: any) => { aria-label="Options" /> - + About me - - + + Projects - - + + Sources - + Career diff --git a/components/paragraph.tsx b/components/paragraph.tsx index d72a12a..e33d39a 100644 --- 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 index a75acc0..dd721f7 100644 --- a/components/section.tsx +++ b/components/section.tsx @@ -7,18 +7,16 @@ const StyleDiv = chakra(motion.div, { }, }); -const Section = ({ children}) => { - return( - - {children} - - ) - +const Section = ({ children }) => { + return ( + + {children} + + ); }; export default Section; - diff --git a/components/theme-toggle-button.tsx b/components/theme-toggle-button.tsx index 4e9e2f3..e83b21e 100644 --- a/components/theme-toggle-button.tsx +++ b/components/theme-toggle-button.tsx @@ -1,7 +1,11 @@ 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(); @@ -9,20 +13,19 @@ const ThemeToggleButton = () => { return ( - , )} - onClick={toggleColorMode} - /> + , )} + onClick={toggleColorMode} + /> ); diff --git a/eslintrc.json b/eslintrc.json index f091a8a..05a96df 100644 --- a/eslintrc.json +++ b/eslintrc.json @@ -1,13 +1,13 @@ { - "root": true, - "extends": "next", - "rules": { - "no-unused-vars":[ - "error", - { - "argsIgnorePattern": "^_", - "varsIgnorePattern": "^_" - } - ] - } + "root": true, + "extends": "next", + "rules": { + "no-unused-vars": [ + "error", + { + "argsIgnorePattern": "^_", + "varsIgnorePattern": "^_" + } + ] + } } diff --git a/libs/theme.tsx b/libs/theme.tsx index 60d1ace..6a1406c 100644 --- a/libs/theme.tsx +++ b/libs/theme.tsx @@ -1,59 +1,55 @@ -import {extendTheme } from '@chakra-ui/react' -import { mode } from '@chakra-ui/theme-tools' +import { extendTheme } from '@chakra-ui/react'; +import { StyleFunctionProps, mode } from '@chakra-ui/theme-tools'; const styles = { - global: props => ({ - body:{ - bg: mode('#f0e7db', '#202023')(props) - } - }) -} + global: (props: Record | StyleFunctionProps) => ({ + 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 - } - } + 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 - }) - } -} - + }, + Link: { + baseStyle: (props: Record | StyleFunctionProps) => ({ + color: mode('#3d7aed', '#ff63c3')(props), + textUnderlineOffset: 3, + }), + }, +}; const fonts = { - heading: "'M PLUS Rounded 1c'" -} - + heading: "'M PLUS Rounded 1c'", +}; const colors = { - glassTeal: '#88ccca' -} - + glassTeal: '#88ccca', +}; const config = { - inititalColorMode: 'dark', - useSystemColorMode: true -} - + inititalColorMode: 'dark', + useSystemColorMode: true, +}; const theme = extendTheme({ - config, - styles, - components, - colors, - fonts -}) - -export default theme + config, + styles, + components, + colors, + fonts, +}); + +export default theme; diff --git a/next.config.js b/next.config.js index 1ee5148..da1bb77 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,3 @@ -module.exports ={ - reactStrictMode: true -} +module.exports = { + reactStrictMode: true, +}; diff --git a/pages/_document.tsx b/pages/_document.tsx index a8d77ea..6a519df 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -6,7 +6,7 @@ export default class Document extends NextDocument { render() { return ( - +
diff --git a/pages/career.tsx b/pages/career.tsx index 3271f30..10285cf 100644 --- a/pages/career.tsx +++ b/pages/career.tsx @@ -1,7 +1,7 @@ import { Container, Heading, SimpleGrid } from '@chakra-ui/react'; import Section from '../components/section'; import { CareerSection, CareerParagraph } from '../components/career'; -import { CareerGridItem }from '../components/grid-item'; +import { CareerGridItem } from '../components/grid-item'; import React from 'react'; import Layout from '../components/layouts/article'; @@ -12,145 +12,139 @@ import thumbnailKbc2019 from '../public/images/career/kbc2019.jpg'; import thumbnailMom2019 from '../public/images/career/mom2019.jpg'; import thumbnailMom2019_2 from '../public/images/career/mom2019_2.jpg'; - const Career = () => { - return ( - -
- - Previous Works / 이전에 했던 일 - - - - • 미국 LA Korean cultural center 비트박스 공연 -
- Perform at Los Angeles,U.S.A Korean Cultural Center - - - - - • 서울 국립 민속 박물관 비트박스 초청 공연 -
- Perform at Seoul Museum of History - - - - - • OPCD M.O.M 워크샵 비트박스 강연 -
- Beatbox Workshop at OPCD - - - - - • 국회의사당 비트박스 초청 공연 -
- Perform at National Assembly of Korea - - - - - • 국립국악원 비트박스 초청 공연 -
- Perform at National Gugak Center - - - - - • KBS 열린 음악회 비트박스 공연 -
- Perform at KBS - - - - - • 서울시 국악 한마당 비트박스 초청 공연 -
- Perform at Seoul Gugak Hanmadang - - - - - • 강북구 뮤지컬 신옹고집전 출연 -
- Perform in Musical "Sin ong go jip jeon" - - - - - • 강동아트센터 시니어 어울림 페스티벌 공연 -
- Perform at Gwangdong Arts Center Senior Center - - - - - • 경기문화재단 초청 비트박스 공연 -
- Perform at Gyeonggi Cultural Foundation - - - - - • 태국 방콕 Korea Cultuer Scene 비트박스 공연 -
- Perform at Korea Culture Scene in Bangkok, Thailand - - + return ( + +
+ + Previous Works / 이전에 했던 일 + + + + • 미국 LA Korean cultural center 비트박스 공연 +
+ Perform at Los Angeles,U.S.A Korean Cultural Center + + + + + • 서울 국립 민속 박물관 비트박스 초청 공연 +
+ Perform at Seoul Museum of History + + + + + • OPCD M.O.M 워크샵 비트박스 강연 +
+ Beatbox Workshop at OPCD + + + + + • 국회의사당 비트박스 초청 공연 +
+ Perform at National Assembly of Korea + + + + + • 국립국악원 비트박스 초청 공연 +
+ Perform at National Gugak Center + + + + + • KBS 열린 음악회 비트박스 공연 +
+ Perform at KBS + + + + + • 서울시 국악 한마당 비트박스 초청 공연 +
+ Perform at Seoul Gugak Hanmadang + + + + + • 강북구 뮤지컬 신옹고집전 출연 +
+ Perform in Musical "Sin ong go jip jeon" + + + + + • 강동아트센터 시니어 어울림 페스티벌 공연 +
+ Perform at Gwangdong Arts Center Senior Center + + + + + • 경기문화재단 초청 비트박스 공연 +
+ Perform at Gyeonggi Cultural Foundation + + + + + • 태국 방콕 Korea Cultuer Scene 비트박스 공연 +
+ Perform at Korea Culture Scene in Bangkok, Thailand + + +
+ + Hosted Events + + + +
+ + 한국 2018 비트박스 챔피언쉽 주최 참여 +
- - - - Hosted Events - - - -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- - - - ); +
+ + 한국 2019 비트박스 챔피언쉽 주최 참여 + +
+
+ + M.O.M 비트박스 대회 주최 + +
+
+ + M.O.M 비트박스vol.2 대회 주최 + +
+
+ + 영국 비트박서 Ball-Zee 워크샵 주최 + +
+
+ + 도봉구청산하 OPCD 주관 틱톡 비트박스 챌린지 주최 + +
+ + + + ); }; export default Career; diff --git a/pages/projects.tsx b/pages/projects.tsx index c4a8b60..49c8b0d 100644 --- a/pages/projects.tsx +++ b/pages/projects.tsx @@ -13,19 +13,19 @@ const Projects = () => { Projects -
- - Lively는 지역 커뮤니티를 표방한 - 실시간 위치 기반 교통 상황을 보여주는 맵이 있으며 - 기부, 질문 등 지역 커뮤니티에 필요한 게시판이 있습니다. - -
-
- - 응답에 따라 성격 유형을 탕후루에 비교해 분류하는 - 심리테스트 웹 앱 입니다. - -
+
+ + Lively는 지역 커뮤니티를 표방한 실시간 위치 기반 교통 상황을 + 보여주는 맵이 있으며 기부, 질문 등 지역 커뮤니티에 필요한 게시판이 + 있습니다. + +
+
+ + 응답에 따라 성격 유형을 탕후루에 비교해 분류하는 심리테스트 웹 앱 + 입니다. + +
); diff --git a/prettier.config.js b/prettier.config.js index 8f9bd22..3a644c5 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,11 +1,11 @@ const options = { - arrowParens: "avoid", - singleQuote: true, - bracketSpacing: true, - endOfLine: "lf", - semi: false, - tabWidth: 2, - trailingComma: "none" -} + arrowParens: 'avoid', + singleQuote: true, + bracketSpacing: true, + endOfLine: 'lf', + semi: false, + tabWidth: 2, + trailingComma: 'none', +}; -module.exports = options +module.exports = options; diff --git a/tsconfig.json b/tsconfig.json index 0d39008..ce8e730 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,14 +1,10 @@ { "compilerOptions": { - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "baseUrl": "./", "paths": { - "@/public/*": ["public/*"] - }, + "@/public/*": ["public/*"] + }, "allowJs": true, "skipLibCheck": true, "strict": false, @@ -22,12 +18,6 @@ "isolatedModules": true, "jsx": "preserve" }, - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] } diff --git a/yarn.lock b/yarn.lock index 5233e52..184ffce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3205,9 +3205,9 @@ react-focus-lock@^2.9.4: use-sidecar "^1.1.2" react-icons@^4.9.0: - version "4.9.0" - resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz" - integrity sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg== + version "4.12.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78" + integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw== react-is@^16.13.1, react-is@^16.7.0: version "16.13.1"