Skip to content

Commit

Permalink
kill spacer
Browse files Browse the repository at this point in the history
  • Loading branch information
Hayk committed Jan 22, 2023
1 parent 2cce38e commit 3a6ed0a
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 156 deletions.
32 changes: 19 additions & 13 deletions src/components/base-styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,30 @@
import React from 'react'
import styled, { createGlobalStyle, injectGlobal } from 'styled-components'
import { colors, textSizesStyles } from '../styles/variables'
import { createGlobalStyle } from 'styled-components'

import AtlasGrotesk400Woff from '../assets/fonts/AtlasGrotesk-400.woff'
import AtlasGrotesk400Woff2 from '../assets/fonts/AtlasGrotesk-400.woff2'
import AtlasGrotesk700Woff from '../assets/fonts/AtlasGrotesk-700.woff'
import AtlasGrotesk700Woff2 from '../assets/fonts/AtlasGrotesk-700.woff2'
const spaces = [1, 2, 3, 4, 5]

const GlobalStyles = createGlobalStyle`
`
const sides = {
top: 't',
right: 'r',
bottom: 'b',
left: 'l',
};

const Root = styled.div`
`
const GlobalStyles = createGlobalStyle`
${spaces.map(space => {
return Object.entries(sides).map(([side, shorthand]) => `
.m${shorthand}-${space} {
margin-${side}: var(--space${space});
}
`).join('');
}).join('')}
`;

const BaseStyles = ({children}) => (
<Root>
<>
<GlobalStyles />
{children}
</Root>
</>
)

export default BaseStyles
4 changes: 2 additions & 2 deletions src/components/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ const Root = styled.nav`
}
`;

