-
Notifications
You must be signed in to change notification settings - Fork 1
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
1 parent
256caad
commit 96b6c0e
Showing
12 changed files
with
788 additions
and
70 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
'use strict'; | ||
|
||
import Link from 'next/link'; | ||
|
||
const Back = ({ inversed = false, href = '/' }) => { | ||
return ( | ||
<div className={inversed ? 'inversed' : null}> | ||
<Link href={href}> | ||
<svg | ||
width="18" | ||
height="18" | ||
viewBox="0 0 24 24" | ||
fill="none" | ||
stroke="currentColor" | ||
strokeWidth="2" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
> | ||
<line x1="20" y1="12" x2="4" y2="12" /> | ||
<polyline points="10 18 4 12 10 6" /> | ||
</svg> | ||
</Link> | ||
|
||
<style jsx>{` | ||
div { | ||
height: 30px; | ||
width: 30px; | ||
line-height: 36px; | ||
text-align: center; | ||
display: block; | ||
background-color: #fff; | ||
border-radius: 1px; | ||
position: fixed; | ||
top: 25px; | ||
left: 25px; | ||
cursor: pointer; | ||
transition: all 0.2s ease; | ||
} | ||
div:hover { | ||
transform: scale(1.1); | ||
} | ||
.inversed { | ||
background-color: #000; | ||
} | ||
.inversed svg, | ||
.inversed line, | ||
.inversed polyline { | ||
fill: #fff; | ||
color: #fff; | ||
} | ||
`}</style> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Back; |
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,150 @@ | ||
'use strict'; | ||
|
||
import Link from 'next/link'; | ||
|
||
import { colors, typography, phone } from './../theme'; | ||
|
||
const Footnotes = ({ footnotes }) => { | ||
const footnote1 = footnotes[0]; | ||
const footnote2 = footnotes[1]; | ||
|
||
return ( | ||
<ul> | ||
<li> | ||
<Link href={footnote1.href}> | ||
<div> | ||
<h4> | ||
{footnote1.title} | ||
<span>(not ready yet)</span> | ||
</h4> | ||
<p> | ||
{footnote1.description} | ||
</p> | ||
|
||
<span> | ||
Learn more | ||
<span className="arrow"> | ||
<svg | ||
width="14" | ||
height="14" | ||
viewBox="0 0 24 24" | ||
fill="none" | ||
stroke="currentColor" | ||
strokeWidth="2" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
> | ||
<line x1="4" y1="12" x2="20" y2="12" /> | ||
<polyline points="14 6 20 12 14 18" /> | ||
</svg> | ||
</span> | ||
</span> | ||
</div> | ||
</Link> | ||
</li> | ||
|
||
<li> | ||
<Link href={footnote2.href}> | ||
<div> | ||
<h4> | ||
{footnote2.title} | ||
<span>(not ready yet)</span> | ||
</h4> | ||
<p> | ||
{footnote2.description} | ||
</p> | ||
|
||
<span> | ||
Learn more | ||
<span className="arrow"> | ||
<svg | ||
width="14" | ||
height="14" | ||
viewBox="0 0 24 24" | ||
fill="none" | ||
stroke="currentColor" | ||
strokeWidth="2" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
> | ||
<line x1="4" y1="12" x2="20" y2="12" /> | ||
<polyline points="14 6 20 12 14 18" /> | ||
</svg> | ||
</span> | ||
</span> | ||
</div> | ||
</Link> | ||
</li> | ||
|
||
<style jsx>{` | ||
ul { | ||
display: flex; | ||
flex-wrap: wrap; | ||
justify-content: space-between; | ||
} | ||
li { | ||
width: 40%; | ||
max-width: 40%; | ||
} | ||
div { | ||
cursor: pointer; | ||
} | ||
div:hover .arrow { | ||
opacity: 1; | ||
transform: translateX(0); | ||
} | ||
h4 { | ||
color: ${colors.white}; | ||
font-size: ${typography.f14}; | ||
font-weight: ${typography.bold}; | ||
} | ||
h4 span { | ||
display: inline-block; | ||
margin-left: 8px; | ||
color: ${colors.subtitle}; | ||
} | ||
p { | ||
color: #ababab; | ||
font-size: 12px; | ||
font-weight: ${typography.semibold}; | ||
margin-top: 10px; | ||
line-height: 20px; | ||
} | ||
span { | ||
color: ${colors.white}; | ||
margin-top: 10px; | ||
font-size: ${typography.f10}; | ||
font-weight: ${typography.bold}; | ||
display: block; | ||
text-transform: uppercase; | ||
} | ||
.arrow { | ||
display: inline-block; | ||
vertical-align: sub; | ||
margin-left: 5px; | ||
opacity: 0; | ||
transform: translateX(-20px); | ||
transition: all 0.2s ease; | ||
} | ||
@media ${phone} { | ||
li { | ||
width: 100%; | ||
max-width: 100%; | ||
margin-bottom: 50px; | ||
} | ||
} | ||
`}</style> | ||
</ul> | ||
); | ||
}; | ||
|
||
export default Footnotes; |
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,82 @@ | ||
'use strict'; | ||
|
||
import Remote from './remote'; | ||
|
||
const Job = ({ data }) => { | ||
const { role, company, from, to, location, remote } = data; | ||
const isRemote = remote ? <Remote /> : null; | ||
|
||
return ( | ||
<li> | ||
<h3> | ||
{role} | ||
|
||
{isRemote} | ||
</h3> | ||
<h4> | ||
{company} | ||
</h4> | ||
|
||
<div> | ||
<p> | ||
<span className="from"> | ||
{from} | ||
</span> | ||
|
||
<span className="separator">•</span> | ||
|
||
<span className="to"> | ||
{to} | ||
</span> | ||
</p> | ||
|
||
<p> | ||
{location} | ||
</p> | ||
</div> | ||
|
||
<style jsx>{` | ||
li { | ||
border: 1px solid #333; | ||
padding: 20px; | ||
margin-bottom: 30px; | ||
transition: all 0.2s ease; | ||
} | ||
p { | ||
color: #fff; | ||
font-size: 10px; | ||
text-transform: uppercase; | ||
} | ||
div { | ||
display: flex; | ||
justify-content: space-between; | ||
margin-top: 20px; | ||
} | ||
.separator { | ||
margin-left: 5px; | ||
margin-right: 5px; | ||
} | ||
li:hover { | ||
border-color: #fff; | ||
} | ||
h3 { | ||
color: #fff; | ||
font-size: 14px; | ||
} | ||
h4 { | ||
color: #ababab; | ||
font-size: 12px; | ||
margin-top: 5px; | ||
} | ||
`}</style> | ||
</li> | ||
); | ||
}; | ||
|
||
export default Job; |
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,27 @@ | ||
'use strict'; | ||
|
||
const Remote = () => { | ||
return ( | ||
<span> | ||
<div>Remote</div> | ||
|
||
<style jsx>{` | ||
div { | ||
color: #000; | ||
padding: 1px 5px; | ||
vertical-align: middle; | ||
border-radius: 1px; | ||
font-weight: 600; | ||
margin-left: 10px; | ||
line-height: 1.35; | ||
display: inline-block; | ||
font-size: 10px; | ||
text-transform: lowercase; | ||
background-color: #fff; | ||
} | ||
`}</style> | ||
</span> | ||
); | ||
}; | ||
|
||
export default Remote; |
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,28 @@ | ||
'use strict'; | ||
|
||
import { phone } from './../theme'; | ||
|
||
const Row = ({ children }) => { | ||
return ( | ||
<div> | ||
{children} | ||
|
||
<style jsx>{` | ||
div { | ||
padding: 100px; | ||
max-width: 800px; | ||
margin-left: auto; | ||
margin-right: auto; | ||
} | ||
@media ${phone} { | ||
div { | ||
padding: 35px; | ||
} | ||
} | ||
`}</style> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Row; |
Oops, something went wrong.