From 82996125749a22fd77486c0e10e816aaa9394199 Mon Sep 17 00:00:00 2001
From: Nichole Frey <nicholeuf@users.noreply.github.com>
Date: Fri, 16 Feb 2024 13:31:53 -0500
Subject: [PATCH] landing page with pink leaves background image

---
 src/components/LandingPage/Content.tsx | 35 +++++++++++++++++++++-----
 src/components/LandingPage/index.tsx   | 11 ++++----
 src/components/MainContainer/index.tsx |  4 ++-
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/components/LandingPage/Content.tsx b/src/components/LandingPage/Content.tsx
index 6ba049a..47ca2c6 100644
--- 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
index 81daefe..a27f03c 100644
--- 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
index cbb9234..134457d 100644
--- 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}