const Nav = () => {
const Nav = ({ ...props }) => {
return (
<Root>
<Root {...props}>
<Link to="/">hayk an</Link>
<Link to="/">projects</Link>
<Link to="/about">A</Link>
Expand Down
41 changes: 0 additions & 41 deletions src/components/spacer.js
View file

This file was deleted.

10 changes: 9 additions & 1 deletion src/components/text.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import React from 'react'
import styled from 'styled-components'
import { textSizes } from '../styles/variables'

const getTextSize = (size) => {
if(size in textSizes) {
return `var(--${size})`
}
return size
}

const Text = ({children, tag, ...props}) => {
let component
Expand All @@ -17,7 +25,7 @@ const Text = ({children, tag, ...props}) => {
color: transparent;
`
};
font-size: ${props => `var(--${props.size})`};
font-size: ${props => getTextSize(props.size)};
margin: 0;
`

Expand Down
3 changes: 1 addition & 2 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
--size1: calc(0.6vw + 16px);
--size2: calc(0.6vw + 24px);
--size3: calc(0.6vw + 32px);
--huge: 9rem;
}

:root {
Expand Down Expand Up @@ -119,4 +118,4 @@ a:hover {

h1, h2, h3, h4, h5, h6 {
font-weight: unset;
}
}
6 changes: 0 additions & 6 deletions src/styles/variables.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,6 @@ export const textSizes = {
size3: {
fontSize: 'var(--size3)',
},
huge: {
fontSize: 'var(--huge)',
},
}

export const textSizesStyles = {
Expand All @@ -52,7 +49,4 @@ export const textSizesStyles = {
size3: css`
font-size: ${textSizes.size3.fontSize};
`,
huge: css`
font-size: ${textSizes.huge.fontSize};
`,
}
85 changes: 23 additions & 62 deletions src/views/about.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React from 'react'
import Text from '../components/text'
import Distribute from '../components/distribute'
import Spacer from '../components/spacer'
import Container from '../components/container'
import Nav from '../components/nav'
import Animate from '../components/animate'
import { textSizes } from '../styles/variables';

const letterSize = `calc(var(--size3) * 3)`

const About = () => {
return(
<div>
<Nav />
<Spacer bottom='calc(var(--pagePadding) * 2)'/>
<Nav style={{ marginBottom: 'calc(var(--pagePadding) * 2)' }}/>

<Animate duration={0.8}>
<Container fullPage>
<Text size='huge'>
<Container fullPage className="mb-3">
<Text size={letterSize}>
A
</Text>

Expand All @@ -30,11 +30,9 @@ const About = () => {
</Container>

</Container>

<Spacer bottom='var(--space3)' />

<Container fullPage>
<Container width='lg'>
<Container width='lg' className="mb-3">
<Container width='lg'>
<Text size='size1' weight="bold">
what i actually do
Expand All @@ -50,9 +48,7 @@ const About = () => {
</Container>
</Container>

<Spacer bottom='var(--space3)' />

<Container fullPage>
<Container fullPage className="mb-3">
<Text size='size1' weight="bold">
contact
</Text>
Expand All @@ -69,19 +65,13 @@ const About = () => {
</Container>
</Container>

<Container fullPage className="mt-4 mb-4">

<Spacer bottom='var(--space3)' />

<Container fullPage>




<Text size='huge' outline>
<Text size={letterSize} outline>
M
</Text>

<Container width='lg'>
<Container width='lg' className="mb-3">
<Container width='lg'>
<Text size='size1' weight='bold' tag='h2'>
the modules that form this website
Expand All @@ -92,55 +82,26 @@ const About = () => {
</Container>
</Container>

<Spacer bottom='var(--space3)' />


<Distribute vertical space='var(--space4)'>
<Text size="size1">Text</Text>
<>
<div className="mb-1">
<Text size="size1">Space</Text>
</div>
<Distribute vertical space='var(--space1)'>
{[1, 2, 3, 4, 5].map((space, index) => (
<div key={index} style={{ background: 'currentColor', height: `var(--space${space})`, width: `var(--space${space})` }} />
))}
</Distribute>

<div>
<Text>Text</Text>
<Spacer bottom='var(--space1)' />

{Object.entries(textSizes).map(([key, value], index) => (
<Spacer bottom='var(--space1)' key={index}>
<Text size={key}>{key}: {value.fontSize}</Text>
</Spacer>
))}
</div>

<div>
<Text dimmed>Distribute</Text>
<Spacer bottom='var(--space1)' />
<Distribute space='var(--space3)'>
<div>A</div>
<div>B</div>
<div>C</div>
</Distribute>
</div>

<div>
<Text dimmed>Spacer</Text>
<Spacer bottom='var(--space1)' />
<Spacer right='var(--space2)' inline>
<span>A</span>
</Spacer>
<Spacer right='var(--space3)' inline>
<span>B</span>
</Spacer>
<Spacer right='var(--space4)' inline>
<span>C</span>
</Spacer>
<Spacer inline>
<span>D</span>
</Spacer>
<div className="mb-1 mt-3">
<Text size="size1">Text</Text>
</div>
</Distribute>

{Object.entries(textSizes).map(([key, value], index) => (
<div className="mb-1" key={index}>
<Text size={key}>{key}: {value.fontSize}</Text>
</div>
))}
</>
</Container>
</Animate>
<Nav />
Expand Down
54 changes: 25 additions & 29 deletions src/views/project.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react'
import Container from '../components/container'
import Text from '../components/text'
import Spacer from '../components/spacer'
import CustomLink from '../components/custom-link'
import Nav from '../components/nav'
import Animate from '../components/animate'
Expand Down Expand Up @@ -46,40 +45,37 @@ const Project = (props) => {
return(
<div>
<ProjectContainer>
<Nav />
<Spacer bottom='calc(var(--pagePadding) * 2)'/>
<Nav style={{ marginBottom: 'calc(var(--pagePadding) * 2)' }}/>

<Animate duration={0}>
<Container fullPage>
<Spacer bottom='var(--space4)'>
<Spacer bottom='var(--space2)'>
<Text size='size3' weight='bold' tag='h1'>
{props.title}
{props.titleSuffix && (
<Text tag="span" outline color={colors.body}>
{' ' + props.titleSuffix}
</Text>
)}
</Text>
<SubtitleWrapper>
<Text size='size3' tag='h2'>
{props.subtitle}
</Text>
</SubtitleWrapper>
</Spacer>

<Container width='lg'>
<Spacer bottom='var(--space2)'>

<Text size='size3' weight='bold' tag='h1'>
{props.title}
{props.titleSuffix && (
<Text tag="span" outline color={colors.body}>
{' ' + props.titleSuffix}
</Text>
)}
</Text>
<SubtitleWrapper>
<Text size='size3' tag='h2'>
{props.subtitle}
</Text>
</SubtitleWrapper>

<Container width='lg' className="mt-2">
<div className="mt-2">
<Text tag='p'>
{props.description}
</Text>
</Spacer>
</div>

{props.role
? <Spacer bottom='var(--space2)'>
? <div className="mt-2">
<Text dimmed>my role{props.inTeam ? ' (in team)' : ''}:</Text>
<Text>{props.role}</Text>
</Spacer>
</div>
: null
}

Expand Down Expand Up @@ -110,9 +106,9 @@ const Project = (props) => {
)}

{props.contributors && props.contributors.map(( contributor ) => (
<Spacer>
<div>
<CustomLink target='_blank' href={'https://github.com/' + contributor.githubUsername}>@{contributor.githubUsername}</CustomLink> — <Text tag='span' dimmed>{contributor.role}</Text>
</Spacer>
</div>
))}

{props.link
Expand All @@ -131,10 +127,10 @@ const Project = (props) => {
</div>
)}
</Container>
</Spacer>

</Container>

<ChildrenWrapper>
<ChildrenWrapper className="mt-4">
{props.children}
</ChildrenWrapper>

Expand Down

1 comment on commit 3a6ed0a

@vercel
Copy link

@vercel vercel bot commented on 3a6ed0a Jan 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

portfolio – ./

hayk.design
portfolio-git-master-hihayk.vercel.app
portfolio-psi-red.vercel.app
portfolio-hihayk.vercel.app

Please sign in to comment.