Skip to content

Commit

Permalink
responsive project view
Browse files Browse the repository at this point in the history
  • Loading branch information
@hihayk
hihayk committed Oct 17, 2017
1 parent 958f42f commit eb0d416
Show file tree
Hide file tree
Showing 15 changed files with 156 additions and 58 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"color": "^2.0.0",
"gh-pages": "^1.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
Expand Down
Binary file added src/assets/images/modulator2-hayk-an-design.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/modulator3-hayk-an-design.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/modulator4-hayk-an-design.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/components/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ const Container = styled.div`
${props => props.width === 'lg' ? 'max-width: 640px' : ''};
${props => props.contain ? 'max-width: 1216px; padding: 0 32px; margin: 0 auto' : ''};
${props => props.fullPage ? 'padding: 0 64px' : ''};
@media (max-width: 1200px) {
${props => props.fullPage ? 'padding: 0 32px' : ''};
}
`

export default Container
14 changes: 12 additions & 2 deletions src/components/custom-link.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,19 @@ import styled from 'styled-components'
import { colors } from '../styles/variables'

const CustomLinkWrapper = styled.span`
${props => props.size === 'sizeN1' ? 'font-size: 14px; line-height: 20px' : ''};
${props => props.size === 'size0' ? 'font-size: 18px; line-height: 24px' : ''};
${props => props.size === 'size1' ? 'font-size: 24px; line-height: 32px' : ''};
${props => props.size === 'size2' ? 'font-size: 32px; line-height: 40px' : ''};
${props => props.size === 'size3' ? 'font-size: 40px; line-height: 48px' : ''};
${props => props.size === 'size3' ? 'font-size: 40px; line-height: 48px; letter-spacing: -0.03em' : ''};
@media (max-width: 1200px) {
${props => props.size === 'sizeN1' ? 'font-size: 12px; line-height: 18px' : ''};
${props => props.size === 'size0' ? 'font-size: 14px; line-height: 20px' : ''};
${props => props.size === 'size1' ? 'font-size: 18px; line-height: 24px' : ''};
${props => props.size === 'size2' ? 'font-size: 24px; line-height: 32px' : ''};
${props => props.size === 'size3' ? 'font-size: 32px; line-height: 40px; letter-spacing: 0' : ''};
}
display: ${props => props.block ? 'block' : 'inline-block'};
color: ${props => props.primary ? colors.red : colors.body};
Expand Down Expand Up @@ -43,7 +52,8 @@ const CustomLink = (props) => {
}

CustomLinkWrapper.defaultProps = {
lineOnHover: true
lineOnHover: true,
size: 'size0'
}

export default CustomLink
3 changes: 3 additions & 0 deletions src/components/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import styled from 'styled-components'

const HeaderWrapper = styled.div`
${props => props.noPadding ? '' : 'padding: 56px 64px'};
@media (max-width: 1200px) {
${props => props.noPadding ? '' : 'padding: 24px 32px'};
}
${props => props.large ? 'font-size: 24px; line-height: 32px' : ''};
${props => props.notFixed ? '' : 'position: fixed'};
display: flex;
Expand Down
8 changes: 8 additions & 0 deletions src/components/shot-group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,16 @@ const ShotGroup = styled.div`
align-items: flex-start;
${props => props.spaced ? 'margin: 0 64px' : ''};
@media (max-width: 1200px) {
${props => props.spaced ? 'margin: 0 32px' : ''};
}
& > *:not(:last-child) {
margin-right: 64px;
@media (max-width: 1200px) {
margin-right: 32px;
}
}
`

Expand Down
56 changes: 47 additions & 9 deletions src/components/shot.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,62 @@
import React from 'react'
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import Text from '../components/text'
import Container from '../components/container'

const boxedStyles = css`
background-color: ${props => props.boxedBg ? props.boxedBg : '#F5F5F5'};
margin-left: 64px;
margin-right: 64px;
padding-left: 64px;
padding-right: 64px;
padding-top: 64px;
padding-bottom: 64px;
@media (max-width: 1200px) {
margin-left: 0;
margin-right: 0;
padding-left: 32px;
padding-right: 32px;
padding-top: 32px;
padding-bottom: 32px;
}
`

