Home Component Ok

damianfanaro · Aug 13, 2024 · 9a3eaa4 · 9a3eaa4
1 parent 5127a40
commit 9a3eaa4
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.13.0",
     "@vitejs/plugin-legacy": "^5.4.1",
     "bootstrap": "^5.3.3",
+    "emailjs-com": "^3.2.0",
     "framer-motion": "^11.3.24",
     "i18next": "^23.12.2",
     "react": "^18.3.1",

diff --git a/public/mobile.webp b/public/mobile.webp
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,7 +1,8 @@
 import Blog from '../Blog'
+import Contact from './Contact'
 import Footer from './Footer'
 import Home from './Home'
-// import Contacto from './Contacto' 
+
 
 import NavBar from './NavBar'
 
@@ -16,7 +17,7 @@ const App = () => {
         <Blog/>
       </div>
       <div id="contacto">
-        {/* <Contacto /> */}
+        <Contact/>
       </div>
       <Footer />
     </>

diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { Box, Button, Center, FormControl, FormLabel, Input, Textarea, Heading, Text, Image, useToast } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import emailjs, { EmailJSResponseStatus } from 'emailjs-com'
+
+const Contact: React.FC = () => {
+  const { t } = useTranslation()
+  const toast = useToast()
+
+  const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.currentTarget, 'YOUR_USER_ID').then(
+      () => {
+        toast({
+          title: t('contact.successTitle'),
+          description: t('contact.successMessage'),
+          status: 'success',
+          duration: 5000,
+          isClosable: true
+        })
+      },
+      () => {
+        toast({
+          title: t('contact.errorTitle'),
+          description: t('contact.errorMessage'),
+          status: 'error',
+          duration: 5000,
+          isClosable: true
+        })
+      }
+    )
+
+    e.currentTarget.reset()
+  }
+
+  return (
+    <Box id="contact" py={10} px={{ base: 4, md: 8 }} maxW="800px" mx="auto">
+      <Center flexDirection="column" mb={6}>
+        <Image src="/public/profile.svg" alt="contact image" boxSize="150px" mb={4} borderRadius="full" />
+        <Heading as="h2" size="lg" mb={4} textAlign="center">
+          {t('contact.title')}
+        </Heading>
+        <Text fontSize="1em" color="gray.500" mb={6} textAlign="center">
+          {t('contact.description')}
+        </Text>
+      </Center>
+      <Box as="form" onSubmit={sendEmail}>
+        <FormControl id="name" mb={4} isRequired>
+          <FormLabel>{t('contact.name')}</FormLabel>
+          <Input type="text" name="user_name" placeholder={t('contact.namePlaceholder')} />
+        </FormControl>
+        <FormControl id="email" mb={4} isRequired>
+          <FormLabel>{t('contact.email')}</FormLabel>
+          <Input type="email" name="user_email" placeholder={t('contact.emailPlaceholder')} />
+        </FormControl>
+        <FormControl id="message" mb={4} isRequired>
+          <FormLabel>{t('contact.message')}</FormLabel>
+          <Textarea name="message" placeholder={t('contact.messagePlaceholder')} />
+        </FormControl>
+        <Button type="submit" colorScheme="blue" width="full">
+          {t('contact.sendButton')}
+        </Button>
+      </Box>
+    </Box>
+  )
+}
+
+export default Contact
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -1,24 +1,65 @@
-import { Box, Card, Text } from '@chakra-ui/react'
+import { Box, Card, Text, useBreakpointValue } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import SocialLinks from './SocialLinks'
 
 const Home = () => {
   const { t } = useTranslation()
 
-  return (
-    <Box as="section" minH="100vh" w="100%" bgImage="url('/fondo.webp')" bgSize="cover" bgPosition="center" display="flex" alignItems="center" justifyContent="flex-start" px={{ base: 4, md: 8 }}>
-      <Box color="white" maxW="container.md">
+  // Determina si SocialLinks debe estar dentro o fuera de la Card según el tamaño de la pantalla
+  const isSocialLinksInCard = useBreakpointValue({ base: false, md: true })
 
-        <Card bgColor="gray.800" p="8" ml="4vw" mt="8vh" rounded="xl" opacity={0.9}>
-        <Text fontSize={{ base: '3xl', md: '5xl' }} fontWeight="bolder">
-          {t('homeHeader')}
-        </Text>
-        <Text fontSize={{ base: 'md', md: '2em' }}>{t('homeSubHeader')}</Text>
-        <Text fontSize="lg" lineHeight="taller" textAlign="left">
-          {t('aboutMeParagraph')}
-        </Text>
-        <SocialLinks/>
+  return (
+    <Box
+      as="section"
+      minH="100vh"
+      w="100%"
+      bgImage={{ base: "url('/mobile.webp')", md: "url('/fondo.webp')" }}
+      bgSize="cover"
+      bgPosition="center"
+      display="flex"
+      alignItems="center"
+      justifyContent={{ base: 'center', md: 'flex-start' }}
+      px={{ base: 4, md: 8 }}
+      py={{ base: 2, md: 0 }}
+      position="relative">
+      <Box color="gray.50" maxW={{ base: '90%', md: 'container.md' }} mx={{ base: 'auto', md: '0' }}>
+        <Card bgColor="gray.800" h={{ base: '240px', md: 'auto' }} p={{ base: 4, md: 8 }} ml={{ base: 0, md: '5vw' }} mt={{ base: '-37vh', lg: '5vh' }} rounded="xl" opacity={0.9}>
+          <Text fontSize={{ base: '1.2em', md: '5xl' }} as="b" textAlign={{ base: 'center', md: 'left' }}>
+            {t('homeHeader')}
+          </Text>
+          <Text fontSize={{ base: 'sm', md: '2em' }} textAlign={{ base: 'center', md: 'left' }}>
+            {t('homeSubHeader')}
+          </Text>
+          <Box
+            maxH="200px"
+            overflowY="auto"
+            sx={{
+              '&::-webkit-scrollbar': {
+                width: '6px'
+              },
+              '&::-webkit-scrollbar-thumb': {
+                backgroundColor: 'rgba(107, 114, 128, 0.4)',
+                borderRadius: '8px'
+              },
+              '&::-webkit-scrollbar-track': {
+                backgroundColor: 'rgba(26, 32, 44, 0.8)'
+              }
+            }}>
+            <Text fontSize="1em" textAlign={{ base: 'center', md: 'left' }}>
+              {t('aboutMeParagraph')}
+            </Text>
+          </Box>
+          {isSocialLinksInCard && (
+            <Box mt={{ base: 4, md: 8 }}>
+              <SocialLinks />
+            </Box>
+          )}
         </Card>
+        {!isSocialLinksInCard && (
+          <Box position="absolute" bottom={8} left="50%" transform="translateX(-50%)" w="100%" display="flex" justifyContent="center" mt={4}>
+            <SocialLinks />
+          </Box>
+        )}
       </Box>
     </Box>
   )

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, HStack, IconButton, Image, Link as ChakraLink, useDisclosure, Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, DrawerCloseButton, VStack } from '@chakra-ui/react'
+import { Box, Flex, HStack, IconButton, Image, useDisclosure, Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerBody, DrawerCloseButton, VStack, Text } from '@chakra-ui/react'
 import { HamburgerIcon } from '@chakra-ui/icons'
 import { Link } from 'react-scroll'
 import { useTranslation } from 'react-i18next'
@@ -8,30 +8,35 @@ const NavBar = () => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { t } = useTranslation()
 
+  const linkHoverStyle = {
+    color: '#63b3ed', // Color de hover personalizado
+    transform: 'scale(1.1)',
+    transition: 'all 0.2s ease-in-out' // Aplica la transición suave
+  }
+
   return (
     <Box as="nav" bg="gray.800" boxShadow="md" position="fixed" width="100%" zIndex="1000">
-      <Flex as="div" maxW="1200px" mx="auto" py={4} px={{ base: 4, md: 8 }} alignItems="center" justifyContent="space-between">
-        <ChakraLink href="/" _hover={{ textDecoration: 'none' }}>
+      <Flex maxW="1200px" mx="auto" py={4} px={{ base: 4, md: 8 }} alignItems="center" justifyContent="space-between">
+        <Box _hover={{ textDecoration: 'none' }}>
           <Image src="/logo.webp" alt="Logo" boxSize="50px" />
-        </ChakraLink>
+        </Box>
 
-        {/* Desktop Navigation Links */}
-        <HStack as="ul" spacing="8vw" display={{ base: 'none', md: 'flex' }} alignItems="center" justifyContent="center" flexGrow={1} listStyleType="none" mt="5">
-          <Box as="li">
-            <Link to="inicio" spy={true} smooth={true} offset={-70} duration={500}>
+        <HStack spacing="8vw" display={{ base: 'none', md: 'flex' }} alignItems="center">
+          <Link to="inicio" smooth={true} offset={-70} duration={500}>
+            <Text _hover={linkHoverStyle} color="white" cursor="pointer">
               {t('inicio')}
-            </Link>
-          </Box>
-          <Box as="li">
-            <Link to="blog" spy={true} smooth={true} offset={-70} duration={500}>
+            </Text>
+          </Link>
+          <Link to="blog" smooth={true} offset={-70} duration={500}>
+            <Text _hover={linkHoverStyle} color="white" cursor="pointer">
               {t('blog')}
-            </Link>
-          </Box>
-          <Box as="li">
-            <Link to="contacto" spy={true} smooth={true} offset={-70} duration={500}>
+            </Text>
+          </Link>
+          <Link to="contacto" smooth={true} offset={-70} duration={500}>
+            <Text _hover={linkHoverStyle} color="white" cursor="pointer">
               {t('contacto')}
-            </Link>
-          </Box>
+            </Text>
+          </Link>
         </HStack>
 
         <Box display={{ base: 'none', md: 'block' }}>
@@ -40,7 +45,6 @@ const NavBar = () => {
 
         <IconButton aria-label="Open Menu" icon={<HamburgerIcon />} display={{ base: 'flex', md: 'none' }} onClick={onOpen} />
 
-        {/* Mobile Drawer */}
         <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
           <DrawerOverlay>
             <DrawerContent>
@@ -49,22 +53,22 @@ const NavBar = () => {
                 <Image src="/logo.webp" alt="Logo" boxSize="50px" />
               </DrawerHeader>
               <DrawerBody>
-                <VStack as="ul" spacing={4} listStyleType="none">
-                  <Box as="li">
-                    <Link to="inicio" spy={true} smooth={true} offset={-70} duration={500} onClick={onClose}>
+                <VStack spacing={4}>
+                  <Link to="inicio" smooth={true} offset={-70} duration={500} onClick={onClose}>
+                    <Text _hover={linkHoverStyle} color="gray.800" cursor="pointer">
                       {t('inicio')}
-                    </Link>
-                  </Box>
-                  <Box as="li">
-                    <Link to="blog" spy={true} smooth={true} offset={-70} duration={500} onClick={onClose}>
+                    </Text>
+                  </Link>
+                  <Link to="blog" smooth={true} offset={-70} duration={500} onClick={onClose}>
+                    <Text _hover={linkHoverStyle} color="gray.800" cursor="pointer">
                       {t('blog')}
-                    </Link>
-                  </Box>
-                  <Box as="li">
-                    <Link to="contacto" spy={true} smooth={true} offset={-70} duration={500} onClick={onClose}>
+                    </Text>
+                  </Link>
+                  <Link to="contacto" smooth={true} offset={-70} duration={500} onClick={onClose}>
+                    <Text _hover={linkHoverStyle} color="gray.800" cursor="pointer">
                       {t('contacto')}
-                    </Link>
-                  </Box>
+                    </Text>
+                  </Link>
                   <LanguageSwitch />
                 </VStack>
               </DrawerBody>

diff --git a/src/components/SocialLinks.tsx b/src/components/SocialLinks.tsx
@@ -6,10 +6,20 @@ const SocialLinks = () => {
     <Box as="section" id="social-links" textAlign="center" mt={4}>
       <HStack justifyContent="center" spacing={6}>
         <ChakraLink href="https://github.com/damianfanaro" target="_blank" rel="noopener noreferrer">
-          <FaGithub size={32} />
+          <FaGithub
+            size={32}
+            style={{
+              filter: 'drop-shadow(0 0 6px rgba(26, 32, 44, 0.9)) drop-shadow(0 0 15px rgba(26, 32, 44, 0.8))'
+            }}
+          />
         </ChakraLink>
         <ChakraLink href="https://linkedin.com/in/damianfanaro" target="_blank" rel="noopener noreferrer">
-          <FaLinkedin size={32} />
+          <FaLinkedin
+            size={32}
+            style={{
+              filter: 'drop-shadow(0 0 6px rgba(26, 32, 44, 0.9)) drop-shadow(0 0 15px rgba(26, 32, 44, 0.8))'
+            }}
+          />
         </ChakraLink>
       </HStack>
     </Box>

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -18,6 +18,23 @@ const resources = {
         rightsReserved: 'Damián Fanaro. All rights reserved.',
       },
 
+      // Contact Section
+      contact: {
+        title: 'Contact',
+        description: 'Feel free to reach out by filling the form below.',
+        name: 'Name',
+        namePlaceholder: 'Enter your name',
+        email: 'Email',
+        emailPlaceholder: 'Enter your email',
+        message: 'Message',
+        messagePlaceholder: 'Enter your message',
+        sendButton: 'Send',
+        successTitle: 'Message Sent',
+        successMessage: 'Your message was sent successfully.',
+        errorTitle: 'Error',
+        errorMessage: 'There was an error sending your message. Please try again later.',
+      },
+
       // Otros textos
       aboutMeParagraph:
         'My mission is to create solutions for people and organizations using the most powerful vehicle humanity has: technology. Through this, I aim to generate positive social impact. Outside of work, I practice Kyokushin Karate and enjoy reading books on a variety of topics that I find interesting, such as negotiation, human behavior, personal development, sales, and investments. In 2023, I began to delve deeper into CPS (Complex Problem Solving), a skill I believe will be fundamental in the times to come. Don’t hesitate to reach out if you think we can create synergies!',
@@ -43,6 +60,23 @@ const resources = {
         rightsReserved: 'Damián Fanaro. Todos los derechos reservados.',
       },
 
+      // Contact Section
+      contact: {
+        title: 'Contacto',
+        description: 'No dudes en comunicarte completando el siguiente formulario.',
+        name: 'Nombre',
+        namePlaceholder: 'Introduce tu nombre',
+        email: 'Correo electrónico',
+        emailPlaceholder: 'Introduce tu correo electrónico',
+        message: 'Mensaje',
+        messagePlaceholder: 'Introduce tu mensaje',
+        sendButton: 'Enviar',
+        successTitle: 'Mensaje Enviado',
+        successMessage: 'Tu mensaje fue enviado con éxito.',
+        errorTitle: 'Error',
+        errorMessage: 'Hubo un error al enviar tu mensaje. Por favor, inténtalo de nuevo más tarde.',
+      },
+
       // Otros textos
       aboutMeParagraph:
         'Mi misión es crear soluciones para personas y organizaciones utilizando el vehículo más potente que tiene la humanidad: la tecnología. Y con ello, generar impacto social positivo. Fuera del ambiente laboral, practico Karate Kyokushin y leo libros sobre una variedad de temas que encuentro interesantes como negociación, comportamiento humano, desarrollo personal, ventas e inversiones. En 2023, empecé a profundizar sobre CPS (Resolución de Problemas Complejos), una habilidad que creo será fundamental en los tiempos que se vienen. No dudes en escribirme si crees que podemos generar sinergias!',