[BUILDING]

deCaldas · May 3, 2024 · a978169 · a978169
1 parent 1160c1d
commit a978169
Show file tree

Hide file tree

Showing 51 changed files with 1,947 additions and 1,470 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,8 +1,9 @@
 {
   "root": true,
   "extends": "next",
-  "rules":   {
+  "rules": {
     "react/no-unescaped-entities": "off",
-    "@next/next/no-page-custom-font": "off"
+    "@next/next/no-page-custom-font": "off",
+    "@next/next/forwardRef/react/display-name": "off"
   }
 }
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
@@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -21,7 +21,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: '16'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v3

diff --git a/README.md b/README.md
@@ -2,13 +2,11 @@
 
 [https://www.deCaldas.github.io/home/](https://www.deCaldas.github.io/home/)
 
-
 ## Stack
 
 - [Next.js](https://nextjs.org/) - A React framework with hybrid static & server rendering, and route pre-fetching, etc.
 - [Chakra UI](https://chakra-ui.com/) - A simple, modular and accessible component library for React
 
-
 ## Project structure
 
 ```
@@ -31,5 +29,4 @@ You can create your own homepage for free without notifying me by forking this p
 
 - Add a link to the [homepage](https://www.decaldas.github.io/home/) of who is the original creater.
 
-
 Check out [LICENSE](./LICENSE) for more detail.
diff --git a/components/footer.jsx b/components/footer.jsx
@@ -8,19 +8,25 @@ const Footer = () => {
     <Box align="center" opacity={0.4} fontSize="sm">
       <Heading>
         <div style={{ display: 'inline-flex' }}>
-          <a href="https://github.com/deCaldas" target="_blank">
+          <a
+            href="https://github.com/deCaldas"
+            target="_blank"
+            rel="noreferrer"
+          >
             <IoLogoGithub />
           </a>
-          <a href="https://twitter.com/d_caldasCaridad" target="_blank">
+          <a
+            href="https://twitter.com/d_caldasCaridad"
+            target="_blank"
+            rel="noreferrer"
+          >
             <IoLogoTwitter />
           </a>
         </div>
       </Heading>
       <Logo />
       <div>
         <div style={{ display: 'inline-flex' }}>
-          <Link href="https://decaldas.github.io/wCsJS/" target='_blank'>
-          </Link>
           &copy;
           {` • `}
           {`${new Date().getFullYear()}`}
@@ -31,10 +37,13 @@ const Footer = () => {
         </div>
       </div>
       <div>
-        This website is built based on the <a href='https://www.craftz.dog/' target='_blank'>Takuya Matsuyama&apos;s website</a>
+        This website is built based on the{' '}
+        <a href="https://www.craftz.dog/" target="_blank" rel="noreferrer">
+          Takuya Matsuyama&apos;s website
+        </a>
       </div>
     </Box>
   )
 }
 
-export default Footer
+export default Footer
diff --git a/components/grid-item.jsx b/components/grid-item.jsx
@@ -4,59 +4,59 @@ import { Box, Text, LinkBox, LinkOverlay } from '@chakra-ui/react'
 import { Global } from '@emotion/react'
 
 export const GridItem = ({ children, href, title, thumbnail }) => (
-    <Box w="100%" textAlign="center">
-        <LinkBox cursor="pointer">
-            <Image
-                src={thumbnail}
-                alt={title}
-                className="grid-item-thumbnail"
-                placeholder="blur"
-                loading="lazy"
-            />
-            <LinkOverlay href={href}>
-                <Text mt={2}>{title}</Text>
-            </LinkOverlay>
-            <Text fontSize={14}>{children}</Text>
-        </LinkBox>
-    </Box>
+  <Box w="100%" textAlign="center">
+    <LinkBox cursor="pointer">
+      <Image
+        src={thumbnail}
+        alt={title}
+        className="grid-item-thumbnail"
+        placeholder="blur"
+        loading="lazy"
+      />
+      <LinkOverlay href={href}>
+        <Text mt={2}>{title}</Text>
+      </LinkOverlay>
+      <Text fontSize={14}>{children}</Text>
+    </LinkBox>
+  </Box>
 )
 
 export const WorkGridItem = ({
-    children,
-    category = 'portfolio',
-    id,
-    title,
-    thumbnail
+  children,
+  category = 'portfolio',
+  id,
+  title,
+  thumbnail
 }) => (
-    <Box w="100%" textAlign="center">
-        <LinkBox
-            as={NextLink}
-            href={`/${category}/${id}`}
-            scroll={false}
-            cursor="pointer"
-        >
-            <Image
-                src={thumbnail}
-                alt={title}
-                className="grid-item-thumbnail"
-                placeholder="blur"
-            />
-            <LinkOverlay as="div" href={`/${category}/${id}`}>
-                <Text mt={2} fontSize={20}>
-                    {title}
-                </Text>
-            </LinkOverlay>
-            <Text fontSize={14}>{children}</Text>
-        </LinkBox>
-    </Box>
+  <Box w="100%" textAlign="center">
+    <LinkBox
+      as={NextLink}
+      href={`/${category}/${id}`}
+      scroll={false}
+      cursor="pointer"
+    >
+      <Image
+        src={thumbnail}
+        alt={title}
+        className="grid-item-thumbnail"
+        placeholder="blur"
+      />
+      <LinkOverlay as="div" href={`/${category}/${id}`}>
+        <Text mt={2} fontSize={20}>
+          {title}
+        </Text>
+      </LinkOverlay>
+      <Text fontSize={14}>{children}</Text>
+    </LinkBox>
+  </Box>
 )
 
 export const GridItemStyle = () => (
-    <Global
-        styles={`
+  <Global
+    styles={`
       .grid-item-thumbnail {
         border-radius: 12px;
       }
     `}
-    />
-)
+  />
+)
diff --git a/components/jobsTemplate.jsx b/components/jobsTemplate.jsx
@@ -3,26 +3,26 @@ import { Heading, Box, Image, Link, Badge } from '@chakra-ui/react'
 import { ChevronRightIcon } from '@chakra-ui/icons'
 
 export const Title = ({ children }) => (
-    <Box>
-        <Link as={NextLink} href="/portfolio">
-            &larr;
-        </Link>
-        <span>
-            {' '}
-            <ChevronRightIcon />{' '}
-        </span>
-        <Heading display="inline-block" as="h3" fontSize={20} mb={4}>
-            {children}
-        </Heading>
-    </Box>
+  <Box>
+    <Link as={NextLink} href="/portfolio">
+      &larr;
+    </Link>
+    <span>
+      {' '}
+      <ChevronRightIcon />{' '}
+    </span>
+    <Heading display="inline-block" as="h3" fontSize={20} mb={4}>
+      {children}
+    </Heading>
+  </Box>
 )
 
 export const WorkImage = ({ src, alt }) => (
-    <Image borderRadius="lg" w="full" src={src} alt={alt} mb={4} />
+  <Image borderRadius="lg" w="full" src={src} alt={alt} mb={4} />
 )
 
 export const Meta = ({ children }) => (
-    <Badge colorScheme="green" mr={2}>
-        {children}
-    </Badge>
-)
+  <Badge colorScheme="green" mr={2}>
+    {children}
+  </Badge>
+)
diff --git a/components/jobtitle.jsx b/components/jobtitle.jsx
@@ -14,8 +14,7 @@ const JobBox = styled.span`
 
 const JobTitle = () => {
   return (
-    (<Link href="/" scroll={false}>
-
+    <Link href="/" scroll={false}>
       <JobBox>
         <Text
           color={useColorModeValue('gray.800', 'whiteAlpha.900')}
@@ -26,9 +25,8 @@ const JobTitle = () => {
           Web Developer
         </Text>
       </JobBox>
-
-    </Link>)
-  );
+    </Link>
+  )
 }
 
-export default JobTitle
+export default JobTitle
diff --git a/components/layouts/main.jsx b/components/layouts/main.jsx
@@ -22,16 +22,26 @@ const Main = ({ children, router }) => {
         <meta name="description" content="Diego's homepage" />
         <meta name="author" content="Takuya Matsuyama" />
         <meta name="clone-editor" content="Diego Whiskey" />
-        <link rel="icon" type="url" href="https://pbs.twimg.com/media/FlFT-KJWIAADq21?format=webp&name=tiny" />
+        <link
+          rel="icon"
+          type="url"
+          href="https://pbs.twimg.com/media/FlFT-KJWIAADq21?format=webp&name=tiny"
+        />
         <meta name="twitter:title" content="Diego Whiskey" />
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:site" content="@d_caldasCaridad" />
         <meta name="twitter:creator" content="@d_caldasCaridad" />
-        <meta name="twitter:image" content="https://pbs.twimg.com/media/FlFT-KJWIAADq21?format=webp&name=tiny" />
+        <meta
+          name="twitter:image"
+          content="https://pbs.twimg.com/media/FlFT-KJWIAADq21?format=webp&name=tiny"
+        />
         <meta property="og:site_name" content="Diego Whiskey" />
         <meta name="og:title" content="Diego Whiskey" />
         <meta property="og:type" content="website" />
-        <meta property="og:image" content="https://pbs.twimg.com/media/FlFT-KJWIAADq21?format=webp&name=tiny" />
+        <meta
+          property="og:image"
+          content="https://pbs.twimg.com/media/FlFT-KJWIAADq21?format=webp&name=tiny"
+        />
         <title>Diego&apos;s Homepage</title>
       </Head>
       <NavBar path={router.asPath} />

diff --git a/components/logo.jsx b/components/logo.jsx
@@ -21,22 +21,20 @@ const LogoBox = styled.span`
 `
 
 const Logo = () => {
-    return (
-        (<Link href="/" scroll={false}>
-
-            <LogoBox>
-                <Text
-                    color={useColorModeValue('gray.800', 'whiteAlpha.900')}
-                    fontFamily='M PLUS Rounded 1c", sans-serif'
-                    fontWeight="bold"
-                    ml={3}
-                >
-                    De Caldas
-                </Text>
-            </LogoBox>
-
-        </Link>)
-    );
+  return (
+    <Link href="/" scroll={false}>
+      <LogoBox>
+        <Text
+          color={useColorModeValue('gray.800', 'whiteAlpha.900')}
+          fontFamily='M PLUS Rounded 1c", sans-serif'
+          fontWeight="bold"
+          ml={3}
+        >
+          De Caldas
+        </Text>
+      </LogoBox>
+    </Link>
+  )
 }
 
-export default Logo
+export default Logo
diff --git a/components/navbar.jsx b/components/navbar.jsx
@@ -1,4 +1,3 @@
-import { forwardRef } from 'react'
 import NextLink from 'next/link'
 import {
   Container,
@@ -37,12 +36,12 @@ const LinkItem = ({ href, path, target, children, ...props }) => {
   )
 }
 
-const MenuLink = forwardRef((props, ref) => (
+const MenuLink = Object.assign((props, ref) => (
   <Link ref={ref} as={NextLink} {...props} />
 ))
 
 const Navbar = props => {
-  const { } = props
+  const {} = props
   return (
     <Box
       position="fixed"
@@ -74,12 +73,7 @@ const Navbar = props => {
           flexGrow={1}
           mt={{ base: 1, md: 0 }}
         >
-          <LinkItem
-            borderRadius="lg"
-            mb={1}
-            p={1}
-            href={"/portfolio"}
-          >
+          <LinkItem borderRadius="lg" mb={1} p={1} href={'/portfolio'}>
             Portfolio
           </LinkItem>
         </Stack>
@@ -94,7 +88,9 @@ const Navbar = props => {
                 aria-label="Options"
               />
               <MenuList>
-                <MenuItem as={MenuLink} href={"/portfolio"}
+                <MenuItem
+                  as={MenuLink}
+                  href={'/portfolio'}
                   flex={1}
                   borderRadius="lg"
                   mb={1}