[FIX-CONFLIC]

.eslintrc.json

@@ -5,4 +5,4 @@
     "react/no-unescaped-entities": "off",
     "@next/next/no-page-custom-font": "off"
   }
-}
+}

components/MenuLink.jsx

@@ -0,0 +1,7 @@
+import NextLink from 'next/link'
+import { Link } from '@chakra-ui/react'
+import { forwardRef } from 'react'
+
+export const MenuLink = forwardRef(function MenuLink(props, ref) {
+  return <Link ref={ref} as={NextLink} {...props} />
+})

components/binaryRian.jsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react'
+
+const BinaryRain = () => {
+  const [rainColor, setRainColor] = useState('#90EE90') // Estado para controlar el color de la lluvia
+  const maxRainDrops = 73 // Limitamos el número máximo de gotas de lluvia
+
+  useEffect(() => {
+    generateRain() // Llama a la función para generar la lluvia cuando el componente se monta
+
+    const interval = setInterval(() => {
+      moveRainDrops() // Mueve las gotas de lluvia en cada intervalo
+    }, 73)
+
+    return () => clearInterval(interval) // Limpia el intervalo cuando el componente se desmonta
+  })
+
+  const createRainDrop = () => {
+    const rainDrop = document.createElement('div')
+    rainDrop.className = 'rain-drop'
+    rainDrop.textContent = Math.random() < 0.5 ? '1' : '0'
+    rainDrop.style.position = 'absolute'
+    rainDrop.style.width = '23px'
+    rainDrop.style.height = '23px'
+    rainDrop.style.fontSize = '23px'
+    rainDrop.style.textAlign = 'center'
+    rainDrop.style.color = 'var(--rain-color)'
+    rainDrop.style.left = `${Math.random() * window.innerWidth}px`
+    rainDrop.style.top = '0px'
+    document.getElementById('rain-container').appendChild(rainDrop)
+  }
+
+  const generateRain = () => {
+    for (let i = 0; i < maxRainDrops; i++) {
+      createRainDrop()
+    }
+  }
+
+  const moveRainDrops = () => {
+    const rainDrops = document.querySelectorAll('.rain-drop')
+    rainDrops.forEach(rainDrop => {
+      const currentTop = parseFloat(rainDrop.style.top) || 0
+      const rainDropHeight = rainDrop.offsetHeight
+      if (currentTop + rainDropHeight >= window.innerHeight) {
+        rainDrop.style.top = '0px'
+        rainDrop.style.left = `${Math.random() * window.innerWidth}px`
+      } else {
+        rainDrop.style.top = `${currentTop + 73}px`
+      }
+    })
+
+    resolveRainCollision() // Resuelve la colisión de las gotas de lluvia
+  }
+
+  const resolveRainCollision = () => {
+    const rainDrops = document.querySelectorAll('.rain-drop')
+    rainDrops.forEach((dropA, index) => {
+      for (let j = index + 1; j < rainDrops.length; j++) {
+        const dropB = rainDrops[j]
+        if (
+          Math.abs(dropA.offsetLeft - dropB.offsetLeft) < 10 &&
+          Math.abs(dropA.offsetTop - dropB.offsetTop) < 10
+        ) {
+          dropB.style.top = `${parseFloat(dropB.style.top) + 20}px`
+        }
+      }
+    })
+  }
+
+  return (
+    <div
+      id="rain-container"
+      style={{
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none'
+      }}
+    >
+      {/* Contenedor para las gotas de lluvia */}
+    </div>
+  )
+}
+
+export default BinaryRain

components/grid-item.jsx

