Skip to content

Commit

Permalink
Merge pull request #34 from perjansson/develop
Browse files Browse the repository at this point in the history
Develop into main
  • Loading branch information
perjansson authored Feb 21, 2022
2 parents eeb7f3c + 21139e6 commit f489ef8
Show file tree
Hide file tree
Showing 10 changed files with 119 additions and 72 deletions.
1 change: 1 addition & 0 deletions src/client-api/graphql/queries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const getIndexPageData = `{
titleShort
client
role
tech
asset {
url
}
Expand Down
16 changes: 6 additions & 10 deletions src/components/hero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,13 @@ const TitleContainer = styled('div', {
gridArea: 'title',
})

const SectionTitle = styled('h1', {
const Title = styled('h1', {
background:
'linear-gradient(271deg, $colorful3 30%, $colorful4 50%, $colorful1 70%, $colorful3 94%)',
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent',
color: '$colorful3',
letterSpacing: '-1.5px',
lineHeight: '112%',
transition: 'font-size 0.8s ease-in-out',
fontWeight: 700,

'@bp1': {
minHeight: '200px',
Expand Down Expand Up @@ -83,9 +80,8 @@ const SectionTitle = styled('h1', {
},
})

const Subtitle = styled('div', {
const Intro = styled('div', {
color: '$cultured',
lineHeight: '1.4',
transition: 'font-size 0.8s ease-in-out',

'@bp1': {
Expand Down Expand Up @@ -201,15 +197,15 @@ export const Hero: React.FC = () => {
<Container>
<TitleContainer>
<Sparkles>
<SectionTitle>
<Title>
Hi. I&apos;m {data?.me.firstName}.
<br />A Fullstack Web Developer.
</SectionTitle>
</Title>
</Sparkles>
<Spacer />
<Subtitle>
<Intro>
<RichText richText={data?.me.short.json} />
</Subtitle>
</Intro>
<Spacer />
</TitleContainer>
<SocialMediaContainer>
Expand Down
2 changes: 0 additions & 2 deletions src/components/projectContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,6 @@ const TabsTrigger = styled(TabsPrimitive.TabsTrigger, {
})

const TabsContent = styled(TabsPrimitive.TabsContent, {
lineHeight: '140%',

'@bp1': {
fontSize: '$fontSize3',
},
Expand Down
26 changes: 2 additions & 24 deletions src/components/projectTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,13 @@ const Container = styled('div', {
overflowY: 'hidden',
})

const SectionTitle = styled('h1', {
const Title = styled('h1', {
color: '$color10',
textShadow:
'1px 1px 10px rgba(17, 17, 17, 0.2), 1px 1px 10px rgba(17, 17, 17, 0.2)',
letterSpacing: '-1.5px',
lineHeight: '120%',
transition: 'font-size 0.8s ease-in-out',
fontFamily: 'Playfair Display, Helvetica Neue, Helvetica, Arial, sans-serif;',
fontWeight: 700,

'@bp1': {
fontSize: '$fontSize8',
},

'@bp2': {
fontSize: '$fontSize9',
},

'@bp3': {
fontSize: '$fontSize10',
},

'@bp4': {
fontSize: '$fontSize11',
},

'@bp5': {
fontSize: '$fontSize11',
},
})

const Info = styled('div', {
Expand All @@ -55,7 +33,7 @@ export const ProjectTitle: React.FC = () => {

return (
<Container>
<SectionTitle>{title}</SectionTitle>
<Title>{title}</Title>
<Spacer size="small" />
<Info>
<p>
Expand Down
96 changes: 68 additions & 28 deletions src/components/projects.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,24 @@ import { useInView } from 'react-intersection-observer'
import useDimensions from 'react-cool-dimensions'
import { FocusScope, useFocusManager } from '@react-aria/focus'

import { cursorHoverDark, cursorHover, styled } from '../../stitches.config'
import {
cursorHoverDark,
cursorHover,
styled,
theme,
} from '../../stitches.config'
import { useIndexPageData } from '../providers/IndexPageDataProvider'
import { ProjectType } from '../../types'
import { event } from '../utils/gtag'
import { Spacer } from './spacer'
import { ContentfulImage } from './contentfulImage'
import { ParallaxEffect } from './parallaxEffect'
import { Sparkles } from './sparkle'

const SectionTitle = styled('h2', {
const Title = styled('h2', {
color: '$color12',
fontSize: '$fontSize8',
letterSpacing: '-1.5px',
lineHeight: '110%',
transition: 'font-size 0.8s ease-in-out',
fontWeight: 700,

'@bp1': {
fontSize: '$fontSize7',
Expand Down Expand Up @@ -56,9 +59,9 @@ export const Projects: React.FC = () => {

return (
<>
<SectionTitle>
<Title>
Check out some projects I&apos;ve done as a consultant or freelancer
</SectionTitle>
</Title>
<Spacer size="large" />
<FocusScope>
<section data-cy="projects">
Expand All @@ -79,50 +82,61 @@ const ProjectContainer = styled(motion.article, {
display: 'grid',
backgroundColor: '$color3',
borderRadius: '$radii5',
gridTemplateRows: '0.05fr 0.05fr 0.9fr',
gridTemplateColumns: 'auto',
gridTemplateAreas: `
'role'
'title'
'asset'
`,

'@bp1': {
padding: '$space6',
padding: '$space8',
height: '100%',
gridTemplateColumns: '1fr',
gridTemplateRows: '0.05fr 0.05fr 0.05fr 0.9fr',
gridTemplateAreas: `
'role'
'title'
'tech'
'asset'
`,
},

'@bp2': {
padding: '$space12',
padding: '$space14',
gridTemplateColumns: '0.7fr 1.3fr',
gridTemplateRows: '0.05fr 0.05fr 0.9fr',
gridTemplateAreas: `
'tech role'
'tech title'
'asset asset'
`,
},
})

const Role = styled('div', {
gridArea: 'role',
color: '$color8',
textTransform: 'uppercase',
fontWeight: '$bold',
textAlign: 'right',

'@bp1': {
textAlign: 'center',
fontSize: '$fontSize1',
lineHeight: '18px',
textAlign: 'left',
},

'@bp2': {
fontSize: '$fontSize3',
fontWeight: '600',
textAlign: 'right',
},

'@bp3': {
fontSize: '$fontSize5',
},
})

const Title = styled('h2', {
const ProjectTitle = styled('h2', {
gridArea: 'title',
color: '$color12',
textAlign: 'right',

'@bp1': {
textAlign: 'center',
fontSize: '$fontSize6',
lineHeight: '32px',
textAlign: 'left',
},

'@bp2': {
Expand All @@ -134,13 +148,34 @@ const Title = styled('h2', {
},

'@bp4': {
fontSize: '$fontSize8',
fontSize: '$fontSize9',
},
})

const Tech = styled('div', {
gridArea: 'tech',
color: '$color7',
fontWeight: 'bold',
textAlign: 'left',

'@bp1': {
marginTop: '$space1',
fontSize: '$fontSize1',
textAlign: 'center',
},

'@bp2': {
fontSize: '$fontSize3',
},

'@bp3': {
fontSize: '$fontSize5',
},
})

const AssetWrapper = styled('div', {
gridArea: 'asset',
marginTop: '$space10',
marginTop: '$space14',
position: 'relative',
placeSelf: 'center',
display: 'flex',
Expand All @@ -153,7 +188,7 @@ const AssetWrapper = styled('div', {
},

'@bp1': {
width: '250px',
width: '260px',
height: '320px',
marginTop: '$space5',
},
Expand Down Expand Up @@ -244,7 +279,7 @@ interface ProjectProps {
}

const Project: React.FC<ProjectProps> = ({ project, onSelect }) => {
const { titleShort, client, role, asset, assetPlaceholder } = project
const { titleShort, client, role, tech, asset, assetPlaceholder } = project
const { observe, width, height } = useDimensions<HTMLDivElement>()
const controls = useAnimation()
const [ref, inView] = useInView()
Expand Down Expand Up @@ -292,7 +327,12 @@ const Project: React.FC<ProjectProps> = ({ project, onSelect }) => {
<Role>
{role} at {client}
</Role>
<Title>{titleShort}</Title>
<ProjectTitle>{titleShort}</ProjectTitle>
<Tech>
<Sparkles color={theme.colors.color11.value}>
{tech?.join(', ')}
</Sparkles>
</Tech>
<AssetWrapper ref={observe}>
<Border>
<ParallaxEffect>
Expand Down
2 changes: 1 addition & 1 deletion src/components/sparkle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const SparklesContainer = styled('span', {
const ContentWrapper = styled('strong', {
position: 'relative',
zIndex: 1,
fontWeight: 'bold',
fontWeight: '$bolder',
})

interface SparklesProps {
Expand Down
3 changes: 1 addition & 2 deletions src/components/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,8 @@ const TooltipContent = styled(TooltipPrimitive.Content, {
color: '$color12',
borderRadius: '$radii2',
padding: '$space2 $space4',
fontWeight: 700,
fontWeight: '$bolder',
fontSize: '$fontSize3',
lineHeight: '21px',
display: 'flex',
alignItems: 'center',
animationDuration: '200ms',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/projects/[id].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Head from 'next/head'
import { AnimatePresence } from 'framer-motion'

import { styled } from '../../../stitches.config'
import { ProjectPageData, ProjectType } from '../../../types'
import { ProjectPageData } from '../../../types'
import {
ProjectPageDataContextProvider,
useProjectPageData,
Expand Down
Loading

0 comments on commit f489ef8

Please sign in to comment.