landing page with pink leaves background image

nicholeuf · Feb 16, 2024 · 8299612 · 8299612
1 parent cc277bc
commit 8299612
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/src/components/LandingPage/Content.tsx b/src/components/LandingPage/Content.tsx
@@ -39,21 +39,44 @@ const Content = () => {
           zoom="0.5"
           src="zensite/nf-profile-c-hibiscus"
           radius="20"
-          alt=""
+          alt="Photo of website author"
+          style={{
+            border: '1px solid white',
+            borderRadius: '20px',
+          }}
         />
       </Box>
       <Box sx={{ gridArea: 'heading' }}>
         <Typography variant="h1" gutterBottom>
           Hi, I&apos;m Nichole
         </Typography>
-        <Typography variant="h4" component="h2" gutterBottom>
-          Full-Stack Developer
+        <Typography
+          variant="h4"
+          component="h2"
+          gutterBottom
+          sx={{
+            fontWeight: 500,
+          }}
+        >
+          Full-Stack Web Developer
         </Typography>
       </Box>
       <Box sx={{ gridArea: 'body' }}>
-        <Typography>
-          I turn ideas into reality using modern Javascript. I can work up and
-          down the stack, but my sweet spot is on the Front-End.
+        <Typography
+          variant="body1"
+          sx={{
+            fontSize: {
+              xs: '1.25rem',
+              sm: '1.5rem',
+            },
+            color: 'grey.800',
+          }}
+          maxWidth="md"
+        >
+          Based in Orlando, Florida, my passion lies in crafting seamless,
+          intuitive experiences that delight customers. I&apos;ve mentored
+          junior developers, acted as a Lead Front-End developer, and
+          collaborated within dynamic, agile teams.
         </Typography>
       </Box>
     </Box>

diff --git a/src/components/LandingPage/index.tsx b/src/components/LandingPage/index.tsx
@@ -15,12 +15,13 @@ const LandingPage: React.FC = () => {
   // Generate responsive url to use as a background image
   // Otherwise a width is required
   const url = getCldImageUrl({
-    // getCldImageUrl uses the same API as CldImage.
+    // getCldImageUrl uses the same API as CldImage and sizes
     // They're both wrappers around @cloudinary-util/url-loader which provide a simpler way to generate images and Cloudinary URLs.
     // https://next.cloudinary.dev/getcldimageurl/basic-usage#basic-usage
     // @ts-ignore
     sizes: '100vw',
-    src: 'zensite/cleo-stracuzza-avA-YuEe2ZA-unsplash_tzotoy',
+    opacity: '30',
+    src: 'zensite/scott-webb-5mIcH3q7tIk-unsplash',
   });
   return (
     <Box
@@ -29,7 +30,7 @@ const LandingPage: React.FC = () => {
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
-        alignItems: 'flex-start',
+        alignItems: 'center',
         pl: 3,
         position: 'relative',
       }}
@@ -38,13 +39,13 @@ const LandingPage: React.FC = () => {
         sx={{
           height: '100%',
           width: '100%',
-          background: `url(${url}) no-repeat center`,
+          background: `url(${url}) no-repeat`,
+          backgroundPosition: '50% 25%',
           backgroundSize: 'cover',
           position: 'absolute',
           bottom: 0,
           right: 0,
           zIndex: -1,
-          opacity: 0.3,
         }}
       ></Box>
       <Content />

diff --git a/src/components/MainContainer/index.tsx b/src/components/MainContainer/index.tsx
@@ -12,11 +12,13 @@ interface MainContainerProps {
 const MainContainer: React.FC<MainContainerProps> = ({ children }) => {
   return (
     <Container
-      maxWidth="lg"
+      // maxWidth="lg"
       component="main"
       sx={{
         mt: constants.header.height,
         minHeight: getMainHeight(),
+        p: '0 !important',
+        maxWidth: '100% !important',
       }}
     >
       {children}