const ShotWrapper = styled.div`
${props => props.boxed ? 'padding: 64px' : ''};
${props => props.spaced ? 'margin-left: 64px; margin-right: 64px' : ''};
${props => props.noBg ? '' : 'background-color: #F5F5F5'};
display: flex;
justify-content: center;
align-items: flex-start;
${props => props.boxed ? boxedStyles : ''};
margin-bottom: 64px;
@media (max-width: 1200px) {
margin-bottom: 32px;
}
`
const Image = styled.img`
${props => props.noShadow ? '' : 'box-shadow: 0 2px 6px 0 rgba(0,0,0,.10), 0 11px 54px 0 rgba(0,0,0,.05)'};
border-radius: 4px;
display: block;
margin: 0 auto;
`
const Caption = styled(Text)`
max-width: 640px;
`
const CaptionWrapper = styled.div`
margin: 64px auto 0 auto;
max-width: 1280px;
`

const Shot = (props) => {
return(
<ShotWrapper boxed={props.boxed} spaced={props.spaced} noBg={props.noBg}>
<Image src={props.src} alt={props.alt} noShadow={props.noShadow}/>
<ShotWrapper boxed={props.boxed} boxedBg={props.boxedBg} >
<Image src={props.src} noShadow={props.noShadow} />

{props.caption
? <CaptionWrapper>
<Caption dimmed size='sizeN1' >
{props.caption}
</Caption>
</CaptionWrapper>
: null
}
</ShotWrapper>
)
}
Expand Down
9 changes: 8 additions & 1 deletion src/components/spacer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ const Spacer = styled.div`
${props => props.bottom ? `margin-bottom: ${props.bottom * 8}px` : ''};
${props => props.left ? `margin-left: ${props.left * 8}px` : ''};
${props => props.right ? `margin-right: ${props.right * 8}px` : ''};
@media (max-width: 1200px) {
${props => props.smTop ? `margin-top: ${props.smTop * 8}px` : ''};
${props => props.smBottom ? `margin-bottom: ${props.smBottom * 8}px` : ''};
${props => props.smLeft ? `margin-left: ${props.smLeft * 8}px` : ''};
${props => props.smRight ? `margin-right: ${props.smRight * 8}px` : ''};
}
`

export default Spacer
export default Spacer
13 changes: 11 additions & 2 deletions src/components/text.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import styled from 'styled-components'