@@ -4,21 +4,23 @@ 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 = ({
@@ -42,7 +44,7 @@ export const WorkGridItem = ({
         placeholder="blur"
       />
       <LinkOverlay as="div" href={`/${category}/${id}`}>
-        <Text mt={2} fontSize={20}>
+        <Text mt={3} fontSize={23}>
           {title}
         </Text>
       </LinkOverlay>

components/jobsTemplate.jsx

@@ -1,19 +1,20 @@
 import NextLink from 'next/link'
 import { Heading, Box, Image, Link, Badge } from '@chakra-ui/react'
-import { ChevronRightIcon } from '@chakra-ui/icons'
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
 
 export const Title = ({ children }) => (
-  <Box>
+  <Box marginTop="73px">
     <Link as={NextLink} href="/portfolio">
       &larr;
     </Link>
     <span>
       {' '}
-      <ChevronRightIcon />{' '}
+      <ChevronLeftIcon />
     </span>
     <Heading display="inline-block" as="h3" fontSize={20} mb={4}>
       {children}
     </Heading>
+    <ChevronRightIcon />
   </Box>
 )
 

components/layouts/article.jsx

@@ -21,7 +21,6 @@ const variants = {
 
 const Layout = ({ children, title }) => {
   const t = `${title} - De Caldas`
-  /*   const pageTitle = title ? `${title} - Diego Whiskey` : 'Diego Whiskey'; */
   return (
     <motion.article
       initial="hidden"

components/layouts/main.jsx

@@ -2,6 +2,7 @@ import Head from 'next/head'
 import NavBar from '../navbar'
 import { Container } from '@chakra-ui/react'
 import Footer from '../footer'
+import BinaryRain from '../binaryRian'
 
 /**
  * Componente principal de la aplicación.
@@ -45,11 +46,12 @@ const Main = ({ children, router }) => {
         <title>Diego&apos;s Homepage</title>
       </Head>
       <NavBar path={router.asPath} />
-      <Container maxW="container.md" pt={14}>
+      <Container>
+        <BinaryRain />
         <br />
         {children}
-        <Footer />
       </Container>
+      <Footer />
     </div>
   )
 }

components/navbar.jsx

@@ -16,6 +16,7 @@ import {
 import ThemeToggleButton from './theme-toggle-button'
 import { HamburgerIcon } from '@chakra-ui/icons'
 import JobTitle from './jobtitle'
+import { MenuLink } from './MenuLink'
 
 const LinkItem = ({ href, path, target, children, ...props }) => {
   const active = path === href
@@ -36,10 +37,6 @@ const LinkItem = ({ href, path, target, children, ...props }) => {
   )
 }
 
-const MenuLink = Object.assign((props, ref) => (
-  <Link ref={ref} as={NextLink} {...props} />
-))
-
 const Navbar = props => {
   const {} = props
   return (
@@ -60,6 +57,7 @@ const Navbar = props => {
         justify="space-between"
         marginTop={1}
       >
+        {/* <Box flex={1} align="left" mt={3}><HeartButton /></Box> */}
         <Flex align="center" mr={5}>
           <Heading as="h1" variant="title">
             <JobTitle />
@@ -99,7 +97,7 @@ const Navbar = props => {
                   bg={useColorModeValue('whiteAlpha.500', 'blackAlpha.500')}
                   css={{ backdropFilter: 'blur(10px)' }}
                 >
-                  Jobs
+                  Portfolio
                 </MenuItem>
               </MenuList>
             </Menu>

out/_next/data/CpNCkxv9DRSIjQk_2vPa0/index.json

@@ -0,0 +1 @@
+{ "pageProps": { "cookies": "" }, "__N_SSG": true }

out/_next/data/CpNCkxv9DRSIjQk_2vPa0/portfolio.json

@@ -0,0 +1 @@
+{ "pageProps": { "cookies": "" }, "__N_SSG": true }

out/_next/data/CpNCkxv9DRSIjQk_2vPa0/portfolio/reveal_js.json

@@ -0,0 +1 @@
+{ "pageProps": { "cookies": "" }, "__N_SSG": true }

out/_next/data/CpNCkxv9DRSIjQk_2vPa0/portfolio/webPage.json

@@ -0,0 +1 @@
+{ "pageProps": { "cookies": "" }, "__N_SSG": true }

out/_next/static/CpNCkxv9DRSIjQk_2vPa0/_buildManifest.js

@@ -0,0 +1,25 @@
+;(self.__BUILD_MANIFEST = (function (e) {
+  return {
+    __rewrites: { afterFiles: [], beforeFiles: [], fallback: [] },
+    '/': [e, 'static/chunks/pages/index-934c21fffb2a8f39.js'],
+    '/404': ['static/chunks/pages/404-c912757db2feb1cd.js'],
+    '/_error': ['static/chunks/pages/_error-ee5b5fb91d29d86f.js'],
+    '/portfolio': [e, 'static/chunks/pages/portfolio-2ad90beecdc65ba7.js'],
+    '/portfolio/reveal_js': [
+      'static/chunks/pages/portfolio/reveal_js-46dbfd912c05e87e.js'
+    ],
+    '/portfolio/webPage': [
+      'static/chunks/pages/portfolio/webPage-742bde8c2558f9eb.js'
+    ],
+    sortedPages: [
+      '/',
+      '/404',
+      '/_app',
+      '/_error',
+      '/portfolio',
+      '/portfolio/reveal_js',
+      '/portfolio/webPage'
+    ]
+  }
+})('static/chunks/675-67bdaa0e55284a2f.js')),
+  self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

out/_next/static/CpNCkxv9DRSIjQk_2vPa0/_ssgManifest.js

@@ -0,0 +1,7 @@
+self.__SSG_MANIFEST = new Set([
+  '\u002F',
+  '\u002Fportfolio',
+  '\u002Fportfolio\u002Freveal_js',
+  '\u002Fportfolio\u002FwebPage'
+])
+self.__SSG_MANIFEST_CB && self.__SSG_MANIFEST_CB()