Skip to content

Commit bb56117

Browse files
davepackdavepack
committed
adds skills section with project filter
1 parent e450808 commit bb56117

File tree

7 files changed

+224
-69
lines changed

7 files changed

+224
-69
lines changed

‎src/components/header.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,23 +40,22 @@ const styles = StyleSheet.create({
4040
paddingHorizontal: '1.0875rem',
4141
},
4242
titleText: {
43-
marginBottom: 0,
4443
fontWeight: '100',
4544
letterSpacing: 2,
45+
marginBottom: 0,
4646
},
4747
subtitleText: {
4848
color: 'whitesmoke',
4949
fontWeight: '100',
50-
marginBottom: 0,
5150
letterSpacing: 1,
52-
// marginTop: 15,
51+
marginBottom: 0,
5352
},
5453
locationText: {
5554
color: 'whitesmoke',
5655
fontWeight: '100',
56+
letterSpacing: 1,
5757
marginBottom: 0,
5858
marginTop: 5,
59-
letterSpacing: 1,
6059
},
6160
});
6261

‎src/components/text.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React from 'react';
2-
import { StyleSheet, Text as RNText } from 'react-native';
2+
import { StyleSheet, Text as RNText, View } from 'react-native';
33

4-
const Text = ({ style, type = 'p', children, ...props }) => {
4+
const Text = ({
5+
style,
6+
textStyle,
7+
type = 'p',
8+
headingLine = false,
9+
children,
10+
...props
11+
}) => {
512
return (
613
<RNText style={[styles.base, styles[type], style]} {...props}>
714
{children}
@@ -12,28 +19,23 @@ const Text = ({ style, type = 'p', children, ...props }) => {
1219
const styles = StyleSheet.create({
1320
h1: {
1421
fontSize: '2.25rem',
15-
fontWeight: 'bold',
16-
marginBottom: '1.45rem',
22+
marginBottom: '1rem',
1723
},
1824
h2: {
1925
fontSize: '1.62671rem',
20-
fontWeight: 'bold',
21-
marginBottom: '1.45rem',
26+
marginBottom: '1rem',
2227
},
2328
h3: {
2429
fontSize: '1.38316rem',
25-
fontWeight: 'bold',
26-
marginBottom: '1.45rem',
30+
marginBottom: '1rem',
2731
},
2832
h4: {
2933
fontSize: '1rem',
30-
fontWeight: 'bold',
31-
marginBottom: '1.45rem',
34+
marginBottom: '1rem',
3235
},
3336
h5: {
3437
fontSize: '0.85028rem',
35-
fontWeight: 'bold',
36-
marginBottom: '1.45rem',
38+
marginBottom: '1rem',
3739
},
3840
p: {
3941
fontSize: 16,

‎src/data.js‎

Lines changed: 57 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,71 @@ export const profile = {
33
first: 'Dave',
44
last: 'Pack',
55
},
6-
title: 'Front End Engineer | UI Prototyping',
6+
title: 'Front End Engineer',
77
location: 'Mountain View, CA',
88
blurb:
9-
'I’m a big picture thinker. I love ideas and problem solving, learning about everything, finding connections and deep insights, thinking outside the box, and imagining the future.',
9+
'I’m a big picture thinker. I love ideas and problem solving, learning about everything, finding connections and deep insights, thinking outside the box, and creating the future.',
1010
profilePic: 'dave_profile.jpg',
11+
links: [
12+
['https://twitter.com/dave_pack', 'Twitter'],
13+
['https://github.com/davepack', 'GitHub'],
14+
['https://www.linkedin.com/in/dpack', 'LinkedIn'],
15+
],
16+
};
17+
18+
export const skills = {
19+
'react-native': 'React Native',
20+
react: 'React',
21+
javascript: 'JavaScript',
22+
'front-end': 'Front End',
23+
'open-source': 'Open Source',
24+
'api-design': 'API Design',
25+
'ui-design': 'UI Design',
26+
'mobile-design': 'Mobile Design',
27+
ux: 'UX',
28+
firebase: 'Firebase',
29+
'realm-db': 'Realm Mobile DB',
1130
};
1231

1332
export const projects = [
1433
{
15-
title: 'react-native-safe-area-view',
34+
title: 'Safe Area View for React Native',
35+
mainImage: 'SafeArea.jpg',
1636
blurb:
17-
'OSS React Native library for supporting Safe Area insets on iPhone X.',
37+
'OSS React Native library for supporting Safe Area insets on iPhone X. Originally written for react-navigation, then extracted to its own library.',
38+
tags: [
39+
'react-native',
40+
'react',
41+
'javascript',
42+
'open-source',
43+
'api-design',
44+
'front-end',
45+
'mobile-design',
46+
],
1847
roles: ['creator', 'active maintainer'],
19-
links: ['https://github.com/react-community/react-native-safe-area-view'],
48+
links: [
49+
[
50+
'https://github.com/react-community/react-native-safe-area-view',
51+
'GitHub',
52+
],
53+
],
54+
},
55+
{
56+
title: 'KnoWhy by Book of Mormon Central',
57+
mainImage: 'KnoWhy.jpg',
58+
blurb: 'Cross platform app written in React Native (JavaScript).',
59+
tags: [
60+
'react-native',
61+
'react',
62+
'javascript',
63+
'firebase',
64+
'realm-db',
65+
'front-end',
66+
'ui-design',
67+
'ux',
68+
'mobile-design',
69+
],
70+
roles: ['designer', 'developer'],
71+
links: [['https://expo.io/@davepack/knowhy', 'Run app in Expo.']],
2072
},
2173
];

‎src/images/KnoWhy.jpg‎

2.19 MB
Loading

‎src/images/SafeArea.jpg‎

154 KB
Loading

‎src/layouts/index.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -627,9 +627,3 @@ pre tt:after {
627627
font-size: 100%;
628628
}
629629
}
630-
631-
/* custom styles */
632-
633-
.profile-pic {
634-
box-shadow: 3px 3px 15px gray;
635-
}

‎src/pages/index.js‎

Lines changed: 150 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,173 @@
11
import React from 'react';
22
import Link from 'gatsby-link';
3-
import { Image, StyleSheet, View } from 'react-native';
3+
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
44
import { ExLink, Section, Text } from '../components';
55

6-
import { profile, projects } from '../data';
6+
import { profile, skills, projects } from '../data';
77
import profilePic from '../images/dave_profile.jpg';
88

9-
const IndexPage = () => (
10-
<Section>
11-
<View style={styles.topContainer}>
12-
<Image
13-
source={profilePic}
14-
style={styles.profilePic}
15-
className="profile-pic"
16-
resizeMode
17-
/>
18-
<Text>{profile.blurb}</Text>
19-
</View>
20-
<View style={styles.socialLinksContainer}>
21-
<Text>
22-
<ExLink
23-
to="https://www.linkedin.com/in/dpack/"
24-
style={{ textDecoration: 'none', color: 'lightsteelblue' }}
25-
>
26-
LinkedIn
27-
</ExLink>
28-
{' | '}
29-
<ExLink
30-
to="https://github.com/davepack"
31-
style={{ textDecoration: 'none', color: 'lightsteelblue' }}
32-
>
33-
GitHub
34-
</ExLink>
35-
</Text>
36-
</View>
37-
</Section>
9+
let colors = {
10+
steelblue: 'steelblue',
11+
lightSteelBlue: '#a3c2db',
12+
}
13+
14+
let SectionHeading = ({children}) => (
15+
<View
16+
style={[styles.headingContainer]}
17+
>
18+
<View style={styles.headingLine} />
19+
<Text type='h2' style={{marginBottom: 0, marginHorizontal: 20}}>{children}</Text>
20+
<View style={styles.headingLine} />
21+
</View>
3822
);
3923

24+
class IndexPage extends React.Component {
25+
state = {
26+
selectedTag: false,
27+
};
28+
29+
pressSkillTag = selectedTag => {
30+
this.setState({ selectedTag });
31+
};
32+
33+
render() {
34+
let { selectedTag } = this.state;
35+
return (
36+
<Section>
37+
<View style={styles.topContainer}>
38+
<Image
39+
source={profilePic}
40+
style={styles.profilePic}
41+
className="profile-pic"
42+
/>
43+
<View style={{ flex: 1 }}>
44+
<Text style={styles.blurbText}>{profile.blurb}</Text>
45+
<Text style={styles.linksText}>
46+
{profile.links.map(([to, title], i) => (
47+
<React.Fragment>
48+
<ExLink to={to}>{title}</ExLink>
49+
{i === profile.links.length - 1 ? '' : ' | '}
50+
</React.Fragment>
51+
))}
52+
</Text>
53+
</View>
54+
</View>
55+
<View style={[styles.sectionContainer, styles.skillsSectionContainer]}>
56+
<SectionHeading>
57+
Skills
58+
</SectionHeading>
59+
<View style={{alignItems: 'center', marginBottom: '1rem'}}>
60+
<Text>Click/tap a skill to see relevant projects.</Text>
61+
</View>
62+
<View style={styles.skillsContainer}>
63+
{Object.entries(skills).map(([tag, label]) => {
64+
let backgroundColor = 'steelblue';
65+
let color = 'white';
66+
67+
if (selectedTag === tag) {
68+
backgroundColor = 'whitesmoke';
69+
color = 'steelblue';
70+
}
71+
72+
return (
73+
<TouchableOpacity
74+
style={[styles.skillContainer, {backgroundColor}]}
75+
onPress={() => this.pressSkillTag(tag)}
76+
>
77+
<Text style={[styles.skillText, {color}]}>{label}</Text>
78+
</TouchableOpacity>
79+
);
80+
})}
81+
</View>
82+
<TouchableOpacity onPress={() => this.pressSkillTag(false)} style={[styles.skillContainer, {alignSelf: 'center', backgroundColor: !selectedTag ? 'whitesmoke' : 'steelblue'}]}>
83+
<Text style={{color: !selectedTag ? 'steelblue' : 'white'}}>{'\u00d7 '}Clear</Text>
84+
</TouchableOpacity>
85+
</View>
86+
<View style={[styles.sectionContainer, styles.projectsContainer]}>
87+
<SectionHeading>
88+
Projects
89+
</SectionHeading>
90+
{projects.map(({ title, blurb, tags, roles, links }, i) => {
91+
if (selectedTag && !tags.includes(selectedTag)) {
92+
return null;
93+
}
94+
95+
return (
96+
<View style={styles.projectContainer}>
97+
<Text type="h3">{title}</Text>
98+
<Text>{blurb}</Text>
99+
</View>
100+
);
101+
})}
102+
</View>
103+
</Section>
104+
);
105+
}
106+
}
107+
40108
const styles = StyleSheet.create({
41-
topContainer: {
109+
headingContainer: {
42110
flexDirection: 'row',
43111
alignItems: 'center',
112+
marginBottom: '1rem',
113+
},
114+
headingLine: {
115+
flex: 1,
116+
borderBottomWidth: 2,
117+
borderBottomColor: colors.lightSteelBlue,
118+
},
119+
topContainer: {
120+
flexDirection: 'row',
121+
alignItems: 'flex-start',
122+
marginBottom: 20,
44123
},
45124
profilePic: {
46125
height: 80,
47126
width: 80,
48127
marginRight: 20,
49128
borderRadius: 40,
50-
shadowColor: 'black',
51-
shadowOffset: {
52-
height: 10,
53-
},
54-
shadowOpacity: 0.8,
55-
shadowRadius: 20,
56-
// borderWidth: 1,
57-
// borderColor: 'pink',
129+
'box-shadow': '3px 3px 15px gray',
130+
},
131+
blurbText: {
132+
//
133+
},
134+
linksText: {
135+
marginTop: 15,
136+
fontWeight: '100',
137+
},
138+
sectionContainer: {
139+
marginBottom: 40,
140+
},
141+
skillsSectionContainer: {
142+
//
58143
},
59-
socialLinksContainer: {
144+
skillsContainer: {
60145
flexDirection: 'row',
146+
flexWrap: 'wrap',
61147
justifyContent: 'center',
62-
marginTop: 10,
148+
},
149+
skillContainer: {
150+
borderRadius: 15,
151+
paddingHorizontal: 8,
152+
paddingVertical: 3,
153+
backgroundColor: 'steelblue',
154+
marginRight: 5,
155+
marginBottom: 5,
156+
},
157+
skillText: {
158+
color: 'white',
159+
},
160+
projectsContainer: {
161+
//
162+
},
163+
projectContainer: {
164+
paddingHorizontal: 20,
165+
paddingVertical: 10,
166+
marginBottom: 20,
167+
borderLeftWidth: 4,
168+
borderLeftColor: colors.lightSteelBlue,
169+
// borderRightWidth: 4,
170+
// borderRightColor: 'steelblue',
63171
},
64172
});
65173

0 commit comments

Comments
 (0)