const Text = styled.div`
${props => props.size === 'sizeN1' ? 'font-size: 14px; line-height: 20px' : ''};
${props => props.size === 'size0' ? 'font-size: 18px; line-height: 24px' : ''};
${props => props.size === 'size1' ? 'font-size: 24px; line-height: 32px' : ''};
${props => props.size === 'size2' ? 'font-size: 32px; line-height: 40px' : ''};
${props => props.size === 'size3' ? 'font-size: 40px; line-height: 48px; letter-spacing: -0.03em' : ''};
@media (max-width: 1200px) {
${props => props.size === 'sizeN1' ? 'font-size: 12px; line-height: 18px' : ''};
${props => props.size === 'size0' ? 'font-size: 14px; line-height: 20px' : ''};
${props => props.size === 'size1' ? 'font-size: 18px; line-height: 24px' : ''};
${props => props.size === 'size2' ? 'font-size: 24px; line-height: 32px' : ''};
${props => props.size === 'size3' ? 'font-size: 32px; line-height: 40px; letter-spacing: 0' : ''};
}
${props => props.weight === 'bold' ? 'font-weight: 700' : ''};
${props => props.color ? `color: ${props.color}` : ''};
${props => props.dimmed ? 'opacity: .7' : ''};
Expand All @@ -15,4 +24,4 @@ Text.defaultProps = {
size: 'size0'
}

export default Text
export default Text
22 changes: 15 additions & 7 deletions src/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import Shot from './components/shot'
import ShotGroup from './components/shot-group'

import unit1 from './assets/images/unit1-hayk-an-design.png'
import modulator1 from './assets/images/modulator1-hayk-an-design.png'

import modulator3 from './assets/images/modulator3-hayk-an-design.png'
import modulator2 from './assets/images/modulator2-hayk-an-design.gif'
import modulator4 from './assets/images/modulator4-hayk-an-design.gif'

import travelperk2 from './assets/images/travelperk2-hayk-an-design.png'
import travelperk6 from './assets/images/travelperk6-hayk-an-design.png'
import travelperk7 from './assets/images/travelperk7-hayk-an-design.png'
Expand Down Expand Up @@ -35,7 +39,11 @@ const projects = [
link: 'hihayk.github.io/modulator',
content: (
<div>
<Shot src={modulator1} alt={'Modulator' + altAfter} />
<Shot src={modulator3} alt={'Modulator' + altAfter} />
<Shot src={modulator2} alt={'Modulator' + altAfter} />
<Shot src={modulator4} alt={'Modulator' + altAfter}
caption='Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat'
/>
</div>
)
},
Expand All @@ -49,14 +57,14 @@ const projects = [
subtitle: 'Design system and product design and development',
content: (
<div>
<Shot src={travelperk2} alt={'Travelperk' + altAfter} noShadow />
<Shot src={travelperk2} alt={'Travelperk' + altAfter} noShadow boxedBg='#f2f2f2' />
<ShotGroup spaced>
<Shot src={travelperk6} alt={'Travelperk' + altAfter} spaced={false} boxed={false} />
<Shot src={travelperk8} alt={'Travelperk' + altAfter} spaced={false} boxed={false} />
<Shot src={travelperk6} alt={'Travelperk' + altAfter} boxed={false} />
<Shot src={travelperk8} alt={'Travelperk' + altAfter} boxed={false} />
</ShotGroup>
<ShotGroup spaced>
<Shot src={travelperk7} alt={'Travelperk' + altAfter} spaced={false} boxed={false} />
<Shot src={travelperk9} alt={'Travelperk' + altAfter} spaced={false} boxed={false} />
<Shot src={travelperk7} alt={'Travelperk' + altAfter} boxed={false} />
<Shot src={travelperk9} alt={'Travelperk' + altAfter} boxed={false} />
</ShotGroup>
<Shot src={travelperk10} alt={'Travelperk' + altAfter} />
<Shot src={travelperk11} alt={'Travelperk' + altAfter} />
Expand Down
11 changes: 7 additions & 4 deletions src/views/project.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Project = (props) => {
return(
<Spacer bottom={16}>
<Header />
<Spacer bottom={32} />
<Spacer bottom={32} smBottom={16} />

<Animate duration={0.8}>
<Container fullPage>
Expand Down Expand Up @@ -46,9 +46,12 @@ const Project = (props) => {
</Text>
</Spacer>

<Spacer bottom={16}>
<CustomLink href={'https://' + props.link} target='_blank' lineOnHover={false}>{props.link}</CustomLink>
</Spacer>
{props.link
? <Spacer bottom={16} smBottom={8}>
<CustomLink href={'https://' + props.link} target='_blank' lineOnHover={false}>{props.link}</CustomLink>
</Spacer>
: null
}
</Container>
</Container>

Expand Down
9 changes: 5 additions & 4 deletions src/views/system.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@ const System = () => {
<Spacer left={8} top={7}>
<Distribute vertical space={8}>
<div>
<Text size='size3'>40/48 — size 3</Text>
<Text size='size2'>32/40 — size 2</Text>
<Text size='size1'>24/32 — size 1</Text>
<Text size='size0'>18/24 — size 0</Text>
<Text size='size3'>40/48 — size3</Text>
<Text size='size2'>32/40 — size2</Text>
<Text size='size1'>24/32 — size1</Text>
<Text size='size0'>18/24 — size0</Text>
<Text size='sizeN1'>14/20 — sizeN1</Text>
</div>

<Dropdown
Expand Down
Loading

0 comments on commit eb0d416

Please sign in to comment.