aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/about/about.tsx
blob: e9e876f45b39b2fb486a7db8e880795b58ba40ed (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
import {Footer} from 'ts/components/footer';
import {TopBar} from 'ts/components/top_bar';
import {Profile} from 'ts/pages/about/profile';
import {ProfileInfo, Styles} from 'ts/types';
import {colors} from 'ts/utils/colors';
import {constants} from 'ts/utils/constants';
import {utils} from 'ts/utils/utils';

const teamRow1: ProfileInfo[] = [
    {
        name: 'Will Warren',
        title: 'Co-founder & CEO',
        description: `Smart contract R&D. Previously applied physics at Los Alamos \
                      Nat Lab. Mechanical engineering at UC San Diego. PhD dropout.`,
        image: '/images/team/will.jpg',
        linkedIn: 'https://www.linkedin.com/in/will-warren-92aab62b/',
        github: 'https://github.com/willwarren89',
        medium: 'https://medium.com/@willwarren89',
    },
    {
        name: 'Amir Bandeali',
        title: 'Co-founder & CTO',
        description: `Smart contract R&D. Previously fixed income trader at DRW. \
                      Finance at University of Illinois, Urbana-Champaign.`,
        image: '/images/team/amir.jpeg',
        linkedIn: 'https://www.linkedin.com/in/abandeali1/',
        github: 'https://github.com/abandeali1',
        medium: 'https://medium.com/@abandeali1',
    },
    {
        name: 'Fabio Berger',
        title: 'Senior Engineer',
        description: `Full-stack blockchain engineer. Previously software engineer \
                      at Airtable and founder of WealthLift. Computer science at Duke.`,
        image: '/images/team/fabio.jpg',
        linkedIn: 'https://www.linkedin.com/in/fabio-berger-03ab261a/',
        github: 'https://github.com/fabioberger',
        medium: 'https://medium.com/@fabioberger',
    },
    {
        name: 'Alex Xu',
        title: 'Director of Operations',
        description: `Strategy and operations. Previously digital marketing at Google \
                      and vendor management at Amazon. Economics at UC San Diego.`,
        image: '/images/team/alex.jpg',
        linkedIn: 'https://www.linkedin.com/in/alex-xu/',
        github: '',
        medium: '',
    },
];

const teamRow2: ProfileInfo[] = [
    {
        name: 'Leonid Logvinov',
        title: 'Engineer',
        description: `Full-stack blockchain engineer. Previously blockchain engineer \
                      at Neufund. Computer science at University of Warsaw.`,
        image: '/images/team/leonid.png',
        linkedIn: 'https://www.linkedin.com/in/leonidlogvinov/',
        github: 'https://github.com/LogvinovLeon',
        medium: '',
    },
    {
        name: 'Ben Burns',
        title: 'Designer',
        description: `Product, motion, and graphic designer. Previously designer \
                      at Airtable and Apple. Digital Design at University of Cincinnati.`,
        image: '/images/team/ben.jpg',
        linkedIn: 'https://www.linkedin.com/in/ben-burns-30170478/',
        github: '',
        medium: '',
    },
    {
        name: 'Philippe Castonguay',
        title: 'Dev Relations Manager',
        description: `Developer relations. Previously computational neuroscience \
                      research at Janelia. Statistics at Western University. MA Dropout.`,
        image: '/images/team/philippe.png',
        linkedIn: '',
        github: 'https://github.com/PhABC',
        medium: '',
    },
    {
        name: 'Brandon Millman',
        title: 'Senior Engineer',
        description: `Full-stack engineer. Previously senior software engineer at \
                      Twitter. Electrical and Computer Engineering at Duke.`,
        image: '/images/team/brandon.png',
        linkedIn: 'https://www.linkedin.com/company-beta/17942619/',
    },
];

const advisors: ProfileInfo[] = [
    {
        name: 'Fred Ehrsam',
        description: 'Co-founder of Coinbase. Previously FX trader at Goldman Sachs.',
        image: '/images/advisors/fred.jpg',
        linkedIn: 'https://www.linkedin.com/in/fredehrsam/',
        medium: 'https://medium.com/@FEhrsam',
        twitter: 'https://twitter.com/FEhrsam',
    },
    {
        name: 'Olaf Carlson-Wee',
        image: '/images/advisors/olaf.png',
        description: 'Founder of Polychain Capital. First hire at Coinbase. Angel investor.',
        linkedIn: 'https://www.linkedin.com/in/olafcw/',
        angellist: 'https://angel.co/olafcw',
    },
    {
        name: 'Joey Krug',
        description: `Co-CIO at Pantera Capital. Founder of Augur. Thiel 20 Under 20 Fellow.`,
        image: '/images/advisors/joey.jpg',
        linkedIn: 'https://www.linkedin.com/in/joeykrug/',
        github: 'https://github.com/joeykrug',
        angellist: 'https://angel.co/joeykrug',
    },
    {
        name: 'Linda Xie',
        description: 'Co-founder of Scalar Capital. Previously PM at Coinbase.',
        image: '/images/advisors/linda.jpg',
        linkedIn: 'https://www.linkedin.com/in/lindaxie/',
        medium: 'https://medium.com/@linda.xie',
        twitter: 'https://twitter.com/ljxie',
    },
];

export interface AboutProps {
    source: string;
    location: Location;
}

interface AboutState {}

const styles: Styles = {
    header: {
        fontFamily: 'Roboto Mono',
        fontSize: 36,
        color: 'black',
        paddingTop: 110,
    },
    weAreHiring: {
        fontSize: 30,
        color: colors.darkestGrey,
        fontFamily: 'Roboto Mono',
        letterSpacing: 7.5,
    },
};

export class About extends React.Component<AboutProps, AboutState> {
    public componentDidMount() {
        window.scrollTo(0, 0);
    }
    public render() {
        return (
            <div style={{backgroundColor: colors.lightestGrey}}>
                <DocumentTitle title="0x About Us"/>
                <TopBar
                    blockchainIsLoaded={false}
                    location={this.props.location}
                    style={{backgroundColor: colors.lightestGrey}}
                />
                <div
                    id="about"
                    className="mx-auto max-width-4 py4"
                    style={{color: colors.grey800}}
                >
                    <div
                        className="mx-auto pb4 sm-px3"
                        style={{maxWidth: 435}}
                    >
                        <div
                            style={styles.header}
                        >
                            About us:
                        </div>
                        <div
                            className="pt3"
                            style={{fontSize: 17, color: colors.darkestGrey, lineHeight: 1.5}}
                        >
                            Our team is a diverse and globally distributed group with backgrounds
                            in engineering, research, business and design. We are passionate about
                            decentralized technology and its potential to act as an equalizing force
                            in the world.
                        </div>
                    </div>
                    <div className="pt3 md-px4 lg-px0">
                        <div className="clearfix pb3">
                            {this.renderProfiles(teamRow1)}
                        </div>
                        <div className="clearfix">
                            {this.renderProfiles(teamRow2)}
                        </div>
                    </div>
                    <div className="pt3 pb2">
                        <div
                            className="pt2 pb3 sm-center md-pl4 lg-pl0 md-ml3"
                            style={{color: colors.grey, fontSize: 24, fontFamily: 'Roboto Mono'}}
                        >
                            Advisors:
                        </div>
                        <div className="clearfix">
                            {this.renderProfiles(advisors)}
                        </div>
                    </div>
                    <div className="mx-auto py4 sm-px3" style={{maxWidth: 308}}>
                        <div
                            className="pb2"
                            style={styles.weAreHiring}
                        >
                            WE'RE HIRING
                        </div>
                        <div
                            className="pb4 mb4"
                            style={{fontSize: 16, color: colors.darkestGrey, lineHeight: 1.5, letterSpacing: '0.5px'}}
                        >
                            We are seeking outstanding candidates to{' '}
                            <a
                                href={constants.URL_ANGELLIST}
                                target="_blank"
                                style={{color: 'black'}}
                            >
                                join our team
                            </a>
                            . We value passion, diversity and unique perspectives.
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        );
    }
    private renderProfiles(profiles: ProfileInfo[]) {
        const numIndiv = profiles.length;
        const colSize = utils.getColSize(numIndiv);
        return _.map(profiles, profile => {
            return (
                <div
                    key={`profile-${profile.name}`}
                >
                    <Profile
                        colSize={colSize}
                        profileInfo={profile}
                    />
                </div>
            );
        });
    }
}