✨ feat(molecules): add Hero banner

src/components/molecules/Hero/Hero.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { Avatar, Box, IconButton, Stack, Typography } from '@mui/material'
+
+import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atoms'
+import { ExpandMore } from '@mui/icons-material'
+
+const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) => {
+  const executeScroll = () => {
+    if (typeof props.scrollTarget !== 'undefined') {
+      const target = props.scrollTarget as React.MutableRefObject<HTMLSelectElement | null>
+      target.current?.scrollIntoView()
+    }
+  }
+  return (
+    <Box
+      sx={{
+        postition: 'relative',
+
+        minHeight: '100vh',
+        boxShadow: '0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25)',
+
+        backgroundImage: 'url("images/banner-blur.jpg")',
+        backgroundPosition: 'center center',
+        backgroundAttachment: 'fixed',
+        backgroundSize: 'cover',
+
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        wrap: 'wrap',
+      }}>
+      <Box
+        sx={{
+          maxWidth: '95%',
+          marginRight: '1%',
+          padding: { xs: '3em', md: '6em' },
+          textAlign: { xs: 'center', md: 'right' },
+
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '3em',
+        }}>
+        <Box>
+          {/*
+              <h2>Michele Tartari</h2>
+							<h3>Robotics Engineer</h3>
+             */}
+          <Typography
+            variant="h3"
+            // sx={{
+            // fontSize: '2.5em',
+            // margin: 0,
+            // }}
+          >
+            Robotics Engineer
+          </Typography>
+          <Typography
+            color="text.secondary"
+            sx={{
+              margin: '0.5em 0 0 0',
+              // margin: { xs: '0.5em 1em', md: '0.5em 0 0 0' },
+              top: 0,
+            }}>
+            See some of my works below. Send a message to get in touch.
+          </Typography>
+          <Stack direction="row" sx={{ display: 'inline-block' }}>
+            <LinkedInIconLink size="large" sx={{ color: 'text.secondary' }} fontSize="large" href="https://www.linkedin.com/in/m-tartari/" />
+            <GitHubIconLink size="large" sx={{ color: 'text.secondary' }} fontSize="large" href="https://www.github.com/m-tartari/" />
+            <EmailIconLink size="large" sx={{ color: 'text.secondary' }} fontSize="large" href="mailto:michele.tartari+web@live.com" />
+          </Stack>
+        </Box>
+        <Avatar
+          alt="Avatar"
+          src="images/me.jpg"
+          sx={{
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            height: { xs: '8em', md: '18em' },
+            width: { xs: '8em', md: '18em' },
+          }}
+        />
+      </Box>
+
+      {props.scrollTarget && (
+        <IconButton size="large" onClick={executeScroll} sx={{ position: 'absolute', p: 1, bottom: 3 }}>
+          <ExpandMore fontSize="large" />
+        </IconButton>
+      )}
+    </Box>
+  )
+}
+
+export default Hero

src/components/molecules/Hero/index.ts

@@ -0,0 +1 @@
+export { default } from './Hero'

src/components/molecules/index.ts

@@ -4,3 +4,5 @@ export { default as Footer } from './Footer'
 export { default as CurriculumItem } from './CurriculumItem'
 export { default as ProjectSpotlight } from './ProjectSpotlight'
 export { default as Project } from './Project'
+
+export { default as Hero } from './Hero'