Skip to content

Commit

Permalink
add work experiences
Browse files Browse the repository at this point in the history
  • Loading branch information
bukinoshita committed Aug 25, 2017
1 parent 256caad commit 96b6c0e
Show file tree
Hide file tree
Showing 12 changed files with 788 additions and 70 deletions.
59 changes: 59 additions & 0 deletions components/back.js
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;
150 changes: 150 additions & 0 deletions components/footnotes.js
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;
82 changes: 82 additions & 0 deletions components/job.js
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;
27 changes: 27 additions & 0 deletions components/remote.js
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;
28 changes: 28 additions & 0 deletions components/row.js
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;
Loading

0 comments on commit 96b6c0e

Please sign in to comment.