Skip to content

Commit 087f8db

Browse files
stringparserstringparser
committed
update
1 parent 2ea40c4 commit 087f8db

File tree

86 files changed

+166
-67667
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+166
-67667
lines changed

‎components/Analytics.tsx

-27
This file was deleted.

‎components/Background.tsx

+31-45
Original file line numberDiff line numberDiff line change
@@ -24,53 +24,39 @@ const sharedStyles = `
2424
min-height: 100%;
2525
`;
2626

27-
const BackgroundVideo: React.SFC<BackgroundProps> = ({ video, image }) => (
28-
<div>
29-
<video
30-
src={video}
31-
loop={true}
32-
muted={true}
33-
autoPlay={true}
34-
/>
35-
<style jsx>
36-
{`
37-
video {
38-
${sharedStyles}
39-
z-index: ${zIndex.background};
40-
}
41-
`}
42-
</style>
43-
</div>
44-
);
27+
const StyledVideo = styled('video')`
28+
${sharedStyles}
29+
z-index: ${zIndex.background};
30+
`
4531

46-
const BackgroundImage: React.SFC<BackgroundProps> = ({ image, position }) => (
47-
<div>
48-
<style jsx>
49-
{`
50-
${sharedStyles}
51-
z-index: ${zIndex.background};
52-
background: url('${image}') center center no-repeat;
53-
background-size: cover;
54-
${position
55-
? `background-position: ${position};`
56-
: ''
57-
}
58-
`}
59-
</style>
60-
</div>
32+
const BackgroundVideo: React.FC<BackgroundProps> = ({ video }) => (
33+
<StyledVideo
34+
src={video}
35+
loop={true}
36+
muted={true}
37+
autoPlay={true}
38+
/>
6139
);
6240

63-
const BackgroundColor: React.SFC<BackgroundProps> = ({ color }) => (
64-
<div>
65-
<style jsx={true}>
66-
{`
67-
${sharedStyles}
68-
z-index: ${zIndex.background + 1};
69-
background-color: ${color};
70-
`}
71-
</style>
72-
</div>
73-
);
41+
const BackgroundImage = styled('div')<BackgroundProps>
42+
`
43+
${sharedStyles}
44+
z-index: ${zIndex.background};
45+
background: url('${({image}) => image}') center center no-repeat;
46+
background-size: cover;
47+
${({position}) => position
48+
? `background-position: ${position};`
49+
: ''
50+
}
51+
`;
52+
53+
const BackgroundColor = styled('div')<BackgroundProps>
54+
`
55+
${sharedStyles}
56+
z-index: ${zIndex.background + 1};
57+
background-color: ${props => props.color};
58+
`
59+
;
7460

7561
export const parseBackgroundAsString = (input: string) => ({
7662
color: /mp\d$/.test(input) ? colors.dim : undefined,
@@ -88,7 +74,7 @@ const BackgroundContainer = styled.div`
8874
overflow: hidden;
8975
`;
9076

91-
const Background: React.SFC<BackgroundProps> = ({
77+
const Background: React.FC<BackgroundProps> = ({
9278
color,
9379
video,
9480
image,

‎components/Card.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import styled from 'styled-components';
22

3-
import { boxShadow, gutter, forMedia, linkHighlight } from './mixins';
3+
import { boxShadow, gutter, linkHighlight } from './mixins';
44

5-
const StyledCard = styled<CardProps, 'div'>('div')`
5+
const StyledCard = styled('div')<CardProps>`
66
${gutter(1.5)}
77
88
cursor: pointer;
@@ -47,7 +47,7 @@ type CardProps = {
4747
href?: string;
4848
};
4949

50-
const Card: React.SFC<CardProps> = ({ href, children }) => (
50+
const Card: React.FC<CardProps> = ({ href, children }) => (
5151
<StyledCard onClick={onClick(href)}>
5252
{children}
5353
</StyledCard>

‎components/Layer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ type Props = {
55
mixins?: string[];
66
};
77

8-
const Layer = styled<Props, 'div'>('div')`
8+
const Layer = styled('div')`
99
position: relative;
10-
${({ mixins }) => composeMixins(mixins)}
10+
${({ mixins }: Props) => composeMixins(mixins)}
1111
`;
1212

1313
export default Layer;

‎components/Logo.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,24 @@ import styled from 'styled-components';
22

33
import Image from './layout/Image';
44
import { iconSize } from './theme';
5-
import { BACKEND_URL } from '../config/client';
65

76
type LogoProps = {
87
dim?: number;
98
};
109

11-
const Logo = styled<LogoProps, 'div'>('div')`
10+
const Logo = styled('div')`
1211
img {
1312
max-width: 100%;
1413
max-height: 100%;
1514
}
1615
17-
${({ dim = iconSize }) => `
16+
${({ dim = iconSize }: LogoProps) => `
1817
width: ${dim}px;
1918
height: ${dim}px;
2019
`}
2120
`;
2221

23-
const _Logo: React.SFC<LogoProps> = (props) => (
22+
const _Logo: React.FC<LogoProps> = (props) => (
2423
<Logo {...props} >
2524
<Image src="/static/img/logo.png" />
2625
</Logo>

‎components/Navbar.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ type NavProps = {
1414
position?: 'static' | 'fixed';
1515
};
1616

17-
const Nav = styled<NavProps, 'nav'>('nav')`
18-
top: ${({ topPos }) => topPos || 0}%;
17+
const Nav = styled('nav')`
18+
top: ${({ topPos }: NavProps) => topPos || 0}%;
1919
left: 0;
2020
right: 0;
2121
height: ${navbarHeight}rem;
2222
padding: 1rem 2rem;
2323
z-index: ${zIndex.navbar};
24-
position: ${({ position }) => position || 'static' };
24+
position: ${({ position }: NavProps) => position || 'static' };
2525
transition: top 500ms ease-in-out;
2626
2727
display: flex;
@@ -39,7 +39,7 @@ type NavItemProps = {
3939
highlightLinks?: boolean;
4040
};
4141

42-
const NavItem = styled<NavItemProps, 'div'>('div')`
42+
const NavItem = styled('div')`
4343
&:first-of-type {
4444
text-align: left;
4545
}
@@ -53,7 +53,7 @@ const NavItem = styled<NavItemProps, 'div'>('div')`
5353
text-decoration: none;
5454
}
5555
56-
${({ highlightLinks }) => highlightLinks && linkHighlight()}
56+
${({ highlightLinks }: NavItemProps) => highlightLinks && linkHighlight()}
5757
5858
a:hover {
5959
text-decoration: underline;
@@ -114,9 +114,9 @@ class Navbar extends Component {
114114
return (
115115
<>
116116
<Nav
117+
ref={this.navRef}
117118
topPos={topPos}
118119
position={position}
119-
innerRef={this.navRef}
120120
>
121121
<NavItem>
122122
<Link prefetch href="/">

‎components/Page.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@ import { contentFont } from './Font';
77
import Navbar from './Navbar';
88
import Footer from './Footer';
99
import { BACKEND_URL, META_KEYWORDS, TWITTER_URL } from '../config/client';
10-
import { AnalyticsHeadScript } from './Analytics';
1110

1211
const GlobalStyle = createGlobalStyle`
1312
html {
1413
font-size: 15px;
14+
font-feature-settings: "rlig" 1,"calt" 0;
15+
text-rendering: optimizeLegibility;
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
1518
}
1619
${forMedia('tablet', `
1720
html {
@@ -49,7 +52,7 @@ type PageProps = {
4952
title: string;
5053
};
5154

52-
const Page: React.SFC<PageProps> = ({ title, children }) => (
55+
const Page: React.FC<PageProps> = ({ title, children }) => (
5356
<main>
5457
<Head>
5558
<meta charSet="utf-8" />
@@ -72,7 +75,6 @@ const Page: React.SFC<PageProps> = ({ title, children }) => (
7275
<meta property="og:title" content="Javier Carrillo Milla" />
7376
<meta property="og:description" content="Freelance Software Engineer" />
7477

75-
<AnalyticsHeadScript />
7678
</Head>
7779

7880
<GlobalStyle />

‎components/Spacing.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ type BRProps = {
44
height?: number;
55
};
66

7-
export const BR = styled<BRProps, 'br'>('br')`
8-
height: ${({ height }) => `${height || 0.25}rem`};
7+
export const BR = styled('br')`
8+
height: ${({ height }: BRProps) => `${height || 0.25}rem`};
99
content: '';
1010
display: block;
1111
`;

‎components/Text.tsx

+11-15
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
1+
import styled from "styled-components";
12

2-
const Text: React.SFC = ({ children }) => (
3-
<p>
4-
{children}
5-
<style jsx={true}>
6-
{`
7-
margin: 1rem auto;
8-
font-size: 1rem;
9-
line-height: 1.6;
10-
white-space: pre-line;
11-
line-height: 1.75rem;
12-
margin-bottom: 0;
13-
`}
14-
</style>
15-
</p>
16-
);
3+
4+
const Text = styled('p')`
5+
margin: 1rem auto;
6+
font-size: 1rem;
7+
line-height: 1.6;
8+
white-space: pre-line;
9+
line-height: 1.75rem;
10+
margin-bottom: 0;
11+
12+
`;
1713

1814
export default Text;

‎components/button/Button.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ type ButtonProps = {
2121
variation?: keyof (typeof styles);
2222
};
2323

24-
const Button = styled<ButtonProps, 'button'>('button')`
24+
const Button = styled('button')`
2525
cursor: pointer;
2626
apperance: none;
2727
text-align: center;
2828
29-
${({ variation = 'fullWidth' }) => styles[variation]}
29+
${({ variation = 'fullWidth' }: ButtonProps) => styles[variation]}
3030
31-
border: 1px solid currentColor;
31+
border: 2px solid currentColor;
3232
border-radius: 4px;
3333
3434
color: currentColor;

‎components/button/ContactButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Link from 'next/link';
33
import Button from './Button';
44
import { BACKEND_URL } from '../../config/client';
55

6-
const ContactButton: React.SFC = ({ children }) => (
6+
const ContactButton: React.FC = ({ children }) => (
77
<Link href={`${BACKEND_URL}/contact`}>
88
<Button>
99
<b>

‎components/button/DownloadResume.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Button from './Button';
22
import resume from '@stringparser/cv/src/config';
33

4-
const DownloadResume: React.SFC = ({ children }) => (
4+
const DownloadResume: React.FC = ({ children }) => (
55
<a href={resume.pdf}>
66
<Button>
77
{children || 'Download PDF version'}

‎components/button/EmailMeButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EMAIL, BACKEND_URL } from '../../config/client';
55

66
const onMailto = (href: string) => () => window.location.assign(href);
77

8-
const EmailMeButton: React.SFC = () => (
8+
const EmailMeButton: React.FC = () => (
99
<Link href={`${BACKEND_URL}/contact`}>
1010
<Button variation="inline" onClick={onMailto(`mailto:${EMAIL}`)}>
1111
email

‎components/icon/ChevronDown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ type TriangleIconProps = {
66
height?: number;
77
};
88

9-
const TriangleDownIcon: React.SFC<TriangleIconProps> = ({
9+
const TriangleDownIcon: React.FC<TriangleIconProps> = ({
1010
size = iconSize,
1111
width = size,
1212
height = size,

‎components/keys/piano.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const Rect = styled.rect`
6666
}
6767
`;
6868

69-
const Piano: React.SFC<PianoProps> = (props) => (
69+
const Piano: React.FC<PianoProps> = (props) => (
7070
<svg
7171
strokeWidth="1"
7272
viewBox={`0 0 ${props.numberOfOctaves * getFullOctaveWith(props)} 80`}

‎components/layout/Flex.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type FlexProps = {
77
justifyContent?: React.CSSProperties['justifyContent'];
88
};
99

10-
const Flex = styled<FlexProps, 'div'>('div')`
10+
const Flex = styled('div')<FlexProps>`
1111
display: flex;
1212
flex-direction: ${({ flexDirection }) => flexDirection || 'row'};
1313

‎components/layout/FlexItem.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type FlexItemProps = {
44
flex?: React.CSSProperties['flex'];
55
};
66

7-
const FlexItem = styled<FlexItemProps, 'div'>('div')`
7+
const FlexItem = styled('div')`
88
display: inline-block;
99
position: relative;
1010
@@ -13,7 +13,7 @@ const FlexItem = styled<FlexItemProps, 'div'>('div')`
1313
max-height: 100%;
1414
}
1515
16-
${props => `
16+
${(props: FlexItemProps) => `
1717
flex: ${props.flex || 1};
1818
`}
1919
`;

0 commit comments

Comments
 (0)