-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
351 additions
and
283 deletions.
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
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 |
|---|---|---|
| @@ -1,24 +1,24 @@ | ||
| import * as React from 'react'; | ||
| import { motion } from 'framer'; | ||
| import { Flex, Grid, Link, Text, Icon } from 'preshape'; | ||
| import { Box, Grid, Link, Text, Icon } from 'preshape'; | ||
| import data from '../../data'; | ||
| import Experience from '../Experience/Experience'; | ||
| import Project from '../Project/Project'; | ||
| import Writing from '../Writing/Writing'; | ||
| import Header from '../Header/Header'; | ||
|
|
||
| export default () => { | ||
| export default function Landing() { | ||
| return ( | ||
| <Flex backgroundColor="background-shade-1" padding="x6"> | ||
| <Box backgroundColor="background-shade-1" padding="x6"> | ||
| <Header /> | ||
|
|
||
| <Flex | ||
| <Box | ||
| alignChildrenHorizontal="middle" | ||
| direction="vertical" | ||
| flex="vertical" | ||
| gap="x16"> | ||
| <Flex maxWidth="600px" paddingVertical="x3"> | ||
| <Flex margin="x6"> | ||
| <Text margin="x2" size="x5" strong> | ||
| <Box maxWidth="600px" paddingVertical="x3"> | ||
| <Box margin="x6"> | ||
| <Text margin="x2" size="x6" strong> | ||
| Hi. <motion.span | ||
| animate={ { rotate: ['0deg', '25deg', '0deg', '25deg', '0deg', '25deg', '0deg'] } } | ||
| initial={ { rotate: '0deg' } } | ||
|
|
@@ -33,21 +33,21 @@ export default () => { | |
| </motion.span> | ||
| </Text> | ||
| <Text margin="x2" size="x5" strong>I'm Harrison Hogg, a Software Engineer from Brighton, UK.</Text> | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| <Flex margin="x6"> | ||
| <Text margin="x3">I love designing and building things, which frequently | ||
| <Box margin="x6"> | ||
| <Text margin="x3" size="x3">I love designing and building things, which frequently | ||
| sends me down rabbit holes on side projects. I studied at <Link href="https://www.open.ac.uk/" underline>The Open University</Link> where | ||
| I received my BSc Computing and Design Honours degree. When I'm not stringing characters together, I'm | ||
| a less than stable climbing frame for my two daughters 👧🏼👩🏼.</Text> | ||
| </Flex> | ||
| </Flex> | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Flex maxWidth="930px" paddingVertical="x3"> | ||
| <Flex maxWidth="600px"> | ||
| <Box maxWidth="1240px" paddingVertical="x3"> | ||
| <Box maxWidth="600px"> | ||
| <Text size="x4" strong>Personal Projects</Text> | ||
| <Text margin="x3">Some of my favourite and finished personal side projects.</Text> | ||
| </Flex> | ||
| <Text margin="x2">Some of my favourite and finished personal side projects.</Text> | ||
| </Box> | ||
|
|
||
| <Grid | ||
| gap="x4" | ||
|
|
@@ -57,30 +57,30 @@ export default () => { | |
| <Project { ...project } key={ project.title } /> | ||
| )) } | ||
| </Grid> | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| <Flex maxWidth="600px" paddingVertical="x3"> | ||
| <Flex margin="x6"> | ||
| <Text margin="x3" size="x4" strong>Writings</Text> | ||
| <Text margin="x3"> | ||
| <Box maxWidth="600px" paddingVertical="x3"> | ||
| <Box margin="x6"> | ||
| <Text margin="x2" size="x4" strong>Writings</Text> | ||
| <Text margin="x2"> | ||
| Usually when doing one of my side projects, I find something to write about and then | ||
| add them to this list. It's like an infrequent blog with no consistent theme. | ||
| </Text> | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| { Object | ||
| .values(data.writings) | ||
| .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) | ||
| .map((writing) => ( | ||
| <Writing { ...writing } key={ writing.title } /> | ||
| )) } | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| <Flex maxWidth="600px" paddingVertical="x3"> | ||
| <Flex margin="x6"> | ||
| <Text margin="x3" size="x4" strong>Experience</Text> | ||
| <Text margin="x3">A timeline of where and what I've worked on over the years.</Text> | ||
| </Flex> | ||
| <Box maxWidth="600px" paddingVertical="x3"> | ||
| <Box margin="x10"> | ||
| <Text margin="x2" size="x4" strong>Experience</Text> | ||
| <Text margin="x2">A timeline of where and what I've worked on over the years.</Text> | ||
| </Box> | ||
|
|
||
| { Object | ||
| .values(data.experience) | ||
|
|
@@ -90,33 +90,33 @@ export default () => { | |
| current={ index === 0 } | ||
| key={ exp.date } /> | ||
| )) } | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| <Flex | ||
| <Box | ||
| alignChildrenHorizontal="middle" | ||
| direction="horizontal" | ||
| flex="horizontal" | ||
| gap="x8" | ||
| maxWidth="600px" | ||
| paddingVertical="x8"> | ||
| <Flex> | ||
| <Box> | ||
| <Link href="mailto:[email protected]"> | ||
| <Icon name="Letter" size="2rem" /> | ||
| </Link> | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| <Flex> | ||
| <Box> | ||
| <Link href="https://github.com/HHogg" target="Github"> | ||
| <Icon name="Github" size="2rem" /> | ||
| </Link> | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| <Flex> | ||
| <Box> | ||
| <Link href="https://linkedin.com/in/harrison-hogg" target="LinkedIn"> | ||
| <Icon name="LinkedIn" size="2rem" /> | ||
| </Link> | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| </Flex> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; | ||
Oops, something went wrong.