diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 00000000..29fc9518
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@700&family=Inter:wght@400;500;700&family=Orbitron:wght@400;500&family=Oswald:wght@400;500&family=Raleway:wght@400;500&display=swap" rel="stylesheet"/>
\ No newline at end of file
diff --git a/src/common/sanityIo/Types.ts b/src/common/sanityIo/Types.ts
index 5a93f1b7..9e1a4679 100644
--- a/src/common/sanityIo/Types.ts
+++ b/src/common/sanityIo/Types.ts
@@ -32,6 +32,8 @@ export type SanityGroupSchedule = {
 }
 
 export type SanityBusinessContact = {
+    "_type"?: "BusinessContact"
+    title?:string
     email?: string
     address?: string
     phone?: string
@@ -91,6 +93,7 @@ export type SanityUnderConstructionPageType = {
 }
 
 export type SanityMuiTheme = {
+    _type?: "MuiTheme"
     title?: string
     slug?: SanitySlug
     appBarHeight?: number
@@ -109,27 +112,30 @@ export type SanityMuiBreakpoints = {
 
 
 export type SanityMuiFontFace = {
-    name: string
-    fontSize: string
-    fontStyle: string
-    fontWeight: string
-    lineHeight: string
-    letterSpacing: string
+    name?: string
+    fontSize?: string
+    fontStyle?: string
+    fontWeight?: string
+    lineHeight?: string
+    letterSpacing?: string
     textTransform?: any
     [key:string]: any
-    mediaQueries: SanityMuiMediaQuery[]
+    mediaQueries?: SanityMuiMediaQuery[]
 }
 
 export type SanityMuiMediaQuery = {
-    breakpoint: string
+    "_type"?: "MuiMediaQuery"
+    breakpoint: string[]
     typography: SanityMuiFontFace
 }
 export type SanityMuiTypography = {
+    "_type"?: "MuiTypography",
     fontFamily: string[]
     fontFaces?: SanityMuiFontFace[]
 }
 
 export type SanityMuiColorPalette = {
+    "_type"?: "MuiColorPalette",
     defaultBackground: string
     defaultPaperBackgroundColor: string
     primaryColor: string
@@ -211,7 +217,7 @@ export type SanityModalType = {
 }
 
 export type SanityMenuItem = {
-    _type: string
+    _type:string,
     title?: string,
     displayText?: string,
     url?: string,
@@ -222,7 +228,7 @@ export type SanityMenuItem = {
 }
 
 export type SanityMenuGroup = {
-    _type: string
+    _type?:string,
     title?: string,
     slug?: SanitySlug,
     menuGroupTitle?: string,
@@ -235,7 +241,7 @@ export type SanityMenuContainer = {
     title?: string,
     slug?: SanitySlug,
     displayText?: string,
-    subMenus?: SanityMenuGroup & SanityMenuItem[]
+    subMenus?: (SanityMenuGroup & SanityMenuItem)[]
     logoImageAltText?: string
     logoText?: string
     logoAccentText?: string
diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts
index 98dabdbe..aa01b6b7 100644
--- a/src/components/BlockContentTypes.ts
+++ b/src/components/BlockContentTypes.ts
@@ -17,20 +17,19 @@ export type HeroContentSectionType = {
 export type HeroAnimatedContentSectionType = {
     name: string
     title: string
-    theme: SanityMuiTheme
     contentSlides: SanityHeroContentSlide[]
 }
 
 export type SanityHeroContentSlide = {
-    heroImage: SanityImageAsset
-    heroBullet: SanityImageAsset
-    heroImageAltText: string
-    heroImageBackground: SanityImageAsset
-    contentTitle: string
-    contentWelcomeMessage: string
-    contentText: string
-    ctaButtonTitle: string
-    ctaButtonLink: string
+    heroImage?: SanityImageAsset
+    heroBullet?: SanityImageAsset
+    heroImageAltText?: string
+    heroImageBackground?: SanityImageAsset
+    contentTitle?: string
+    contentWelcomeMessage?: string
+    contentText?: string
+    ctaButtonTitle?: string
+    ctaButtonLink?: string
 }
 
 
@@ -192,25 +191,25 @@ export type ThwServiceItemNoRefType = {
 } & SanityDocumentFields
 
 export type AnimatedServiceItemNoRefType = {
-    name: string
+    name?: string
     imageSrc?: SanityImageAsset
     iconImageSrc?: SanityImageAsset
     backgroundImageSrc?: SanityImageAsset
-    imageSrcAltText: string
-    contentTitle: string
-    contentText: string
-    ctaButtonText: string
-    ctaButtonLink: string
-    learnMoreLink: string
-    learnMoreText: string
-    educationPageTitle: string
-    educationPageSlimHeroImage: SanityImageAsset
-    extendedDescriptions: string[]
-    benefitsOfServiceTitle: string
-    benefitsOfServiceContents: string[]
-    benefitsOfServiceBullets: string[]
-    serviceAmenities: ServiceAmenityType[]
-    slug: SanitySlug
+    imageSrcAltText?: string
+    contentTitle?: string
+    contentText?: string
+    ctaButtonText?: string
+    ctaButtonLink?: string
+    learnMoreLink?: string
+    learnMoreText?: string
+    educationPageTitle?: string
+    educationPageSlimHeroImage?: SanityImageAsset
+    extendedDescriptions?: string[]
+    benefitsOfServiceTitle?: string
+    benefitsOfServiceContents?: string[]
+    benefitsOfServiceBullets?: string[]
+    serviceAmenities?: ServiceAmenityType[] | undefined
+    slug?: SanitySlug
 } & SanityDocumentFields
 
 export type AnimatedAboutUsSectionType = {
@@ -221,13 +220,13 @@ export type AnimatedAboutUsSectionType = {
     contentPreTitle: string
     contentText: string
     contentTexts: string[]
-    servicesList: AnimatedServiceItemNoRefType[]
+    servicesList: AnimatedServiceItemNoRefType[] | undefined
     highlightedAmenities?: ServiceAmenityType[]
     highlightedAmenitiesTitle?: string
     highlightedAmenitiesTexts?: string[]
     highlightedAmenitiesBullets?: string[]
-    servicesImageSrcArr: SanityImageAsset[]
-    servicesMasonryAccentImageSrc: SanityImageAsset
+    servicesImageSrcArr: (SanityImageAsset| undefined)[]
+    servicesMasonryAccentImageSrc?: SanityImageAsset
 }
 
 export type AnimatedServicesSectionType = {
@@ -241,9 +240,9 @@ export type AnimatedServicesSectionType = {
     contentSummaryTexts: string[]
     ctaButtonText: string
     ctaButtonLink: string
-    videoPreviewImageSrc:SanityImageAsset
-    videoPreviewSectionBackgroundImageSrc: SanityImageAsset
-    videoUrl:string
+    videoPreviewImageSrc?:SanityImageAsset
+    videoPreviewSectionBackgroundImageSrc?: SanityImageAsset
+    videoUrl?:string
     videoPreviewText:string
 }
 
@@ -601,21 +600,23 @@ export type DevelopmentHeaderSectionType = {
     headerMenuRef: SanityMenuContainer
 }
 export type HeaderSectionType = {
-    name: string
-    isSearch: boolean
-    isEnhanced: boolean
-    backgroundColor: string
-    ctaButtonText: string
-    ctaButtonLink: string
-    logoImgSrc: SanityImageAsset
-    highlightedDetails: ServiceAmenityType[]
-    headerMenuRef: SanityMenuContainer
+    title?: string
+    name?: string
+    isSearch?: boolean
+    isEnhanced?: boolean
+    backgroundColor?: string
+    ctaButtonText?: string
+    ctaButtonLink?: string
+    logoImgSrc?: SanityImageAsset
+    highlightedDetails?: ServiceAmenityType[]
+    headerMenuRef?: SanityMenuContainer
 }
 export type DevelopmentFooterSectionType = {
     name: string
     footerMenuRef: SanityMenuContainer
 }
 export type FooterSectionType = {
+    _type:string
     name: string
     backgroundImgSrc?: SanityImageAsset
     backgroundColor?: string
diff --git a/src/components/animated/AnimatedAboutUsItem.tsx b/src/components/animated/AnimatedAboutUsItem.tsx
index f055071b..9eff2288 100644
--- a/src/components/animated/AnimatedAboutUsItem.tsx
+++ b/src/components/animated/AnimatedAboutUsItem.tsx
@@ -1,11 +1,12 @@
 import React, {FunctionComponent, useContext} from 'react'
-import {Card, Grid, ThemeProvider, Typography, useMediaQuery} from '@mui/material'
+import {Card, Grid, ThemeProvider, Typography, useMediaQuery, useTheme} from '@mui/material'
 import {v4 as uuidv4} from 'uuid'
 import {AnimatedServiceItemNoRefType} from "../BlockContentTypes";
 import ImageWIthButtonOverlay from "../image-with-button-overlay/ImageWithButtonOverlay";
 import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
 import {motion, useAnimationControls} from "framer-motion";
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 
 interface IProps {
@@ -18,28 +19,29 @@ interface IProps {
 
 
 const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
-    const customizedTheme = useContext(CustomizedThemeContext)
+    // const customizedTheme = useContext(CustomizedThemeContext)
     const controls = useAnimationControls()
     const textColorControls = useAnimationControls()
     const overlayControl = useAnimationControls()
 
+    const theme = useTheme()
+
     const animateServiceHover = async () => {
         overlayControl.start({opacity: 1}, {duration: .5})
         controls.start({scale: 1}, {duration: .5})
-        textColorControls.start({color: customizedTheme.customizedTheme.palette.primary.main})
+        textColorControls.start({color: theme.palette.primary.main})
     }
 
     const animateServiceNoHover = async () => {
         controls.start({scale: 1.1}, {duration: .25})
         overlayControl.start({opacity: 0}, {duration: .5})
-        textColorControls.start({color: customizedTheme.customizedTheme.palette.text.primary})
+        textColorControls.start({color: theme.palette.text.primary})
     }
 
-    const smDown = useMediaQuery(customizedTheme.customizedTheme.breakpoints.down('sm'))
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     return (
-        <ThemeProvider theme={customizedTheme.customizedTheme} key={uuidv4()}>
-            <motion.div onHoverStart={async () => {
+            <motion.div key={uuidv4()} onHoverStart={async () => {
                 animateServiceHover()
             }} onHoverEnd={async () => {
                 animateServiceNoHover()
@@ -79,12 +81,12 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
                                       alignContent='center' style={{height: "100%"}}>
                                     <motion.div animate={controls} initial={{scale: 1.1}}>
                                         <img style={{zIndex: 2}} width={64} height={64}
-                                             src={urlFor(props.service.iconImageSrc ?? "").url() ?? ""}/>
+                                             src={urlFor(props.service.iconImageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.service.iconImageSrc, 64, 64)}/>
                                     </motion.div>
                                 </Grid>
                             </Card>
                             <Grid item container style={{
-                                backgroundColor: customizedTheme.customizedTheme.palette.primary.main,
+                                backgroundColor: theme.palette.primary.main,
                                 height: "8px",
                                 zIndex: 2,
                                 position: "absolute"
@@ -93,7 +95,7 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
                         </Grid>
                     </Grid>
                     <Grid item style={{
-                        padding: customizedTheme.customizedTheme.spacing(4, 4, 4, 4),
+                        padding: theme.spacing(4, 4, 4, 4),
                         backgroundSize: "contain",
                         backgroundRepeat: "no-repeat",
                         backgroundPosition: "right",
@@ -112,7 +114,6 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
                     </Grid>
                 </Grid>
             </motion.div>
-        </ThemeProvider>
     )
 }
 
diff --git a/src/components/animated/AnimatedAboutUsSection.tsx b/src/components/animated/AnimatedAboutUsSection.tsx
index 753b0312..3fde580b 100644
--- a/src/components/animated/AnimatedAboutUsSection.tsx
+++ b/src/components/animated/AnimatedAboutUsSection.tsx
@@ -9,6 +9,7 @@ import {Circle} from "@mui/icons-material";
 import {motion} from "framer-motion"
 import BulletedHeader from "./BulletedHeader";
 import HorizontalAmenity from "./HorizontalAmenity";
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -47,7 +48,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                     <img
                         width={256}
                         height={256}
-                        src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(64).height(64).url() ?? ""}
+                        src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(256).height(256).url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesMasonryAccentImageSrc, 256, 256)}
                     />
                 </motion.div>}
                 <Grid item container justifyContent='center' spacing={2} px={4}>
@@ -56,8 +57,8 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                     })}
                 </Grid>
                 <Grid item container style={{padding: theme.spacing(8, 6)}}
-                      spacing={2} justifyContent='center'>
-                    <Grid item xs={12} sm={11}>
+                      spacing={2} >
+                    <Grid item container xs={12} sm={12} md={6}><Grid item  container xs={12}>
                         <Grid item container>
                             <BulletedHeader textContent={props.sectionData?.contentPreTitle} heroBullet={props.sectionData?.heroBullet} />
                         </Grid>
@@ -100,7 +101,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                                     variant='body1' gutterBottom>{segment}</Typography></Grid>
                                 </Grid>))}
                         </Grid>
-                    </Grid>
+                    </Grid></Grid>
 
                     <Grid item xs={12} md={6} spacing={2} container justifyContent='center'>
 
@@ -132,7 +133,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                                             <img
                                                 width={64}
                                                 height={64}
-                                                src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(64).height(64).url() ?? ""}
+                                                src={urlFor(props.sectionData?.servicesMasonryAccentImageSrc ?? "").width(64).height(64).url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesMasonryAccentImageSrc, 64, 64)}
                                             />
                                         </motion.div>
                                     </Grid>
@@ -141,10 +142,10 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                             }
                             {
                                 props.sectionData?.servicesImageSrcArr &&
-                                <Grid item container justifyContent='center'>
+                                <Grid item container justifyContent='center' alignContent='flex-end' alignItems='flex-end'>
                                     <Grid item>
                                         <img
-                                        src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? ""}/>
+                                        src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[0], 485, 356)}/>
                                     </Grid>
                                 </Grid>
                             }
@@ -153,13 +154,13 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                                 <Grid item container justifyContent='center' spacing={2}>
                                     <Grid item xs={6} container justifyContent='flex-end'>
                                         <Grid item><img
-                                            src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? ""}/></Grid>
+                                            src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[1], 230, 265)}/></Grid>
                                     </Grid>
                                     <Grid item xs={6}>
                                         <Grid item>
                                             <img
                                                 style={{maxWidth: "100%"}}
-                                            src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? ""}/></Grid>
+                                            src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[2], 260, 305)}/></Grid>
                                     </Grid>
                                 </Grid>
                             }
