Add jose luis section

src/Personal.tsx

@@ -29,6 +29,7 @@ import imagePortrait4 from './assets/images/portrait_4.JPG'
 import imagePortrait5 from './assets/images/portrait_5.JPG'
 import imagePortrait6 from './assets/images/portrait_6.JPG'
 import imagePortrait7 from './assets/images/portrait_7.JPG'
+import videoJoseLuis from './assets/images/jose_luis.mp4'
 
 
 const Main = (): ReactElement => {
@@ -114,7 +115,7 @@ const Main = (): ReactElement => {
       <Box sx={{ backgroundColor: 'var(--light)', py: 8 }}>
         <Container>
           <Box sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
-            <Typography variant="h3" sx={{ my: 5, textAlign: 'center' }}>Gallery</Typography>
+            <Typography variant="h2" sx={{ my: 5, textAlign: 'center' }}>Gallery</Typography>
             <Carousel sx={{ width: '100%', my: 4 }} interval={5000} animation={'slide'} height={'50vw'} indicators={false} duration={750}>
               <LazyLoadImage src={imageAnimal1} alt={'Animal image'} style={{ height: '100%', width: '100%', objectFit: 'cover' }} />
               <LazyLoadImage src={imagePortrait1} alt={'Portrait image'} style={{ height: '100%', width: '100%', objectFit: 'cover' }} />
@@ -142,6 +143,34 @@ const Main = (): ReactElement => {
           </Box>
         </Container>
       </Box>
+      <Box sx={{ backgroundColor: 'var(--background)', paddingBottom: '5rem' }}>
+        <Container sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column', py: 8 }}>
+            <Typography variant="h2" sx={{ mt: 4, backgroundColor: 'var(--grey)', color: 'var(--light)', p: 2 }} >
+              El intrepido duende José Luis
+            </Typography>
+            <Typography variant="body1" sx={{ mt: 4 }}>
+              This is Jose Luis, my one and only pet for now. He's a very shy Ball Python. Contrary to what people usually think, he's super tame.
+            </Typography>
+            <Box sx={{ mt: 4 }}>
+              <Grid container spacing={0} sx={{ margin: '1rem 0' }}>
+                <Grid item xs={12} md={4} sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', pr: { xs: 0, md: 2 }, mt: { xs: 4, md: 0 } } }>
+                  <img src={imageAnimal6} alt="Ball python" width="100%" />
+                </Grid>
+                <Grid item xs={12} md={4} sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', pr: { xs: 0, md: 2 }, mt: { xs: 4, md: 0 } } }>
+                  <video width="100%" height="100%" controls autoPlay loop muted style={{ objectFit: 'cover' }}>
+                    <source src={videoJoseLuis} type="video/mp4" />
+                    Your browser does not support the video tag.
+                  </video>
+                </Grid>
+                <Grid item xs={12} md={4} sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', pr: { xs: 0, md: 2 }, mt: { xs: 4, md: 0 } } }>
+                  <img src={imageAnimal7} alt="Ball python" width="100%" />
+                </Grid>
+              </Grid>
+            </Box>
+          </Box>
+        </Container>
+      </Box>
     </>
   );
 }

src/declarations.d.ts

@@ -1 +1,2 @@
 declare module '*.JPG';
+declare module "*.mp4";