-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
animated portfolio section added (#8)
- Loading branch information
1 parent
d25d643
commit 5e51e92
Showing
8 changed files
with
415 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
sanityIo/schemas/sections/animated/AnimatedPortfolioItem.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
|
|
||
| export default { | ||
| name: 'AnimatedPortfolioItem', | ||
| title: 'Animated Portfolio Item', | ||
| type: 'document', | ||
| fields: [ | ||
| { | ||
| name: 'name', | ||
| title: 'Name', | ||
| type: 'string', | ||
| }, | ||
| { | ||
| name: 'preTitle', | ||
| title: 'Pre Title', | ||
| type: 'string', | ||
| }, | ||
| { | ||
| name: 'title', | ||
| title: 'Title', | ||
| type: 'string', | ||
| }, | ||
| { | ||
| name: 'coverImage', | ||
| title: 'Cover Image', | ||
| type: 'image', | ||
| options: { | ||
| hotspot: true, | ||
| }, | ||
| }, | ||
| { | ||
| name: 'inceptionDate', | ||
| title: 'Inception Date', | ||
| type: 'date', | ||
| }, | ||
| { | ||
| name: 'slug', | ||
| title: 'Slug', | ||
| type: 'slug', | ||
| options: { | ||
| source: 'title', | ||
| maxLength: 96, | ||
| }, | ||
| }, | ||
| { | ||
| name: 'skillsHighlighted', | ||
| title: 'Skill Used', | ||
| type: 'array', | ||
| of: [{type: 'reference', to: {type: 'ResumeSkill'}}], | ||
| options: { layout: 'tags' } | ||
| }, | ||
| { | ||
| name: 'detailTitle', | ||
| title: 'Detail Title', | ||
| type: 'string' | ||
| }, | ||
| { | ||
| name: 'detailDescription', | ||
| title: 'Detail Description', | ||
| type: 'text', | ||
| }, | ||
| { | ||
| name: 'linkToProd', | ||
| title: 'Prod link', | ||
| type: 'url', | ||
| }, | ||
| { | ||
| name: 'linkToDev', | ||
| title: 'Dev Link', | ||
| type: 'string', | ||
| }, | ||
| { | ||
| name: 'imageGallery', | ||
| title: 'Image Gallery', | ||
| type: 'array', | ||
| of:[{type: 'image'}] | ||
| }, | ||
| ] | ||
| } |
49 changes: 49 additions & 0 deletions
49
sanityIo/schemas/sections/animated/AnimatedPortfolioSection.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| export default { | ||
| name: 'AnimatedPortfolioSection', | ||
| title: 'Animated Portfolio Section', | ||
| type: 'document', | ||
| fields: [ | ||
| { | ||
| name: 'name', | ||
| title: 'Name', | ||
| type: 'string', | ||
| }, | ||
| { | ||
| name: 'heroBullet', | ||
| title: 'Hero Bullet', | ||
| type: 'image', | ||
| }, | ||
| { | ||
| name: 'preTitle', | ||
| title: 'Pre Title', | ||
| type: 'string', | ||
| }, | ||
| { | ||
| name: 'title', | ||
| title: 'Title of Section', | ||
| type: 'string', | ||
| }, | ||
| { | ||
| name: 'theme', | ||
| title: 'Theme', | ||
| type: 'reference', | ||
| to:[{type: 'MuiTheme'}] | ||
| }, | ||
| // { | ||
| // name: 'introduction', | ||
| // title: 'Introduction', | ||
| // type: 'text', | ||
| // }, | ||
| { | ||
| name: 'portfolioEntries', | ||
| title: 'Portfolio Entries', | ||
| type: "array", | ||
| of: [ | ||
| {type: "reference", | ||
| to: | ||
| [{type: "AnimatedPortfolioItem"}], | ||
| } | ||
| ] | ||
| }, | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import React, {FunctionComponent} from 'react' | ||
| import {Box, Button, Grid, IconButton, Typography, useTheme} from "@mui/material"; | ||
| import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; | ||
| import {ArrowRightAlt} from "@mui/icons-material"; | ||
| import makeStyles from "@mui/styles/makeStyles"; | ||
| import {Theme} from "@mui/material/styles"; | ||
| import {AnimatedPortfolioItemType} from "../BlockContentTypes"; | ||
| import {motion, useAnimationControls} from 'framer-motion'; | ||
|
|
||
| export const useStyles = makeStyles((theme: Theme) => ({ | ||
| root: { | ||
| }, | ||
| })) | ||
|
|
||
| interface IProps { portfolioItem?:AnimatedPortfolioItemType, action:(item:AnimatedPortfolioItemType|undefined)=>void } | ||
|
|
||
| const AnimatedPortfolioItem: FunctionComponent<IProps> = (props:IProps) => { | ||
| const classes = useStyles() | ||
| const theme = useTheme() | ||
|
|
||
| const controls = useAnimationControls() | ||
|
|
||
| const animateServiceHover = async () => { | ||
| controls.start({scale: 1.01, opacity:1}, {duration: .5}) | ||
| } | ||
|
|
||
| const animateServiceNoHover = async () => { | ||
| controls.start({scale: 1, opacity:.9}, {duration: .25}) | ||
| } | ||
|
|
||
| React.useEffect(()=>{ | ||
| }, []) | ||
|
|
||
| return (<Grid | ||
| role='portfoliobutton' | ||
| container item xs={12} md={6} lg={4} alignContent='flex-start' | ||
| justifyContent='center' overflow='hidden' borderRadius={theme.shape.borderRadius}> | ||
| <motion.div initial={{scale:1}} animate={controls} style={{width: "100%"}} onHoverStart={async () => { | ||
| animateServiceHover() | ||
| console.log("hovering") | ||
| }} onHoverEnd={async () => { | ||
| console.log("not hovering") | ||
| animateServiceNoHover() | ||
| }}><Button style={{ | ||
| backgroundImage: `url(${urlFor(props.portfolioItem?.coverImage ?? "").url() ?? ""})`, | ||
| backgroundSize: "cover", | ||
| backgroundPosition: "top center", | ||
| backgroundRepeat: "no-repeat", | ||
| width: "100%", | ||
| margin: "8px", | ||
| height: "500px" | ||
| }} fullWidth onClick={(e) => props.action(props.portfolioItem)}> | ||
| <Grid item container style={{position: "relative", height: "100%"}}> | ||
| {/*{portfolioItem?.inceptionDate && <Grid container item justifyContent='center'>*/} | ||
| {/* <Typography display='inline'*/} | ||
| {/* variant='body1'*/} | ||
| {/* >{dateUtils.MonthYear(portfolioItem?.inceptionDate)}</Typography>*/} | ||
| {/*</Grid>}*/} | ||
| <Grid container item sx={{position: "absolute", bottom: -20}} | ||
| justifyContent='center'> | ||
| <Grid item xs={11} container justifyContent='space-between' sx={{ | ||
| backgroundColor: theme.palette.background.paper, | ||
| marginBottom: "16px", | ||
| padding: theme.spacing(4, 3), | ||
| borderRadius: "4px" | ||
| }}> | ||
| <Grid container item xs={10}> | ||
| <Grid container item alignItems='center'> | ||
| <Box sx={{ | ||
| height: 3, | ||
| width: 26, | ||
| marginRight: "2px", | ||
| backgroundColor: theme.palette.primary.main | ||
| }}> | ||
|
|
||
| </Box> | ||
| <Typography | ||
| fontSize={'large'} | ||
| textTransform={'uppercase'} | ||
| variant='h6' | ||
| align='left'>{props.portfolioItem?.preTitle}</Typography> | ||
| </Grid> | ||
| <Grid container item> | ||
| <Typography color='textPrimary' | ||
| fontSize={'large'} | ||
| variant='body2' align='left' | ||
| gutterBottom>{props.portfolioItem?.title}</Typography> | ||
| </Grid> | ||
| <Grid container item style={{paddingRight: "8px"}}> | ||
| <Typography fontSize={'medium'} color='textPrimary' | ||
| variant='body1' align='left' | ||
| gutterBottom>{props.portfolioItem?.detailDescription}</Typography> | ||
| </Grid> | ||
| </Grid> | ||
| <Grid container item xs={2} sm={2} justifyContent='flex-end' | ||
| alignContent='center' alignItems='center'> | ||
| <IconButton | ||
| color='primary' | ||
| sx={{ | ||
| backgroundColor: theme.palette.primary.main, | ||
| '&:hover': { | ||
| backgroundColor: theme.palette.primary.dark | ||
| }, | ||
| width: "50px", | ||
| height: "50px", | ||
| border: "1px solid black", | ||
| }}><ArrowRightAlt color='secondary'/></IconButton> | ||
| </Grid> | ||
|
|
||
| </Grid> | ||
| </Grid> | ||
| </Grid> | ||
| </Button></motion.div> | ||
| </Grid>) | ||
| } | ||
|
|
||
| export default AnimatedPortfolioItem |
Oops, something went wrong.