diff --git a/src/components/animated/AnimatedPortfolioItem.tsx b/src/components/animated/AnimatedPortfolioItem.tsx
index ab09941f..732366cc 100644
--- a/src/components/animated/AnimatedPortfolioItem.tsx
+++ b/src/components/animated/AnimatedPortfolioItem.tsx
@@ -6,6 +6,7 @@ import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
 import {AnimatedPortfolioItemType} from "../BlockContentTypes";
 import {motion, useAnimationControls} from 'framer-motion';
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -42,7 +43,7 @@ const AnimatedPortfolioItem: FunctionComponent<IProps> = (props:IProps) => {
             console.log("not hovering")
             animateServiceNoHover()
         }}><Button style={{
-            backgroundImage: `url(${urlFor(props.portfolioItem?.coverImage ?? "").url() ?? ""})`,
+            backgroundImage: `url(${urlFor(props.portfolioItem?.coverImage ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.portfolioItem?.coverImage,300, 250)})`,
             backgroundSize: "cover",
             backgroundPosition: "top center",
             backgroundRepeat: "no-repeat",
diff --git a/src/components/animated/AnimatedServiceItem.tsx b/src/components/animated/AnimatedServiceItem.tsx
index f279bc77..2d65a9e3 100644
--- a/src/components/animated/AnimatedServiceItem.tsx
+++ b/src/components/animated/AnimatedServiceItem.tsx
@@ -1,12 +1,11 @@
-import React, {FunctionComponent, useContext} from 'react'
-import {Card, Grid, ThemeProvider, Typography} from '@mui/material'
-import {v4 as uuidv4} from 'uuid'
+import React, {FunctionComponent} from 'react'
+import {Card, Grid, Typography, useTheme} from '@mui/material'
 import {AnimatedServiceItemNoRefType} from "../BlockContentTypes";
-import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
 import ColoredPng from "../colored-png/ColoredPng";
 import {motion, useAnimation, useAnimationControls} from "framer-motion"
 import {useInView} from "react-intersection-observer";
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 interface IProps {
     service: AnimatedServiceItemNoRefType
@@ -17,9 +16,8 @@ interface IProps {
 }
 
 const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
-    const customizedTheme = useContext(CustomizedThemeContext)
     const controls = useAnimationControls()
-
+    const theme = useTheme()
     const animateShrinkIcon = async () => {
         await controls.start({scale: 1})
     }
@@ -33,9 +31,8 @@ const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
 
     React.useEffect(() => {
         if (shapeInView) {
-             shapeControls.start("onScreen");
-        }
-        else {
+            shapeControls.start("onScreen");
+        } else {
             shapeControls.start("offScreen");
         }
     }, [shapeControls, shapeInView]);
@@ -46,76 +43,77 @@ const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
     };
 
     return (
-            <motion.div
-                ref={shapeRef}
-                variants={variants}
-                initial="offScreen"
-                animate={shapeControls}
-                onHoverStart={async () => {
-                    await animateShrinkIcon()
-                }}
-                onHoverEnd={() => {
-                    animateGrowIcon()
-                }}
-            >
-                <Card>
-                    <Grid container item
-                          padding={customizedTheme.customizedTheme.spacing(3, 2)}
-                          style={{backgroundColor: "#000000", position: "relative"}}
-                          justifyContent='center'>
-                        <Card  sx={{
-                            display: {sm:'none', md:'block'},
-                            position: "absolute",
-                            bottom: -180,
-                            width: "200px",
-                            height: "200px",
-                            backgroundColor: "#294856",
-                            borderRadius: "50%"
-                        }}></Card>
-                        <Grid container item justifyContent='center' alignItems='center'>
-                            <Grid item style={{position: "relative"}}>
-                                <Card style={{
-                                    position: "absolute",
-                                    bottom: -8,
-                                    right: -8,
-                                    opacity: .5,
-                                    width: "36px",
-                                    height: "36px",
-                                    backgroundColor: "#294856",
-                                    borderRadius: "50%"
-                                }}></Card>
-                                <motion.div
-                                    animate={controls}
-                                    initial={{scale: 1.15}}
-                                    // whileHover={{scale: 1}}
-                                    transition={{
-                                        duration: .5,
-                                    }}
-                                >
-                                    <ColoredPng size={64} color={'#01ecfd'}
-                                                maskAsset={props.service.iconImageSrc ?? ""}/>
-                                </motion.div>
-                            </Grid>
+        <motion.div
+            ref={shapeRef}
+            variants={variants}
+            initial="offScreen"
+            animate={shapeControls}
+            onHoverStart={async () => {
+                await animateShrinkIcon()
+            }}
+            onHoverEnd={() => {
+                animateGrowIcon()
+            }}
+        >
+            <Card>
+                <Grid container item
+                      padding={theme.spacing(3, 2)}
+                      style={{backgroundColor: "#000000", position: "relative"}}
+                      justifyContent='center'>
+                    <Card sx={{
+                        display: {sm: 'none', md: 'block'},
+                        position: "absolute",
+                        bottom: -180,
+                        width: "200px",
+                        height: "200px",
+                        backgroundColor: "#294856",
+                        borderRadius: "50%"
+                    }}></Card>
+                    <Grid container item justifyContent='center' alignItems='center'>
+                        <Grid item style={{position: "relative"}}>
+                            <Card style={{
+                                position: "absolute",
+                                bottom: -8,
+                                right: -8,
+                                opacity: .5,
+                                width: "36px",
+                                height: "36px",
+                                backgroundColor: "#294856",
+                                borderRadius: "50%"
+                            }}></Card>
+                            <motion.div
+                                animate={controls}
+                                initial={{scale: 1.15}}
+                                // whileHover={{scale: 1}}
+                                transition={{
+                                    duration: .5,
+                                }}
+                            >
+                                <ColoredPng size={64} color={'#01ecfd'}
+                                            maskAsset={props.service.iconImageSrc ?? ""}/>
+                            </motion.div>
                         </Grid>
+                    </Grid>
 
-                        <Grid item style={{
-                            backgroundSize: "contain",
-                            backgroundRepeat: "no-repeat",
-                            backgroundPosition: "right",
-                            backgroundImage: `url(${urlFor(props.service.backgroundImageSrc ?? "").url() ?? ""})`,
-                        }} justifyContent='center'>
-                            <Grid item>
-                                <Typography fontSize={24} color='textSecondary' style={{marginTop: "16px", marginBottom: "16px",}}
-                                            variant='body2' align='center'>{props.service.contentTitle}</Typography>
-                            </Grid>
-                            <Grid item>
-                                <Typography color='textSecondary' variant='body1' align='center'
-                                            maxWidth={350}>{props.service.contentText}</Typography>
-                            </Grid>
+                    <Grid item style={{
+                        // backgroundSize: "contain",
+                        // backgroundRepeat: "no-repeat",
+                        // backgroundPosition: "right",
+                        // backgroundImage: `url(${urlFor(props.service.backgroundImageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.service.backgroundImageSrc, 300, 500)})`,
+                    }} justifyContent='center'>
+                        <Grid item>
+                            <Typography fontSize={24} color='textSecondary'
+                                        style={{marginTop: "16px", marginBottom: "16px",}}
+                                        variant='body2' align='center'>{props.service.contentTitle}</Typography>
+                        </Grid>
+                        <Grid item>
+                            <Typography color='textSecondary' variant='body1' align='center'
+                                        maxWidth={350}>{props.service.contentText}</Typography>
                         </Grid>
                     </Grid>
-                </Card>
-            </motion.div>
+                </Grid>
+            </Card>
+        </motion.div>
     )
 }
 
diff --git a/src/components/animated/AnimatedServicesSection.tsx b/src/components/animated/AnimatedServicesSection.tsx
index 84d5894b..212a11a0 100644
--- a/src/components/animated/AnimatedServicesSection.tsx
+++ b/src/components/animated/AnimatedServicesSection.tsx
@@ -12,6 +12,7 @@ import AbstractShapesBackground from "./abstract-shapes-background/AbstractShape
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
 import {PlayArrow} from "@mui/icons-material";
 import {motion} from 'framer-motion';
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -29,21 +30,19 @@ interface IProps {
 
 const AnimatedServicesSection: FunctionComponent<IProps> = (props) => {
     const classes = useStyles()
-    const customizedThemeContext = useContext(CustomizedThemeContext)
     const theme= useTheme()
 
     const pageContext = useContext(PageContext)
-    const smDown = useMediaQuery(customizedThemeContext.customizedTheme.breakpoints.down('sm'))
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
 
     return (
-        <ThemeProvider theme={customizedThemeContext.customizedTheme}>
+        <Grid container item>
             <Grid container item className={classes.root} xs={12} alignItems='center' style={{
                 position: "relative",
-                // backgroundColor:customizedThemeContext.customizedTheme.palette.primary.dark
             }}>
                 <Grid item container
-                      style={{padding: customizedThemeContext.customizedTheme?.spacing(8, 6), zIndex: 10}}
+                      style={{padding: theme?.spacing(8, 6), zIndex: 10}}
                       spacing={2} justifyContent='center'>
                     <Grid item xs={12}>
                         <Grid item container>
@@ -121,13 +120,14 @@ const AnimatedServicesSection: FunctionComponent<IProps> = (props) => {
                 position: "relative",
                 backgroundRepeat: "repeat-x",
                 backgroundSize: "256px",
-                backgroundImage: `url(${urlFor(props.sectionData?.videoPreviewSectionBackgroundImageSrc ?? "").url() ?? ""})`
+                backgroundImage: `url(${urlFor(props.sectionData?.videoPreviewSectionBackgroundImageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.videoPreviewSectionBackgroundImageSrc, 230, 265)})`
             }} justifyContent='center' alignContent='center'>
                 <Grid item container xs={12} justifyContent='center' style={{top: -64, position: "relative"}}>
                     <Grid item xs={12} sm={10} sx={{height: "100%", position: "relative"}}
                     >
                         <img height="100%" width="100%"
-                             src={urlFor(props.sectionData?.videoPreviewImageSrc ?? "").url() ?? ""}/>
+
+                             src={urlFor(props.sectionData?.videoPreviewImageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.videoPreviewImageSrc, 300, 500)}/>
 
                     </Grid>
                 </Grid>
@@ -141,7 +141,7 @@ const AnimatedServicesSection: FunctionComponent<IProps> = (props) => {
                                 height: 56,
                                 position: "relative",
                                 zIndex: 10,
-                                backgroundColor: customizedThemeContext.customizedTheme?.palette?.primary.main
+                                backgroundColor: theme?.palette?.primary.main
                             }}>
                                         <PlayArrow style={{fontSize: "2.8rem"}} color='secondary'/>
                             </IconButton>
@@ -222,8 +222,7 @@ const AnimatedServicesSection: FunctionComponent<IProps> = (props) => {
                         </Grid>
                     </Grid>
                 </Grid>
-            </Grid>
-        </ThemeProvider>
+            </Grid></Grid>
     )
 }
 
diff --git a/src/components/animated/BulletedHeader.tsx b/src/components/animated/BulletedHeader.tsx
index ad0915a6..4573693f 100644
--- a/src/components/animated/BulletedHeader.tsx
+++ b/src/components/animated/BulletedHeader.tsx
@@ -1,7 +1,5 @@
-import React, {FunctionComponent, useContext} from 'react'
-import {Grid, Typography} from "@mui/material";
-import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
-import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
+import React, {FunctionComponent} from 'react'
+import {Grid, Typography, useTheme} from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
 import {SanityImageAsset} from "../BlockContentTypes";
@@ -23,22 +21,22 @@ const BulletedHeader: FunctionComponent<IProps> = (props: IProps) => {
 
     React.useEffect(() => {
     }, [])
-    const customizedThemeContext = useContext(CustomizedThemeContext)
+    const theme = useTheme()
 
-
-    return (<Grid item container justifyContent={props.isCenter?'center':'flex-start'} alignItems='center'>
+    return (<Grid item container justifyContent={props.isCenter ? 'center' : 'flex-start'} alignItems='center'>
 
         <Grid item style={{zIndex: 10, marginRight: "4px"}}>{props.heroBullet &&
-            <ColoredPng size={11} maskAsset={props.heroBullet} color={props.color === 'secondary' ? customizedThemeContext.customizedTheme.palette.secondary.light: customizedThemeContext.customizedTheme.palette.primary.dark} />
+            <ColoredPng size={11} maskAsset={props.heroBullet}
+                        color={props.color === 'secondary' ? theme.palette.secondary.light : theme.palette.primary.dark}/>
             // <img width={10} height={10}
             //      src={urlFor(props.heroBullet).url() ?? ""}/>
-                 }
+        }
         </Grid>
         <Grid item style={{position: "relative"}}>
             <Grid item
                   style={{
-                      borderTop: `1px solid ${props.color === 'secondary' ? customizedThemeContext.customizedTheme.palette.secondary.main : customizedThemeContext.customizedTheme.palette.primary.main}`,
-                      borderLeft: `1px solid ${props.color === 'secondary' ? customizedThemeContext.customizedTheme.palette.secondary.light : customizedThemeContext.customizedTheme.palette.primary.main}`,
+                      borderTop: `1px solid ${props.color === 'secondary' ? theme.palette.secondary.main : theme.palette.primary.main}`,
+                      borderLeft: `1px solid ${props.color === 'secondary' ? theme.palette.secondary.light : theme.palette.primary.main}`,
                       left: -9,
                       top: 0,
                       position: "absolute",
@@ -49,7 +47,7 @@ const BulletedHeader: FunctionComponent<IProps> = (props: IProps) => {
                         color={props.color === 'secondary' ? 'textSecondary' : 'primary'}
                         style={{
                             textTransform: "uppercase",
-                            // color: customizedThemeContext.customizedTheme.palette.text.secondary,
+                            // color: theme.palette.text.secondary,
                             fontWeight: "700",
                             letterSpacing: 1.6
                         }}>{props.textContent}</Typography>
diff --git a/src/components/animated/HeroAnimatedContentSection.tsx b/src/components/animated/HeroAnimatedContentSection.tsx
index 5a2976f2..634888ae 100644
--- a/src/components/animated/HeroAnimatedContentSection.tsx
+++ b/src/components/animated/HeroAnimatedContentSection.tsx
@@ -11,6 +11,7 @@ import firebaseAnalyticsClient from "../../common/firebase/FirebaseAnalyticsClie
 import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
 import {ArrowBack, ArrowForward, ChevronLeft, ChevronRight} from "@mui/icons-material";
 import {motion} from "framer-motion"
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 interface IProps {
     sectionData: HeroAnimatedContentSectionType
@@ -47,11 +48,13 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
 
     const [pageNumber, setPageNumber] = React.useState<number>(0)
     const [contentSlide, setContentSlide] = React.useState<SanityHeroContentSlide | undefined>()
-    const themeContext = useContext(CustomizedThemeContext)
 
     const theme = useTheme()
     const pageContext: PageContextType = useContext(PageContext)
 
+    React.useEffect(() => {
+        console.log('image placeholder url',)
+        }, [contentSlide])
     React.useEffect(() => {
         if (props.sectionData.contentSlides[pageNumber])
             setContentSlide(props.sectionData.contentSlides[pageNumber])
@@ -64,7 +67,7 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
 
                     <Grid container item style={{
                         backgroundRepeat: 'no-repeat',
-                        backgroundImage: contentSlide?.heroImage ? `url('${urlFor(contentSlide?.heroImage).url() ?? ''}'), url('${urlFor(contentSlide?.heroImageBackground ?? "").url()}')` : "",
+                        backgroundImage: contentSlide?.heroImage ? `url('${urlFor(contentSlide?.heroImage).url() ?? imagePlaceholderClient.placeholderOrImage(contentSlide?.heroImage, 200, 100)}'), url('${urlFor(contentSlide?.heroImageBackground ?? "").url()?? imagePlaceholderClient.placeholderOrImage(contentSlide?.heroImageBackground, 200, 100)}')` : `url('${imagePlaceholderClient.placeholderOrImage(contentSlide?.heroImage, 500, 700)}')`,
                         backgroundSize: 'cover, contain',
                         backgroundPosition: "center",
                         minHeight: '700px',
@@ -131,15 +134,15 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
                                                         <Grid item container justifyContent='center' spacing={1}
                                                               wrap='nowrap'>
                                                             <Grid item>
-                                                                {contentSlide?.heroBullet && <img width={12}
-                                                                                                  src={urlFor(contentSlide?.heroBullet).url() ?? ""}/>}
+                                                                 <img width={12}
+                                                                                                  src={imagePlaceholderClient.placeholderOrImage(contentSlide?.heroBullet, 100, 200)}/>
                                                             </Grid>
                                                             <Grid item>
                                                                 <Typography variant='body1' alignContent='center'
                                                                             noWrap
                                                                             style={{
                                                                                 textTransform: "uppercase",
-                                                                                color: themeContext.customizedTheme.palette.text.secondary,
+                                                                                color: theme.palette.text.secondary,
                                                                                 fontWeight: "700",
                                                                                 letterSpacing: 4.3
                                                                             }}>{contentSlide?.contentWelcomeMessage}</Typography>
@@ -153,7 +156,7 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
                                                                             fontWeight: "700",
                                                                             lineHeight: ".98em",
                                                                             maxWidth: "350px",
-                                                                            fontFamily: themeContext.customizedTheme.typography.fontFamily.split(',')[1]
+                                                                            // fontFamily: themeContext.customizedTheme.typography.fontFamily.split(',')[1]
                                                                         }}
                                                                         color={'textSecondary'}>{contentSlide?.contentTitle}</Typography>
                                                         </Grid>
@@ -188,7 +191,7 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
                                                                     style={{
                                                                         height: "48px",
                                                                         border: "0",
-                                                                        padding: themeContext.customizedTheme.spacing(3.5, 8)
+                                                                        padding: theme.spacing(3.5, 8)
                                                                     }}
                                                                     onClick={() => {
                                                                         firebaseAnalyticsClient.ctaClick("hero-section", contentSlide?.ctaButtonTitle ?? "", pageContext.analyticsId,)
diff --git a/src/components/animated/HorizontalAmenity.tsx b/src/components/animated/HorizontalAmenity.tsx
index 2fe6afb0..5d714eca 100644
--- a/src/components/animated/HorizontalAmenity.tsx
+++ b/src/components/animated/HorizontalAmenity.tsx
@@ -1,11 +1,11 @@
-import React, {FunctionComponent, useContext} from 'react'
-import {Card, Grid, Typography} from "@mui/material";
+import React, {FunctionComponent} from 'react'
+import {Card, Grid, Typography, useTheme} from "@mui/material";
 import {motion, useAnimationControls} from "framer-motion";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
-import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext";
 import {ServiceAmenityType} from "../BlockContentTypes";
 import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {},
@@ -16,18 +16,19 @@ interface IProps {
 }
 
 const HorizontalAmenity: FunctionComponent<IProps> = (props: IProps) => {
-    const customizedThemeContext = useContext(CustomizedThemeContext)
 
     const controls = useAnimationControls()
 
     const animateFlipIcon = async () => {
-        await controls.start({rotateY: 180},{duration: .5})
+        await controls.start({rotateY: 180}, {duration: .5})
     }
 
     const animateUnFlipIcon = async () => {
         await controls.start({rotateY: 0}, {duration: .2})
     }
 
+    const theme = useTheme()
+
     return (
         <motion.div onHoverStart={animateFlipIcon} onHoverEnd={animateUnFlipIcon}>
             <Grid item container spacing={1}>
@@ -38,13 +39,13 @@ const HorizontalAmenity: FunctionComponent<IProps> = (props: IProps) => {
                         opacity: .5,
                         width: "36px",
                         height: "36px",
-                        backgroundColor: customizedThemeContext.customizedTheme.palette.primary.main,
+                        backgroundColor: theme.palette.primary.main,
                         borderRadius: "50%"
                     }}></Card>
                     <motion.div
                         animate={controls}
                     >
-                        <img width={56} src={urlFor(props.amenity.imageSrc ?? "").url() ?? ""}/>
+                        <img width={56} src={urlFor(props.amenity.imageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.amenity.imageSrc, 56, 56)}/>
                     </motion.div>
                 </Grid>
                 <Grid item maxWidth={250}>
@@ -55,7 +56,8 @@ const HorizontalAmenity: FunctionComponent<IProps> = (props: IProps) => {
                         <Typography variant='body1'>{props.amenity.description}</Typography>
                     </Grid>
                 </Grid>
-            </Grid></motion.div>)
+            </Grid>
+        </motion.div>)
 }
 
 export default HorizontalAmenity
diff --git a/src/components/animated/abstract-shapes-background/AbstractShapesBackground.tsx b/src/components/animated/abstract-shapes-background/AbstractShapesBackground.tsx
index 8f490487..03145bbf 100644
--- a/src/components/animated/abstract-shapes-background/AbstractShapesBackground.tsx
+++ b/src/components/animated/abstract-shapes-background/AbstractShapesBackground.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent, useContext} from 'react'
+import React, {FunctionComponent} from 'react'
 import shape3 from "./services-v1-shape3-dark-blue.png";
 import shape9 from "./services-v1-shape9-dark-blue.png";
 import shape11 from "./services-v1-shape11-dark-blue.png";
@@ -9,8 +9,7 @@ import shape5 from "./services-v1-shape5-dark-blue.png";
 import shape2 from "./services-v1-shape2-dark-blue.png";
 import shape6 from "./services-v1-shape6-dark-blue.png";
 import shape10 from "./services-v1-shape10-dark-blue.png";
-import CustomizedThemeContext from "../../customized-theme-provider/CustomizedThemeContext";
-import {Grid} from "@mui/material";
+import {Grid, useTheme} from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
 import AnimatedAbstractShape from "./AnimatedAbstractShape";
@@ -23,8 +22,7 @@ interface IProps {
 }
 
 const AbstractShapesBackground: FunctionComponent<IProps> = (props: IProps) => {
-    const customizedThemeContext = useContext(CustomizedThemeContext)
-
+    const theme = useTheme()
     const shape2Variants = {
         onScreen: {top: 0, transition: {duration: .65}},
         offScreen: {top: -440, transition: {duration: .65}}
@@ -77,7 +75,7 @@ const AbstractShapesBackground: FunctionComponent<IProps> = (props: IProps) => {
 
     return (<Grid container item
                   style={{
-                      backgroundColor: customizedThemeContext.customizedTheme.palette.primary.dark,
+                      backgroundColor: theme.palette.primary.dark,
                       zIndex: 0,
                       width: "100%",
                       height: "100%",
diff --git a/src/components/colored-png/ColoredPng.tsx b/src/components/colored-png/ColoredPng.tsx
index 8955a4e5..5e208b30 100644
--- a/src/components/colored-png/ColoredPng.tsx
+++ b/src/components/colored-png/ColoredPng.tsx
@@ -4,6 +4,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import {Grid} from '@mui/material'
 import {SanityImageAsset} from "../BlockContentTypes";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
+import imagePlaceholderClient from "../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {},
@@ -29,10 +30,9 @@ const ColoredPng: FunctionComponent<IProps> = (props: IProps) => {
             setImageUrl(props.maskUrl)
         }
         if (props.maskAsset) {
-            setImageUrl(urlFor(props.maskAsset).url() ?? "")
-        }
-            else{
-            setImageUrl(`https://placehold.co/${imageSize}x${imageSize}`)
+            setImageUrl(urlFor(props.maskAsset).url() ?? imagePlaceholderClient.placeholderOrImage(props.maskAsset, props.size, props.size))
+        }else {
+            setImageUrl(imagePlaceholderClient.placeholderOrImage(props.maskAsset, props.size, props.size))
         }
     }, [])
 
diff --git a/src/components/customized-theme-provider/CustomizedThemeProvider.tsx b/src/components/customized-theme-provider/CustomizedThemeProvider.tsx
index f3cf2909..53c44f54 100644
--- a/src/components/customized-theme-provider/CustomizedThemeProvider.tsx
+++ b/src/components/customized-theme-provider/CustomizedThemeProvider.tsx
@@ -9,6 +9,7 @@ import PageContext from "../page-context/PageContext";
 import TheWebsiteTheme from "../../theme/Theme";
 import cmsClient from "../block-content-ui/cmsClient";
 import capitalizeArray from "../../utils/textProcessingUtils";
+import getThemeFromSanity from "./getThemeFromSanity";
 
 type IProps = {
     pageTheme?: SanityMuiTheme
@@ -39,178 +40,9 @@ const CustomizedThemeProvider: FunctionComponent<IProps & PropsWithChildren> = (
         console.log("customized theme change",customizedTheme)
     }, [customizedTheme])
 
-    const getThemeFromSanity = (theme: SanityMuiTheme) => {
-        const createMuiFontFace = (sanityFontFace: SanityMuiFontFace) => {
-            let processedMediaQuery:any[] = [];
-            if(sanityFontFace.mediaQueries?.length > 0){
-                processedMediaQuery = sanityFontFace.mediaQueries.map((mediaQuery)=>{
-
-                const query:any = {}
-                     // @ts-ignore
-                     query[`@media (max-width:${theme.breakpoints[mediaQuery.breakpoint[0]]}px)`] = mediaQuery.typography;
-                return query
-                })
-            }
-
-            return {
-                fontSize: sanityFontFace.fontSize,
-                ...processedMediaQuery[0],
-                fontStyle: sanityFontFace.fontStyle,
-                fontWeight: sanityFontFace.fontWeight,
-                lineHeight: sanityFontFace.lineHeight,
-                letterSpacing: sanityFontFace.letterSpacing,
-                textTransform: sanityFontFace.textTransform
-            }
-        }
-        const extractSanityFontFace = (fontFaceName: string) => {
-            const fontFaceFromSanity = theme.typography?.fontFaces?.find((fontFace: SanityMuiFontFace) => {
-                if (fontFace.name === fontFaceName) {
-                    return fontFace
-                }
-                return undefined
-            })
-            return fontFaceFromSanity ? createMuiFontFace(fontFaceFromSanity) : undefined
-        }
 
-        return createTheme({
-            breakpoints: {
-                values: {
-                    xs: parseInt(String(theme.breakpoints?.xs ?? 0)),
-                    sm: parseInt(String(theme.breakpoints?.sm ?? 640)),
-                    md: parseInt(String(theme.breakpoints?.md ?? 980)),
-                    lg: parseInt(String(theme.breakpoints?.lg ?? 1160)),
-                    xl: parseInt(String(theme.breakpoints?.xl ?? 1320)),
-                }
-            },
-            palette: {
-                background: {
-                    default: theme.colorPalette?.defaultBackground ? convertToHexCode(theme.colorPalette?.defaultBackground) : COLORS.WHITESMOKE,
-                    paper: theme.colorPalette?.defaultPaperBackgroundColor ? convertToHexCode(theme.colorPalette?.defaultPaperBackgroundColor) : COLORS.DARKGRAY
-                },
-                primary: {
-                    main: theme.colorPalette?.primaryColor ? convertToHexCode(theme.colorPalette?.primaryColor) : COLORS.RED,
-                },
-                secondary: {
-                    main: theme.colorPalette?.secondaryColor ? convertToHexCode(theme.colorPalette?.secondaryColor) : COLORS.ALMOSTWHITE,
-                },
-                error: {
-                    main: '#840E0E',
-                    light: '#D79393',
-                    dark: '#640E0E'
-                },
-                success: {
-                    main: '#27AE60',
-                    light: '#93D7B0',
-                    dark: '#0E8433'
-                },
-                warning: {
-                    main: '#E2AB1F',
-                    light: '#F1D58F',
-                    dark: '#CF800A'
-                },
-                text: {
-                    primary: theme.colorPalette?.primaryTextColor ? convertToHexCode(theme.colorPalette?.primaryTextColor) : COLORS.DARKGRAY,
-                    secondary: theme.colorPalette?.secondaryTextColor ? convertToHexCode(theme.colorPalette?.secondaryTextColor) : grey[100],
-                    disabled: theme.colorPalette?.disabledTextColor ? convertToHexCode(theme.colorPalette?.disabledTextColor) : COLORS.LIGHT_GRAY
-                }
-            },
-            mixins: {
-                toolbar: {
-                    height: (theme.appBarHeight ?? 55) + "px"
-                }
-            },
-            typography: {
-                fontFamily: theme.typography?.fontFamily ? capitalizeArray(theme.typography.fontFamily).join(',') : fonts,
-                h1: extractSanityFontFace('h1'),
-                h2: extractSanityFontFace('h2'),
-                h3: extractSanityFontFace('h3'),
-                h4: extractSanityFontFace('h4'),
-                h5: extractSanityFontFace('h5'),
-                h6: extractSanityFontFace('h6'),
-                body1: extractSanityFontFace('body1'),
-                body2: extractSanityFontFace('body2'),
-                button: extractSanityFontFace('button'),
-                subtitle1: extractSanityFontFace('subtitle1'),
-                subtitle2: extractSanityFontFace('subtitle2')
-            },
-            components: {
-                MuiInputBase: {
-                    styleOverrides: {
-                        root: {
-                            borderRadius: 0,
-                            "& .Mui-focus": {
-                                borderBottom: 0
-                            }
-                        },
-                    }
-                },
-                MuiSnackbarContent: {
-                    styleOverrides: {
-                        root: {
-                            marginTop: "100px",
-                            border: "3px solid white",
-                            backgroundColor: 'rgba(210,0,39,0.9) !important'
-                        }
-                    }
-                },
-                MuiFormLabel: {
-                    styleOverrides: {
-                        root: {
-                            color: "#383838 !important",
-                            paddingTop: "4px !important",
-                        }
-                    }
-                },
-                MuiButton: {
-                    styleOverrides: {
-                        root: {
-                            borderRadius: '-64px',
-                            paddingTop: "16px",
-                            paddingBottom: "16px",
-                        },
-                        contained: {
-                            boxShadow: "none",
-                        },
-                        containedPrimary: {
-                            border: `1px solid ${theme.colorPalette?.buttonOutlineColor ? convertToHexCode(theme.colorPalette.buttonOutlineColor):"transparent"}`,
-                            '&.Mui-disabled': {
-                                color: '#969284'
-                            },
-                        },
-                        containedSecondary: {
-                            border: '1px solid transparent',
-                            '&.Mui-disabled': {
-                                color: 'rgba(207, 207, 207, .5)',
-                            },
-                        },
-                        outlinedPrimary: {
-                            borderWidth: '3px',
-                            paddingTop: "16px",
-                            paddingBottom: "16px",
-                            paddingLeft: "64px",
-                            paddingRight: "64px"
-                        },
-                        outlinedSecondary: {
-                            borderWidth: '3px',
-                            paddingTop: "16px",
-                            paddingBottom: "16px",
-                            paddingLeft: "64px",
-                            paddingRight: "64px",
-                        }
-                    }
-                },
-                MuiOutlinedInput: {
-                    styleOverrides: {
-                        root: {
-                            paddingRight: "16px",
-                            borderColor: 'black',
-                            // border: "1px solid transparent"
-                        }
-                    }
-                }
-            }
-        });
-    }
+
+
 
     const getThemeBySlug = async (slug: string) => {
         const theRetrievedTheme = await cmsClient.fetchMuiTheme(slug)
diff --git a/src/components/customized-theme-provider/getThemeFromSanity.ts b/src/components/customized-theme-provider/getThemeFromSanity.ts
new file mode 100644
index 00000000..cb92dedf
--- /dev/null
+++ b/src/components/customized-theme-provider/getThemeFromSanity.ts
@@ -0,0 +1,181 @@
+import {SanityMuiFontFace, SanityMuiTheme} from "../../common/sanityIo/Types";
+import {createTheme} from "@mui/material/styles";
+import {COLORS, convertToHexCode} from "../../theme/common/ColorPalette";
+import {grey} from "@mui/material/colors";
+import capitalizeArray from "../../utils/textProcessingUtils";
+const fonts = `"Raleway", "Oswald"`
+
+const getThemeFromSanity = (theme: SanityMuiTheme) => {
+    const createMuiFontFace = (sanityFontFace: SanityMuiFontFace) => {
+        let processedMediaQuery:any[] | undefined = [];
+        if((sanityFontFace.mediaQueries?.length?? 0) > 0){
+            processedMediaQuery = sanityFontFace.mediaQueries?.map((mediaQuery)=>{
+
+                const query:any = {}
+                // @ts-ignore
+                query[`@media (max-width:${theme.breakpoints[mediaQuery.breakpoint[0]]}px)`] = mediaQuery.typography;
+                return query
+            })
+        }
+
+        return {
+            fontSize: sanityFontFace.fontSize,
+            ...(processedMediaQuery?processedMediaQuery[0]:[]),
+            fontStyle: sanityFontFace.fontStyle,
+            fontWeight: sanityFontFace.fontWeight,
+            lineHeight: sanityFontFace.lineHeight,
+            letterSpacing: sanityFontFace.letterSpacing,
+            textTransform: sanityFontFace.textTransform
+        }
+    }
+    const extractSanityFontFace = (fontFaceName: string) => {
+        const fontFaceFromSanity = theme.typography?.fontFaces?.find((fontFace: SanityMuiFontFace) => {
+            if (fontFace.name === fontFaceName) {
+                return fontFace
+            }
+            return undefined
+        })
+        return fontFaceFromSanity ? createMuiFontFace(fontFaceFromSanity) : undefined
+    }
+
+    return createTheme({
+        breakpoints: {
+            values: {
+                xs: parseInt(String(theme.breakpoints?.xs ?? 0)),
+                sm: parseInt(String(theme.breakpoints?.sm ?? 640)),
+                md: parseInt(String(theme.breakpoints?.md ?? 980)),
+                lg: parseInt(String(theme.breakpoints?.lg ?? 1160)),
+                xl: parseInt(String(theme.breakpoints?.xl ?? 1320)),
+            }
+        },
+        palette: {
+            background: {
+                default: theme.colorPalette?.defaultBackground ? convertToHexCode(theme.colorPalette?.defaultBackground) : COLORS.WHITESMOKE,
+                paper: theme.colorPalette?.defaultPaperBackgroundColor ? convertToHexCode(theme.colorPalette?.defaultPaperBackgroundColor) : COLORS.DARKGRAY
+            },
+            primary: {
+                main: theme.colorPalette?.primaryColor ? convertToHexCode(theme.colorPalette?.primaryColor) : COLORS.RED,
+            },
+            secondary: {
+                main: theme.colorPalette?.secondaryColor ? convertToHexCode(theme.colorPalette?.secondaryColor) : COLORS.ALMOSTWHITE,
+            },
+            error: {
+                main: '#840E0E',
+                light: '#D79393',
+                dark: '#640E0E'
+            },
+            success: {
+                main: '#27AE60',
+                light: '#93D7B0',
+                dark: '#0E8433'
+            },
+            warning: {
+                main: '#E2AB1F',
+                light: '#F1D58F',
+                dark: '#CF800A'
+            },
+            text: {
+                primary: theme.colorPalette?.primaryTextColor ? convertToHexCode(theme.colorPalette?.primaryTextColor) : COLORS.DARKGRAY,
+                secondary: theme.colorPalette?.secondaryTextColor ? convertToHexCode(theme.colorPalette?.secondaryTextColor) : grey[100],
+                disabled: theme.colorPalette?.disabledTextColor ? convertToHexCode(theme.colorPalette?.disabledTextColor) : COLORS.LIGHT_GRAY
+            }
+        },
+        mixins: {
+            toolbar: {
+                height: (theme.appBarHeight ?? 55) + "px"
+            }
+        },
+        typography: {
+            fontFamily: theme.typography?.fontFamily ? capitalizeArray(theme.typography.fontFamily).join(',') : fonts,
+            h1: extractSanityFontFace('h1'),
+            h2: extractSanityFontFace('h2'),
+            h3: extractSanityFontFace('h3'),
+            h4: extractSanityFontFace('h4'),
+            h5: extractSanityFontFace('h5'),
+            h6: extractSanityFontFace('h6'),
+            body1: extractSanityFontFace('body1'),
+            body2: extractSanityFontFace('body2'),
+            button: extractSanityFontFace('button'),
+            subtitle1: extractSanityFontFace('subtitle1'),
+            subtitle2: extractSanityFontFace('subtitle2')
+        },
+        components: {
+            MuiInputBase: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: 0,
+                        "& .Mui-focus": {
+                            borderBottom: 0
+                        }
+                    },
+                }
+            },
+            MuiSnackbarContent: {
+                styleOverrides: {
+                    root: {
+                        marginTop: "100px",
+                        border: "3px solid white",
+                        backgroundColor: 'rgba(210,0,39,0.9) !important'
+                    }
+                }
+            },
+            MuiFormLabel: {
+                styleOverrides: {
+                    root: {
+                        color: "#383838 !important",
+                        paddingTop: "4px !important",
+                    }
+                }
+            },
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '-64px',
+                        paddingTop: "16px",
+                        paddingBottom: "16px",
+                    },
+                    contained: {
+                        boxShadow: "none",
+                    },
+                    containedPrimary: {
+                        border: `1px solid ${theme.colorPalette?.buttonOutlineColor ? convertToHexCode(theme.colorPalette.buttonOutlineColor):"transparent"}`,
+                        '&.Mui-disabled': {
+                            color: '#969284'
+                        },
+                    },
+                    containedSecondary: {
+                        border: '1px solid transparent',
+                        '&.Mui-disabled': {
+                            color: 'rgba(207, 207, 207, .5)',
+                        },
+                    },
+                    outlinedPrimary: {
+                        borderWidth: '3px',
+                        paddingTop: "16px",
+                        paddingBottom: "16px",
+                        paddingLeft: "64px",
+                        paddingRight: "64px"
+                    },
+                    outlinedSecondary: {
+                        borderWidth: '3px',
+                        paddingTop: "16px",
+                        paddingBottom: "16px",
+                        paddingLeft: "64px",
+                        paddingRight: "64px",
+                    }
+                }
+            },
+            MuiOutlinedInput: {
+                styleOverrides: {
+                    root: {
+                        paddingRight: "16px",
+                        borderColor: 'black',
+                        // border: "1px solid transparent"
+                    }
+                }
+            }
+        }
+    });
+}
+
+export default getThemeFromSanity
\ No newline at end of file
diff --git a/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx b/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
index 9e25b781..ffff7059 100644
--- a/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
+++ b/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
@@ -1,13 +1,13 @@
-import React, {FunctionComponent, useContext} from 'react'
+import React, {FunctionComponent} from 'react'
 import {Theme} from "@mui/material/styles";
 import makeStyles from '@mui/styles/makeStyles';
-import {AppBar, Button, Card, Grid, Typography} from '@mui/material'
+import {AppBar, Button, Card, Grid, Typography, useTheme} from '@mui/material'
 import clsx from "clsx";
 import {COLORS} from "../../../../theme/common/ColorPalette";
-import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext";
 import Header from "./Header";
 import {HeaderSectionType} from "../../../BlockContentTypes";
 import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
+import imagePlaceholderClient from "../../../../utils/imagePlaceholderClient";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: {
@@ -30,24 +30,25 @@ export type EnhancedHeaderProps = {
 }
 
 const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {
-    const customizedTheme = useContext(CustomizedThemeContext)
-
-    const classes = useStyles({
-        paddingLeft: customizedTheme.customizedTheme.spacing(4),
-    })
+    const classes = useStyles()
 
     return (
-        <AppBar className={clsx({[classes.opaque]: true}, classes.root)}>{props.pageHeader?.headerMenuRef.title ?
+        <AppBar className={clsx({[classes.opaque]: true}, classes.root)}>{props.pageHeader?.headerMenuRef?.title ?
 
             <Grid container item>
                 <Grid container item spacing={4} justifyContent='space-between' wrap='nowrap'>
                     <Grid item xs={3}>
                         <Button fullWidth variant='contained'
-                                href={props.pageHeader?.ctaButtonLink}><Typography variant='button' noWrap>{props.pageHeader?.ctaButtonText}</Typography></Button>
+                                href={props.pageHeader?.ctaButtonLink}><Typography variant='button'
+                                                                                   noWrap>{props.pageHeader?.ctaButtonText}</Typography></Button>
                     </Grid>
                     {
-                        props.pageHeader.highlightedDetails.map((detail, index)=><Grid key={index}  xs={3}  container justifyContent='flex-end' alignItems='flex-end' alignContent='flex-end'>
-                            <Grid  item container xs={12} sm={3} maxWidth={350} minWidth={270} spacing={1} wrap='nowrap' justifyContent='flex-end' alignItems='center'>
+                        props.pageHeader.highlightedDetails?.map((detail, index) => <Grid key={index} xs={3} container
+                                                                                          justifyContent='flex-end'
+                                                                                          alignItems='flex-end'
+                                                                                          alignContent='flex-end'>
+                            <Grid item container xs={12} sm={3} maxWidth={350} minWidth={270} spacing={1} wrap='nowrap'
+                                  justifyContent='flex-end' alignItems='center'>
                                 <Grid item maxWidth={64} style={{position: "relative"}}>
 
                                     <Card elevation={0} style={{
@@ -56,8 +57,10 @@ const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {
                                         backgroundColor: "#e3e3e3",
                                         borderRadius: "50%"
                                     }}>
-                                        <Grid container justifyContent='center' alignContent='center' alignItems='center' style={{height:"100%", width:"100%"}}><Grid item>
-                                            <img width={24} src={urlFor(detail.imageSrc ?? "").url() ?? ""} style={{paddingTop:"6px"}}/>
+                                        <Grid container justifyContent='center' alignContent='center'
+                                              alignItems='center' style={{height: "100%", width: "100%"}}><Grid item>
+                                            <img width={24} src={imagePlaceholderClient.placeholderOrImage(detail.imageSrc,24,24)}
+                                                 style={{paddingTop: "6px"}}/>
                                         </Grid></Grid>
                                     </Card>
                                     {/*<motion.div whileHover={{rotateY: 180}}*/}
@@ -69,10 +72,12 @@ const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {
                                 </Grid>
                                 <Grid item maxWidth={260}>
                                     <Grid item>
-                                        <Typography variant='body1' color='textPrimary' noWrap>{detail.name}</Typography>
+                                        <Typography variant='body1' color='textPrimary'
+                                                    noWrap>{detail.name}</Typography>
                                     </Grid>
                                     <Grid item>
-                                        <Typography fontWeight='bold' fontSize='16px' variant='body2' color='textPrimary'>{detail.description}</Typography>
+                                        <Typography fontWeight='bold' fontSize='16px' variant='body2'
+                                                    color='textPrimary'>{detail.description}</Typography>
                                     </Grid>
                                 </Grid>
                             </Grid>
@@ -83,7 +88,7 @@ const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {
                     {/*enhanced*/}
                     <Grid xs={12} container item style={{
                         // padding: "16px",
-                        padding:"8px",
+                        padding: "8px",
                         // maxWidth: "calc(100%-100px)",
                         // marginRight: "8px",
                         // width: "100%",
@@ -92,7 +97,8 @@ const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {
                         borderRadius: 4,
                         backgroundColor: "black"
                     }}>
-                        <Header isSearch={props.pageHeader.isSearch} pageHeader={props.pageHeader.headerMenuRef} isEnhanced={true}/>
+                        <Header isSearch={props.pageHeader?.isSearch} pageHeader={props.pageHeader?.headerMenuRef}
+                                isEnhanced={true}/>
                     </Grid>
                 </Grid></Grid>
             : <></>
diff --git a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx
index c5b626ac..96aa1a53 100644
--- a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx
+++ b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent} from 'react'
+import React, {FunctionComponent, useContext} from 'react'
 import {Button, ButtonGroup, Grid, Typography, useMediaQuery, useTheme,} from '@mui/material';
 import {ResumeBioSectionType} from "../../../BlockContentTypes";
 import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
@@ -6,6 +6,8 @@ import {SanityTransformHwHomePage} from "../../../../common/sanityIo/Types";
 import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles";
 import SocialMediaBlock from "../social-media-block/SocialMediaBlock";
 import BusinessCardSubmitEmail from "../../transform-hw/pages/BusinessCardSubmitEmail";
+import CustomizedThemeProvider from "../../../customized-theme-provider/CustomizedThemeProvider";
+import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext";
 
 
 interface IProps {
@@ -20,6 +22,7 @@ const ResumeBioSection: FunctionComponent<IProps> = (props: IProps) => {
 
     const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
+    const customizedthemeContext = useContext(CustomizedThemeContext)
     return (
         <Grid container item style={{padding: theme.spacing(4,smDown?1:4)}} justifyContent='center'
               className={classes.resumeSection} spacing={3}>
diff --git a/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx b/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx
index 4b8a94eb..021953c6 100644
--- a/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx
+++ b/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx
@@ -8,7 +8,7 @@ import PageContext from "../../page-context/PageContext";
 import WebDevSiteTheme from "../../../theme/WebDevSiteTheme";
 import makeStyles from "@mui/styles/makeStyles";
 import {Theme, ThemeProvider} from "@mui/material/styles";
-import {Button, Grid, Typography} from "@mui/material";
+import {Button, Grid, Typography, useTheme} from "@mui/material";
 // import FontFaces from "../../theme/common/FontFaces";
 
 interface IProps {
@@ -44,7 +44,7 @@ const WebDevHeroContentSection: FunctionComponent<IProps> = (props) => {
     }
 
     const pageContext = useContext(PageContext)
-
+const theme= useTheme()
     const classes = useStyles(classParameters)
     const globalClasses = useCustomStyles({})
     return (
@@ -58,13 +58,13 @@ const WebDevHeroContentSection: FunctionComponent<IProps> = (props) => {
                         <Grid container spacing={2} xs={8}>
                             <Grid item xs={8} container>
                                 <Typography variant='h2'
-                                            color={'textPrimary'}
-                                            style={{fontFamily:"Elaine Sans"}}>{props.sectionData.contentTitle}</Typography>
+                                            color={'textPrimary'}>{props.sectionData.contentTitle}</Typography>
                             </Grid>
                             <Grid container item xs={8}>
                                 <Typography variant='body1'
+                                            sx={{fontFamily:theme.typography.fontFamily?.split(',')[1]}}
                                             color='textPrimary'
-                                            style={{fontFamily: "Raleway"}}>{props.sectionData.contentText}</Typography>
+                                            >{props.sectionData.contentText}</Typography>
                             </Grid>
                             <Grid item container>
                                 <Button color='primary' variant='outlined'
diff --git a/src/stories/data/AnimatedAboutUsSectionData.ts b/src/stories/data/AnimatedAboutUsSectionData.ts
new file mode 100644
index 00000000..c6147936
--- /dev/null
+++ b/src/stories/data/AnimatedAboutUsSectionData.ts
@@ -0,0 +1,102 @@
+import {
+    AnimatedAboutUsSectionType,
+    HeroAnimatedContentSectionType,
+    ResumeBioSectionType
+} from "../../components/BlockContentTypes";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+
+const animatedAboutUsSectionType:AnimatedAboutUsSectionType = {
+    contentText: "",
+    title: "",
+    "highlightedAmenities": [
+        {
+            "description": "There are many variations of passages of lorem",
+            "imageSrc": undefined,
+            "title": "Tech Solution",
+            "_type": "ServiceAmenityItem",
+            "name": "Tech Solution"
+        },
+        {
+            "name": "Quick Support",
+            "description": "There are many variations of passages of lorem",
+            "imageSrc": undefined,
+            "title": "Quick Support",
+            "_type": "ServiceAmenityItem"
+        }
+    ],
+    "contentPreTitle": "Introduce Company",
+    // "experiences": undefined,
+    // "portfolioEntries": undefined,
+    // "_type": "AnimatedAboutUsSection",
+    "contentTitle": "Our Company Specializes In IT Solutions",
+    // "_updatedAt": "2023-11-16T09:46:49Z",
+    // "feedbackEntries": undefined,
+    "highlightedAmenitiesTitle": "Ready To Transform Your Business?",
+    "name": "About Chow Works",
+    "contentTexts": [
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, Here's what to know about how to start a consulting business"
+    ],
+    "servicesList": [
+        {
+            "backgroundImageSrc": undefined,
+            "name": "Digital Security",
+            "iconImageSrc": undefined,
+            "imageSrc": undefined,
+            "contentTitle": "Digital Security",
+            "_createdAt": "2023-10-27T17:20:51Z",
+            "contentText": "Lorem ipsum dolor sit amet consect etur notted adipisicing",
+            "serviceAmenities": undefined,
+        },
+        {
+            "name": "Tech Solution",
+            "serviceAmenities": undefined,
+            "imageSrc": undefined,
+            "_type": "ServiceItem",
+            "_id": "fa5cd86d-c270-4ec9-aaf4-4bb687d77fd1",
+            "_rev": "WLNGeF4BdCdV5CELWx9GPj",
+            "backgroundImageSrc": undefined,
+            "contentTitle": "Tech Solution",
+            "contentText": "Lorem ipsum dolor sit amet consect etur notted adipisicing",
+            "iconImageSrc": undefined,
+            "_updatedAt": "2023-11-03T11:40:36Z",
+            "_createdAt": "2023-10-27T17:27:34Z"
+        },
+        {
+            "backgroundImageSrc": undefined,
+            "_rev": "pcPTVGswHpT8MIzSn1wolV",
+            "serviceAmenities": undefined,
+            "_createdAt": "2023-10-27T17:28:41Z",
+            "name": "IT Outsourcing",
+            "contentTitle": "IT Outsourcing",
+            "_type": "ServiceItem",
+            "contentText": "Lorem ipsum dolor sit amet consect etur notted adipisicing",
+            "imageSrc": undefined,
+            "iconImageSrc": undefined,
+            "_updatedAt": "2023-11-03T11:40:46Z"
+        }
+    ],
+    // "cvFile": undefined,
+    // "serviceAmenities": undefined,
+    "heroBullet": undefined,
+    "servicesImageSrcArr": [
+        undefined,
+        undefined,
+        undefined
+    ],
+    "servicesMasonryAccentImageSrc":  undefined,
+    // "_createdAt": "2023-11-15T02:41:34Z",
+    "highlightedAmenitiesTexts": [
+        "Lorem ipsum dolor sit amet consectetur adipiscing tech. Lorem ipsum dolor sit amet consectetur adipiscing tech Lorem ipsum dolor sit amet consectetur adipiscing tech"
+    ],
+    "highlightedAmenitiesBullets": [
+        "Web Design",
+        "Website Development",
+        "Digital Marketing"
+    ]
+    // "prosList": undefined,
+    // "skillsets": undefined,
+    // "educationExperiences": undefined,
+    // "resumeFile": undefined
+}
+
+export default animatedAboutUsSectionType
\ No newline at end of file
diff --git a/src/stories/data/AnimatedHeroSectionData.ts b/src/stories/data/AnimatedHeroSectionData.ts
new file mode 100644
index 00000000..37a50420
--- /dev/null
+++ b/src/stories/data/AnimatedHeroSectionData.ts
@@ -0,0 +1,29 @@
+import {HeroAnimatedContentSectionType, ResumeBioSectionType} from "../../components/BlockContentTypes";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+
+const AnimatedHeroSectionData:HeroAnimatedContentSectionType = {
+    "title": "Digital IT Solution Services",
+    "contentSlides": [
+        {
+            "contentWelcomeMessage": "Innovative IT Solution",
+            "heroBullet": undefined,
+            "heroImage": undefined,
+            "ctaButtonTitle": "View Our Services",
+            "ctaButtonLink": "/services",
+            "contentText": "Evolve into your full potential with digital IT solutions services.\n",
+            "contentTitle": "Digital IT Solution Services0"
+        },
+        {
+            "ctaButtonLink": "/services",
+            "contentWelcomeMessage": "Innovative IT Solution",
+            "contentText": "Evolve into your full potential with digital IT solutions services.\n",
+            "heroImage": undefined,
+            "heroBullet": undefined,
+            "ctaButtonTitle": "View Our Services",
+            "contentTitle": "Digital IT Solution Services2",
+        }
+    ],
+    "name": "Chow works Animated Hero Content",
+}
+
+export default AnimatedHeroSectionData
\ No newline at end of file
diff --git a/src/stories/data/AnimatedPortfolioSectionData.ts b/src/stories/data/AnimatedPortfolioSectionData.ts
new file mode 100644
index 00000000..19de7d13
--- /dev/null
+++ b/src/stories/data/AnimatedPortfolioSectionData.ts
@@ -0,0 +1,87 @@
+import {
+    AnimatedAboutUsSectionType, AnimatedPortfolioSectionType, AnimatedServicesSectionType,
+    HeroAnimatedContentSectionType,
+    ResumeBioSectionType
+} from "../../components/BlockContentTypes";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+
+const animatedPortfolioSectionType:AnimatedPortfolioSectionType = {
+    "heroBullet": undefined,
+    "name": "Chow Works Portfolio",
+    "portfolioEntries": [
+        {
+            "detailDescription": "There are many variations of passages",
+            "name": "Tech Cover Industry",
+            "slug": {
+                "current": "tech-cover-industry",
+                "_type": "slug"
+            },
+            "preTitle": "Tech",
+            "skillsHighlighted": [
+                {
+                    "_updatedAt": "2023-11-28T16:38:25Z",
+                    "_createdAt": "2023-11-28T16:38:25Z",
+                    "_rev": "qQNB1ZAgTG6nT9M7yaTdno",
+                    "_type": "ResumeSkill",
+                    "name": "React",
+                    "_id": "b576089a-66ea-420c-bec6-88639c8cead4",
+                    "title": "React"
+                },
+                {
+                    "_type": "ResumeSkill",
+                    "name": "Javascript",
+                    "_id": "48dbc81a-cc4f-41ba-944a-52a3e44c6d8f",
+                    "title": "Javascript",
+                    "_updatedAt": "2023-11-28T16:39:08Z",
+                    "_createdAt": "2023-11-28T16:39:08Z",
+                    "_rev": "HuiHeyCDns6YHDuplMI0qN"
+                },
+                {
+                    "_type": "ResumeSkill",
+                    "name": "AWS",
+                    "_id": "5c04da9a-bd1f-409c-9c0c-068a0d9077de",
+                    "title": "AWS",
+                    "_updatedAt": "2023-11-28T16:39:39Z",
+                    "_createdAt": "2023-11-28T16:39:39Z",
+                    "_rev": "llHPdpE6t2d8pDZnVBRKPN"
+                }
+            ],
+            "inceptionDate": "2023-11-28",
+            "_type": "AnimatedPortfolioItem",
+            "title": "Tech Cover Industry",
+            "coverImage": undefined,
+            "detailTitle": "Tech Cover Industry"
+        },
+        {
+            "preTitle": "Tech",
+            "_type": "AnimatedPortfolioItem",
+            "title": "Application Integration",
+            "detailTitle": "Application Integration",
+            "slug": {
+                "current": "application-integration",
+                "_type": "slug"
+            },
+            "detailDescription": "There are many variations of passages",
+            "coverImage": undefined,
+            "name": "Application Integration",
+        },
+        {
+            "preTitle": "Tech",
+            "name": "Database Design",
+            "detailDescription": "There are many variations of passages",
+            "coverImage": undefined,
+            "_type": "AnimatedPortfolioItem",
+            "detailTitle": "Database Design",
+            "title": "Database Design",
+            "slug": {
+                "current": "database-design",
+                "_type": "slug"
+            },
+        }
+    ],
+    "title": "Technology Solutions Our Recent Tech Projects",
+    "_type": "AnimatedPortfolioSection",
+    "preTitle": "Our Completed Projects",
+}
+
+export default animatedPortfolioSectionType
\ No newline at end of file
diff --git a/src/stories/data/AnimatedServicesSectionData.ts b/src/stories/data/AnimatedServicesSectionData.ts
new file mode 100644
index 00000000..34926650
--- /dev/null
+++ b/src/stories/data/AnimatedServicesSectionData.ts
@@ -0,0 +1,86 @@
+import {
+    AnimatedAboutUsSectionType, AnimatedServicesSectionType,
+    HeroAnimatedContentSectionType,
+    ResumeBioSectionType
+} from "../../components/BlockContentTypes";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+
+const animatedServicesSectionType:AnimatedServicesSectionType = {
+    ctaButtonLink: "",
+    videoUrl: "",
+    "videoPreviewImageSrc": undefined,
+    "servicesList": [
+        {
+            "contentText": "There are many variations of passages of lorem Ipsum not simply random\n\n",
+            "_updatedAt": "2023-11-15T10:20:56Z",
+            "_createdAt": "2023-11-15T10:07:55Z",
+            "name": "Tech Analaysis",
+            "iconImageSrc": undefined,
+            "_rev": "usqXEJs2xfOvzALZamrnpQ",
+            "_id": "a479234f-354b-4c39-a996-d1e258d47884",
+            "_type": "ServiceItem",
+            "contentTitle": "Tech Analysis",
+            "slug": {
+                "current": "tech-analaysis",
+                "_type": "slug"
+            }
+        },
+        {
+            "name": "IT Consultancy",
+            "_id": "4d9e5d45-5989-4d25-9dc9-0ec3506f2dc3",
+            "slug": {
+                "current": "it-consultancy",
+                "_type": "slug"
+            },
+            "_rev": "usqXEJs2xfOvzALZamrnCq",
+            "_type": "ServiceItem",
+            "contentText": "There are many variations of passages of lorem Ipsum not simply random IT Consultancy",
+            "contentTitle": "IT Consultancy",
+            "_updatedAt": "2023-11-15T10:20:42Z",
+            "iconImageSrc": undefined,
+            "_createdAt": "2023-11-15T10:20:42Z"
+        },
+        {
+            "_id": "293037e0-deea-4235-8a7b-b2b3da04b3e3",
+            "_rev": "usqXEJs2xfOvzALZamrqAW",
+            "name": "Data Structuring",
+            "_updatedAt": "2023-11-15T10:21:56Z",
+            "slug": {
+                "current": "data-structuring",
+                "_type": "slug"
+            },
+            "_createdAt": "2023-11-15T10:21:56Z",
+            "_type": "ServiceItem",
+            "contentText": "There are many variations of passages of lorem Ipsum not simply random for Data Structuring",
+            "iconImageSrc": undefined,
+            "contentTitle": "Data Structuring"
+        },
+        {
+            "_createdAt": "2023-11-15T10:22:53Z",
+            "_rev": "svKdjQPfy8Uid76wX6iZe2",
+            "contentText": "There are many variations of passages of lorem Ipsum not simply random Market Analysis",
+            "iconImageSrc": undefined,
+            "contentTitle": "Market Analysis",
+            "_id": "626e48bf-d17f-44e1-bb40-4bc444496bfa",
+            "_type": "ServiceItem",
+            "name": "Market Analysis",
+            "_updatedAt": "2023-11-15T10:22:53Z"
+        }
+    ],
+    "contentSummaryTexts": [
+        "Nemo enim ipsam voluptatem quia voluptas sit asper natur aut odit aut fugit sed quia consequuntur magni dolor qui ratione business"
+    ],
+    "ctaButtonText": "More Solutions...",
+    "videoPreviewSectionBackgroundImageSrc": undefined,
+    "heroBullet": undefined,
+    "videoPreviewText": "We Are IT Solution Specialists.",
+    "contentSummaryTitle": "We’re Ready Grow Your IT Solution!",
+    "contentTitle": "Providing Complete Professional IT Services",
+    "contentTexts": [
+        "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolor qui ratione business"
+    ],
+    "contentPreTitle": "Our Services",
+    "name": "Chow Works Services"
+}
+
+export default animatedServicesSectionType
\ No newline at end of file
diff --git a/src/stories/data/CalculatedHomePageData.ts b/src/stories/data/CalculatedHomePageData.ts
new file mode 100644
index 00000000..57ee3d12
--- /dev/null
+++ b/src/stories/data/CalculatedHomePageData.ts
@@ -0,0 +1,2408 @@
+import {SanityMuiTheme, SanityTransformHwHomePage} from "../../common/sanityIo/Types";
+
+const calculatedHomePageResumeData = (theme: SanityMuiTheme): SanityTransformHwHomePage => {
+    return {
+        businessContact: {
+            // "github": null,
+            // "instagram": null,
+            "facebook":
+                "kamikazenupe1911",
+            // "facebookIconSrc": null,
+            // "twitter": null,
+            // "twitterIconSrc": null,
+            "linkedIn":
+                "Terrell-singleton",
+            // "instagramIconSrc": null,
+            "email":
+                "terrell.singleton@gmail.com",
+            "twitter":
+                "KamikazetheZ",
+            "address":
+                "7300 Roselynn Lane, Clinton, MD 20735",
+            "instagram":
+                "thehandsomestnerd",
+            "instagramIconSrc":
+            undefined,
+            "phone":
+                "443.992.2191",
+            "facebookIconSrc":
+            undefined,
+            "twitterIconSrc":
+            undefined,
+            "github":
+                "tmanundercover",
+        }
+        ,
+        "isUnderConstruction":
+        undefined,
+        "structuredData":
+            null,
+        "bookAppointmentQrCode":
+            {
+                "_type":
+                    "image",
+                "asset":
+                    {
+                        "_ref":
+                            "image-37f997f78afe2f056a8691e2d7cb33d5212417bc-450x450-png",
+                    }
+            }
+        ,
+        "theme": theme,
+        "isFabActivated":
+            true,
+        "_type":
+            "homePage",
+        // "releaseDate": undefined,
+        "description":
+            "My name is James Terrell Singleton and I am a Web developer. This is my professional resume and portfolio. React.js software Developer. Javascript seems to dominate the projects I end up working on. Node.js and Typescript win for backend. Efficient at developing one page applications & websites. Prototypes for mobile apps and digital Resumes. \n\nhello@thehandsomestnerd.com\nhttps://terrellsingleton.com",
+        "title":
+            "James Terrell Singleton - Software Engineer & Web Developer",
+        "footerContent":
+            {
+                "content":
+                    [
+                        {
+                            "footerMenuRef": {
+                                "title": "Footer Menu",
+                                "slug": {
+                                    "current": "footer-menu",
+                                    "_type": "slug"
+                                },
+                                "displayText": null,
+                                "subMenus": [
+                                    {
+                                        "isContainedButton": null,
+                                        "title": "Quick Links",
+                                        "slug": null,
+                                        "links": [
+                                            {
+                                                "modalRef": null,
+                                                "_type": "menuItem",
+                                                "displayText": "Skills",
+                                                "url": "#SKILLS",
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null
+                                            },
+                                            {
+                                                "displayText": "Experience",
+                                                "url": "#EXPERIENCE",
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null,
+                                                "modalRef": null,
+                                                "_type": "menuItem"
+                                            },
+                                            {
+                                                "url": "#EDUCATION",
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null,
+                                                "modalRef": null,
+                                                "_type": "menuItem",
+                                                "displayText": "Education"
+                                            },
+                                            {
+                                                "_type": "menuItem",
+                                                "displayText": "Portfolio",
+                                                "url": "#PORTFOLIO",
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null,
+                                                "modalRef": null
+                                            },
+                                            {
+                                                "_type": "menuItem",
+                                                "displayText": "Feedback",
+                                                "url": "#FEEDBACK",
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null,
+                                                "modalRef": null
+                                            },
+                                            {
+                                                "_type": "menuItem",
+                                                "displayText": "Contact",
+                                                "url": "#CONTACT",
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null,
+                                                "modalRef": null
+                                            }
+                                        ],
+                                        "isOutlinedButton": null,
+                                        "_type": "menuGroup",
+                                        "menuGroupTitle": "Quick Links",
+                                        "displayText": null,
+                                        "url": null
+                                    },
+                                    {
+                                        "links": [
+                                            {
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null,
+                                                "modalRef": null,
+                                                "_type": "menuItem",
+                                                "displayText": "Meet with Me",
+                                                "url": "https://the-handsomest-nerd.square.site/"
+                                            },
+                                            {
+                                                "_type": "menuItem",
+                                                "displayText": "Resume Download",
+                                                "url": "https://cdn.sanity.io/files/rhjxlvuj/development/12987619eb6c1d829e4de6346d19bd41f5d29d64.pdf?dl=James%20Terrell%20Singleton%20-%20Software%20Engineer%20-%20Resume.pdf",
+                                                "isOutlinedButton": null,
+                                                "isContainedButton": null,
+                                                "isModalButton": null,
+                                                "modalRef": null
+                                            }
+                                        ],
+                                        "url": null,
+                                        "isContainedButton": null,
+                                        "title": "About Me",
+                                        "_type": "menuGroup",
+                                        "slug": {
+                                            "current": "about-me",
+                                            "_type": "slug"
+                                        },
+                                        "menuGroupTitle": "About Me",
+                                        "displayText": null,
+                                        "isOutlinedButton": null
+                                    }
+                                ],
+                                "logoImageSrc": null,
+                                "logoImageAltText": null
+                            },
+                            "_createdAt": "2022-12-25T19:29:29Z",
+                            "_rev": "NCHsgHLcvkCT8vGIj9gBv4",
+                            "_type": "FooterSection",
+                            "name": "resume footer",
+                            "_id": "82cf5a42-abcd-41c6-8c25-bac1e77770ba",
+                            "_updatedAt": "2022-12-25T19:29:29Z"
+                        }
+                    ]
+            }
+        ,
+        "websiteQrCode":
+            {
+                "_type":
+                    "image",
+                "asset":
+                    {
+                        "_ref":
+                            "image-c3078e4a33d56fdd39f12d9aac70768102f59d55-450x450-png",
+                    }
+            }
+        ,
+        "headerContent":
+            {
+                "content":
+                    [
+                        {
+                            "_type": "HeaderSection",
+                            "name": "resume header",
+                            "_id": "6a0be265-5830-4671-8ca3-b8d61aa8bf77",
+                            "headerMenuRef": {
+                                "title": "Header Menu",
+                                "slug": {
+                                    "current": "header-menu",
+                                    "_type": "slug"
+                                },
+                                "displayText": null,
+                                "subMenus": [
+                                    {
+                                        "displayText": "Skills",
+                                        "isOutlinedButton": null,
+                                        "isContainedButton": null,
+                                        "title": "Skills",
+                                        "_type": "menuItem",
+                                        "slug": null,
+                                        "menuGroupTitle": null,
+                                        "links": null,
+                                        "url": "#SKILLS"
+                                    },
+                                    {
+                                        "menuGroupTitle": null,
+                                        "displayText": "Experience",
+                                        "url": "#EXPERIENCE",
+                                        "title": "Experience",
+                                        "_type": "menuItem",
+                                        "isOutlinedButton": null,
+                                        "isContainedButton": null,
+                                        "slug": null,
+                                        "links": null
+                                    },
+                                    {
+                                        "isOutlinedButton": null,
+                                        "title": "Education",
+                                        "_type": "menuItem",
+                                        "displayText": "Education",
+                                        "url": "#EDUCATION",
+                                        "slug": null,
+                                        "menuGroupTitle": null,
+                                        "links": null,
+                                        "isContainedButton": null
+                                    },
+                                    {
+                                        "menuGroupTitle": null,
+                                        "links": null,
+                                        "displayText": "Feedback",
+                                        "isOutlinedButton": null,
+                                        "slug": null,
+                                        "_type": "menuItem",
+                                        "url": "#FEEDBACK",
+                                        "isContainedButton": null,
+                                        "title": "Feedback"
+                                    },
+                                    {
+                                        "_type": "menuItem",
+                                        "links": null,
+                                        "url": "#PORTFOLIO",
+                                        "isOutlinedButton": null,
+                                        "title": "Portfolio",
+                                        "slug": null,
+                                        "menuGroupTitle": null,
+                                        "displayText": "Portfolio",
+                                        "isContainedButton": null
+                                    },
+                                    {
+                                        "slug": null,
+                                        "menuGroupTitle": null,
+                                        "url": "#CONTACT",
+                                        "title": "Contact",
+                                        "_type": "menuItem",
+                                        "links": null,
+                                        "displayText": "Contact",
+                                        "isOutlinedButton": null,
+                                        "isContainedButton": null
+                                    },
+                                    {
+                                        "title": "Blog",
+                                        "slug": null,
+                                        "menuGroupTitle": null,
+                                        "links": null,
+                                        "displayText": "Blog",
+                                        "isContainedButton": null,
+                                        "_type": "menuItem",
+                                        "url": "http://medium.com/@thehandsomestnerd",
+                                        "isOutlinedButton": null
+                                    }
+                                ],
+                                "logoImageSrc": {
+                                    "_type": "image",
+                                    "asset": {
+                                        "_ref": "image-8ab18b13f9ad701d85c11f0f02ece6d4c42ad2ee-208x202-png",
+                                        "_type": "reference"
+                                    }
+                                },
+                                "logoImageAltText": null
+                            },
+                            "_updatedAt": "2022-12-25T15:18:39Z",
+                            "_createdAt": "2022-12-25T15:18:39Z",
+                            "_rev": "IiYi5XVNmR5WYQ23CNHdOb"
+                        }
+                    ]
+            }
+        ,
+        "pageContent":
+            {
+                "content":
+                    [
+                        {
+                            "educationExperiences": null,
+                            "feedbackEntries": null,
+                            "portfolioEntries": null,
+                            "_type": "ResumeBioSection",
+                            "serviceAmenities": null,
+                            "cvFile": {
+                                "uploadId": "h2e4VByPZeloQlrpNqBkbNodByWu7kLC",
+                                "_type": "sanity.fileAsset",
+                                "sha1hash": "12987619eb6c1d829e4de6346d19bd41f5d29d64",
+                                "size": 92683,
+                                "extension": "pdf",
+                                "mimeType": "application/pdf",
+                                "url": "https://cdn.sanity.io/files/rhjxlvuj/development/12987619eb6c1d829e4de6346d19bd41f5d29d64.pdf",
+                                "assetId": "12987619eb6c1d829e4de6346d19bd41f5d29d64",
+                                "_id": "file-12987619eb6c1d829e4de6346d19bd41f5d29d64-pdf",
+                                "_updatedAt": "2022-12-01T21:53:17Z",
+                                "originalFilename": "Resume James Terrell Singleton 2022.pdf",
+                                "_rev": "YKkjAGOOflKrRktUk0DJLe",
+                                "path": "files/rhjxlvuj/development/12987619eb6c1d829e4de6346d19bd41f5d29d64.pdf",
+                                "_createdAt": "2022-12-01T21:53:17Z"
+                            },
+                            "cvFileDownloadText": "Download CV",
+                            "servicesList": null,
+                            "experiences": null,
+                            "_rev": "Bp455s9rtQ49wRO6vepGwJ",
+                            "contactMeButtonTitle": "Contact Me",
+                            "_id": "fa034d55-5704-45fa-8685-47fef3937af9",
+                            "careerTitle": "Software Engineer",
+                            "title": "James Terrell Singleton",
+                            "resumeFile": {
+                                "_createdAt": "2022-12-01T21:53:17Z",
+                                "_id": "file-12987619eb6c1d829e4de6346d19bd41f5d29d64-pdf",
+                                "originalFilename": "Resume James Terrell Singleton 2022.pdf",
+                                "uploadId": "h2e4VByPZeloQlrpNqBkbNodByWu7kLC",
+                                "mimeType": "application/pdf",
+                                "url": "https://cdn.sanity.io/files/rhjxlvuj/development/12987619eb6c1d829e4de6346d19bd41f5d29d64.pdf",
+                                "size": 92683,
+                                "extension": "pdf",
+                                "_type": "sanity.fileAsset",
+                                "sha1hash": "12987619eb6c1d829e4de6346d19bd41f5d29d64",
+                                "_rev": "YKkjAGOOflKrRktUk0DJLe",
+                                "assetId": "12987619eb6c1d829e4de6346d19bd41f5d29d64",
+                                "path": "files/rhjxlvuj/development/12987619eb6c1d829e4de6346d19bd41f5d29d64.pdf",
+                                "_updatedAt": "2022-12-01T21:53:17Z"
+                            },
+                            "introduction": "I am a Web Developer located in the Maryand, District of Columbia, and Virginia Metropolitan area. I currently work as a remote fullstack software engineer for Assembled Financial, located in Los Angeles, CA. I am looking to take on more work, to increase my skills as a Web Developer, and to make things that are great. I am open to relocation.",
+                            "name": "James Terrell Singleton",
+                            "_updatedAt": "2022-12-10T15:57:58Z",
+                            "resumeFileDownloadText": "Download Resume",
+                            "skillsets": null,
+                            "mainImage": {
+                                "_type": "image",
+                                "asset": {
+                                    "_ref": "image-23de0e9fc21cb77dfc7b1c9ce8b684310a9d99a0-3007x2979-jpg",
+                                    "_type": "reference"
+                                }
+                            },
+                            "_createdAt": "2022-11-30T13:45:52Z"
+                        },
+                        {
+                            "_rev": "9LEoCS0NKqkxZjwObGZliL",
+                            "cvFile": null,
+                            "experiences": null,
+                            "feedbackEntries": null,
+                            "portfolioEntries": null,
+                            "resumeFile": null,
+                            "_updatedAt": "2022-12-07T19:49:26Z",
+                            "name": "Terrell Singleton",
+                            "_createdAt": "2022-11-30T18:44:32Z",
+                            "servicesList": null,
+                            "educationExperiences": null,
+                            "title": "Skills",
+                            "_type": "ResumeSkillSection",
+                            "introduction": "I am inspired to create great work with people who are as passionate as I am about building something awesome.",
+                            "serviceAmenities": null,
+                            "skillsets": [
+                                {
+                                    "skills": [
+                                        {
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "name": "React.js",
+                                            "title": "React.js"
+                                        },
+                                        {
+                                            "_id": "c460e246-cac2-456d-a86e-6310259c3193",
+                                            "name": "Node.js",
+                                            "title": "Node.js"
+                                        },
+                                        {
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916",
+                                            "name": "TypeScript",
+                                            "title": "TypeScript"
+                                        },
+                                        {
+                                            "_id": "45f1b5d7-664d-4b03-858f-6cdc00fa9ce9",
+                                            "name": "Angular.js",
+                                            "title": "Angular.js"
+                                        },
+                                        {
+                                            "_id": "c8cff374-d634-4948-a0cf-9cf0b4228010",
+                                            "name": "Ext.js",
+                                            "title": "Ext.js"
+                                        },
+                                        {
+                                            "_id": "6836fb50-3871-4bfb-80f9-8cf8c4d6d78e",
+                                            "name": "JQuery",
+                                            "title": "JQuery"
+                                        },
+                                        {
+                                            "_id": "23bbfc31-dd29-44c9-8025-2967edbbcbb2",
+                                            "name": "Bower",
+                                            "title": "Bower"
+                                        },
+                                        {
+                                            "_id": "6c7b4405-dd5b-415a-9968-5896cbee44a3",
+                                            "name": "Grunt",
+                                            "title": "Grunt"
+                                        },
+                                        {
+                                            "_id": "5a1e9762-1560-47b9-81ff-0cef770dffa8",
+                                            "name": "Highcharts",
+                                            "title": "Highcharts"
+                                        },
+                                        {
+                                            "_id": "86c7022f-fbbe-4ebd-ab82-368685ab26ac",
+                                            "name": "Create React App",
+                                            "title": "Create React App(CRA)"
+                                        },
+                                        {
+                                            "_id": "dec33886-0443-418a-a312-0a5149ca45d2",
+                                            "name": "LESS",
+                                            "title": "LESS"
+                                        },
+                                        {
+                                            "_id": "6f53bfac-8982-4715-b55b-23ef2b373bf4",
+                                            "name": "SASS/SCSS",
+                                            "title": "SASS/SCSS"
+                                        },
+                                        {
+                                            "_id": "54147ce8-e0ac-4219-947e-9c63c9f123a0",
+                                            "name": "Meteor",
+                                            "title": "Meteor"
+                                        },
+                                        {
+                                            "_id": "21c47af1-b6d3-4707-9b4d-b7a8d18ca746",
+                                            "name": "Jasmine",
+                                            "title": "Jasmine"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Javascript",
+                                    "_key": "f7de97e70f37",
+                                    "title": "Javascript"
+                                },
+                                {
+                                    "_key": "768c955ab0b2",
+                                    "title": "Other Programming Languages",
+                                    "skills": [
+                                        {
+                                            "_id": "963f8182-5b33-4b56-9d92-112a02ebcf01",
+                                            "name": "Javascript",
+                                            "title": "Javascript"
+                                        },
+                                        {
+                                            "_id": "5d30fefa-65fc-450a-a4b9-c42449245b9c",
+                                            "name": "Dart",
+                                            "title": "Dart"
+                                        },
+                                        {
+                                            "_id": "ce4db41b-50cf-4bf7-b8b2-a71de88ee6ac",
+                                            "name": "Kotlin",
+                                            "title": "Kotlin"
+                                        },
+                                        {
+                                            "_id": "41ab371e-4ce2-489f-99b8-4eb755d7ce6c",
+                                            "name": "PHP",
+                                            "title": "PHP"
+                                        },
+                                        {
+                                            "_id": "3c945931-e968-4c34-8311-419697af70c1",
+                                            "name": "JAVA",
+                                            "title": "JAVA"
+                                        },
+                                        {
+                                            "_id": "328069f7-b10b-4efa-8921-1348548e57b9",
+                                            "name": "C/C++",
+                                            "title": "C/C++"
+                                        },
+                                        {
+                                            "_id": "64740cea-d644-4623-84a3-45553c693215",
+                                            "name": "Python",
+                                            "title": "Python"
+                                        },
+                                        {
+                                            "_id": "5845d3d7-bf5e-4d55-9cd3-3c6de4304345",
+                                            "name": "Scala",
+                                            "title": "Scala"
+                                        },
+                                        {
+                                            "_id": "928bb04f-a5e2-48cc-8209-3ceb96d2c3ca",
+                                            "name": "XML",
+                                            "title": "XML"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Programming Languages"
+                                },
+                                {
+                                    "skills": [
+                                        {
+                                            "_id": "9ccf38a9-c76c-4114-b85b-1c747d30fca9",
+                                            "name": "HTML 5.0",
+                                            "title": "HTML 5.0"
+                                        },
+                                        {
+                                            "_id": "8bd0fd76-0302-4bb8-80b2-4624e7baed20",
+                                            "name": "CSS",
+                                            "title": "CSS"
+                                        },
+                                        {
+                                            "_id": "390a755a-c417-49eb-93aa-e77a19838261",
+                                            "name": "Material-ui",
+                                            "title": "Material-ui"
+                                        },
+                                        {
+                                            "_id": "d57e951c-77fc-48e9-a94e-2947147e985c",
+                                            "name": "Bootstrap",
+                                            "title": "Bootstrap"
+                                        },
+                                        {
+                                            "_id": "239871af-49ea-4ecc-b66a-1e47abf45a28",
+                                            "name": "Spring & Spring MVC",
+                                            "title": "Spring & Spring MVC"
+                                        },
+                                        {
+                                            "_id": "3aa76217-7d70-49e9-85e0-63098cab3394",
+                                            "name": "Wordpress",
+                                            "title": "Wordpress"
+                                        },
+                                        {
+                                            "_id": "8a21dccf-7f90-4192-a5c9-f92aaf18b65b",
+                                            "name": "PrimeNG",
+                                            "title": "PrimeNG"
+                                        },
+                                        {
+                                            "_id": "6f53bfac-8982-4715-b55b-23ef2b373bf4",
+                                            "name": "SASS/SCSS",
+                                            "title": "SASS/SCSS"
+                                        },
+                                        {
+                                            "_id": "7cf5e4ed-724d-499a-a064-92e9b7454a9d",
+                                            "name": "JSP",
+                                            "title": "Java Server Pages(JSP)"
+                                        },
+                                        {
+                                            "_id": "e967b76a-02a9-4dd8-b3a9-d85982e3ff65",
+                                            "name": "Adobe Creative Suite",
+                                            "title": "Adobe Creative Suite"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Web Development",
+                                    "_key": "5facdc1ab010",
+                                    "title": "Web Development"
+                                },
+                                {
+                                    "_key": "1699109a2808",
+                                    "title": "Databases",
+                                    "skills": [
+                                        {
+                                            "_id": "942a0e11-cecc-4fc9-a5de-440a9b742cd0",
+                                            "name": "PostgreSQL",
+                                            "title": "PostgreSQL"
+                                        },
+                                        {
+                                            "_id": "c0b3f33f-241c-4ffe-ab3f-13c4b26c9a2f",
+                                            "name": "DynamoDB",
+                                            "title": "DynamoDB"
+                                        },
+                                        {
+                                            "_id": "17ab710e-232d-44ca-a826-8b546defb22d",
+                                            "name": "MySQL",
+                                            "title": "MySQL"
+                                        },
+                                        {
+                                            "_id": "392cf24d-acfa-414d-adbd-b58881d8e424",
+                                            "name": "MongoDB",
+                                            "title": "MongoDB"
+                                        },
+                                        {
+                                            "_id": "14574afa-995f-432a-b277-0f6cedfdb52d",
+                                            "name": "Firebase: Firestore, Real-time Database",
+                                            "title": "Firebase: Firestore, Real-time Database"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Databases"
+                                },
+                                {
+                                    "title": "Web Servers",
+                                    "skills": [
+                                        {
+                                            "_id": "d1289590-6c6a-4100-a7ff-7f6346ccdd2d",
+                                            "name": "AWS",
+                                            "title": "AWS"
+                                        },
+                                        {
+                                            "_id": "7b467c08-7dfe-4c33-b1f5-bd925522c87e",
+                                            "name": "GCP",
+                                            "title": "Google Cloud Platform(GCP)"
+                                        },
+                                        {
+                                            "_id": "a5c8f986-90c0-492a-abe5-15fd9873e1b0",
+                                            "name": "Apache",
+                                            "title": "Apache"
+                                        },
+                                        {
+                                            "_id": "5e332a22-a024-402e-8ac7-c52cc9122e46",
+                                            "name": "Tomcat",
+                                            "title": "Tomcat"
+                                        },
+                                        {
+                                            "_id": "366c9403-a333-4a15-9f6a-ef99cd753c04",
+                                            "name": "nginx",
+                                            "title": "nginx"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Web Servers",
+                                    "_key": "fee068952dcd"
+                                },
+                                {
+                                    "name": "IDEs",
+                                    "_key": "18c4fdeb4e86",
+                                    "title": "IDEs",
+                                    "skills": [
+                                        {
+                                            "_id": "0b989b01-fb6d-4573-b64f-970d2d06759f",
+                                            "name": "IntelliJ IDEA & Webstorm",
+                                            "title": "IntelliJ IDEA & Webstorm"
+                                        },
+                                        {
+                                            "_id": "9b806923-9970-43e9-8e06-b553f8279ad8",
+                                            "name": "Visual Studio Code",
+                                            "title": "Visual Studio Code"
+                                        },
+                                        {
+                                            "_id": "fd9c8577-8e3a-43a0-ad48-49ed32cdcc89",
+                                            "name": "Netbeans",
+                                            "title": "Netbeans"
+                                        },
+                                        {
+                                            "_id": "2e2c05c0-9e93-46fc-a012-a232a49eab41",
+                                            "name": "Eclipse",
+                                            "title": "Eclipse"
+                                        },
+                                        {
+                                            "_id": "d4f6fb30-3141-47b1-8ec2-98ad401e7912",
+                                            "name": "Brackets",
+                                            "title": "Brackets"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset"
+                                },
+                                {
+                                    "_key": "6c8d60f6571a",
+                                    "title": "Version Control",
+                                    "skills": [
+                                        {
+                                            "_id": "1d79280c-faa1-4c29-ae3d-730d066b4679",
+                                            "name": "Gitlab",
+                                            "title": "Gitlab"
+                                        },
+                                        {
+                                            "_id": "3295ee78-4812-4aa3-9ddd-d5385e5399af",
+                                            "name": "Github",
+                                            "title": "Github"
+                                        },
+                                        {
+                                            "_id": "93311d61-08f6-4cdb-b48d-1b449733895f",
+                                            "name": "Atlassian Suite: JIRA, Confluence, Crucible, BitBucket, Bamboo",
+                                            "title": "Atlassian Suite: JIRA, Confluence, Crucible, BitBucket, Bamboo"
+                                        },
+                                        {
+                                            "_id": "cb5282ed-5e0e-4dac-b185-3e68e16e344c",
+                                            "name": "Trac",
+                                            "title": "Trac"
+                                        },
+                                        {
+                                            "_id": "e272136c-558f-4661-a5b0-6a1b8a1e9896",
+                                            "name": "GForge",
+                                            "title": "GForge"
+                                        },
+                                        {
+                                            "_id": "807df707-ea48-4368-855c-4d67e7102e18",
+                                            "name": "SVN",
+                                            "title": "SVN"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Version Control"
+                                },
+                                {
+                                    "name": "Operating Systems",
+                                    "_key": "c65128fb5fc2",
+                                    "title": "Operating Systems",
+                                    "skills": [
+                                        {
+                                            "_id": "e5b700e5-db74-4cde-9b8e-320cde78b81d",
+                                            "name": "MacOS",
+                                            "title": "MacOS"
+                                        },
+                                        {
+                                            "_id": "1fe90adf-35ec-4fde-85bd-356dc50ba8d5",
+                                            "name": "Windows",
+                                            "title": "Windows"
+                                        },
+                                        {
+                                            "_id": "b14a599f-3b67-4e39-9c23-accea63edfb1",
+                                            "name": "Linux",
+                                            "title": "Linux"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset"
+                                },
+                                {
+                                    "_key": "7fa36d9e1193",
+                                    "title": "Browsers",
+                                    "skills": [
+                                        {
+                                            "_id": "0cf0b28f-26a2-4a4b-b492-4340908da0c8",
+                                            "name": "Cross-browser compatibility Chrome, Safari, Firefox",
+                                            "title": "Cross-browser compatibility Chrome, Safari, Firefox"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Browsers"
+                                },
+                                {
+                                    "_key": "a6afd46f2543",
+                                    "title": "Utilities & Tools",
+                                    "skills": [
+                                        {
+                                            "_id": "3d837a55-00fd-444b-b6cd-8a37eb97eea1",
+                                            "name": "Figma",
+                                            "title": "Figma"
+                                        },
+                                        {
+                                            "_id": "2a659991-569f-4a95-bfe1-d1af655a7b83",
+                                            "name": "ImageMagick(cli)",
+                                            "title": "ImageMagick(cli)"
+                                        },
+                                        {
+                                            "_id": "5c5e42c4-e156-4f7b-a766-2fab414680e3",
+                                            "name": "Docker",
+                                            "title": "Docker"
+                                        },
+                                        {
+                                            "_id": "e35a2544-51d7-4db3-8e24-e86ce4f94b70",
+                                            "name": "Maven",
+                                            "title": "Maven"
+                                        },
+                                        {
+                                            "_id": "55c7902b-2c73-4b10-b645-e06d61158404",
+                                            "name": "Ant",
+                                            "title": "Ant"
+                                        },
+                                        {
+                                            "_id": "bb9f6407-98ec-4aee-acf3-d1b2b0db32f6",
+                                            "name": "Jenkins",
+                                            "title": "Jenkins"
+                                        },
+                                        {
+                                            "_id": "4dc3d6c1-37c4-48c3-969e-20edbf29fb2e",
+                                            "name": "VMWare",
+                                            "title": "VMWare"
+                                        }
+                                    ],
+                                    "_type": "ResumeSkillset",
+                                    "name": "Utilities & Tools"
+                                }
+                            ],
+                            "_id": "627bbab9-1326-4523-9842-c4c61adc9815"
+                        },
+                        {
+                            "serviceAmenities": null,
+                            "resumeFile": null,
+                            "_id": "d31b8756-45c3-422a-8859-4c9f509e2453",
+                            "_rev": "z7EiK8inwybcbhSAyOYC8q",
+                            "_updatedAt": "2022-12-01T13:00:47Z",
+                            "introduction": "I partner with startups, organizations and Fortune 500 companies to build digital products that help clients overcome challenges and create lasting connections with people every day.",
+                            "_type": "ResumeExperienceSection",
+                            "educationExperiences": null,
+                            "portfolioEntries": null,
+                            "cvFile": null,
+                            "name": "Experience",
+                            "title": "Experience",
+                            "experiences": [
+                                {
+                                    "_updatedAt": "2022-12-01T02:26:22Z",
+                                    "dateEnd": "2022-09-30",
+                                    "title": "Fullstack Software Engineer",
+                                    "locationState": "CA",
+                                    "skillsUsed": [
+                                        {
+                                            "_updatedAt": "2022-11-30T18:51:44Z",
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js",
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Kotlin",
+                                            "_id": "ce4db41b-50cf-4bf7-b8b2-a71de88ee6ac",
+                                            "title": "Kotlin",
+                                            "_updatedAt": "2022-11-30T18:49:05Z",
+                                            "_createdAt": "2022-11-30T18:49:05Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNI0za"
+                                        },
+                                        {
+                                            "name": "Node.js",
+                                            "_id": "c460e246-cac2-456d-a86e-6310259c3193",
+                                            "title": "Node.js",
+                                            "_updatedAt": "2022-11-30T18:48:48Z",
+                                            "_createdAt": "2022-11-30T18:48:48Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgPKO1",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T23:53:30Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVgO33k",
+                                            "_type": "ResumeSkill",
+                                            "name": "Dart",
+                                            "_id": "5d30fefa-65fc-450a-a4b9-c42449245b9c",
+                                            "title": "Dart",
+                                            "_updatedAt": "2022-11-30T23:53:30Z"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-11-30T19:04:29Z",
+                                            "_createdAt": "2022-11-30T19:04:29Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgTkx3",
+                                            "_type": "ResumeSkill",
+                                            "name": "AWS",
+                                            "_id": "d1289590-6c6a-4100-a7ff-7f6346ccdd2d",
+                                            "title": "AWS"
+                                        },
+                                        {
+                                            "_id": "34326ced-0288-4b41-8199-38f53fe610a8",
+                                            "title": "Flutter",
+                                            "_updatedAt": "2022-11-30T19:23:07Z",
+                                            "_createdAt": "2022-11-30T19:23:07Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNJxCa",
+                                            "_type": "ResumeSkill",
+                                            "name": "Flutter"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Terraform",
+                                            "_id": "694fd35e-f1e6-47c8-bae6-f300b1f4c4ef",
+                                            "title": "Terraform",
+                                            "_updatedAt": "2022-12-01T02:24:52Z",
+                                            "_createdAt": "2022-12-01T02:24:52Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVghNeF"
+                                        },
+                                        {
+                                            "_rev": "lhoXF04OR35CGYtnFgV1Mm",
+                                            "_type": "ResumeSkill",
+                                            "name": "Figma",
+                                            "_id": "3d837a55-00fd-444b-b6cd-8a37eb97eea1",
+                                            "title": "Figma",
+                                            "_updatedAt": "2022-11-30T19:09:16Z",
+                                            "_createdAt": "2022-11-30T19:09:16Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-12-01T02:25:16Z",
+                                            "_rev": "lhoXF04OR35CGYtnFitqla",
+                                            "_type": "ResumeSkill",
+                                            "name": "Auth0",
+                                            "_id": "c9263077-0f52-49bc-a3d1-558140fdaed6",
+                                            "title": "Auth0",
+                                            "_updatedAt": "2022-12-01T02:25:16Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:21:57Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgYN5v",
+                                            "_type": "ResumeSkill",
+                                            "name": "Gitlab",
+                                            "_id": "1d79280c-faa1-4c29-ae3d-730d066b4679",
+                                            "title": "Gitlab",
+                                            "_updatedAt": "2022-11-30T19:21:57Z"
+                                        }
+                                    ],
+                                    "description": "A fullstack engineer on this Agile team receives tasking with JIRA. Our frontend applications are React with Kotlin and Node.js endpoints for the backend running on AWS. Our unique token is on the Solana blockchain. The mobile application built with Dart and Flutter is both in the Android and iOS stores. We use Auth0 for user authentication on both the Web and mobile applications. Integration with Prove KYC and the Marqeta Banking API. Segment was used for analytics.",
+                                    "companySubtitle": "Online Crypto-currency bank.",
+                                    "_id": "3cfec055-6a36-4ba8-836d-25096207773c",
+                                    "locationCity": "Los Angeles",
+                                    "_createdAt": "2022-12-01T01:22:19Z",
+                                    "dateStart": "2021-06-01",
+                                    "name": "Assembled Financial",
+                                    "companyName": "Assembled Financial",
+                                    "_type": "ResumeExperience",
+                                    "_rev": "lhoXF04OR35CGYtnFiu9iE"
+                                },
+                                {
+                                    "title": "Fullstack Software Engineer",
+                                    "companySubtitle": "Small Business Financing.",
+                                    "_updatedAt": "2022-12-01T02:26:12Z",
+                                    "_rev": "v53ZsDDD1bdWz9EKVghX8x",
+                                    "description": "As a fullstack engineer on this Agile team our frontend applications are React with Kotlin endpoints for the backend running on AWS. We used Auth0 for user authentication on the Admin dashboard Web application. Integration with Quickbooks, Shopify, Google Sheets, Google Docs and Google Drive APIs. We developed and maintained several applications. The loan application for small businesses, the admin dashboard that loan Originators use to view the application packages, the applications responsible for extracting the data from any uploaded quickbooks, shopify, or spreadsheets, the company website, and the company blog. ",
+                                    "dateStart": "2019-12-01",
+                                    "skillsUsed": [
+                                        {
+                                            "_rev": "z7EiK8inwybcbhSAyNI0za",
+                                            "_type": "ResumeSkill",
+                                            "name": "Kotlin",
+                                            "_id": "ce4db41b-50cf-4bf7-b8b2-a71de88ee6ac",
+                                            "title": "Kotlin",
+                                            "_updatedAt": "2022-11-30T18:49:05Z",
+                                            "_createdAt": "2022-11-30T18:49:05Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js",
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js",
+                                            "_updatedAt": "2022-11-30T18:51:44Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:21:45Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVff6jj",
+                                            "_type": "ResumeSkill",
+                                            "name": "Github",
+                                            "_id": "3295ee78-4812-4aa3-9ddd-d5385e5399af",
+                                            "title": "Github",
+                                            "_updatedAt": "2022-11-30T19:21:45Z"
+                                        },
+                                        {
+                                            "title": "Spring & Spring MVC",
+                                            "_updatedAt": "2022-11-30T19:00:48Z",
+                                            "_createdAt": "2022-11-30T19:00:48Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgSlE8",
+                                            "_type": "ResumeSkill",
+                                            "name": "Spring & Spring MVC",
+                                            "_id": "239871af-49ea-4ecc-b66a-1e47abf45a28"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:03:42Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNIqdk",
+                                            "_type": "ResumeSkill",
+                                            "name": "DynamoDB",
+                                            "_id": "c0b3f33f-241c-4ffe-ab3f-13c4b26c9a2f",
+                                            "title": "DynamoDB",
+                                            "_updatedAt": "2022-11-30T19:03:42Z"
+                                        },
+                                        {
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916",
+                                            "title": "TypeScript",
+                                            "_updatedAt": "2022-11-30T21:34:11Z",
+                                            "_createdAt": "2022-11-30T21:34:11Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVg0EpX",
+                                            "_type": "ResumeSkill",
+                                            "name": "TypeScript"
+                                        },
+                                        {
+                                            "_rev": "lhoXF04OR35CGYtnFgRram",
+                                            "_type": "ResumeSkill",
+                                            "name": "Material-ui",
+                                            "_id": "390a755a-c417-49eb-93aa-e77a19838261",
+                                            "title": "Material-ui",
+                                            "_updatedAt": "2022-11-30T18:57:33Z",
+                                            "_createdAt": "2022-11-30T18:57:33Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:04:29Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgTkx3",
+                                            "_type": "ResumeSkill",
+                                            "name": "AWS",
+                                            "_id": "d1289590-6c6a-4100-a7ff-7f6346ccdd2d",
+                                            "title": "AWS",
+                                            "_updatedAt": "2022-11-30T19:04:29Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:09:16Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgV1Mm",
+                                            "_type": "ResumeSkill",
+                                            "name": "Figma",
+                                            "_id": "3d837a55-00fd-444b-b6cd-8a37eb97eea1",
+                                            "title": "Figma",
+                                            "_updatedAt": "2022-11-30T19:09:16Z"
+                                        }
+                                    ],
+                                    "_id": "165c08aa-1f6f-47dd-8fa6-9e370c4f7873",
+                                    "_createdAt": "2022-12-01T02:12:27Z",
+                                    "companyName": "Assembled Brands",
+                                    "dateEnd": "2021-06-30",
+                                    "_type": "ResumeExperience",
+                                    "name": "Assembled Brands Fullstack Software Engineer",
+                                    "locationState": "CA",
+                                    "locationCity": "Los Angeles"
+                                },
+                                {
+                                    "description": "Frontend Angular Engineer on an Agile team upgrading application from Angular 4 to Angular 6 while also developing new features. We received tasking  with JIRA and UI/UX mockups from an external team.  The application consumed a distributed JAVA/Spring API which I worked on briefly at the beginning of this position. Table intensive design prompted using ng-grid for tables and complex filtering/sorting options. The application was fairly advanced hiding and showing elements on the screen based on inputs in previous screens and highlighting data in tables.",
+                                    "companySubtitle": "SpaceX",
+                                    "name": "Northrop Grumman",
+                                    "companyName": "Northrop Grumman",
+                                    "skillsUsed": [
+                                        {
+                                            "title": "Angular.js",
+                                            "_updatedAt": "2022-11-30T18:52:35Z",
+                                            "_createdAt": "2022-11-30T18:52:24Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQR6R",
+                                            "_type": "ResumeSkill",
+                                            "name": "Angular.js",
+                                            "_id": "45f1b5d7-664d-4b03-858f-6cdc00fa9ce9"
+                                        },
+                                        {
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916",
+                                            "title": "TypeScript",
+                                            "_updatedAt": "2022-11-30T21:34:11Z",
+                                            "_createdAt": "2022-11-30T21:34:11Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVg0EpX",
+                                            "_type": "ResumeSkill",
+                                            "name": "TypeScript"
+                                        },
+                                        {
+                                            "name": "Atlassian Suite: JIRA, Confluence, Crucible, BitBucket, Bamboo",
+                                            "_id": "93311d61-08f6-4cdb-b48d-1b449733895f",
+                                            "title": "Atlassian Suite: JIRA, Confluence, Crucible, BitBucket, Bamboo",
+                                            "_updatedAt": "2022-11-30T19:20:44Z",
+                                            "_createdAt": "2022-11-30T19:20:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgY70P",
+                                            "_type": "ResumeSkill"
+                                        }
+                                    ],
+                                    "_updatedAt": "2022-12-01T02:37:25Z",
+                                    "dateStart": "2018-01-01",
+                                    "_createdAt": "2022-12-01T02:27:15Z",
+                                    "locationCity": "Redondo Beach",
+                                    "_id": "d9f21340-7551-4e1d-b522-7240140d1c9d",
+                                    "_rev": "v53ZsDDD1bdWz9EKVgixsy",
+                                    "dateEnd": "2019-12-31",
+                                    "title": "Software Engineer",
+                                    "locationState": "CA",
+                                    "_type": "ResumeExperience"
+                                },
+                                {
+                                    "_id": "08355f0e-8ffc-4581-a35e-fc005316c8d5",
+                                    "locationCity": "Annapolis Junction",
+                                    "_type": "ResumeExperience",
+                                    "skillsUsed": [
+                                        {
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js",
+                                            "_updatedAt": "2022-11-30T18:51:44Z",
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "MongoDB",
+                                            "_id": "392cf24d-acfa-414d-adbd-b58881d8e424",
+                                            "title": "MongoDB",
+                                            "_updatedAt": "2022-11-30T19:03:58Z",
+                                            "_createdAt": "2022-11-30T19:03:58Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNIrIu"
+                                        },
+                                        {
+                                            "title": "Javascript",
+                                            "_updatedAt": "2022-11-30T18:47:16Z",
+                                            "_createdAt": "2022-11-30T18:47:16Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgMcCi",
+                                            "_type": "ResumeSkill",
+                                            "name": "Javascript",
+                                            "_id": "963f8182-5b33-4b56-9d92-112a02ebcf01"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Grunt",
+                                            "_id": "6c7b4405-dd5b-415a-9968-5896cbee44a3",
+                                            "title": "Grunt",
+                                            "_updatedAt": "2022-11-30T21:35:26Z",
+                                            "_createdAt": "2022-11-30T21:35:26Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNTk4g"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Spring & Spring MVC",
+                                            "_id": "239871af-49ea-4ecc-b66a-1e47abf45a28",
+                                            "title": "Spring & Spring MVC",
+                                            "_updatedAt": "2022-11-30T19:00:48Z",
+                                            "_createdAt": "2022-11-30T19:00:48Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgSlE8"
+                                        }
+                                    ],
+                                    "description": "Principle architect for an application that collects data from users through a form, adjusts future form fields based on input, stores in database, and provides admin alerts. This was a React Application that consumed an existing Spring/JAVA API. JIRA was how this Agile team of Principle Engineers was tasked and presentations of mockups were done with Adobe Creative Cloud",
+                                    "name": "Cybercore React",
+                                    "dateStart": "2017-01-01",
+                                    "_createdAt": "2022-12-01T12:08:13Z",
+                                    "title": "Frontend Software Engineer",
+                                    "locationState": "MD",
+                                    "_updatedAt": "2022-12-01T12:08:13Z",
+                                    "companySubtitle": "Principle Software Engineer",
+                                    "companyName": "Cybercore Technologies",
+                                    "dateEnd": "2017-12-31",
+                                    "_rev": "v53ZsDDD1bdWz9EKVi7wrt"
+                                },
+                                {
+                                    "_createdAt": "2022-12-01T03:05:53Z",
+                                    "title": "Software Engineer",
+                                    "_type": "ResumeExperience",
+                                    "_updatedAt": "2022-12-01T03:52:14Z",
+                                    "dateEnd": "2015-01-30",
+                                    "_rev": "lhoXF04OR35CGYtnFjRBN8",
+                                    "skillsUsed": [
+                                        {
+                                            "_id": "45f1b5d7-664d-4b03-858f-6cdc00fa9ce9",
+                                            "title": "Angular.js",
+                                            "_updatedAt": "2022-11-30T18:52:35Z",
+                                            "_createdAt": "2022-11-30T18:52:24Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQR6R",
+                                            "_type": "ResumeSkill",
+                                            "name": "Angular.js"
+                                        },
+                                        {
+                                            "_id": "e967b76a-02a9-4dd8-b3a9-d85982e3ff65",
+                                            "title": "Adobe Creative Suite",
+                                            "_updatedAt": "2022-11-30T19:01:56Z",
+                                            "_createdAt": "2022-11-30T19:01:56Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgT6Lx",
+                                            "_type": "ResumeSkill",
+                                            "name": "Adobe Creative Suite"
+                                        },
+                                        {
+                                            "name": "Tomcat",
+                                            "_id": "5e332a22-a024-402e-8ac7-c52cc9122e46",
+                                            "title": "Tomcat",
+                                            "_updatedAt": "2022-11-30T19:05:43Z",
+                                            "_createdAt": "2022-11-30T19:05:43Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgU5Aw",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Ext.js",
+                                            "_id": "c8cff374-d634-4948-a0cf-9cf0b4228010",
+                                            "title": "Ext.js",
+                                            "_updatedAt": "2022-11-30T18:52:49Z",
+                                            "_createdAt": "2022-11-30T18:52:49Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQVlR"
+                                        },
+                                        {
+                                            "_id": "93311d61-08f6-4cdb-b48d-1b449733895f",
+                                            "title": "Atlassian Suite: JIRA, Confluence, Crucible, BitBucket, Bamboo",
+                                            "_updatedAt": "2022-11-30T19:20:44Z",
+                                            "_createdAt": "2022-11-30T19:20:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgY70P",
+                                            "_type": "ResumeSkill",
+                                            "name": "Atlassian Suite: JIRA, Confluence, Crucible, BitBucket, Bamboo"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-11-30T19:00:17Z",
+                                            "_createdAt": "2022-11-30T19:00:17Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfcQnQ",
+                                            "_type": "ResumeSkill",
+                                            "name": "Bootstrap",
+                                            "_id": "d57e951c-77fc-48e9-a94e-2947147e985c",
+                                            "title": "Bootstrap"
+                                        },
+                                        {
+                                            "title": "Scala",
+                                            "_updatedAt": "2022-11-30T18:51:18Z",
+                                            "_createdAt": "2022-11-30T18:51:18Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNI97o",
+                                            "_type": "ResumeSkill",
+                                            "name": "Scala",
+                                            "_id": "5845d3d7-bf5e-4d55-9cd3-3c6de4304345"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T18:53:16Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfbccX",
+                                            "_type": "ResumeSkill",
+                                            "name": "JQuery",
+                                            "_id": "6836fb50-3871-4bfb-80f9-8cf8c4d6d78e",
+                                            "title": "JQuery",
+                                            "_updatedAt": "2022-11-30T18:53:16Z"
+                                        }
+                                    ],
+                                    "locationCity": "Annapolis Junction",
+                                    "description": "Angular and Bootstrap reengineer of an existing ExtJS application consuming Scala and JAVA APIs with hibernate layer and MongoDb backend. Federated Search GUI prototype development with JQuery mobile for mobile devices. Consuming SOLR search API for faceted search components\nJenkins deployment of Tomcat Applications to AWS. Mockups created with Adobe Creative Cloud Suite. \n\n",
+                                    "_id": "ff8d3e8a-7781-4e2a-b18c-6d0c0efdf087",
+                                    "locationState": "MD",
+                                    "companyName": "Cybercore Technologies",
+                                    "name": "Cybercore Technologies",
+                                    "dateStart": "2014-12-01",
+                                    "companySubtitle": "Frontend Software Engineer"
+                                },
+                                {
+                                    "_rev": "lhoXF04OR35CGYtnFmCYrI",
+                                    "_createdAt": "2022-12-01T04:41:01Z",
+                                    "companyName": "Cybercore Technologies",
+                                    "dateEnd": "2017-01-31",
+                                    "title": "Software Engineer",
+                                    "_id": "83fad049-d6dd-4873-8d59-d55b7eba2164",
+                                    "locationState": "MD",
+                                    "_updatedAt": "2022-12-01T12:12:42Z",
+                                    "description": "Supported 2 production GUIs, 2 Prototype GUIs, and one legacy GUI. Prototype GUI's were in AngularJs while others were ExtJS, and early versions/attemps at Angular. GUIs were heavy on graphs with Highcharts & tables with ng-grid displaying server details and test automated test results. All GUIs consumed J2EE/Spring endpoints. Automated tests were in Ruby. Tomcat servers maintained by devOps.",
+                                    "_type": "ResumeExperience",
+                                    "locationCity": "Annapolis Junction",
+                                    "skillsUsed": [
+                                        {
+                                            "title": "Ruby",
+                                            "_updatedAt": "2022-12-01T12:11:02Z",
+                                            "_createdAt": "2022-12-01T12:11:02Z",
+                                            "_rev": "z7EiK8inwybcbhSAyOTVs0",
+                                            "_type": "ResumeSkill",
+                                            "name": "Ruby",
+                                            "_id": "96239d27-eccc-4135-b24a-c33becc1bb9d"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-11-30T18:52:49Z",
+                                            "_createdAt": "2022-11-30T18:52:49Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQVlR",
+                                            "_type": "ResumeSkill",
+                                            "name": "Ext.js",
+                                            "_id": "c8cff374-d634-4948-a0cf-9cf0b4228010",
+                                            "title": "Ext.js"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T18:52:24Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQR6R",
+                                            "_type": "ResumeSkill",
+                                            "name": "Angular.js",
+                                            "_id": "45f1b5d7-664d-4b03-858f-6cdc00fa9ce9",
+                                            "title": "Angular.js",
+                                            "_updatedAt": "2022-11-30T18:52:35Z"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Tomcat",
+                                            "_id": "5e332a22-a024-402e-8ac7-c52cc9122e46",
+                                            "title": "Tomcat",
+                                            "_updatedAt": "2022-11-30T19:05:43Z",
+                                            "_createdAt": "2022-11-30T19:05:43Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgU5Aw"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-11-30T18:55:33Z",
+                                            "_createdAt": "2022-11-30T18:55:33Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfbvHn",
+                                            "_type": "ResumeSkill",
+                                            "name": "Highcharts",
+                                            "_id": "5a1e9762-1560-47b9-81ff-0cef770dffa8",
+                                            "title": "Highcharts"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T18:47:42Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgNgfI",
+                                            "_type": "ResumeSkill",
+                                            "name": "JAVA",
+                                            "_id": "3c945931-e968-4c34-8311-419697af70c1",
+                                            "title": "JAVA",
+                                            "_updatedAt": "2022-11-30T18:47:42Z"
+                                        }
+                                    ],
+                                    "dateStart": "2015-12-01",
+                                    "name": "Cybercore Software Engineer Ruby and Angular",
+                                    "companySubtitle": "Server Status display. "
+                                },
+                                {
+                                    "_type": "ResumeExperience",
+                                    "skillsUsed": [
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "JAVA",
+                                            "_id": "3c945931-e968-4c34-8311-419697af70c1",
+                                            "title": "JAVA",
+                                            "_updatedAt": "2022-11-30T18:47:42Z",
+                                            "_createdAt": "2022-11-30T18:47:42Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgNgfI"
+                                        },
+                                        {
+                                            "_rev": "lhoXF04OR35CGYtnFgStnW",
+                                            "_type": "ResumeSkill",
+                                            "name": "JSP",
+                                            "_id": "7cf5e4ed-724d-499a-a064-92e9b7454a9d",
+                                            "title": "Java Server Pages(JSP)",
+                                            "_updatedAt": "2022-11-30T19:01:16Z",
+                                            "_createdAt": "2022-11-30T19:01:16Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T18:53:16Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfbccX",
+                                            "_type": "ResumeSkill",
+                                            "name": "JQuery",
+                                            "_id": "6836fb50-3871-4bfb-80f9-8cf8c4d6d78e",
+                                            "title": "JQuery",
+                                            "_updatedAt": "2022-11-30T18:53:16Z"
+                                        },
+                                        {
+                                            "title": "HTML 5.0",
+                                            "_updatedAt": "2022-11-30T18:49:41Z",
+                                            "_createdAt": "2022-11-30T18:49:41Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfb8rm",
+                                            "_type": "ResumeSkill",
+                                            "name": "HTML 5.0",
+                                            "_id": "9ccf38a9-c76c-4114-b85b-1c747d30fca9"
+                                        },
+                                        {
+                                            "_id": "8bd0fd76-0302-4bb8-80b2-4624e7baed20",
+                                            "title": "CSS",
+                                            "_updatedAt": "2022-11-30T20:03:53Z",
+                                            "_createdAt": "2022-11-30T20:03:53Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfm68h",
+                                            "_type": "ResumeSkill",
+                                            "name": "CSS"
+                                        },
+                                        {
+                                            "_id": "dec33886-0443-418a-a312-0a5149ca45d2",
+                                            "title": "LESS",
+                                            "_updatedAt": "2022-11-30T18:55:48Z",
+                                            "_createdAt": "2022-11-30T18:55:48Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgRLGQ",
+                                            "_type": "ResumeSkill",
+                                            "name": "LESS"
+                                        },
+                                        {
+                                            "_id": "5a1e9762-1560-47b9-81ff-0cef770dffa8",
+                                            "title": "Highcharts",
+                                            "_updatedAt": "2022-11-30T18:55:33Z",
+                                            "_createdAt": "2022-11-30T18:55:33Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfbvHn",
+                                            "_type": "ResumeSkill",
+                                            "name": "Highcharts"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:03:58Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNIrIu",
+                                            "_type": "ResumeSkill",
+                                            "name": "MongoDB",
+                                            "_id": "392cf24d-acfa-414d-adbd-b58881d8e424",
+                                            "title": "MongoDB",
+                                            "_updatedAt": "2022-11-30T19:03:58Z"
+                                        }
+                                    ],
+                                    "_createdAt": "2022-12-01T04:29:58Z",
+                                    "title": "Frontend Software Engineer",
+                                    "dateEnd": "2014-12-31",
+                                    "_rev": "lhoXF04OR35CGYtnFjZ26K",
+                                    "companyName": "SoftTech Solutions",
+                                    "locationCity": "Annapolis Junction",
+                                    "companySubtitle": "Data Aggregation Display. ",
+                                    "_id": "6f477aa5-7ee8-48b5-b684-872e5f28b44b",
+                                    "locationState": "MD",
+                                    "_updatedAt": "2022-12-01T04:37:13Z",
+                                    "name": "SoftTech Solutions",
+                                    "description": "Consuming J2EE/Groovy APIs with JQuery and HTML/CSS with LESS for css preprocessing to aggregate data from different datasources providing different data to equal the full picture. JSPs displayed data with Highcharts and JQuery with Jasmine for automated testing. MongoDb backend with JAVA hibernate as the database layer. Maven build tool with a tomcat web server. Required custom vector graphic creation with Inkscape and later by request Adobe Illustrator. ",
+                                    "dateStart": "2013-08-01"
+                                },
+                                {
+                                    "name": "Raytheon Company - Elgg",
+                                    "locationCity": "Annapolis Junction",
+                                    "skillsUsed": [
+                                        {
+                                            "title": "PHP",
+                                            "_updatedAt": "2022-11-30T18:50:14Z",
+                                            "_createdAt": "2022-11-30T18:50:14Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNI5K4",
+                                            "_type": "ResumeSkill",
+                                            "name": "PHP",
+                                            "_id": "41ab371e-4ce2-489f-99b8-4eb755d7ce6c"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-12-01T12:48:05Z",
+                                            "_createdAt": "2022-12-01T12:48:05Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKViGVR3",
+                                            "_type": "ResumeSkill",
+                                            "name": "Elgg Social Media Network Framework",
+                                            "_id": "4d94813a-9380-4264-b707-f4128d1f7d6e",
+                                            "title": "Elgg Social Media Network Framework"
+                                        },
+                                        {
+                                            "name": "MySQL",
+                                            "_id": "17ab710e-232d-44ca-a826-8b546defb22d",
+                                            "title": "MySQL",
+                                            "_updatedAt": "2022-11-30T19:03:19Z",
+                                            "_createdAt": "2022-11-30T19:03:19Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfco2x",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "name": "JQuery",
+                                            "_id": "6836fb50-3871-4bfb-80f9-8cf8c4d6d78e",
+                                            "title": "JQuery",
+                                            "_updatedAt": "2022-11-30T18:53:16Z",
+                                            "_createdAt": "2022-11-30T18:53:16Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfbccX",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "_id": "9ccf38a9-c76c-4114-b85b-1c747d30fca9",
+                                            "title": "HTML 5.0",
+                                            "_updatedAt": "2022-11-30T18:49:41Z",
+                                            "_createdAt": "2022-11-30T18:49:41Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfb8rm",
+                                            "_type": "ResumeSkill",
+                                            "name": "HTML 5.0"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "CSS",
+                                            "_id": "8bd0fd76-0302-4bb8-80b2-4624e7baed20",
+                                            "title": "CSS",
+                                            "_updatedAt": "2022-11-30T20:03:53Z",
+                                            "_createdAt": "2022-11-30T20:03:53Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfm68h"
+                                        }
+                                    ],
+                                    "locationState": "MD",
+                                    "_id": "66776607-a9eb-471b-a70d-36d565c5330a",
+                                    "dateStart": "2012-05-01",
+                                    "companyName": "Raytheon Company",
+                                    "_createdAt": "2022-12-01T12:48:50Z",
+                                    "companySubtitle": "Internal Social Media Network.",
+                                    "dateEnd": "2013-07-31",
+                                    "_rev": "z7EiK8inwybcbhSAyOXRIA",
+                                    "_type": "ResumeExperience",
+                                    "description": "PHP, HTML, Javascript development using Elgg Social Networking Framework. Daily tasking consisted of maintenance of production while completing new development tasking. New development was mainly creating custom elgg plugins. The native Elgg database is MySQL. Since the system was in production we also provided direct user support.",
+                                    "title": "Software Engineer",
+                                    "_updatedAt": "2022-12-01T12:48:50Z"
+                                },
+                                {
+                                    "companySubtitle": "Distributed System Protocol.",
+                                    "title": "Software Engineer",
+                                    "dateStart": "2008-10-01",
+                                    "description": "Production C++ & Python Agile Software Development and Maintenance. Our MySQL databases stored and retrieved data based on network messages sent from system to system. PIG Scripting for Log aggregation. Responsible for writing the python application that retrieves data from the system based on network messages. Prototyped Google Web Toolkit implementation of maintenance and sustainment dashboard of the distributed system. ",
+                                    "_createdAt": "2022-12-01T12:55:38Z",
+                                    "_updatedAt": "2022-12-01T12:55:38Z",
+                                    "companyName": "Raytheon Company",
+                                    "locationState": "MD",
+                                    "skillsUsed": [
+                                        {
+                                            "_createdAt": "2022-11-30T18:50:39Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNI6ba",
+                                            "_type": "ResumeSkill",
+                                            "name": "C/C++",
+                                            "_id": "328069f7-b10b-4efa-8921-1348548e57b9",
+                                            "title": "C/C++",
+                                            "_updatedAt": "2022-11-30T18:50:39Z"
+                                        },
+                                        {
+                                            "_rev": "v53ZsDDD1bdWz9EKVfbKfd",
+                                            "_type": "ResumeSkill",
+                                            "name": "Python",
+                                            "_id": "64740cea-d644-4623-84a3-45553c693215",
+                                            "title": "Python",
+                                            "_updatedAt": "2022-11-30T18:50:58Z",
+                                            "_createdAt": "2022-11-30T18:50:58Z"
+                                        },
+                                        {
+                                            "name": "MySQL",
+                                            "_id": "17ab710e-232d-44ca-a826-8b546defb22d",
+                                            "title": "MySQL",
+                                            "_updatedAt": "2022-11-30T19:03:19Z",
+                                            "_createdAt": "2022-11-30T19:03:19Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfco2x",
+                                            "_type": "ResumeSkill"
+                                        }
+                                    ],
+                                    "dateEnd": "2012-05-31",
+                                    "_rev": "v53ZsDDD1bdWz9EKViILvq",
+                                    "_type": "ResumeExperience",
+                                    "locationCity": "Annapolis Junction",
+                                    "name": "Raytheon Company - C++",
+                                    "_id": "b4de11ca-8419-4a7a-b762-a7ec2c125957"
+                                },
+                                {
+                                    "_createdAt": "2022-12-01T13:00:42Z",
+                                    "dateStart": "2004-11-01",
+                                    "locationCity": "Suitland",
+                                    "description": "PHP, HTML, Javascript production application development in spiral/waterfall methodology. MySQL database backend and Tomcat web server maintained by team. Ingested many sources I was responsible for developing a JAVA SOAP API to serve data in CSV and XML. Provided detailed system documentation for inherited undocumented production system. Other duties consist of worldwide site surveys, and installations; site-specific systems enhancements; system upgrades; operator training; software procurement and configuration management; hardware procurement and inventory control; phone and email technical support; liaison and troubleshooting with working level counterparts; system demonstrations and system briefings to high level decision makers.\n\n\n",
+                                    "title": "Software Engineer",
+                                    "_id": "d9fede9e-dc64-4ecb-bb02-3a0400408177",
+                                    "companyName": "L-3 Communications",
+                                    "_rev": "v53ZsDDD1bdWz9EKVinpdt",
+                                    "dateEnd": "2008-10-31",
+                                    "companySubtitle": "Naval Software Development",
+                                    "locationState": "MD",
+                                    "_updatedAt": "2022-12-01T15:51:22Z",
+                                    "_type": "ResumeExperience",
+                                    "skillsUsed": [
+                                        {
+                                            "_id": "41ab371e-4ce2-489f-99b8-4eb755d7ce6c",
+                                            "title": "PHP",
+                                            "_updatedAt": "2022-11-30T18:50:14Z",
+                                            "_createdAt": "2022-11-30T18:50:14Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNI5K4",
+                                            "_type": "ResumeSkill",
+                                            "name": "PHP"
+                                        },
+                                        {
+                                            "name": "HTML 5.0",
+                                            "_id": "9ccf38a9-c76c-4114-b85b-1c747d30fca9",
+                                            "title": "HTML 5.0",
+                                            "_updatedAt": "2022-11-30T18:49:41Z",
+                                            "_createdAt": "2022-11-30T18:49:41Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfb8rm",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "_rev": "v53ZsDDD1bdWz9EKVfm68h",
+                                            "_type": "ResumeSkill",
+                                            "name": "CSS",
+                                            "_id": "8bd0fd76-0302-4bb8-80b2-4624e7baed20",
+                                            "title": "CSS",
+                                            "_updatedAt": "2022-11-30T20:03:53Z",
+                                            "_createdAt": "2022-11-30T20:03:53Z"
+                                        },
+                                        {
+                                            "_rev": "lhoXF04OR35CGYtnFgYpfD",
+                                            "_type": "ResumeSkill",
+                                            "name": "Linux",
+                                            "_id": "b14a599f-3b67-4e39-9c23-accea63edfb1",
+                                            "title": "Linux",
+                                            "_updatedAt": "2022-11-30T19:23:24Z",
+                                            "_createdAt": "2022-11-30T19:23:24Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:21:30Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNJrcS",
+                                            "_type": "ResumeSkill",
+                                            "name": "SVN",
+                                            "_id": "807df707-ea48-4368-855c-4d67e7102e18",
+                                            "title": "SVN",
+                                            "_updatedAt": "2022-11-30T19:21:30Z"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "MySQL",
+                                            "_id": "17ab710e-232d-44ca-a826-8b546defb22d",
+                                            "title": "MySQL",
+                                            "_updatedAt": "2022-11-30T19:03:19Z",
+                                            "_createdAt": "2022-11-30T19:03:19Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfco2x"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-11-30T18:47:42Z",
+                                            "_createdAt": "2022-11-30T18:47:42Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgNgfI",
+                                            "_type": "ResumeSkill",
+                                            "name": "JAVA",
+                                            "_id": "3c945931-e968-4c34-8311-419697af70c1",
+                                            "title": "JAVA"
+                                        }
+                                    ],
+                                    "name": "L-3 Communications, Titan Group"
+                                }
+                            ],
+                            "feedbackEntries": null,
+                            "_createdAt": "2022-12-01T01:10:03Z",
+                            "servicesList": null,
+                            "skillsets": null
+                        },
+                        {
+                            "feedbackEntries": null,
+                            "resumeFile": null,
+                            "servicesList": null,
+                            "skillsets": null,
+                            "title": "Education",
+                            "_createdAt": "2022-12-01T14:14:09Z",
+                            "_rev": "lhoXF04OR35CGYtnFnlndV",
+                            "_type": "ResumeEducationSection",
+                            "_id": "d980e48d-0fe1-4c38-8f35-97a68c59ddee",
+                            "introduction": "All my life I have been driven by my strong belief that education is important. I try to learn something new every single day.\n\n",
+                            "serviceAmenities": null,
+                            "portfolioEntries": null,
+                            "cvFile": null,
+                            "educationExperiences": [
+                                {
+                                    "_createdAt": "2022-12-01T14:17:44Z",
+                                    "institutionName": "University of Maryland, Baltimore County",
+                                    "dateEnd": "2004-05-06",
+                                    "_updatedAt": "2022-12-01T14:17:44Z",
+                                    "name": "BS",
+                                    "_id": "6424a080-4dfe-4734-802a-faa3dea2d81e",
+                                    "qualification": "Computer Engineering, Bachelor of Science",
+                                    "dateStart": "1999-06-01",
+                                    "_rev": "v53ZsDDD1bdWz9EKViVLTO",
+                                    "_type": "ResumeEducation"
+                                }
+                            ],
+                            "name": "Education",
+                            "_updatedAt": "2022-12-01T15:58:25Z",
+                            "experiences": null
+                        },
+                        {
+                            "_createdAt": "2022-12-01T20:53:45Z",
+                            "_rev": "YKkjAGOOflKrRktUjzqTwY",
+                            "name": "Feedback",
+                            "servicesList": null,
+                            "cvFile": null,
+                            "skillsets": null,
+                            "experiences": null,
+                            "educationExperiences": null,
+                            "_id": "127990c1-8bd4-44f9-b344-b39dcceaf731",
+                            "title": "Feedback",
+                            "_updatedAt": "2022-12-01T20:55:44Z",
+                            "introduction": "Take a look at the reviews of my customers and ensure the quality of my services.",
+                            "serviceAmenities": null,
+                            "feedbackEntries": [
+                                {
+                                    "_createdAt": "2022-12-01T20:55:41Z",
+                                    "companyName": "JamWorks 24/7",
+                                    "_type": "ResumeFeedback",
+                                    "imageSrc": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_type": "reference",
+                                            "_ref": "image-ba4a7c9c01e632950293be433ab1f95560800ce5-728x290-png"
+                                        }
+                                    },
+                                    "_id": "b5011657-c526-4100-aabf-886c204c2918",
+                                    "_updatedAt": "2022-12-01T21:24:38Z",
+                                    "customerName": "JamWorks 24/7",
+                                    "customerTitle": "CEO",
+                                    "_rev": "QoSfkmWVFCw5OU4CBmXCaz",
+                                    "name": "JamWorks 24/7",
+                                    "quote": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable Engl"
+                                }
+                            ],
+                            "_type": "ResumeFeedbackSection",
+                            "portfolioEntries": null,
+                            "resumeFile": null
+                        },
+                        {
+                            "title": "Portfolio",
+                            "_createdAt": "2022-12-02T10:00:00Z",
+                            "_rev": "VrdcoLtXxUWed6PHr9YgUR",
+                            "portfolioEntries": [
+                                {
+                                    "slug": {
+                                        "current": "assembled-brands-fintech-company-website",
+                                        "_type": "slug"
+                                    },
+                                    "name": "Fintech Website",
+                                    "skillsHighlighted": [
+                                        {
+                                            "_updatedAt": "2022-11-30T18:51:44Z",
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js",
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js"
+                                        },
+                                        {
+                                            "name": "TypeScript",
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916",
+                                            "title": "TypeScript",
+                                            "_updatedAt": "2022-11-30T21:34:11Z",
+                                            "_createdAt": "2022-11-30T21:34:11Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVg0EpX",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "name": "Kotlin",
+                                            "_id": "ce4db41b-50cf-4bf7-b8b2-a71de88ee6ac",
+                                            "title": "Kotlin",
+                                            "_updatedAt": "2022-11-30T18:49:05Z",
+                                            "_createdAt": "2022-11-30T18:49:05Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNI0za",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "_id": "d1289590-6c6a-4100-a7ff-7f6346ccdd2d",
+                                            "title": "AWS",
+                                            "_updatedAt": "2022-11-30T19:04:29Z",
+                                            "_createdAt": "2022-11-30T19:04:29Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgTkx3",
+                                            "_type": "ResumeSkill",
+                                            "name": "AWS"
+                                        }
+                                    ],
+                                    "imageGallery": [
+                                        {
+                                            "_type": "image",
+                                            "_key": "8d9fed9cd507",
+                                            "asset": {
+                                                "_type": "reference",
+                                                "_ref": "image-8d8e805dcd2ae7eda4a08a15e67396c66e95b8fe-2158x2056-png"
+                                            }
+                                        },
+                                        {
+                                            "asset": {
+                                                "_ref": "image-67f5a2fdafd1cb9030537b0181fa615ea8e08ae7-1104x1850-png",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image",
+                                            "_key": "b69c06b633a1"
+                                        }
+                                    ],
+                                    "detailDescription": "As frontend subject matter expert on a team of 5 developers this project was the marketing tool of the company. Admin dashboard allows admin to update content and some layouts. ",
+                                    "_rev": "0rD6Phxg3duzic15oELuYo",
+                                    "_type": "ResumePortfolioItem",
+                                    "inceptionDate": "2019-10-01",
+                                    "_updatedAt": "2022-12-02T15:32:21Z",
+                                    "detailTitle": "Assembled Brands Fintech Company Website",
+                                    "_id": "aba4e7c5-6109-4538-9851-cca583af9e9f",
+                                    "linkToProd": "https://assembledbrands.com",
+                                    "_createdAt": "2022-12-02T15:30:24Z",
+                                    "coverImage": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_ref": "image-8d8e805dcd2ae7eda4a08a15e67396c66e95b8fe-2158x2056-png",
+                                            "_type": "reference"
+                                        }
+                                    },
+                                    "title": "Fintech Company Website"
+                                },
+                                {
+                                    "skillsHighlighted": [
+                                        {
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js",
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js",
+                                            "_updatedAt": "2022-11-30T18:51:44Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T18:49:05Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNI0za",
+                                            "_type": "ResumeSkill",
+                                            "name": "Kotlin",
+                                            "_id": "ce4db41b-50cf-4bf7-b8b2-a71de88ee6ac",
+                                            "title": "Kotlin",
+                                            "_updatedAt": "2022-11-30T18:49:05Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-12-02T13:15:06Z",
+                                            "_rev": "0rD6Phxg3duzic15oEBAoj",
+                                            "_type": "ResumeSkill",
+                                            "name": "Sanity.io",
+                                            "_id": "652624f1-d57d-41b0-a64e-45ba8f05e4bc",
+                                            "title": "Sanity.io",
+                                            "_updatedAt": "2022-12-02T13:15:24Z"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-11-30T18:49:41Z",
+                                            "_createdAt": "2022-11-30T18:49:41Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfb8rm",
+                                            "_type": "ResumeSkill",
+                                            "name": "HTML 5.0",
+                                            "_id": "9ccf38a9-c76c-4114-b85b-1c747d30fca9",
+                                            "title": "HTML 5.0"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T20:03:53Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfm68h",
+                                            "_type": "ResumeSkill",
+                                            "name": "CSS",
+                                            "_id": "8bd0fd76-0302-4bb8-80b2-4624e7baed20",
+                                            "title": "CSS",
+                                            "_updatedAt": "2022-11-30T20:03:53Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T21:34:11Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVg0EpX",
+                                            "_type": "ResumeSkill",
+                                            "name": "TypeScript",
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916",
+                                            "title": "TypeScript",
+                                            "_updatedAt": "2022-11-30T21:34:11Z"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T19:04:29Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgTkx3",
+                                            "_type": "ResumeSkill",
+                                            "name": "AWS",
+                                            "_id": "d1289590-6c6a-4100-a7ff-7f6346ccdd2d",
+                                            "title": "AWS",
+                                            "_updatedAt": "2022-11-30T19:04:29Z"
+                                        }
+                                    ],
+                                    "_type": "ResumePortfolioItem",
+                                    "_createdAt": "2022-12-02T14:27:11Z",
+                                    "slug": {
+                                        "current": "fintech-blog",
+                                        "_type": "slug"
+                                    },
+                                    "inceptionDate": "2020-12-01",
+                                    "detailTitle": "Assembled Brands Fintech Company Blog",
+                                    "detailDescription": "Added as an augment to the Fintech company Website.",
+                                    "title": "Fintech Blog",
+                                    "linkToProd": "https://assembledbrands.com/blog",
+                                    "_updatedAt": "2022-12-02T15:28:00Z",
+                                    "coverImage": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_ref": "image-4f46ffc1713abf5a2d5b26dfa0eb3c4c677c7bfc-2130x2180-png",
+                                            "_type": "reference"
+                                        }
+                                    },
+                                    "name": "AB Blog",
+                                    "imageGallery": [
+                                        {
+                                            "_key": "6378b02d4a49",
+                                            "asset": {
+                                                "_ref": "image-4f46ffc1713abf5a2d5b26dfa0eb3c4c677c7bfc-2130x2180-png",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image"
+                                        },
+                                        {
+                                            "asset": {
+                                                "_ref": "image-f63ba14d6b5c7cd60a4dccc311fef266888ca17f-2506x1820-png",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image",
+                                            "_key": "1e79d1587738"
+                                        }
+                                    ],
+                                    "_id": "f2e5395b-e430-40e2-9374-0fed3d53ebb9",
+                                    "_rev": "5iTZEBNHx5PwgJLwP9Hu3C"
+                                },
+                                {
+                                    "_updatedAt": "2022-12-06T17:24:46Z",
+                                    "title": "Sanity Open Source CMS",
+                                    "_createdAt": "2022-12-06T17:22:49Z",
+                                    "name": "Sanity ",
+                                    "detailTitle": "Sanity.io Headless CMS",
+                                    "_rev": "WyInRKefYSPCXTOlY1mbyU",
+                                    "coverImage": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_ref": "image-4a0fcb679487ea1b245059fc28fcaf9096de3232-496x496-png",
+                                            "_type": "reference"
+                                        }
+                                    },
+                                    "linkToProd": "https://www.sanity.io/exchange/community/tmanundercover",
+                                    "slug": {
+                                        "current": "sanity-open-source-cms",
+                                        "_type": "slug"
+                                    },
+                                    "_id": "e7fb2fbd-ca34-4112-af4c-0457e1e1d0f9",
+                                    "detailDescription": "This community is around Sanity.io. Sanity is a headless CMS that can be used to easily be the content store for websites. Check out the projects that I've done with sanity. I have highlighted some of them in my portfolio. ",
+                                    "_type": "ResumePortfolioItem",
+                                    "skillsHighlighted": [
+                                        {
+                                            "title": "Sanity.io",
+                                            "_updatedAt": "2022-12-02T13:15:24Z",
+                                            "_createdAt": "2022-12-02T13:15:06Z",
+                                            "_rev": "0rD6Phxg3duzic15oEBAoj",
+                                            "_type": "ResumeSkill",
+                                            "name": "Sanity.io",
+                                            "_id": "652624f1-d57d-41b0-a64e-45ba8f05e4bc"
+                                        },
+                                        {
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js",
+                                            "_updatedAt": "2022-11-30T18:51:44Z",
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T21:34:11Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVg0EpX",
+                                            "_type": "ResumeSkill",
+                                            "name": "TypeScript",
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916",
+                                            "title": "TypeScript",
+                                            "_updatedAt": "2022-11-30T21:34:11Z"
+                                        }
+                                    ],
+                                    "inceptionDate": "2020-12-01",
+                                    "imageGallery": null
+                                },
+                                {
+                                    "linkToProd": "https://aluminum-foil.web.app",
+                                    "detailTitle": "Black Themed Question Game - BlckTwttr",
+                                    "_updatedAt": "2022-12-09T20:21:13Z",
+                                    "skillsHighlighted": [
+                                        {
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js",
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js",
+                                            "_updatedAt": "2022-11-30T18:51:44Z"
+                                        },
+                                        {
+                                            "name": "TypeScript",
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916",
+                                            "title": "TypeScript",
+                                            "_updatedAt": "2022-11-30T21:34:11Z",
+                                            "_createdAt": "2022-11-30T21:34:11Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVg0EpX",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "title": "Firebase: Hosting, Functions, Authentication, Push Notifications, Analytics",
+                                            "_updatedAt": "2022-11-30T23:54:48Z",
+                                            "_createdAt": "2022-11-30T20:06:56Z",
+                                            "_rev": "lhoXF04OR35CGYtnFiBSLk",
+                                            "_type": "ResumeSkill",
+                                            "name": "Firebase: Hosting, Functions, Authentication, Push Notifications, Analytics",
+                                            "_id": "d2a2b75e-6b9c-4b42-948d-94592762e670"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T23:54:06Z",
+                                            "_rev": "z7EiK8inwybcbhSAyNez3U",
+                                            "_type": "ResumeSkill",
+                                            "name": "Firebase: Firestore, Real-time Database",
+                                            "_id": "14574afa-995f-432a-b277-0f6cedfdb52d",
+                                            "title": "Firebase: Firestore, Real-time Database",
+                                            "_updatedAt": "2022-11-30T23:54:59Z"
+                                        }
+                                    ],
+                                    "name": "Black Themed Question Game",
+                                    "imageGallery": [
+                                        {
+                                            "_type": "image",
+                                            "_key": "b993f6e8667c",
+                                            "asset": {
+                                                "_ref": "image-61189c50a77eef13a88132a7425fce1273dda06c-1280x2769-webp",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "f811459db0dc",
+                                            "asset": {
+                                                "_ref": "image-b1ea13c0aa7453add454de3a9cb4583fbe948187-1280x2769-webp",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "78f996e1e297",
+                                            "asset": {
+                                                "_ref": "image-f3b652696c70bccdedc849773e5828bccfb127e7-1280x2769-webp",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "asset": {
+                                                "_ref": "image-c7be34e1ad4be8b5b49fd8bde508f4c7c742cefb-1280x2769-webp",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image",
+                                            "_key": "98cbf3678755"
+                                        }
+                                    ],
+                                    "_rev": "VrdcoLtXxUWed6PHr9YdWc",
+                                    "inceptionDate": "2022-06-01",
+                                    "title": "Black Themed Question Game",
+                                    "slug": {
+                                        "current": "black-themed-question-game",
+                                        "_type": "slug"
+                                    },
+                                    "_type": "ResumePortfolioItem",
+                                    "_createdAt": "2022-12-09T20:21:13Z",
+                                    "detailDescription": "This is a funny African American question card game. Answer the questions and see if you can get your black card.",
+                                    "_id": "ddbdb0da-fec1-4a3f-a4d3-e6650e96f1f8",
+                                    "coverImage": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_type": "reference",
+                                            "_ref": "image-c7be34e1ad4be8b5b49fd8bde508f4c7c742cefb-1280x2769-webp"
+                                        }
+                                    }
+                                },
+                                {
+                                    "title": "JamWorks 24/7 Shopify Store",
+                                    "skillsHighlighted": [
+                                        {
+                                            "name": "Shopify API",
+                                            "_id": "77627e6a-6ab3-4c14-a85d-f649b986138b",
+                                            "title": "Shopify API",
+                                            "_updatedAt": "2022-12-02T09:51:52Z",
+                                            "_createdAt": "2022-12-02T09:51:52Z",
+                                            "_rev": "YKkjAGOOflKrRktUk9NGaw",
+                                            "_type": "ResumeSkill"
+                                        },
+                                        {
+                                            "title": "ImageMagick(cli)",
+                                            "_updatedAt": "2022-11-30T19:09:38Z",
+                                            "_createdAt": "2022-11-30T19:09:38Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfdaj6",
+                                            "_type": "ResumeSkill",
+                                            "name": "ImageMagick(cli)",
+                                            "_id": "2a659991-569f-4a95-bfe1-d1af655a7b83"
+                                        },
+                                        {
+                                            "_createdAt": "2022-12-02T09:53:14Z",
+                                            "_rev": "YKkjAGOOflKrRktUk9No6c",
+                                            "_type": "ResumeSkill",
+                                            "name": "Shopify Plugin Development",
+                                            "_id": "ee282496-cdb5-4650-bbf8-2d87f24f947b",
+                                            "title": "Shopify Plugin Development",
+                                            "_updatedAt": "2022-12-02T09:53:14Z"
+                                        }
+                                    ],
+                                    "slug": {
+                                        "current": "jamworks-24-7-shopify-store",
+                                        "_type": "slug"
+                                    },
+                                    "inceptionDate": "2022-05-01",
+                                    "detailTitle": "JamWorks 24/7 Nostalgic Shopify Store",
+                                    "_updatedAt": "2022-12-02T12:51:39Z",
+                                    "detailDescription": "This Shopify store was created to showcase the incredible virtual inventory of the owner. The store was constructed with a combination of Shopify UI and some custom made components. Shopify plugin development to bring in a design and then Create mockups for the design. ",
+                                    "_rev": "ElrRHx5al3kb1PwLXH9UW8",
+                                    "_createdAt": "2022-12-02T09:59:53Z",
+                                    "coverImage": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_ref": "image-3febb72b8aad0c7beed512928903479f641a5a15-2052x1798-png",
+                                            "_type": "reference"
+                                        }
+                                    },
+                                    "_type": "ResumePortfolioItem",
+                                    "linkToProd": "https://jamworks247.com",
+                                    "_id": "9bbeab5b-f091-41e7-b5bf-8c9fd04199cd",
+                                    "imageGallery": [
+                                        {
+                                            "_type": "image",
+                                            "_key": "253d2ba4c3dd",
+                                            "asset": {
+                                                "_ref": "image-3febb72b8aad0c7beed512928903479f641a5a15-2052x1798-png",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "298dfefd7fb4",
+                                            "asset": {
+                                                "_ref": "image-35344b8e3e6a89ebf94fbe320553b630d6445cbd-2052x1936-png",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "_key": "14a904e51d07",
+                                            "asset": {
+                                                "_type": "reference",
+                                                "_ref": "image-2cdd14b21197bf5d6b34b0a70dccc0c298fe72ee-2054x1996-png"
+                                            },
+                                            "_type": "image"
+                                        }
+                                    ],
+                                    "name": "JamWorks Shopify Store"
+                                },
+                                {
+                                    "skillsHighlighted": [
+                                        {
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js",
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js",
+                                            "_updatedAt": "2022-11-30T18:51:44Z"
+                                        },
+                                        {
+                                            "title": "TypeScript",
+                                            "_updatedAt": "2022-11-30T21:34:11Z",
+                                            "_createdAt": "2022-11-30T21:34:11Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVg0EpX",
+                                            "_type": "ResumeSkill",
+                                            "name": "TypeScript",
+                                            "_id": "69995517-513a-41b7-a230-c7153af28916"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Firebase: Hosting, Functions, Authentication, Push Notifications, Analytics",
+                                            "_id": "d2a2b75e-6b9c-4b42-948d-94592762e670",
+                                            "title": "Firebase: Hosting, Functions, Authentication, Push Notifications, Analytics",
+                                            "_updatedAt": "2022-11-30T23:54:48Z",
+                                            "_createdAt": "2022-11-30T20:06:56Z",
+                                            "_rev": "lhoXF04OR35CGYtnFiBSLk"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Node.js",
+                                            "_id": "c460e246-cac2-456d-a86e-6310259c3193",
+                                            "title": "Node.js",
+                                            "_updatedAt": "2022-11-30T18:48:48Z",
+                                            "_createdAt": "2022-11-30T18:48:48Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgPKO1"
+                                        }
+                                    ],
+                                    "detailDescription": "These are the drinks that any bartender needs to know how to make. Some specialty drinks are included.",
+                                    "linkToDev": "https://bartender-concierge.web.app",
+                                    "_updatedAt": "2022-12-09T16:53:01Z",
+                                    "_id": "79706391-d66f-4f74-8854-20d049e33405",
+                                    "slug": {
+                                        "current": "bartender-flash-cards",
+                                        "_type": "slug"
+                                    },
+                                    "_type": "ResumePortfolioItem",
+                                    "inceptionDate": "2022-11-21",
+                                    "imageGallery": [
+                                        {
+                                            "_key": "846b09f2726e",
+                                            "asset": {
+                                                "_ref": "image-bc55dbf3f1fed76364a1ece4a47ab8d2dc7f5fec-1000x2188-png",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image"
+                                        },
+                                        {
+                                            "_key": "42d0a796a2cc",
+                                            "asset": {
+                                                "_ref": "image-de6033f2a8b2b2907639ceefcf7fec82f82fef18-984x1534-png",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image"
+                                        }
+                                    ],
+                                    "_createdAt": "2022-12-09T13:23:37Z",
+                                    "_rev": "cwf6PSmkIH3MXtFHz0qXfL",
+                                    "detailTitle": "Bartender's Flash Card App",
+                                    "linkToProd": "https://bartender-concierge.web.app",
+                                    "name": "Bartender Flash Cards",
+                                    "coverImage": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_ref": "image-bc55dbf3f1fed76364a1ece4a47ab8d2dc7f5fec-1000x2188-png",
+                                            "_type": "reference"
+                                        }
+                                    },
+                                    "title": "Bartender Flash Cards"
+                                },
+                                {
+                                    "_updatedAt": "2022-12-02T13:20:07Z",
+                                    "imageGallery": [
+                                        {
+                                            "asset": {
+                                                "_type": "reference",
+                                                "_ref": "image-0e39a3e878b664261b3d4b34ac2ce567835edaba-2160x1966-webp"
+                                            },
+                                            "_type": "image",
+                                            "_key": "e8c941e71730"
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "7aaaf820ee1c",
+                                            "asset": {
+                                                "_ref": "image-b840bb68d2f8f2d0bac5462549633f5942515a86-1280x973-webp",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "asset": {
+                                                "_ref": "image-9800eba60722bf0f437d223c5e76b20f995e00ee-1280x1445-webp",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image",
+                                            "_key": "aeccc0a78def"
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "5f19366d8514",
+                                            "asset": {
+                                                "_ref": "image-b0b24687bf5419bdc1ed0ded3ed70ce985c837c2-1280x4817-webp",
+                                                "_type": "reference"
+                                            }
+                                        }
+                                    ],
+                                    "_rev": "5iTZEBNHx5PwgJLwP8rm5c",
+                                    "linkToProd": "https://transformhw.org",
+                                    "name": "THW",
+                                    "slug": {
+                                        "_type": "slug",
+                                        "current": "healing-and-wellness-business-website"
+                                    },
+                                    "_type": "ResumePortfolioItem",
+                                    "coverImage": {
+                                        "_type": "image",
+                                        "asset": {
+                                            "_ref": "image-0e39a3e878b664261b3d4b34ac2ce567835edaba-2160x1966-webp",
+                                            "_type": "reference"
+                                        }
+                                    },
+                                    "detailTitle": "Healing & Wellness Small Business Website",
+                                    "skillsHighlighted": [
+                                        {
+                                            "_createdAt": "2022-11-30T18:51:44Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgQAUI",
+                                            "_type": "ResumeSkill",
+                                            "name": "React.js",
+                                            "_id": "59fe1d75-a35c-4a6c-8ecd-cf872791821b",
+                                            "title": "React.js",
+                                            "_updatedAt": "2022-11-30T18:51:44Z"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "Sanity.io",
+                                            "_id": "652624f1-d57d-41b0-a64e-45ba8f05e4bc",
+                                            "title": "Sanity.io",
+                                            "_updatedAt": "2022-12-02T13:15:24Z",
+                                            "_createdAt": "2022-12-02T13:15:06Z",
+                                            "_rev": "0rD6Phxg3duzic15oEBAoj"
+                                        },
+                                        {
+                                            "title": "HTML 5.0",
+                                            "_updatedAt": "2022-11-30T18:49:41Z",
+                                            "_createdAt": "2022-11-30T18:49:41Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfb8rm",
+                                            "_type": "ResumeSkill",
+                                            "name": "HTML 5.0",
+                                            "_id": "9ccf38a9-c76c-4114-b85b-1c747d30fca9"
+                                        },
+                                        {
+                                            "_type": "ResumeSkill",
+                                            "name": "CSS",
+                                            "_id": "8bd0fd76-0302-4bb8-80b2-4624e7baed20",
+                                            "title": "CSS",
+                                            "_updatedAt": "2022-11-30T20:03:53Z",
+                                            "_createdAt": "2022-11-30T20:03:53Z",
+                                            "_rev": "v53ZsDDD1bdWz9EKVfm68h"
+                                        },
+                                        {
+                                            "_createdAt": "2022-11-30T18:48:48Z",
+                                            "_rev": "lhoXF04OR35CGYtnFgPKO1",
+                                            "_type": "ResumeSkill",
+                                            "name": "Node.js",
+                                            "_id": "c460e246-cac2-456d-a86e-6310259c3193",
+                                            "title": "Node.js",
+                                            "_updatedAt": "2022-11-30T18:48:48Z"
+                                        },
+                                        {
+                                            "_updatedAt": "2022-11-30T23:54:48Z",
+                                            "_createdAt": "2022-11-30T20:06:56Z",
+                                            "_rev": "lhoXF04OR35CGYtnFiBSLk",
+                                            "_type": "ResumeSkill",
+                                            "name": "Firebase: Hosting, Functions, Authentication, Push Notifications, Analytics",
+                                            "_id": "d2a2b75e-6b9c-4b42-948d-94592762e670",
+                                            "title": "Firebase: Hosting, Functions, Authentication, Push Notifications, Analytics"
+                                        }
+                                    ],
+                                    "inceptionDate": "2022-11-19",
+                                    "_createdAt": "2022-12-02T13:15:57Z",
+                                    "detailDescription": "Transformative Healing and Wellness uses this website display information as well as to direct potential customers to  make appointments, make payments, and display important forms. ",
+                                    "_id": "b125a00b-bafb-4434-8522-c365a1b7bf39",
+                                    "title": "Healing & Wellness Business Website"
+                                },
+                                {
+                                    "_id": "0847255b-3899-4ec2-bebb-c1df0ecf6f04",
+                                    "_updatedAt": "2022-12-15T04:40:01Z",
+                                    "_createdAt": "2022-12-09T16:56:23Z",
+                                    "_rev": "3re4XGUaXqpLG8nUTCNJ1p",
+                                    "name": "This Site",
+                                    "_type": "ResumePortfolioItem",
+                                    "title": "Digital Resume",
+                                    "skillsHighlighted": null,
+                                    "imageGallery": [
+                                        {
+                                            "_type": "image",
+                                            "_key": "ae0cdaa6046c",
+                                            "asset": {
+                                                "_ref": "image-870429ab5c30f4291296bea943809bf6be4eb0db-1284x2778-png",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "e86ff91ee3f4",
+                                            "asset": {
+                                                "_ref": "image-9129fa0d689dc7cb162bb616dac0002f8eb51b41-1284x2778-png",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "3a0684dd52ca",
+                                            "asset": {
+                                                "_ref": "image-83ae1e25a01ecc72f9b55b22b2363270123e6e58-1284x2778-png",
+                                                "_type": "reference"
+                                            }
+                                        },
+                                        {
+                                            "_key": "f8e23fd91e9f",
+                                            "asset": {
+                                                "_ref": "image-e175f974a1487be31f3d1d76acad502c7a5b4d0e-1284x2778-png",
+                                                "_type": "reference"
+                                            },
+                                            "_type": "image"
+                                        },
+                                        {
+                                            "_type": "image",
+                                            "_key": "7cea5692dbb9",
+                                            "asset": {
+                                                "_type": "reference",
+                                                "_ref": "image-119b02cc6b27f21c012ed2eb2e39e2e73c06ca2a-1002x1938-png"
+                                            }
+                                        }
+                                    ],
+                                    "coverImage": {
+                                        "asset": {
+                                            "_ref": "image-585b3cd478d826389f345320da3ff6da80b150ab-1284x2778-png",
+                                            "_type": "reference"
+                                        },
+                                        "_type": "image"
+                                    }
+                                }
+                            ],
+                            "servicesList": null,
+                            "experiences": null,
+                            "educationExperiences": null,
+                            "serviceAmenities": null,
+                            "_type": "ResumePortfolioSection",
+                            "skillsets": null,
+                            "cvFile": null,
+                            "introduction": "This is my Portfolio. These projects are in various stages of completion.",
+                            "name": "Portfolio",
+                            "_id": "3619d839-36fc-4943-bbe6-fe5fc703f765",
+                            "_updatedAt": "2022-12-09T20:21:36Z",
+                            "feedbackEntries": null,
+                            "resumeFile": null
+                        },
+                        {
+                            "name": "Resume Contact Us",
+                            "servicesList": null,
+                            "cvFile": null,
+                            "experiences": null,
+                            "_type": "ResumeContactUsSection",
+                            "title": "Contact",
+                            "_updatedAt": "2022-12-02T00:17:56Z",
+                            "_id": "a477839e-9af6-4df7-a56d-18803de9034e",
+                            "serviceAmenities": null,
+                            "introduction": "Are you working on something great? I would love to help make it happen! Drop me a letter and start your project right now! Just do it.",
+                            "formSubmitButtonText": "Send Message",
+                            "_rev": "QoSfkmWVFCw5OU4CBn0RSb",
+                            "skillsets": null,
+                            "educationExperiences": null,
+                            "_createdAt": "2022-12-02T00:17:56Z",
+                            "feedbackEntries": null,
+                            "portfolioEntries": null,
+                            "resumeFile": null
+                        }
+                    ]
+            }
+        ,
+
+        "bookAppointmentLink":
+            "https://the-handsomest-nerd.square.site",
+        "metaImage":
+            {
+                "_type":
+                    "image",
+                "asset":
+                    {
+                        "_ref":
+                            "image-1b6d17ecb24acc63e06dd318c88459ac89cd0b36-3007x2979-jpg"
+                    }
+            }
+        ,
+        "servicesAvailable":
+        undefined,
+        "underConstructionPageRef":
+        undefined,
+        "slug":
+            {
+                "current":
+                    "home",
+                "_type":
+                    "slug"
+            }
+        ,
+        "businessCardImageSrc":
+            {
+                "_type":
+                    "image",
+                "asset":
+                    {
+                        "_ref":
+                            "image-4bb7c114dc8fd33f70df76fe3fff2791f0f0eb0c-3007x2979-jpg",
+                    }
+            }
+        ,
+        "website":
+            "https://terrellsingleton.com"
+    }
+}
+
+export default calculatedHomePageResumeData;
\ No newline at end of file
diff --git a/src/stories/data/ConsultingFooterSectionData.ts b/src/stories/data/ConsultingFooterSectionData.ts
new file mode 100644
index 00000000..4f6f5cab
--- /dev/null
+++ b/src/stories/data/ConsultingFooterSectionData.ts
@@ -0,0 +1,66 @@
+import {
+    FooterSectionType,
+    HeaderSectionType,
+    HeroAnimatedContentSectionType,
+    ResumeBioSectionType
+} from "../../components/BlockContentTypes";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+
+const FooterSectionData:FooterSectionType = {
+    _type: "FooterSection",
+    "footerMenuRef": {
+        "logoAccentText": ".",
+        "slug": {
+            "current": "chow-works-footer",
+            "_type": "slug"
+        },
+        "logoText": "Chow Works",
+        "title": "Chow Works Footer",
+        "subMenus": [
+            {
+                "title": "Quick Links",
+                "_type": "menuGroup",
+                "menuGroupTitle": "Quick Links",
+                "links": [
+                    {
+                        "url": "#ANIMATED_ABOUT_US",
+                        "_type": "menuItem",
+                        "displayText": "About Us"
+                    },
+                    {
+                        "_type": "menuItem",
+                        "displayText": "Services",
+                        "url": "#ANIMATED_SERVICES",
+                    },
+                    {
+                        "_type": "menuItem",
+                        "displayText": "Portfolio",
+                        "url": "#ANIMATED_PORTFOLIO",
+                    },
+                    {
+                        "displayText": "Contact Us",
+                        "url": "#MAP_SECTION",
+                        "_type": "menuItem"
+                    }
+                ]
+            }
+        ],
+        // "theme": {
+        //     "_ref": "9827f3c2-f642-41ce-a002-9180c45ce22d",
+        //     "_type": "reference"
+        // }
+    },
+    "name": "Chow Works Footer",
+    "backgroundImgSrc": {
+        "_type": "image",
+        "asset": {
+            "_ref": "image-cf05be1b9150feb68f92fe6b3f50fda7bde6b7d3-1920x670-jpg",
+            "_type": "reference"
+        }
+    },
+    "backgroundColor": "LIGHT_GRAY",
+    "topPadding": "56px",
+    "isSocialMediaBlock": true,
+}
+
+export default FooterSectionData
\ No newline at end of file
diff --git a/src/stories/data/ConsultingHeaderSectionData.ts b/src/stories/data/ConsultingHeaderSectionData.ts
new file mode 100644
index 00000000..f1a7ed21
--- /dev/null
+++ b/src/stories/data/ConsultingHeaderSectionData.ts
@@ -0,0 +1,73 @@
+import {
+    HeaderSectionType,
+    HeroAnimatedContentSectionType,
+    ResumeBioSectionType
+} from "../../components/BlockContentTypes";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+
+const AnimatedHeroSectionData:HeaderSectionType = {
+    title:"Chow Works",
+    backgroundColor: "DARKERGRAY",
+    logoImgSrc:undefined,
+    "highlightedDetails": [
+        {
+            "_type": "ServiceAmenityItem",
+            "name": "Call for Anything",
+            "description": "+088 57 00 24 51",
+            "title": "Call for Anything"
+        },
+        {
+            "title": "You may send an email",
+            "_type": "ServiceAmenityItem",
+            "name": "You may send an email",
+            "description": "helpus24@gmail.com",
+        },
+        {
+            "title": "Sunday - Closed",
+            "_type": "ServiceAmenityItem",
+            "name": "Sunday - Closed",
+            "description": "Mon - Sat(9.00 - 6.00)",
+        }
+    ],
+    "ctaButtonLink": "/contactUs",
+    "isSearch": true,
+    "name": "Chow Works Header",
+    "ctaButtonText": "Contact Us",
+    "isEnhanced": true,
+    "headerMenuRef": {
+        "slug": {
+            "current": "chow-works-header-menu",
+            "_type": "slug"
+        },
+        "subMenus": [
+            {
+                _type:"menuItem",
+                "title": "About Us",
+                "displayText": "About Us",
+                "url": "#ANIMATED_ABOUT_US",
+            },
+            {
+                _type:"menuItem",
+                "displayText": "Services",
+                "url": "#ANIMATED_SERVICES",
+                "title": "Services",
+            },
+            {
+                _type:"menuItem",
+                "displayText": "Portfolio",
+                "title": "Portfolio",
+                "url": "#ANIMATED_PORTFOLIO",
+            },
+            {
+                _type:"menuItem",
+                "title": "Contact Us",
+                "displayText": "Contact Us",
+                "url": "#MAP_SECTION",
+            }
+        ],
+        "title": "Chow Works",
+        "logoText": "Chow Works",
+    },
+}
+
+export default AnimatedHeroSectionData
\ No newline at end of file
diff --git a/src/stories/data/DigitalResumeThemeData.ts b/src/stories/data/DigitalResumeThemeData.ts
index 94189779..f1c0f08a 100644
--- a/src/stories/data/DigitalResumeThemeData.ts
+++ b/src/stories/data/DigitalResumeThemeData.ts
@@ -1,43 +1,167 @@
 import {SanityMuiTheme} from "../../common/sanityIo/Types";
 
 const DigitalResumeThemeData:SanityMuiTheme ={
-    "title": "Digital Resume Theme",
-    // "_updatedAt": "2023-10-04T16:53:43Z",
-    // "_createdAt": "2023-10-04T13:34:16Z",
     "breakpoints": {
+        "xl": 1320,
         "md": 980,
-        // "_type": "MuiBreakpoints",
         "sm": 640,
         "lg": 1160,
-        "xs": 0,
-        "xl": 1320
-    },
-    "colorPalette": {
-        // "name":"Digital Resume",
-        "disabledTextColor": "LIGHT_GRAY",
-        "defaultBackground": "WHITESMOKE",
-        "defaultPaperBackgroundColor": "DARKGRAY",
-        "primaryTextColor": "DARKGRAY",
-        // "_type": "MuiColorPalette",
-        "primaryColor": "RED",
-        "secondaryTextColor": "ALMOSTWHITE",
-        "secondaryColor": "ALMOSTWHITE"
+        "xs": 0
     },
-    // "_id": "355113df-1886-46d6-8d8f-034bfb604924",
     "slug": {
         "current": "digital-resume-theme",
         "_type": "slug"
     },
+    "appBarHeight": 68,
     "typography": {
         "fontFamily": [
-            "RALEWAY",
-            "OSWALD",
+            "Raleway",
+            "Oswald"
         ],
-        // "_type": "MuiTypography",
-        // "title": "Oswald and Raleway"
+        "fontFaces": [
+            {
+                "letterSpacing": "-.01em",
+                "fontSize": "4.25rem",
+                "_key": "99e39fee3c35",
+                "name": "h1",
+                "fontStyle": "normal",
+                "mediaQueries": [
+                    {
+                        "typography": {
+                            "_type": "MuiFontFace",
+                            "fontSize": "2.8rem"
+                        },
+                        "breakpoint": [
+                            "sm"
+                        ]
+                    }
+                ],
+                "lineHeight": "1.3",
+                "fontWeight": "bold",
+                "_type": "MuiFontFace"
+            },
+            {
+                "letterSpacing": "-.02em",
+                "fontSize": "3.78rem",
+                "lineHeight": "1.25",
+                "_key": "15b22d45d9a3",
+                "fontStyle": "normal",
+                "fontWeight": "700",
+                "_type": "MuiFontFace",
+                "name": "h2"
+            },
+            {
+                "fontWeight": "600",
+                "_type": "MuiFontFace",
+                "letterSpacing": "-.03em",
+                "fontSize": "3rem",
+                "mediaQueries": [
+                    {
+                        "typography": {
+                            "_type": "MuiFontFace",
+                            "fontSize": "1.4rem"
+                        },
+                        "breakpoint": [
+                            "sm"
+                        ]
+                    }
+                ],
+                "name": "h3",
+                "lineHeight": "1.4",
+                "_key": "353efd0b7481",
+                "fontStyle": "normal"
+            },
+            {
+                "fontWeight": "bold",
+                "_type": "MuiFontFace",
+                "name": "h4",
+                "fontSize": "2.5rem",
+                "lineHeight": "1",
+                "_key": "77ebadf101f4",
+                "fontStyle": "normal"
+            },
+            {
+                "fontStyle": "normal",
+                "fontWeight": "bold",
+                "_type": "MuiFontFace",
+                "name": "h5",
+                "fontSize": "2rem",
+                "lineHeight": "1",
+                "_key": "1b850602a157"
+            },
+            {
+                "fontWeight": "bold",
+                "_type": "MuiFontFace",
+                "name": "h6",
+                "fontSize": "1.7rem",
+                "lineHeight": "1",
+                "_key": "108167c3a027",
+                "fontStyle": "normal"
+            },
+            {
+                "fontSize": "1rem",
+                "lineHeight": "1.5",
+                "_key": "ba043f666371",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "_type": "MuiFontFace",
+                "name": "body1",
+                "letterSpacing": "-.02em"
+            },
+            {
+                "_key": "05601611d8ce",
+                "fontStyle": "normal",
+                "fontWeight": "550",
+                "_type": "MuiFontFace",
+                "name": "body2",
+                "letterSpacing": "0.0em",
+                "fontSize": "1.285rem",
+                "lineHeight": "1.5"
+            },
+            {
+                "lineHeight": "1",
+                "_type": "MuiFontFace",
+                "letterSpacing": "-.03em",
+                "fontWeight": "700",
+                "name": "button",
+                "textTransform": "none",
+                "_key": "793c021d11d6",
+                "fontStyle": "normal",
+                "fontSize": "19px"
+            },
+            {
+                "_type": "MuiFontFace",
+                "name": "subtitle1",
+                "letterSpacing": "-.03em",
+                "fontSize": "14px",
+                "lineHeight": "1",
+                "_key": "83e33518a0fa",
+                "fontStyle": "normal",
+                "fontWeight": "750"
+            },
+            {
+                "lineHeight": "1.45",
+                "_key": "a42fa10440b7",
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "_type": "MuiFontFace",
+                "name": "subtitle2",
+                "letterSpacing": "-.03em",
+                "fontSize": "11px"
+            }
+        ]
     },
-    // "_rev": "46Ky6Oj1Dro85iJlEnmWLK",
-    // "_type": "MuiTheme"
+    "colorPalette": {
+        "secondaryColor": "DARKERGRAY",
+        "buttonOutlineColor": "WHITESMOKE",
+        "secondaryTextColor": "ALMOSTWHITE",
+        "defaultBackground": "WHITESMOKE",
+        "defaultPaperBackgroundColor": "LIGHTGRAY",
+        "disabledTextColor": "LIGHT_GRAY",
+        "primaryTextColor": "DARKGRAY",
+        "primaryColor": "RED"
+    },
+    "title": "Digital Resume Theme",
 }
 
 
diff --git a/src/stories/data/HomePageData.ts b/src/stories/data/HomePageData.ts
index 97aa283f..87b6dd7d 100644
--- a/src/stories/data/HomePageData.ts
+++ b/src/stories/data/HomePageData.ts
@@ -58,8 +58,8 @@ const homePageResumeData:SanityTransformHwHomePage = {
         },
         "typography": {
             "fontFamily": [
-                "RALEWAY",
-                "OSWALD",
+                "Raleway",
+                "Oswald",
             ],
             // "_type": "MuiTypography",
             // "title": "Oswald and Raleway"
diff --git a/src/stories/data/MapSectionData.ts b/src/stories/data/MapSectionData.ts
new file mode 100644
index 00000000..20f598c2
--- /dev/null
+++ b/src/stories/data/MapSectionData.ts
@@ -0,0 +1,41 @@
+import {
+    AnimatedAboutUsSectionType, AnimatedServicesSectionType,
+    HeroAnimatedContentSectionType, MapSectionType,
+    ResumeBioSectionType
+} from "../../components/BlockContentTypes";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+
+const MapSectionData:MapSectionType = {
+    "latitude": "39.332029",
+    mapMarkerLabel:"Chow Works",
+    "name": "Chow Works Map",
+    "mapMarkerTitle": "Chow Works",
+    // "mapMarkerName": "Chow Works",
+    "longitude": "-76.760486",
+    "contactInfo": [
+        {
+            "description": "14851 New York, USA",
+            "title": "101 Merritt 5, north tower",
+            "muiIcon": "location",
+            "_type": "ServiceAmenityItem",
+            "name": "Address"
+        },
+        {
+            "muiIcon": "phone",
+            "_type": "ServiceAmenityItem",
+            "name": "Get In Touch",
+            "description": "+088 11 22 00 44",
+            "title": "Get In Touch"
+        },
+        {
+            "_type": "ServiceAmenityItem",
+            "name": "Email",
+            "description": "email@email.com",
+            "title": "Email",
+            "muiIcon": "email"
+        }
+    ],
+    "address": "7412 Chadwell Cir unit 202 Windsor Mill, MD 21244",
+}
+
+export default MapSectionData
\ No newline at end of file
diff --git a/src/stories/data/WebConsultingHomePageData.ts b/src/stories/data/WebConsultingHomePageData.ts
new file mode 100644
index 00000000..f3437212
--- /dev/null
+++ b/src/stories/data/WebConsultingHomePageData.ts
@@ -0,0 +1,1050 @@
+import {SanityTransformHwHomePage} from "../../common/sanityIo/Types";
+
+const homePageResumeData:SanityTransformHwHomePage = {
+    "servicesAvailable": undefined,
+    "isFabActivated": undefined,
+    "structuredData": undefined,
+    "_type": "homePage",
+    "isUnderConstruction": false,
+    "theme": {
+        "_type": "MuiTheme",
+        "appBarHeight": 76,
+        "breakpoints": {
+            "sm": 640,
+            "lg": 1160,
+            "xs": 0,
+            "xl": 1320,
+            "md": 980
+        },
+        "colorPalette": {
+            "primaryTextColor": "DARKERGRAY",
+            "_type": "MuiColorPalette",
+            "primaryColor": "BLUE",
+            "secondaryTextColor": "WHITESMOKE",
+            "secondaryColor": "LIGHTGRAY",
+            "disabledTextColor": "LIGHTGRAY",
+            "defaultBackground": "DARKBLUE",
+            "defaultPaperBackgroundColor": "WHITESMOKE"
+        },
+        "title": "Chow Works",
+        "slug": {
+            "current": "chow-works",
+            "_type": "slug"
+        },
+        "typography": {
+            "fontFamily": [
+                "Inter"
+            ],
+            "_type": "MuiTypography",
+            "fontFaces": [
+                {
+                    "lineHeight": "1.3",
+                    "fontSize": "4.25rem",
+                    "fontStyle": "normal",
+                    "_type": "MuiFontFace",
+                    "name": "h1",
+                    "letterSpacing": "-.01em",
+                    "_key": "9dcdc696c5e1",
+                    "fontWeight": "bold",
+                    "mediaQueries": [
+                        {
+                            "breakpoint": [
+                                "sm"
+                            ],
+                            "typography": {
+                                "_type": "MuiFontFace",
+                                "fontSize": "2.8rem"
+                            },
+                            "_type": "MuiMediaQuery"
+                        }
+                    ]
+                },
+                {
+                    "fontStyle": "normal",
+                    "fontWeight": "700",
+                    "_type": "MuiFontFace",
+                    "name": "h2",
+                    "letterSpacing": "-.02em",
+                    "fontSize": "3.78rem",
+                    "lineHeight": "1.25",
+                    "_key": "773012a2f629"
+                },
+                {
+                    "_type": "MuiFontFace",
+                    "lineHeight": "1.4",
+                    "fontWeight": "600",
+                    "fontStyle": "normal",
+                    "name": "h3",
+                    "letterSpacing": "-.03em",
+                    "fontSize": "3rem",
+                    "_key": "3db2770e777a",
+                    "mediaQueries": [
+                        {
+                            "breakpoint": [
+                                "sm"
+                            ],
+                            "typography": {
+                                "_type": "MuiFontFace",
+                                "fontSize": "1.4rem"
+                            },
+                            "_type": "MuiMediaQuery"
+                        }
+                    ]
+                },
+                {
+                    "fontSize": "2.5rem",
+                    "lineHeight": "1",
+                    "_key": "25e38f5ef2e8",
+                    "fontStyle": "normal",
+                    "fontWeight": "bold",
+                    "_type": "MuiFontFace",
+                    "name": "h4"
+                },
+                {
+                    "lineHeight": "1",
+                    "_key": "0c2a3664b3b7",
+                    "fontStyle": "normal",
+                    "fontWeight": "bold",
+                    "_type": "MuiFontFace",
+                    "name": "h5",
+                    "fontSize": "2rem"
+                },
+                {
+                    "lineHeight": "1.2",
+                    "_key": "520b4a68cfd1",
+                    "fontStyle": "normal",
+                    "fontWeight": "bold",
+                    "_type": "MuiFontFace",
+                    "name": "h6",
+                    "fontSize": "1.7rem"
+                },
+                {
+                    "letterSpacing": "-.02em",
+                    "fontSize": "1rem",
+                    "lineHeight": "1.5",
+                    "_key": "f0eb2747eaed",
+                    "fontStyle": "normal",
+                    "fontWeight": "400",
+                    "_type": "MuiFontFace",
+                    "name": "body1"
+                },
+                {
+                    "fontSize": "1.285rem",
+                    "lineHeight": "1.5",
+                    "_key": "0cb6508276ff",
+                    "fontStyle": "normal",
+                    "fontWeight": "550",
+                    "_type": "MuiFontFace",
+                    "name": "body2",
+                    "letterSpacing": "0.0em"
+                },
+                {
+                    "fontSize": "19px",
+                    "textTransform": "none",
+                    "_key": "e98d0a284abe",
+                    "fontStyle": "normal",
+                    "fontWeight": "700",
+                    "letterSpacing": "-.03em",
+                    "lineHeight": "1",
+                    "_type": "MuiFontFace",
+                    "name": "button"
+                },
+                {
+                    "_key": "63b78c7fe4e2",
+                    "fontStyle": "normal",
+                    "fontWeight": "750",
+                    "_type": "MuiFontFace",
+                    "name": "subtitle1",
+                    "letterSpacing": "-.03em",
+                    "fontSize": "14px",
+                    "lineHeight": "1"
+                },
+                {
+                    "_type": "MuiFontFace",
+                    "name": "subtitle2",
+                    "letterSpacing": "-.03em",
+                    "fontSize": "11px",
+                    "lineHeight": "1..45",
+                    "_key": "c0b6cd3da5001caa4fcf4e4dc404abea",
+                    "fontStyle": "normal",
+                    "fontWeight": "600"
+                }
+            ]
+        }
+    },
+    "headerContent": {
+        "content": [
+            {
+                "_rev": "ptxIyrpxMEZWMy8nJwgmhW",
+                "_type": "HeaderSection",
+                "_createdAt": "2023-11-07T10:41:27Z",
+                "headerMenuRef": {
+                    "_rev": "8lqQ4BiwlpQaXHr6xW1TRG",
+                    "subMenus": [
+                        {
+                            "title": "About Us",
+                            "menuGroupTitle": null,
+                            "isOutlinedButton": null,
+                            "isContainedButton": null,
+                            "_type": "menuItem",
+                            "slug": null,
+                            "links": null,
+                            "displayText": "About Us",
+                            "url": "#ANIMATED_ABOUT_US"
+                        },
+                        {
+                            "_type": "menuItem",
+                            "menuGroupTitle": null,
+                            "links": null,
+                            "displayText": "Services",
+                            "url": "#ANIMATED_SERVICES",
+                            "isOutlinedButton": null,
+                            "title": "Services",
+                            "isContainedButton": null,
+                            "slug": null
+                        },
+                        {
+                            "isContainedButton": null,
+                            "title": "Portfolio",
+                            "_type": "menuItem",
+                            "menuGroupTitle": null,
+                            "links": null,
+                            "displayText": "Portfolio",
+                            "isOutlinedButton": null,
+                            "slug": null,
+                            "url": "#ANIMATED_PORTFOLIO"
+                        },
+                        {
+                            "displayText": "Contact Us",
+                            "url": "#MAP_SECTION",
+                            "isContainedButton": null,
+                            "title": "Contact Us",
+                            "slug": null,
+                            "menuGroupTitle": null,
+                            "links": null,
+                            "isOutlinedButton": null,
+                            "_type": "menuItem"
+                        }
+                    ],
+                    "_type": "menuContainer",
+                    "_id": "a7ea7c59-482f-4897-9f59-d8f9d77f0e2d",
+                    "title": "Chow Works",
+                    "_updatedAt": "2023-11-30T13:19:50Z",
+                    "slug": {
+                        "current": "chow-works-header-menu",
+                        "_type": "slug"
+                    },
+                    "logoText": "Chow Works",
+                    "_createdAt": "2023-11-07T12:21:27Z",
+                    "theme": {
+                        "_ref": "9827f3c2-f642-41ce-a002-9180c45ce22d",
+                        "_type": "reference"
+                    }
+                },
+                "_id": "6f6cf4f0-7676-4a1c-b554-2a62c49f3379",
+                "isSearch": false,
+                "isEnhanced": true,
+                "name": "Chow Works Header",
+                "_updatedAt": "2023-12-06T21:23:32Z",
+                "highlightedDetails": [
+                    {
+                        "title": "Call for Anything",
+                        "_type": "ServiceAmenityItem",
+                        "name": "Call for Anything",
+                        "description": "+088 57 00 24 51",
+                        "imageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_type": "reference",
+                                "_ref": "image-c899b47a5e61def657d345341dac28671e11be33-512x512-png"
+                            }
+                        },
+                        "_key": "3cc61f119888"
+                    },
+                    {
+                        "imageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-8f409b643f11a0f8e219d8ebbd77a065a4c02b36-512x512-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "_key": "783378475fb4",
+                        "title": "You may send an email",
+                        "_type": "ServiceAmenityItem",
+                        "name": "You may send an email",
+                        "description": "helpus24@gmail.com"
+                    },
+                    {
+                        "_key": "428dbad30ac6",
+                        "title": "Sunday - Closed",
+                        "_type": "ServiceAmenityItem",
+                        "name": "Sunday - Closed",
+                        "description": "Mon - Sat(9.00 - 6.00)",
+                        "imageSrc": {
+                            "asset": {
+                                "_ref": "image-c36c677fe603302368da4b0485cbfdd7220a25e7-512x512-png",
+                                "_type": "reference"
+                            },
+                            "_type": "image"
+                        }
+                    }
+                ],
+                "ctaButtonLink": "/contactUs",
+                "ctaButtonText": "Contact Us"
+            }
+        ]
+    },
+    "pageContent": {
+        "content": [
+            {
+                "experiences": null,
+                "title": "Digital IT Solution Services",
+                "_id": "0df79f51-934e-4769-bbb4-ef69348c2e53",
+                "highlightedAmenities": null,
+                "serviceAmenities": null,
+                "skillsets": null,
+                "contentSlides": [
+                    {
+                        "_key": "72cbce6d3819",
+                        "contentWelcomeMessage": "Innovative IT Solution",
+                        "heroBullet": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-4c190cfa7397649b803eba026df8ce93eec37d3c-503x435-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "_type": "HeroSlideContent",
+                        "heroImage": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-35750c4da1fad2945613b0597a69f3b9312a178e-5616x3744-jpg",
+                                "_type": "reference"
+                            }
+                        },
+                        "ctaButtonTitle": "View Our Services",
+                        "ctaButtonLink": "/services",
+                        "contentText": "Evolve into your full potential with digital IT solutions services.\n",
+                        "contentTitle": "Digital IT Solution Services"
+                    },
+                    {
+                        "ctaButtonLink": "/services",
+                        "contentWelcomeMessage": "Innovative IT Solution",
+                        "contentText": "Evolve into your full potential with digital IT solutions services.\n",
+                        "heroImage": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-1a91f9dbcae6c1153c7b04e48a56442c17f4e16b-8886x4726-jpg",
+                                "_type": "reference"
+                            }
+                        },
+                        "heroBullet": {
+                            "asset": {
+                                "_ref": "image-4c190cfa7397649b803eba026df8ce93eec37d3c-503x435-png",
+                                "_type": "reference"
+                            },
+                            "_type": "image"
+                        },
+                        "_type": "HeroSlideContent",
+                        "ctaButtonTitle": "View Our Services",
+                        "contentTitle": "Digital IT Solution Services",
+                        "_key": "3189b1837fe479d7f357f458b85178c3"
+                    }
+                ],
+                "prosList": null,
+                "portfolioEntries": null,
+                "resumeFile": null,
+                "name": "Chow works Animated Hero Content",
+                "_updatedAt": "2023-10-26T02:08:38Z",
+                "_createdAt": "2023-10-21T01:02:43Z",
+                "_type": "HeroAnimatedContentSection",
+                "educationExperiences": null,
+                "_rev": "6QLiZC66z8aYuCZZLKza3K",
+                "theme": {
+                    "_type": "reference",
+                    "_ref": "9827f3c2-f642-41ce-a002-9180c45ce22d"
+                },
+                "servicesList": null,
+                "feedbackEntries": null,
+                "cvFile": null
+            },
+            {
+                "_updatedAt": "2023-11-16T09:46:49Z",
+                "skillsets": null,
+                "heroBullet": {
+                    "_type": "image",
+                    "asset": {
+                        "_ref": "image-5057b7f825f66eca3e455edb2f7b879a022e8b6e-14x14-png",
+                        "_type": "reference"
+                    }
+                },
+                "servicesList": [
+                    {
+                        "_rev": "swo8tKKG4LtLKDYPn3QH64",
+                        "_type": "ServiceItem",
+                        "contentText": "Lorem ipsum dolor sit amet consect etur notted adipisicing",
+                        "name": "Digital Security",
+                        "iconImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-7d4bab146a0c12ad855c9768444ae76b63f980f3-642x642-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "_id": "584a5b67-468c-44e1-bb97-8f10f24023fa",
+                        "contentTitle": "Digital Security",
+                        "imageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-94c494306144f0cf6bd5325586a30ffc64f8d879-370x145-jpg",
+                                "_type": "reference"
+                            }
+                        },
+                        "_updatedAt": "2023-11-03T11:40:19Z",
+                        "_createdAt": "2023-10-27T17:20:51Z",
+                        "serviceAmenities": null,
+                        "backgroundImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-447616578eba5f6851368f290467f1aec609e36a-125x178-png",
+                                "_type": "reference"
+                            }
+                        }
+                    },
+                    {
+                        "_type": "ServiceItem",
+                        "iconImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-8e4cf28836b4f732097d38aaff1ae7277794dfab-642x642-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "imageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-ad651db90073bb9c55577a3845a1070e80d16490-370x145-jpg",
+                                "_type": "reference"
+                            }
+                        },
+                        "serviceAmenities": null,
+                        "name": "Tech Solution",
+                        "contentTitle": "Tech Solution",
+                        "_createdAt": "2023-10-27T17:27:34Z",
+                        "contentText": "Lorem ipsum dolor sit amet consect etur notted adipisicing",
+                        "backgroundImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-447616578eba5f6851368f290467f1aec609e36a-125x178-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "_id": "fa5cd86d-c270-4ec9-aaf4-4bb687d77fd1",
+                        "_updatedAt": "2023-11-03T11:40:36Z",
+                        "_rev": "WLNGeF4BdCdV5CELWx9GPj"
+                    },
+                    {
+                        "backgroundImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-447616578eba5f6851368f290467f1aec609e36a-125x178-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "imageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_type": "reference",
+                                "_ref": "image-9178f05eee6116349c6c4569f776e950634adef9-370x145-jpg"
+                            }
+                        },
+                        "contentTitle": "IT Outsourcing",
+                        "_updatedAt": "2023-11-03T11:40:46Z",
+                        "_createdAt": "2023-10-27T17:28:41Z",
+                        "_rev": "pcPTVGswHpT8MIzSn1wolV",
+                        "_type": "ServiceItem",
+                        "_id": "d223e443-b41e-496a-b1b6-7f157cc0f3d4",
+                        "serviceAmenities": null,
+                        "contentText": "Lorem ipsum dolor sit amet consect etur notted adipisicing",
+                        "name": "IT Outsourcing",
+                        "iconImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-24477a005aac45cedcfd0dcfbcce0d1e5266161a-642x642-png",
+                                "_type": "reference"
+                            }
+                        }
+                    }
+                ],
+                "highlightedAmenitiesTexts": [
+                    "Lorem ipsum dolor sit amet consectetur adipiscing tech. Lorem ipsum dolor sit amet consectetur adipiscing tech Lorem ipsum dolor sit amet consectetur adipiscing tech"
+                ],
+                "name": "About Chow Works",
+                "servicesMasonryAccentImageSrc": {
+                    "_type": "image",
+                    "asset": {
+                        "_ref": "image-a3842d15e80df1024e92719cd371dfc8702176bd-240x240-png",
+                        "_type": "reference"
+                    }
+                },
+                "prosList": null,
+                "experiences": null,
+                "resumeFile": null,
+                "contentPreTitle": "Introduce Company",
+                "_rev": "iNHDi8w1VQHhREbkOcXOjd",
+                "highlightedAmenities": [
+                    {
+                        "description": "There are many variations of passages of lorem",
+                        "imageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-b0d88e9508afc96fcfb452cfe639cab0537adf24-500x500-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "_key": "497499000f9f",
+                        "title": "Tech Solution",
+                        "_type": "ServiceAmenityItem",
+                        "name": "Tech Solution"
+                    },
+                    {
+                        "name": "Quick Support",
+                        "description": "There are many variations of passages of lorem",
+                        "imageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-50e7b18af98382f70c187d4bc4662f635fef7652-500x500-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "_key": "a48d33cf3358",
+                        "title": "Quick Support",
+                        "_type": "ServiceAmenityItem"
+                    }
+                ],
+                "servicesImageSrcArr": [
+                    {
+                        "_type": "image",
+                        "_key": "437148b5c6c2",
+                        "asset": {
+                            "_ref": "image-361dfb9fce42b6d112df6c48aebf8ec7428db40f-485x350-png",
+                            "_type": "reference"
+                        }
+                    },
+                    {
+                        "_key": "36b7dbc73129",
+                        "asset": {
+                            "_ref": "image-5c3d9c999a97dc7f166ae24707005449fabdde1a-230x265-png",
+                            "_type": "reference"
+                        },
+                        "_type": "image"
+                    },
+                    {
+                        "_type": "image",
+                        "_key": "674aa331de74",
+                        "asset": {
+                            "_ref": "image-a47a45fff700f9ae9d295c942a08c2030708a7ee-260x305-png",
+                            "_type": "reference"
+                        }
+                    }
+                ],
+                "serviceAmenities": null,
+                "educationExperiences": null,
+                "feedbackEntries": null,
+                "portfolioEntries": null,
+                "_type": "AnimatedAboutUsSection",
+                "_id": "1d5e9ce8-bfe1-4c13-a7c7-7f0aa9a112c9",
+                "highlightedAmenitiesTitle": "Ready To Transform Your Business?",
+                "contentTitle": "Our Company Specializes In IT Solutions",
+                "_createdAt": "2023-11-15T02:41:34Z",
+                "cvFile": null,
+                "highlightedAmenitiesBullets": [
+                    "Web Design",
+                    "Website Development",
+                    "Digital Marketing"
+                ],
+                "contentTexts": [
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, Here's what to know about how to start a consulting business"
+                ]
+            },
+            {
+                "portfolioEntries": null,
+                "_rev": "llHPdpE6t2d8pDZnTviEZm",
+                "prosList": null,
+                "educationExperiences": null,
+                "contentSummaryTexts": [
+                    "Nemo enim ipsam voluptatem quia voluptas sit asper natur aut odit aut fugit sed quia consequuntur magni dolor qui ratione business"
+                ],
+                "ctaButtonText": "More Solutions...",
+                "highlightedAmenities": null,
+                "contentTexts": [
+                    "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolor qui ratione business"
+                ],
+                "serviceAmenities": null,
+                "skillsets": null,
+                "contentPreTitle": "Our Services",
+                "_type": "AnimatedServicesSection",
+                "videoPreviewText": "We Are IT Solution Specialists.",
+                "contentTitle": "Providing Complete Professional IT Services",
+                "_createdAt": "2023-11-15T10:07:05Z",
+                "cvFile": null,
+                "experiences": null,
+                "_id": "29290757-d3a1-40b0-8743-d814a2fb6ed4",
+                "_updatedAt": "2023-11-18T17:08:35Z",
+                "contentSummaryTitle": "We’re Ready Grow Your IT Solution!",
+                "heroBullet": {
+                    "_type": "image",
+                    "asset": {
+                        "_ref": "image-5057b7f825f66eca3e455edb2f7b879a022e8b6e-14x14-png",
+                        "_type": "reference"
+                    }
+                },
+                "videoPreviewImageSrc": {
+                    "_type": "image",
+                    "asset": {
+                        "_ref": "image-b39c6b5591185e27b300b6f0f7faa978f6ed8fb6-1170x605-jpg",
+                        "_type": "reference"
+                    }
+                },
+                "videoPreviewSectionBackgroundImageSrc": {
+                    "_type": "image",
+                    "asset": {
+                        "_ref": "image-9182864411a7b2b3012a8ce8c6f90205d14a51b1-424x391-png",
+                        "_type": "reference"
+                    }
+                },
+                "feedbackEntries": null,
+                "servicesList": [
+                    {
+                        "contentText": "There are many variations of passages of lorem Ipsum not simply random\n\n",
+                        "iconImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_type": "reference",
+                                "_ref": "image-9496630ace63f71735cf9c82f08906ae15cbef0e-560x560-png"
+                            }
+                        },
+                        "contentTitle": "Tech Analysis",
+                        "_updatedAt": "2023-11-15T10:20:56Z",
+                        "serviceAmenities": null,
+                        "_createdAt": "2023-11-15T10:07:55Z",
+                        "_rev": "usqXEJs2xfOvzALZamrnpQ",
+                        "_type": "ServiceItem",
+                        "_id": "a479234f-354b-4c39-a996-d1e258d47884",
+                        "name": "Tech Analaysis",
+                        "slug": {
+                            "_type": "slug",
+                            "current": "tech-analaysis"
+                        }
+                    },
+                    {
+                        "_updatedAt": "2023-11-15T10:20:42Z",
+                        "slug": {
+                            "current": "it-consultancy",
+                            "_type": "slug"
+                        },
+                        "_rev": "usqXEJs2xfOvzALZamrnCq",
+                        "name": "IT Consultancy",
+                        "_id": "4d9e5d45-5989-4d25-9dc9-0ec3506f2dc3",
+                        "_type": "ServiceItem",
+                        "_createdAt": "2023-11-15T10:20:42Z",
+                        "contentText": "There are many variations of passages of lorem Ipsum not simply random IT Consultancy",
+                        "iconImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-0b7b24a485d447e739b07fe661c904a677ca0a03-560x560-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "contentTitle": "IT Consultancy",
+                        "serviceAmenities": null
+                    },
+                    {
+                        "iconImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-0a4239382d89d914d80115e9f986ad221ad67f93-560x560-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "_createdAt": "2023-11-15T10:21:56Z",
+                        "_rev": "usqXEJs2xfOvzALZamrqAW",
+                        "contentText": "There are many variations of passages of lorem Ipsum not simply random for Data Structuring",
+                        "contentTitle": "Data Structuring",
+                        "_updatedAt": "2023-11-15T10:21:56Z",
+                        "slug": {
+                            "_type": "slug",
+                            "current": "data-structuring"
+                        },
+                        "serviceAmenities": null,
+                        "_type": "ServiceItem",
+                        "_id": "293037e0-deea-4235-8a7b-b2b3da04b3e3",
+                        "name": "Data Structuring"
+                    },
+                    {
+                        "_id": "626e48bf-d17f-44e1-bb40-4bc444496bfa",
+                        "_updatedAt": "2023-11-15T10:22:53Z",
+                        "_rev": "svKdjQPfy8Uid76wX6iZe2",
+                        "_type": "ServiceItem",
+                        "contentText": "There are many variations of passages of lorem Ipsum not simply random Market Analysis",
+                        "serviceAmenities": null,
+                        "name": "Market Analysis",
+                        "iconImageSrc": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-e034783f7cadc4f20e03b291cd3bed6f709e91d1-560x560-png",
+                                "_type": "reference"
+                            }
+                        },
+                        "contentTitle": "Market Analysis",
+                        "_createdAt": "2023-11-15T10:22:53Z"
+                    }
+                ],
+                "name": "Chow Works Services",
+                "resumeFile": null
+            },
+            {
+                "feedbackEntries": null,
+                "cvFile": null,
+                "highlightedAmenities": null,
+                "prosList": null,
+                "portfolioEntries": [
+                    {
+                        "name": "Tech Cover Industry",
+                        "_id": "7af651d4-753a-442d-9dad-67cca8b4dd60",
+                        "_rev": "qQNB1ZAgTG6nT9M7yaTkGe",
+                        "slug": {
+                            "current": "tech-cover-industry",
+                            "_type": "slug"
+                        },
+                        "title": "Tech Cover Industry",
+                        "detailDescription": "There are many variations of passages",
+                        "imageGallery": null,
+                        "_createdAt": "2023-11-28T13:24:46Z",
+                        "_updatedAt": "2023-11-28T16:39:43Z",
+                        "coverImage": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-75769967ee338f547831779820965ecc7f9f1000-570x590-jpg",
+                                "_type": "reference"
+                            }
+                        },
+                        "inceptionDate": "2023-11-28",
+                        "skillsHighlighted": [
+                            {
+                                "_updatedAt": "2023-11-28T16:38:25Z",
+                                "_createdAt": "2023-11-28T16:38:25Z",
+                                "_rev": "qQNB1ZAgTG6nT9M7yaTdno",
+                                "_type": "ResumeSkill",
+                                "name": "React",
+                                "_id": "b576089a-66ea-420c-bec6-88639c8cead4",
+                                "title": "React"
+                            },
+                            {
+                                "_updatedAt": "2023-11-28T16:39:08Z",
+                                "_createdAt": "2023-11-28T16:39:08Z",
+                                "_rev": "HuiHeyCDns6YHDuplMI0qN",
+                                "_type": "ResumeSkill",
+                                "name": "Javascript",
+                                "_id": "48dbc81a-cc4f-41ba-944a-52a3e44c6d8f",
+                                "title": "Javascript"
+                            },
+                            {
+                                "title": "AWS",
+                                "_updatedAt": "2023-11-28T16:39:39Z",
+                                "_createdAt": "2023-11-28T16:39:39Z",
+                                "_rev": "llHPdpE6t2d8pDZnVBRKPN",
+                                "_type": "ResumeSkill",
+                                "name": "AWS",
+                                "_id": "5c04da9a-bd1f-409c-9c0c-068a0d9077de"
+                            }
+                        ],
+                        "_type": "AnimatedPortfolioItem",
+                        "preTitle": "Tech",
+                        "detailTitle": "Tech Cover Industry"
+                    },
+                    {
+                        "detailTitle": "Application Integration",
+                        "title": "Application Integration",
+                        "detailDescription": "There are many variations of passages",
+                        "slug": {
+                            "current": "application-integration",
+                            "_type": "slug"
+                        },
+                        "_rev": "llHPdpE6t2d8pDZnVBCE7x",
+                        "_type": "AnimatedPortfolioItem",
+                        "_id": "8a712921-db4e-4c4e-92ec-9403de3c5c57",
+                        "skillsHighlighted": null,
+                        "coverImage": {
+                            "_type": "image",
+                            "asset": {
+                                "_ref": "image-acdbf2d9684be3d2aa385beffa5dddf750dc70b0-570x590-jpg",
+                                "_type": "reference"
+                            }
+                        },
+                        "name": "Application Integration",
+                        "_updatedAt": "2023-11-28T16:07:36Z",
+                        "preTitle": "Tech",
+                        "_createdAt": "2023-11-28T13:29:01Z",
+                        "imageGallery": null
+                    },
+                    {
+                        "coverImage": {
+                            "_type": "image",
+                            "asset": {
+                                "_type": "reference",
+                                "_ref": "image-5bade9c073e55486f6e358945178631462d1551e-570x590-jpg"
+                            }
+                        },
+                        "name": "Database Design",
+                        "imageGallery": null,
+                        "_rev": "qQNB1ZAgTG6nT9M7yaPNJH",
+                        "_type": "AnimatedPortfolioItem",
+                        "detailTitle": "Database Design",
+                        "detailDescription": "There are many variations of passages",
+                        "slug": {
+                            "current": "database-design",
+                            "_type": "slug"
+                        },
+                        "_updatedAt": "2023-11-28T16:07:47Z",
+                        "_id": "c4fcecb5-0605-415c-b3cb-add801a7e6dc",
+                        "skillsHighlighted": null,
+                        "_createdAt": "2023-11-28T13:29:39Z",
+                        "preTitle": "Tech",
+                        "title": "Database Design"
+                    }
+                ],
+                "_updatedAt": "2023-11-28T14:54:32Z",
+                "serviceAmenities": null,
+                "_type": "AnimatedPortfolioSection",
+                "heroBullet": {
+                    "_type": "image",
+                    "asset": {
+                        "_type": "reference",
+                        "_ref": "image-5057b7f825f66eca3e455edb2f7b879a022e8b6e-14x14-png"
+                    }
+                },
+                "preTitle": "Our Completed Projects",
+                "_rev": "llHPdpE6t2d8pDZnVAbtn7",
+                "servicesList": null,
+                "educationExperiences": null,
+                "resumeFile": null,
+                "_createdAt": "2023-11-28T13:23:50Z",
+                "title": "Technology Solutions Our Recent Tech Projects",
+                "skillsets": null,
+                "experiences": null,
+                "_id": "86da0888-6df8-4a68-b0c7-5e449aa7c340",
+                "name": "Chow Works Portfolio"
+            },
+            {
+                "_type": "HeadlineCTASection",
+                "ctaButtonText": "Learn More",
+                "insetRight": "32px",
+                "insetLeft": "32px",
+                "_updatedAt": "2023-11-29T12:32:47Z",
+                "insetBottom": "-72px",
+                "name": "Book us CTA",
+                "_rev": "qQNB1ZAgTG6nT9M7ycXMai",
+                "skillsets": null,
+                "portfolioEntries": null,
+                "servicesList": null,
+                "insetTop": "-64px",
+                "_id": "9138d903-9ce3-4269-99d8-ced35924dcc4",
+                "experiences": null,
+                "resumeFile": null,
+                "_createdAt": "2023-11-29T05:51:48Z",
+                "highlightedAmenities": null,
+                "prosList": null,
+                "educationExperiences": null,
+                "contentText": "Get Help for your IT Solution",
+                "serviceAmenities": null,
+                "feedbackEntries": null,
+                "cvFile": null,
+                "backgroundImgSrc": {
+                    "_type": "image",
+                    "asset": {
+                        "_ref": "image-67b56763d6aa8bda24dc47de8ddf41a33999b26f-612x408-png",
+                        "_type": "reference"
+                    }
+                }
+            },
+            {
+                "experiences": null,
+                "portfolioEntries": null,
+                "resumeFile": null,
+                "_updatedAt": "2023-11-30T08:26:45Z",
+                "mapMarkerTitle": "Chow Works",
+                "mapMarkerName": "Chow Works",
+                "name": "Chow Works Map",
+                "skillsets": null,
+                "cvFile": null,
+                "longitude": "-76.760486",
+                "_id": "4b5f688f-be92-4ffa-8296-ca816a759f7b",
+                "servicesList": null,
+                "latitude": "39.332029",
+                "contactInfo": [
+                    {
+                        "_type": "ServiceAmenityItem",
+                        "name": "Address",
+                        "description": "14851 New York, USA",
+                        "_key": "47e9e0a773a7",
+                        "title": "101 Merritt 5, north tower",
+                        "muiIcon": "location"
+                    },
+                    {
+                        "_type": "ServiceAmenityItem",
+                        "name": "Get In Touch",
+                        "description": "+088 11 22 00 44",
+                        "_key": "f643eada79ed",
+                        "title": "Get In Touch",
+                        "muiIcon": "phone"
+                    },
+                    {
+                        "description": "email@email.com",
+                        "_key": "6ceb26c8a410",
+                        "title": "Email",
+                        "muiIcon": "email",
+                        "_type": "ServiceAmenityItem",
+                        "name": "Email"
+                    }
+                ],
+                "_rev": "qQNB1ZAgTG6nT9M7yeXqHK",
+                "educationExperiences": null,
+                "serviceAmenities": null,
+                "feedbackEntries": null,
+                "_type": "MapSection",
+                "address": "7412 Chadwell Cir unit 202 Windsor Mill, MD 21244",
+                "_createdAt": "2023-11-29T11:02:58Z",
+                "highlightedAmenities": null,
+                "prosList": null
+            }
+        ]
+    },
+    "slug": {
+        "current": "home",
+        "_type": "slug"
+    },
+    "bookAppointmentLink": undefined,
+    "underConstructionPageRef": {
+        "_ref": "1351e6a4-905b-4d15-b3a9-c0928c2a1925",
+        "_type": "reference"
+    },
+    "description": "Chow works is a technology consulting company. ",
+    "businessContact": {
+        "address": "7412 chadwell cir Windsor Mill, MD 21244",
+        "github": "githubHandle",
+        "facebook": "facebookName",
+        "twitterIconSrc": undefined,
+        "twitter": "twitterHandle",
+        "phone": "4039622191",
+        "facebookIconSrc": undefined,
+        "instagramIconSrc": undefined,
+        "instagram": "instagramHandle",
+        "_type": "BusinessContact",
+        "email": "chow@chowworks.com",
+        "linkedIn": "linkedInName",
+        "title": "Chow Works",
+    },
+    "website": undefined,
+    "websiteQrCode": undefined,
+    "metaImage": undefined,
+    "title": "Chow Works",
+    "businessCardImageSrc": undefined,
+    "bookAppointmentQrCode": undefined,
+    "footerContent": {
+        "content": [
+            {
+                "backgroundColor": "LIGHT_GRAY",
+                "_rev": "ptxIyrpxMEZWMy8nJx7Q50",
+                "topPadding": "56px",
+                "footerMenuRef": {
+                    "slug": {
+                        "_type": "slug",
+                        "current": "chow-works-footer"
+                    },
+                    "_createdAt": "2023-11-30T12:49:38Z",
+                    "theme": {
+                        "_ref": "9827f3c2-f642-41ce-a002-9180c45ce22d",
+                        "_type": "reference"
+                    },
+                    "_updatedAt": "2023-11-30T13:26:58Z",
+                    "logoText": "Chow Works",
+                    "subMenus": [
+                        {
+                            "title": "Quick Links",
+                            "slug": {
+                                "current": "quick-links",
+                                "_type": "slug"
+                            },
+                            "menuGroupTitle": "Quick Links",
+                            "links": [
+                                {
+                                    "isContainedButton": null,
+                                    "isModalButton": null,
+                                    "modalRef": null,
+                                    "_type": "menuItem",
+                                    "displayText": "About Us",
+                                    "url": "#ANIMATED_ABOUT_US",
+                                    "isOutlinedButton": null
+                                },
+                                {
+                                    "displayText": "Services",
+                                    "url": "#ANIMATED_SERVICES",
+                                    "isOutlinedButton": null,
+                                    "isContainedButton": null,
+                                    "isModalButton": null,
+                                    "modalRef": null,
+                                    "_type": "menuItem"
+                                },
+                                {
+                                    "isContainedButton": null,
+                                    "isModalButton": null,
+                                    "modalRef": null,
+                                    "_type": "menuItem",
+                                    "displayText": "Portfolio",
+                                    "url": "#ANIMATED_PORTFOLIO",
+                                    "isOutlinedButton": null
+                                },
+                                {
+                                    "isOutlinedButton": null,
+                                    "isContainedButton": null,
+                                    "isModalButton": null,
+                                    "modalRef": null,
+                                    "_type": "menuItem",
+                                    "displayText": "Contact Us",
+                                    "url": "#MAP_SECTION"
+                                }
+                            ],
+                            "isOutlinedButton": null,
+                            "isContainedButton": null,
+                            "_type": "menuGroup",
+                            "displayText": null,
+                            "url": null
+                        }
+                    ],
+                    "_rev": "wwUsb5BDu6k8CCpFnMeH6R",
+                    "_type": "menuContainer",
+                    "_id": "4ca7d1d3-8934-4523-8acb-80b2a6282147",
+                    "logoAccentText": ".",
+                    "title": "Chow Works Footer"
+                },
+                "isSocialMediaBlock": true,
+                "backgroundImgSrc": {
+                    "_type": "image",
+                    "asset": {
+                        "_ref": "image-cf05be1b9150feb68f92fe6b3f50fda7bde6b7d3-1920x670-jpg",
+                        "_type": "reference"
+                    }
+                },
+                "name": "Chow Works Footer",
+                "_id": "6b4f3d9c-144b-4835-83c4-8977e4a70d9b",
+                "_updatedAt": "2023-12-07T06:47:47Z",
+                "_createdAt": "2023-11-30T12:49:58Z",
+                "_type": "FooterSection"
+            }
+        ]
+    }
+}
+
+export default homePageResumeData;
\ No newline at end of file
diff --git a/src/stories/data/WebConsultingThemeData.ts b/src/stories/data/WebConsultingThemeData.ts
new file mode 100644
index 00000000..85515e0e
--- /dev/null
+++ b/src/stories/data/WebConsultingThemeData.ts
@@ -0,0 +1,171 @@
+import {SanityMuiTheme} from "../../common/sanityIo/Types";
+
+const WebConsultingThemeData:SanityMuiTheme ={
+    "_type": "MuiTheme",
+    "appBarHeight": 76,
+    "breakpoints": {
+        sm: 640,
+        lg: 1160,
+        xs: 0,
+        xl: 1320,
+        md: 980
+    },
+    "colorPalette": {
+        "primaryTextColor": "DARKERGRAY",
+        "_type": "MuiColorPalette",
+        "primaryColor": "BLUE",
+        "secondaryTextColor": "WHITESMOKE",
+        "secondaryColor": "LIGHTGRAY",
+        "disabledTextColor": "LIGHTGRAY",
+        "defaultBackground": "DARKBLUE",
+        "defaultPaperBackgroundColor": "WHITESMOKE"
+    },
+    "title": "Chow Works",
+    "slug": {
+        "current": "chow-works",
+        "_type": "slug"
+    },
+    "typography": {
+        "fontFamily": [
+            "Inter",
+        ],
+        "_type": "MuiTypography",
+        "fontFaces": [
+            {
+                "lineHeight": "1.3",
+                "fontSize": "4.25rem",
+                "fontStyle": "normal",
+                "_type": "MuiFontFace",
+                "name": "h1",
+                "letterSpacing": "-.01em",
+                "_key": "9dcdc696c5e1",
+                "fontWeight": "bold",
+                "mediaQueries": [
+                    {
+                        "breakpoint": [
+                            "sm"
+                        ],
+                        "typography": {
+                            "_type": "MuiFontFace",
+                            "fontSize": "2.8rem"
+                        },
+                        "_type": "MuiMediaQuery"
+                    }
+                ]
+            },
+            {
+                "fontStyle": "normal",
+                "fontWeight": "700",
+                "_type": "MuiFontFace",
+                "name": "h2",
+                "letterSpacing": "-.02em",
+                "fontSize": "3.78rem",
+                "lineHeight": "1.25",
+                "_key": "773012a2f629"
+            },
+            {
+                "_type": "MuiFontFace",
+                "lineHeight": "1.4",
+                "fontWeight": "600",
+                "fontStyle": "normal",
+                "name": "h3",
+                "letterSpacing": "-.03em",
+                "fontSize": "3rem",
+                "_key": "3db2770e777a",
+                "mediaQueries": [
+                    {
+                        "breakpoint": [
+                            "sm"
+                        ],
+                        "typography": {
+                            "_type": "MuiFontFace",
+                            "fontSize": "1.4rem"
+                        },
+                        "_type": "MuiMediaQuery"
+                    }
+                ]
+            },
+            {
+                "fontSize": "2.5rem",
+                "lineHeight": "1",
+                "_key": "25e38f5ef2e8",
+                "fontStyle": "normal",
+                "fontWeight": "bold",
+                "_type": "MuiFontFace",
+                "name": "h4"
+            },
+            {
+                "lineHeight": "1",
+                "_key": "0c2a3664b3b7",
+                "fontStyle": "normal",
+                "fontWeight": "bold",
+                "_type": "MuiFontFace",
+                "name": "h5",
+                "fontSize": "2rem"
+            },
+            {
+                "lineHeight": "1.2",
+                "_key": "520b4a68cfd1",
+                "fontStyle": "normal",
+                "fontWeight": "bold",
+                "_type": "MuiFontFace",
+                "name": "h6",
+                "fontSize": "1.7rem"
+            },
+            {
+                "letterSpacing": "-.02em",
+                "fontSize": "1rem",
+                "lineHeight": "1.5",
+                "_key": "f0eb2747eaed",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "_type": "MuiFontFace",
+                "name": "body1"
+            },
+            {
+                "fontSize": "1.285rem",
+                "lineHeight": "1.5",
+                "_key": "0cb6508276ff",
+                "fontStyle": "normal",
+                "fontWeight": "550",
+                "_type": "MuiFontFace",
+                "name": "body2",
+                "letterSpacing": "0.0em"
+            },
+            {
+                "fontSize": "19px",
+                "textTransform": "none",
+                "_key": "e98d0a284abe",
+                "fontStyle": "normal",
+                "fontWeight": "700",
+                "letterSpacing": "-.03em",
+                "lineHeight": "1",
+                "_type": "MuiFontFace",
+                "name": "button"
+            },
+            {
+                "_key": "63b78c7fe4e2",
+                "fontStyle": "normal",
+                "fontWeight": "750",
+                "_type": "MuiFontFace",
+                "name": "subtitle1",
+                "letterSpacing": "-.03em",
+                "fontSize": "14px",
+                "lineHeight": "1"
+            },
+            {
+                "_type": "MuiFontFace",
+                "name": "subtitle2",
+                "letterSpacing": "-.03em",
+                "fontSize": "11px",
+                "lineHeight": "1..45",
+                "_key": "c0b6cd3da5001caa4fcf4e4dc404abea",
+                "fontStyle": "normal",
+                "fontWeight": "600"
+            }
+        ]
+    }
+}
+
+
+export default WebConsultingThemeData;
\ No newline at end of file
diff --git a/src/stories/data/WebDevThemeData.ts b/src/stories/data/WebDevThemeData.ts
new file mode 100644
index 00000000..29439641
--- /dev/null
+++ b/src/stories/data/WebDevThemeData.ts
@@ -0,0 +1,136 @@
+import {SanityMuiTheme} from "../../common/sanityIo/Types";
+
+const WebDevThemeData:SanityMuiTheme ={
+    "typography": {
+        "fontFamily": [
+            "Elaine Sans",
+            "Raleway",
+            // "Raleway",
+        ],
+        "fontFaces": [
+            {
+                "_type": "MuiFontFace",
+                "name": "h1",
+                "letterSpacing": "-.01em",
+                "fontSize": "70px",
+                "lineHeight": "1",
+                "_key": "9961159018eb",
+                "fontStyle": "normal",
+                "fontWeight": "bold"
+            },
+            {
+                "_key": "fd80eff73602",
+                "fontStyle": "normal",
+                "fontWeight": "700",
+                "_type": "MuiFontFace",
+                "name": "h2",
+                "letterSpacing": ".02em",
+                "fontSize": "53px",
+                "lineHeight": "1"
+            },
+            {
+                "letterSpacing": ".01em",
+                "fontSize": "32px",
+                "lineHeight": "1.4",
+                "_key": "b3c7024c6833",
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "_type": "MuiFontFace",
+                "name": "h3"
+            },
+            {
+                "fontStyle": "normal",
+                "fontWeight": "bold",
+                "_type": "MuiFontFace",
+                "name": "h5",
+                "fontSize": "28px",
+                "lineHeight": "1"
+            },
+            {
+                "name": "h6",
+                "fontSize": "24px",
+                "lineHeight": "1",
+                "_key": "8dbcd01d5655",
+                "fontStyle": "normal",
+                "fontWeight": "bold",
+                "_type": "MuiFontFace"
+            },
+            {
+                "name": "body1",
+                "letterSpacing": "-.02em",
+                "fontSize": "14.5px",
+                "lineHeight": "1.2",
+                "_key": "38e418fa8308",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "_type": "MuiFontFace"
+            },
+            {
+                "_key": "bbdf7c3e1d9e57c73a09b816ca2bc268",
+                "fontStyle": "normal",
+                "fontWeight": "550",
+                "_type": "MuiFontFace",
+                "name": "body2",
+                "letterSpacing": "0em",
+                "fontSize": "18px",
+                "lineHeight": "1.5"
+            },
+            {
+                "lineHeight": "1",
+                "_key": "0c952d423ebf97d7141c9de4718955e7",
+                "fontStyle": "normal",
+                "fontWeight": "700",
+                "_type": "MuiFontFace",
+                "name": "button",
+                "letterSpacing": "-.03em",
+                "fontSize": "19px"
+            },
+            {
+                "fontStyle": "normal",
+                "fontWeight": "750",
+                "_type": "MuiFontFace",
+                "name": "subtitle1",
+                "letterSpacing": "-.03em",
+                "fontSize": "14px",
+                "lineHeight": "1",
+                "_key": "cf52af782364f0f82d1a43143f1c9fc5"
+            },
+            {
+                "letterSpacing": ".20em",
+                "lineHeight": "1",
+                "textTransform": "uppercase",
+                "_type": "MuiFontFace",
+                "fontSize": "14px",
+                "fontWeight": "750",
+                "name": "subtitle2",
+                "_key": "e74f48549e61e7307b111a1118423263",
+                "fontStyle": "normal"
+            }
+        ]
+    },
+    "breakpoints": {
+        "xl": 1320,
+        "md": 980,
+        "sm": 640,
+        "lg": 1160,
+        "xs": 0
+    },
+    "title": "Web Development site",
+    "appBarHeight": 105,
+    "colorPalette": {
+        "primaryColor": "WHITESMOKE",
+        "secondaryTextColor": "LIGHT_WHITE",
+        "secondaryColor": "PURPLE",
+        "disabledTextColor": "DISABLED_GRAY",
+        "defaultBackground": "ALMOST_BLACK",
+        "defaultPaperBackgroundColor": "ALMOST_BLACK",
+        "primaryTextColor": "WHITESMOKE",
+    },
+    "slug": {
+        "current": "web-development-site",
+        "_type": "slug"
+    }
+}
+
+
+export default WebDevThemeData;
\ No newline at end of file
diff --git a/src/stories/digital-resume/Button.stories.tsx b/src/stories/digital-resume/Button.stories.tsx
index 1af752cd..a2ebfafa 100644
--- a/src/stories/digital-resume/Button.stories.tsx
+++ b/src/stories/digital-resume/Button.stories.tsx
@@ -3,6 +3,9 @@ import LoadingButton, {LoadingButtonIProps} from "../../components/loading-butto
 import {ButtonGroupMemberEnum} from "../../components/loading-button/ButtonGroupMemberEnum";
 import {Grid, Typography} from "@mui/material";
 import {PropsWithChildren} from "react";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
 
 
 const meta: Meta<typeof LoadingButton> = {
@@ -19,8 +22,8 @@ type Story = StoryObj<typeof LoadingButton>;
  * See https://storybook.js.org/docs/react/api/csf
  * to learn how to use render functions.
  */
-
-const buttonText = <Typography variant='button' style={{fontFamily: "Raleway"}}>Button Text</Typography>
+const WrapComponent =   ({children}:{children:any}) =>      <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>{children}</ThemeProvider>
+    const buttonText = <Typography variant='button' style={{fontFamily: "Raleway"}}>Button Text</Typography>
 export const Primary: Story = {
     args: {
       color: "primary",
@@ -29,7 +32,8 @@ export const Primary: Story = {
         width: 250,
 
     },
-    render: ({color, isLoading, children, width}:PropsWithChildren<LoadingButtonIProps>) => <LoadingButton width={width} color={color} isLoading={isLoading}>{children}</LoadingButton>,
+    render: ({color, isLoading, children, width}:PropsWithChildren<LoadingButtonIProps>) =>
+        <WrapComponent><LoadingButton width={width} color={color} isLoading={isLoading}>{children}</LoadingButton></WrapComponent>,
 };
 export const PrimaryDisabled: Story = {
     args: {
@@ -39,7 +43,7 @@ export const PrimaryDisabled: Story = {
         width: 250,
 
     },
-    render: ({color, isLoading, children, disabled, width}:PropsWithChildren<LoadingButtonIProps>) => <LoadingButton width={width} color={color} isLoading={isLoading} disabled={disabled}>{children}</LoadingButton>,
+    render: ({color, isLoading, children, disabled, width}:PropsWithChildren<LoadingButtonIProps>) => <WrapComponent><LoadingButton width={width} color={color} isLoading={isLoading} disabled={disabled}>{children}</LoadingButton></WrapComponent>,
 };
 export const Secondary: Story = {
     args: {
@@ -47,7 +51,7 @@ export const Secondary: Story = {
         children: buttonText,
         width: 250,
     },
-    render: ({color, children,width}:PropsWithChildren<LoadingButtonIProps>) => <LoadingButton color={color} width={width}>{children}</LoadingButton>,
+    render: ({color, children,width}:PropsWithChildren<LoadingButtonIProps>) => <WrapComponent><LoadingButton color={color} width={width}>{children}</LoadingButton></WrapComponent>,
 };
 
 
@@ -58,7 +62,7 @@ export const Loading: Story = {
         width: 250,
         children: buttonText
     },
-    render: ({color,isLoading, children, width}:PropsWithChildren<LoadingButtonIProps>) => <LoadingButton width={width} isLoading={isLoading} color={color}>{children}</LoadingButton>,
+    render: ({color,isLoading, children, width}:PropsWithChildren<LoadingButtonIProps>) => <WrapComponent><LoadingButton width={width} isLoading={isLoading} color={color}>{children}</LoadingButton></WrapComponent>,
 };
 
 export const SecondaryLoading: Story = {
@@ -68,27 +72,27 @@ export const SecondaryLoading: Story = {
         width: 250,
         children: buttonText
     },
-    render: ({color,isLoading, children, width}:PropsWithChildren<LoadingButtonIProps>) => <LoadingButton width={width} isLoading={isLoading} color={color}>{children}</LoadingButton>,
+    render: ({color,isLoading, children, width}:PropsWithChildren<LoadingButtonIProps>) => <WrapComponent><LoadingButton width={width} isLoading={isLoading} color={color}>{children}</LoadingButton></WrapComponent>,
 
 };
 
 export const Grouped: Story = {
     render: () => <Grid container>
         <Grid item>
-            <LoadingButton width={250} color={"primary"} groupiness={ButtonGroupMemberEnum.LEFT} ><Typography variant='button' style={{fontFamily: "Raleway"}}>One</Typography></LoadingButton>
+            <WrapComponent><LoadingButton width={250} color={"primary"} groupiness={ButtonGroupMemberEnum.LEFT} ><Typography variant='button' style={{fontFamily: "Raleway"}}>One</Typography></LoadingButton></WrapComponent>
 
         </Grid>
         <Grid item>
-            <LoadingButton width={250} groupiness={ButtonGroupMemberEnum.CENTER}
-                           color={"primary"} ><Typography variant='button' style={{fontFamily: "Raleway"}}>Two</Typography></LoadingButton>
+            <WrapComponent><LoadingButton width={250} groupiness={ButtonGroupMemberEnum.CENTER}
+                                          color={"primary"} ><Typography variant='button' style={{fontFamily: "Raleway"}}>Two</Typography></LoadingButton></WrapComponent>
         </Grid>
         <Grid item>
-            <LoadingButton width={250} groupiness={ButtonGroupMemberEnum.CENTER}
-                           color={"primary"} ><Typography variant='button' style={{fontFamily: "Raleway"}}>Three</Typography></LoadingButton>
+            <WrapComponent><LoadingButton width={250} groupiness={ButtonGroupMemberEnum.CENTER}
+                                          color={"primary"} ><Typography variant='button' style={{fontFamily: "Raleway"}}>Three</Typography></LoadingButton></WrapComponent>
         </Grid>
         <Grid item>
-            <LoadingButton width={250} groupiness={ButtonGroupMemberEnum.RIGHT} color={"primary"}
-            ><Typography variant='button' style={{fontFamily: "Raleway"}}>Four</Typography></LoadingButton></Grid>
+            <WrapComponent><LoadingButton width={250} groupiness={ButtonGroupMemberEnum.RIGHT} color={"primary"}
+            ><Typography variant='button' style={{fontFamily: "Raleway"}}>Four</Typography></LoadingButton></WrapComponent></Grid>
         </Grid>,
 
 };
\ No newline at end of file
diff --git a/src/stories/digital-resume/ResumeBio.stories.tsx b/src/stories/digital-resume/ResumeBio.stories.tsx
index 5b6aa9c2..c2832204 100644
--- a/src/stories/digital-resume/ResumeBio.stories.tsx
+++ b/src/stories/digital-resume/ResumeBio.stories.tsx
@@ -2,6 +2,12 @@ import type {Meta, StoryObj} from '@storybook/react';
 import ResumeBioSection from "../../components/templates/my-digital-resume/resume-bio-section/ResumeBioSection";
 import homePageResumeData from "../data/HomePageData";
 import ResumeBioSectionData from "../data/ResumeBioSectionData";
+import {ThemeProvider} from "@mui/material/styles";
+import WebDevThemeData from "../data/WebDevThemeData";
+import CustomizedThemeProvider from "../../components/customized-theme-provider/CustomizedThemeProvider";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import calculatedHomePageResumeData from "../data/CalculatedHomePageData";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
 
 const meta: Meta<typeof ResumeBioSection> = {
     title:"Resume/Section/Resume Bio Section",
@@ -24,5 +30,8 @@ export const ResumeBioSectionComplete: Story = {
       sectionData: ResumeBioSectionData,
         homePage: homePageResumeData
     },
-    render: ({sectionData, homePage}) => <ResumeBioSection sectionData={sectionData} homePage={homePage}></ResumeBioSection>,
+    render: ({sectionData, homePage}) =>
+        <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+            <ResumeBioSection sectionData={sectionData} homePage={calculatedHomePageResumeData(WebDevThemeData)}></ResumeBioSection>
+        </ThemeProvider> ,
 };
diff --git a/src/stories/digital-resume/ResumeBusinessCardFab.stories.tsx b/src/stories/digital-resume/ResumeBusinessCardFab.stories.tsx
index 5847d886..c5a34f79 100644
--- a/src/stories/digital-resume/ResumeBusinessCardFab.stories.tsx
+++ b/src/stories/digital-resume/ResumeBusinessCardFab.stories.tsx
@@ -6,6 +6,9 @@ import SocialMediaBlock from "../../components/templates/my-digital-resume/socia
 import homePageResumeData from "../data/HomePageData";
 import BusinessCard from "../../components/BusinessCard";
 import React from "react";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
 
 
 const meta: Meta<typeof BusinessCard> = {
@@ -30,5 +33,6 @@ export const Primary: Story = {
         homePage: homePageResumeData,
         anchor:'bottom'
     },
-    render: ({homePage, anchor}) => <BusinessCard homePage={homePage} anchor={anchor}/>,
+    render: ({homePage, anchor}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <BusinessCard homePage={homePage} anchor={anchor}/></ThemeProvider>,
 };
\ No newline at end of file
diff --git a/src/stories/digital-resume/ResumeContactUs.stories.tsx b/src/stories/digital-resume/ResumeContactUs.stories.tsx
index 7ffffe28..9fba0c75 100644
--- a/src/stories/digital-resume/ResumeContactUs.stories.tsx
+++ b/src/stories/digital-resume/ResumeContactUs.stories.tsx
@@ -2,6 +2,10 @@ import type {Meta, StoryObj} from '@storybook/react';
 import ResumeContactUsSection from "../../components/templates/my-digital-resume/ResumeContactUsSection";
 import ResumeContactSectionData from "../data/ResumeContactSectionData";
 import {ResumeContactUsSectionType} from "../../components/BlockContentTypes";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import React from "react";
+import {ThemeProvider} from "@mui/material/styles";
 
 const meta: Meta<typeof ResumeContactUsSection> = {
     title:"Resume/Section/Resume Contact Us Section",
@@ -22,5 +26,6 @@ export const Primary: Story = {
     args:{
         sectionData: ResumeContactSectionData
     },
-    render: ({sectionData}:{sectionData: ResumeContactUsSectionType}) => <ResumeContactUsSection sectionData={sectionData}></ResumeContactUsSection>,
+    render: ({sectionData}:{sectionData: ResumeContactUsSectionType}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <ResumeContactUsSection sectionData={sectionData}></ResumeContactUsSection></ThemeProvider>,
 };
diff --git a/src/stories/digital-resume/ResumeEducation.stories.tsx b/src/stories/digital-resume/ResumeEducation.stories.tsx
index fe130a6e..d6fde7ba 100644
--- a/src/stories/digital-resume/ResumeEducation.stories.tsx
+++ b/src/stories/digital-resume/ResumeEducation.stories.tsx
@@ -5,6 +5,9 @@ import ResumeExperienceSection from "../../components/templates/my-digital-resum
 import ResumeExperienceSectionData from "../data/ResumeExperienceSectionData";
 import ResumeEducationSection from "../../components/templates/my-digital-resume/resume-education-section/ResumeEducationSection";
 import ResumeEducationSectionData from "../data/ResumeEducationSectionData";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
 
 const meta: Meta<typeof ResumeEducationSection> = {
     title:"Resume/Section/Resume Education Section",
@@ -25,5 +28,6 @@ export const ResumeEducationSectionStory: Story = {
     args:{
         sectionData: ResumeEducationSectionData
     },
-    render: ({sectionData}) => <ResumeEducationSection sectionData={sectionData}></ResumeEducationSection>,
+    render: ({sectionData}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <ResumeEducationSection sectionData={sectionData}></ResumeEducationSection></ThemeProvider>,
 };
diff --git a/src/stories/digital-resume/ResumeExperience.stories.tsx b/src/stories/digital-resume/ResumeExperience.stories.tsx
index 7b60be74..934a3172 100644
--- a/src/stories/digital-resume/ResumeExperience.stories.tsx
+++ b/src/stories/digital-resume/ResumeExperience.stories.tsx
@@ -2,6 +2,9 @@ import type {Meta, StoryObj} from '@storybook/react';
 import ResumeExperienceSection
     from "../../components/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection";
 import ResumeExperienceSectionData from "../data/ResumeExperienceSectionData";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import { ThemeProvider } from '@mui/material/styles';
 
 const meta: Meta<typeof ResumeExperienceSection> = {
     title:"Resume/Section/Resume Experience Section",
@@ -22,5 +25,6 @@ export const ResumeExperienceSectionComplete: Story = {
     args:{
         sectionData: ResumeExperienceSectionData
     },
-    render: ({sectionData}) => <ResumeExperienceSection sectionData={sectionData}></ResumeExperienceSection>,
+    render: ({sectionData}) =>  <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <ResumeExperienceSection sectionData={sectionData}></ResumeExperienceSection></ThemeProvider>,
 };
diff --git a/src/stories/digital-resume/ResumeFeedback.stories.tsx b/src/stories/digital-resume/ResumeFeedback.stories.tsx
index f2507081..33801277 100644
--- a/src/stories/digital-resume/ResumeFeedback.stories.tsx
+++ b/src/stories/digital-resume/ResumeFeedback.stories.tsx
@@ -1,6 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import ResumeFeedbackSection from "../../components/templates/my-digital-resume/resume-feedback-section/ResumeFeedbackSection";
 import ResumeFeedbackSectionData from "../data/ResumeFeedbackSectionData";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import { ThemeProvider } from '@mui/material/styles';
 
 const meta: Meta<typeof ResumeFeedbackSection> = {
     title: "Resume/Section/Resume Feedback Section",
@@ -21,5 +24,6 @@ export const ResumeFeedbackSectionStory: Story = {
     args: {
         sectionData: ResumeFeedbackSectionData
     },
-    render: ({sectionData}) => <ResumeFeedbackSection sectionData={sectionData}></ResumeFeedbackSection>,
+    render: ({sectionData}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <ResumeFeedbackSection sectionData={sectionData}></ResumeFeedbackSection></ThemeProvider>,
 };
diff --git a/src/stories/digital-resume/ResumeFooter.stories.tsx b/src/stories/digital-resume/ResumeFooter.stories.tsx
index 95425ccf..8c0b9d44 100644
--- a/src/stories/digital-resume/ResumeFooter.stories.tsx
+++ b/src/stories/digital-resume/ResumeFooter.stories.tsx
@@ -1,6 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import homePageResumeData from "../data/HomePageData";
 import Footer from "../../components/templates/mackenzies-mind/footer/Footer";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import { ThemeProvider } from '@mui/material/styles';
 
 
 const meta: Meta<typeof Footer> = {
@@ -22,5 +25,6 @@ export const Primary: Story = {
     args: {
         pageFooter: homePageResumeData.footerContent.content[0].footerMenuRef
     },
-    render: ({pageFooter}) => <Footer pageFooter={pageFooter}></Footer>,
+    render: ({pageFooter}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <Footer pageFooter={pageFooter}></Footer></ThemeProvider>,
 };
\ No newline at end of file
diff --git a/src/stories/digital-resume/ResumeHeader.stories.tsx b/src/stories/digital-resume/ResumeHeader.stories.tsx
index 7d8275fc..a9636e24 100644
--- a/src/stories/digital-resume/ResumeHeader.stories.tsx
+++ b/src/stories/digital-resume/ResumeHeader.stories.tsx
@@ -1,6 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import homePageResumeData from "../data/HomePageData";
 import Header from "../../components/templates/mackenzies-mind/header/Header";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
 
 
 const meta: Meta<typeof Header> = {
@@ -22,5 +25,6 @@ export const Primary: Story = {
     args: {
         pageHeader: homePageResumeData.headerContent.content[0].headerMenuRef
     },
-    render: ({pageHeader}) => <Header pageHeader={pageHeader}></Header>,
+    render: ({pageHeader}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <Header pageHeader={pageHeader}></Header></ThemeProvider>,
 };
\ No newline at end of file
diff --git a/src/stories/digital-resume/ResumePortfolio.stories.tsx b/src/stories/digital-resume/ResumePortfolio.stories.tsx
index efe21fbb..77da1d0c 100644
--- a/src/stories/digital-resume/ResumePortfolio.stories.tsx
+++ b/src/stories/digital-resume/ResumePortfolio.stories.tsx
@@ -1,6 +1,9 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import ResumePortfolioSectionData from "../data/ResumePortfolioSectionData";
 import ResumePortfolioSection from '../../components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection';
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
 
 const meta: Meta<typeof ResumePortfolioSection> = {
     title:"Resume/Section/Resume Portfolio Section",
@@ -21,5 +24,6 @@ export const ResumePortfolioSectionStory: Story = {
     args:{
         sectionData: ResumePortfolioSectionData
     },
-    render: ({sectionData}) => <ResumePortfolioSection sectionData={sectionData}></ResumePortfolioSection>,
+    render: ({sectionData}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <ResumePortfolioSection sectionData={sectionData}></ResumePortfolioSection></ThemeProvider>,
 };
diff --git a/src/stories/digital-resume/ResumeSkills.stories.tsx b/src/stories/digital-resume/ResumeSkills.stories.tsx
index b764caa0..b9161198 100644
--- a/src/stories/digital-resume/ResumeSkills.stories.tsx
+++ b/src/stories/digital-resume/ResumeSkills.stories.tsx
@@ -3,6 +3,9 @@ import ResumeSkillsSection from "../../components/templates/my-digital-resume/re
 import ResumeSkillSectionData from "../data/ResumeSkillSectionData";
 import ResumeBioSectionData from "../data/ResumeBioSectionData";
 import homePageResumeData from "../data/HomePageData";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import { ThemeProvider } from '@mui/material/styles';
 
 const meta: Meta<typeof ResumeSkillsSection> = {
     title:"Resume/Section/Resume Skills Section",
@@ -23,5 +26,6 @@ export const ResumeSkillsSectionCompleteStory: Story = {
     args :{
         sectionData: ResumeSkillSectionData,
     },
-    render: ({sectionData}) => <ResumeSkillsSection sectionData={sectionData}></ResumeSkillsSection>,
+    render: ({sectionData}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <ResumeSkillsSection sectionData={sectionData}></ResumeSkillsSection></ThemeProvider>,
 };
diff --git a/src/stories/digital-resume/SocialMediaBlock.stories.tsx b/src/stories/digital-resume/SocialMediaBlock.stories.tsx
index bb42b21c..dc1e8481 100644
--- a/src/stories/digital-resume/SocialMediaBlock.stories.tsx
+++ b/src/stories/digital-resume/SocialMediaBlock.stories.tsx
@@ -4,6 +4,9 @@ import {ButtonGroupMemberEnum} from "../../components/loading-button/ButtonGroup
 import {Grid} from "@mui/material";
 import SocialMediaBlock from "../../components/templates/my-digital-resume/social-media-block/SocialMediaBlock";
 import homePageResumeData from "../data/HomePageData";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
 
 
 const meta: Meta<typeof SocialMediaBlock> = {
@@ -45,5 +48,6 @@ export const SocialMediaBlockOnly3: Story = {
         twitter:homePageResumeData.businessContact?.twitter,
         instagram: "thehandsomestNerd"
     },
-    render: ({facebook, twitter, instagram}) => <SocialMediaBlock facebook={facebook} instagram={instagram} twitter={twitter}></SocialMediaBlock>,
+    render: ({facebook, twitter, instagram}) =>         <ThemeProvider theme={getThemeFromSanity(DigitalResumeThemeData)}>
+        <SocialMediaBlock facebook={facebook} instagram={instagram} twitter={twitter}></SocialMediaBlock></ThemeProvider>,
 };
\ No newline at end of file
diff --git a/src/stories/web-consulting/AnimatedAboutUs.stories.tsx b/src/stories/web-consulting/AnimatedAboutUs.stories.tsx
new file mode 100644
index 00000000..ebdf303d
--- /dev/null
+++ b/src/stories/web-consulting/AnimatedAboutUs.stories.tsx
@@ -0,0 +1,34 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ThemeProvider} from "@mui/material/styles";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+import WebConsultingThemeData from "../data/WebConsultingThemeData";
+import AnimatedHeroSectionData from "../data/AnimatedHeroSectionData";
+import AnimatedAboutUsSection from "../../components/animated/AnimatedAboutUsSection";
+import AnimatedAboutUsSectionData from "../data/AnimatedAboutUsSectionData";
+
+const meta: Meta<typeof AnimatedAboutUsSection> = {
+    title: "Web Consulting/About Us Section",
+    component: AnimatedAboutUsSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedAboutUsSection>;
+
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+const buttonText = "Button Text"
+export const AnimatedAboutUsSectionComplete: Story = {
+    args: {
+        sectionData: AnimatedAboutUsSectionData,
+    },
+    render: ({sectionData,}) =>
+        <ThemeProvider theme={getThemeFromSanity(WebConsultingThemeData)}>
+            <AnimatedAboutUsSection sectionData={sectionData}></AnimatedAboutUsSection>
+        </ThemeProvider>,
+};
diff --git a/src/stories/web-consulting/AnimatedHeroSection.stories.tsx b/src/stories/web-consulting/AnimatedHeroSection.stories.tsx
new file mode 100644
index 00000000..41408f6c
--- /dev/null
+++ b/src/stories/web-consulting/AnimatedHeroSection.stories.tsx
@@ -0,0 +1,32 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ThemeProvider} from "@mui/material/styles";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+import WebConsultingThemeData from "../data/WebConsultingThemeData";
+import AnimatedHeroSectionData from "../data/AnimatedHeroSectionData";
+
+const meta: Meta<typeof HeroAnimatedContentSection> = {
+    title: "Web Consulting/Hero Content Section",
+    component: HeroAnimatedContentSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof HeroAnimatedContentSection>;
+
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+const buttonText = "Button Text"
+export const ResumeBioSectionComplete: Story = {
+    args: {
+        sectionData: AnimatedHeroSectionData,
+    },
+    render: ({sectionData,}) =>
+        <ThemeProvider theme={getThemeFromSanity(WebConsultingThemeData)}>
+            <HeroAnimatedContentSection sectionData={sectionData}></HeroAnimatedContentSection>
+        </ThemeProvider>,
+};
diff --git a/src/stories/web-consulting/AnimatedMapSection.stories.tsx b/src/stories/web-consulting/AnimatedMapSection.stories.tsx
new file mode 100644
index 00000000..a430d413
--- /dev/null
+++ b/src/stories/web-consulting/AnimatedMapSection.stories.tsx
@@ -0,0 +1,38 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ThemeProvider} from "@mui/material/styles";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+import WebConsultingThemeData from "../data/WebConsultingThemeData";
+import AnimatedHeroSectionData from "../data/AnimatedHeroSectionData";
+import AnimatedAboutUsSection from "../../components/animated/AnimatedAboutUsSection";
+import AnimatedAboutUsSectionData from "../data/AnimatedAboutUsSectionData";
+import AnimatedServicesSection from "../../components/animated/AnimatedServicesSection";
+import AnimatedServicesSectionData from "../data/AnimatedServicesSectionData";
+import MapSection from "../../components/animated/MapSection";
+import MapSectionData from "../data/MapSectionData";
+
+const meta: Meta<typeof MapSection> = {
+    title: "Web Consulting/Map Section",
+    component: MapSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof MapSection>;
+
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+const buttonText = "Button Text"
+export const MapSectionComplete: Story = {
+    args: {
+        sectionData: MapSectionData,
+    },
+    render: ({sectionData,}) =>
+        <ThemeProvider theme={getThemeFromSanity(WebConsultingThemeData)}>
+            <MapSection sectionData={sectionData}></MapSection>
+        </ThemeProvider>,
+};
diff --git a/src/stories/web-consulting/AnimatedPortfolioSection.stories.tsx b/src/stories/web-consulting/AnimatedPortfolioSection.stories.tsx
new file mode 100644
index 00000000..3033d4ab
--- /dev/null
+++ b/src/stories/web-consulting/AnimatedPortfolioSection.stories.tsx
@@ -0,0 +1,38 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ThemeProvider} from "@mui/material/styles";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+import WebConsultingThemeData from "../data/WebConsultingThemeData";
+import AnimatedHeroSectionData from "../data/AnimatedHeroSectionData";
+import AnimatedAboutUsSection from "../../components/animated/AnimatedAboutUsSection";
+import AnimatedAboutUsSectionData from "../data/AnimatedAboutUsSectionData";
+import AnimatedServicesSection from "../../components/animated/AnimatedServicesSection";
+import AnimatedServicesSectionData from "../data/AnimatedServicesSectionData";
+import AnimatedPortfolioSection from "../../components/animated/AnimatedPortfolioSection";
+import AnimatedPortfolioSectionData from "../data/AnimatedPortfolioSectionData";
+
+const meta: Meta<typeof AnimatedPortfolioSection> = {
+    title: "Web Consulting/Portfolio Section",
+    component: AnimatedPortfolioSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedPortfolioSection>;
+
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+const buttonText = "Button Text"
+export const AnimatedPortfolioSectionComplete: Story = {
+    args: {
+        sectionData: AnimatedPortfolioSectionData,
+    },
+    render: ({sectionData,}) =>
+        <ThemeProvider theme={getThemeFromSanity(WebConsultingThemeData)}>
+            <AnimatedPortfolioSection sectionData={sectionData}></AnimatedPortfolioSection>
+        </ThemeProvider>,
+};
diff --git a/src/stories/web-consulting/AnimatedServicesSection.stories.tsx b/src/stories/web-consulting/AnimatedServicesSection.stories.tsx
new file mode 100644
index 00000000..a88d12a4
--- /dev/null
+++ b/src/stories/web-consulting/AnimatedServicesSection.stories.tsx
@@ -0,0 +1,36 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ThemeProvider} from "@mui/material/styles";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+import WebConsultingThemeData from "../data/WebConsultingThemeData";
+import AnimatedHeroSectionData from "../data/AnimatedHeroSectionData";
+import AnimatedAboutUsSection from "../../components/animated/AnimatedAboutUsSection";
+import AnimatedAboutUsSectionData from "../data/AnimatedAboutUsSectionData";
+import AnimatedServicesSection from "../../components/animated/AnimatedServicesSection";
+import AnimatedServicesSectionData from "../data/AnimatedServicesSectionData";
+
+const meta: Meta<typeof AnimatedServicesSection> = {
+    title: "Web Consulting/Services Section",
+    component: AnimatedServicesSection,
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedServicesSection>;
+
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+const buttonText = "Button Text"
+export const AnimatedServicesSectionComplete: Story = {
+    args: {
+        sectionData: AnimatedServicesSectionData,
+    },
+    render: ({sectionData,}) =>
+        <ThemeProvider theme={getThemeFromSanity(WebConsultingThemeData)}>
+            <AnimatedServicesSection sectionData={sectionData}></AnimatedServicesSection>
+        </ThemeProvider>,
+};
diff --git a/src/stories/web-consulting/ConsultingFooter.stories.tsx b/src/stories/web-consulting/ConsultingFooter.stories.tsx
new file mode 100644
index 00000000..4c2ab4e8
--- /dev/null
+++ b/src/stories/web-consulting/ConsultingFooter.stories.tsx
@@ -0,0 +1,38 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import homePageResumeData from "../data/HomePageData";
+import Header from "../../components/templates/mackenzies-mind/header/Header";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
+import WebConsultingThemeData from "../data/WebConsultingThemeData";
+import consultingHeaderSectionData from "../data/ConsultingHeaderSectionData";
+import EnhancedHeader from "../../components/templates/mackenzies-mind/header/EnhancedHeader";
+import {HeaderSectionType} from "../../components/BlockContentTypes";
+import FooterMenuContainer from "../../components/templates/mackenzies-mind/footer/FooterMenuContainer";
+import FooterSectionData from "../data/ConsultingFooterSectionData";
+import FooterBlockContentLayoutContainer from "../../components/FooterBlockContentLayoutContainer";
+
+
+const meta: Meta<typeof FooterBlockContentLayoutContainer> = {
+    title: "Web Consulting/Page Components/Footer Section",
+    component: FooterBlockContentLayoutContainer,
+};
+
+export default meta;
+type Story = StoryObj<typeof FooterBlockContentLayoutContainer>;
+
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+export const Primary: Story = {
+    args: {
+        content: FooterSectionData
+    },
+    render: ({content}) => <ThemeProvider theme={getThemeFromSanity(WebConsultingThemeData)}>
+        <FooterBlockContentLayoutContainer content={[content]}></FooterBlockContentLayoutContainer>
+    </ThemeProvider>,
+};
\ No newline at end of file
diff --git a/src/stories/web-consulting/ConsultingHeader.stories.tsx b/src/stories/web-consulting/ConsultingHeader.stories.tsx
new file mode 100644
index 00000000..0009d5cf
--- /dev/null
+++ b/src/stories/web-consulting/ConsultingHeader.stories.tsx
@@ -0,0 +1,35 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import homePageResumeData from "../data/HomePageData";
+import Header from "../../components/templates/mackenzies-mind/header/Header";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import DigitalResumeThemeData from "../data/DigitalResumeThemeData";
+import {ThemeProvider} from "@mui/material/styles";
+import WebConsultingThemeData from "../data/WebConsultingThemeData";
+import consultingHeaderSectionData from "../data/ConsultingHeaderSectionData";
+import EnhancedHeader from "../../components/templates/mackenzies-mind/header/EnhancedHeader";
+import {HeaderSectionType} from "../../components/BlockContentTypes";
+
+
+const meta: Meta<typeof EnhancedHeader> = {
+    title: "Web Consulting/Page Components/Enhanced Header",
+    component: EnhancedHeader,
+};
+
+export default meta;
+type Story = StoryObj<typeof EnhancedHeader>;
+
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+export const Primary: Story = {
+    args: {
+        pageHeader: consultingHeaderSectionData
+    },
+    render: ({pageHeader}) => <ThemeProvider theme={getThemeFromSanity(WebConsultingThemeData)}>
+        <EnhancedHeader pageHeader={pageHeader} ></EnhancedHeader>
+    </ThemeProvider>,
+};
\ No newline at end of file
diff --git a/src/stories/web-dev-company/WebDevHeroSection.stories.tsx b/src/stories/web-dev-company/WebDevHeroSection.stories.tsx
index 5d71340d..3d69cfe1 100644
--- a/src/stories/web-dev-company/WebDevHeroSection.stories.tsx
+++ b/src/stories/web-dev-company/WebDevHeroSection.stories.tsx
@@ -10,6 +10,10 @@ import React from "react";
 import CustomizedThemeProvider from "../../components/customized-theme-provider/CustomizedThemeProvider";
 import {ThemeProvider} from "@mui/material/styles";
 import WebDevSiteTheme from "../../theme/WebDevSiteTheme";
+import getThemeFromSanity from "../../components/customized-theme-provider/getThemeFromSanity";
+import WebDevThemeData from "../data/WebDevThemeData";
+import HeroAnimatedContentSection from "../../components/animated/HeroAnimatedContentSection";
+import AnimatedHeroSectionData from "../data/AnimatedHeroSectionData";
 
 
 const meta: Meta<typeof WebDevHeroContentSection> = {
@@ -27,8 +31,9 @@ type Story = StoryObj<typeof WebDevHeroContentSection>;
  * to learn how to use render functions.
  */
 
+console.log(getThemeFromSanity(WebDevThemeData))
 export const Primary: Story = {
-    render: () =>                         <ThemeProvider theme={WebDevSiteTheme}>
-        <WebDevHeroContentSection sectionData={WebDevHeroSectionData}></WebDevHeroContentSection>
+    render: () =>  <ThemeProvider theme={getThemeFromSanity(WebDevThemeData)}>
+    <WebDevHeroContentSection sectionData={WebDevHeroSectionData}></WebDevHeroContentSection>
     </ThemeProvider>,
 };