Revamp web

damianfanaro · Aug 13, 2024 · 5127a40 · 5127a40
1 parent 5e33a35
commit 5127a40
Show file tree

Hide file tree

Showing 18 changed files with 3,688 additions and 284 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/profile.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.webp" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Damián Fanaro</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@vitejs/plugin-legacy": "^5.4.1",
     "bootstrap": "^5.3.3",
+    "framer-motion": "^11.3.24",
     "i18next": "^23.12.2",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",

diff --git a/public/fondo.webp b/public/fondo.webp
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/logo.webp b/public/logo.webp
diff --git a/src/Blog.tsx b/src/Blog.tsx
@@ -0,0 +1,41 @@
+import { Box, Grid, GridItem, Heading, Text } from '@chakra-ui/react'
+import { LinkedInPost1, LinkedInPost2, LinkedInPost3 } from './components/LinkedInPosts'
+import { useTranslation } from 'react-i18next'
+
+const Blog = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Box id="blog" py={10} px={{ base: 4, md: 8 }} h="100vh">
+      <Box mb={6} mt="6vh" ml="10vw">
+        <Heading as="h2" size="lg" mb={4} textAlign="left">
+          {t('blog')}
+        </Heading>
+        <Text fontSize="1em" color="gray.500" textAlign="left">
+          {t('myLinkedInArticles')}
+        </Text>
+      </Box>
+      <Box ml="10vw">
+        <Grid templateColumns="repeat(auto-fit, minmax(300px, 1fr))" justifyContent="center" alignItems="center" w="100%">
+          <GridItem display="flex" justifyContent="center" maxW="350px" height="auto">
+            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" height="450px" boxShadow="md">
+              <LinkedInPost1 />
+            </Box>
+          </GridItem>
+          <GridItem display="flex" justifyContent="center" maxW="350px" height="auto">
+            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" height="450px" boxShadow="md">
+              <LinkedInPost2 />
+            </Box>
+          </GridItem>
+          <GridItem display="flex" justifyContent="center" maxW="350px" height="auto">
+            <Box border="1px solid #ccc" borderRadius="md" overflow="hidden" width="100%" height="450px" boxShadow="md">
+              <LinkedInPost3 />
+            </Box>
+          </GridItem>
+        </Grid>
+      </Box>
+    </Box>
+  )
+}
+
+export default Blog
diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,35 +1,24 @@
-import { Container, Row, Col } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
-import AboutMe from './AboutMe'
-// import Articles from "./Articles";
+import Blog from '../Blog'
 import Footer from './Footer'
+import Home from './Home'
+// import Contacto from './Contacto' 
+
 import NavBar from './NavBar'
-import ProfilePicture from './ProfilePicture'
-import SocialLinks from './SocialLinks'
 
 const App = () => {
-  const { t } = useTranslation()
   return (
     <>
-      <header className="text-center my-4">
-        <NavBar />
-      </header>
-      <Container className="align-items-center">
-        <Row>
-          <Col md={4} className="text-center">
-            <h1>{t('welcome')}</h1>
-            <ProfilePicture src="../profile.svg" alt="Profile Picture" />
-          </Col>
-          <Col md={8}>
-            <AboutMe />
-            {/* <Articles /> */}
-          </Col>
-          <Col md={4}>
-            <SocialLinks />
-          </Col>
-        </Row>
-        <Footer />
-      </Container>
+      <NavBar />
+      <div id="inicio">
+        <Home />
+      </div>
+      <div id="blog">
+        <Blog/>
+      </div>
+      <div id="contacto">
+        {/* <Contacto /> */}
+      </div>
+      <Footer />
     </>
   )
 }

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,21 +1,16 @@
+import { Box, Text } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+
 const Footer = () => {
+  const { t } = useTranslation()
   const currentYear = new Date().getFullYear()
 
   return (
-    <footer className="text-center my-4">
-      <p>© {currentYear} Damián Fanaro. Todos los derechos reservados.</p>
-      <p>
-        Desarrollado con{' '}
-        <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">
-          Vite
-        </a>{' '}
-        y{' '}
-        <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-          React
-        </a>
-        .
-      </p>
-    </footer>
+    <Box as="footer" textAlign="center" fontSize="0.9em"  p={4} bg="gray.900" color="white">
+      <Text mb={2}>
+        © {currentYear} {t('footer.rightsReserved')}
+      </Text>
+    </Box>
   )
 }
 

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -0,0 +1,27 @@
+import { Box, Card, Text } 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">
+
+        <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/>
+        </Card>
+      </Box>
+    </Box>
+  )
+}
+
+export default Home
diff --git a/src/components/LanguageSwitch.tsx b/src/components/LanguageSwitch.tsx
@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next'
+import { Button } from '@chakra-ui/react'
 
 const LanguageSwitch = () => {
-  const { i18n, t } = useTranslation()
+  const { i18n } = useTranslation()
 
   const toggleLanguage = () => {
     const newLang = i18n.language === 'es' ? 'en' : 'es'
@@ -10,7 +11,9 @@ const LanguageSwitch = () => {
 
   return (
     <div id="language-switch">
-      <button onClick={toggleLanguage}>{t(i18n.language === 'es' ? 'switchToEnglish' : 'switchToSpanish')}</button>
+      <Button onClick={toggleLanguage} variant="ghost" fontSize="24px">
+        {i18n.language === 'es' ? '🇺🇸' : '🇦🇷'}
+      </Button>
     </div>
   )
 }