-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (133 loc) · 10.4 KB
/
index.html
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
---
layout: default
css: [main]
---
<!-- INTRO -->
<div class="about-img flex-row-col mq-align-end fade-in">
<section class="mq-margin-left-50 home-vertical-center contain-text">
<svg height="1" width="100%" class="svg-line">
<line x1="0%" y1="0%" x2="100%" y2="100%" style="stroke:rgb(127,127,127); stroke-width:1"/>
</svg>
<div class="width-100pct flex-container justify-center ">
<h1 class="page-title text-center horizontal-center mq-pad-bottom-half-rem"><span class="responsive-line">Ricky</span> <span class="responsive-line">Holtz</span></h1>
</div>
<svg height="1" width="100%" class="svg-line">
<line x1="0%" y1="0%" x2="100%" y2="100%" style="stroke:rgb(127,127,127); stroke-width:1"/>
</svg>
<p class="hmargin-5vw text-center"> Developer Educator at Twilio. On a mission to improve developer experiences and build a better web.<p>
</section>
</div>
<!--
SKILLS
-->
<section class="flex-row flex-items-center justify-center mq-height-60vh" id="skills">
<h2 class="flex-header">Skills</h2>
<div class="flex-field skills-field contain-text">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" title="a diamond that is reminiscent of the logo for the sketch product by bohemian coding" class="display-block botpadding-half-rem">
<path d="M61,21.9c0-0.1,0-0.2-0.1-0.3c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1l-10-16c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1-0.1
c-0.1-0.1-0.2-0.2-0.3-0.2c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0-0.2-0.1-0.3-0.1c0,0,0,0-0.1,0c0,0,0,0,0,0H14c0,0,0,0,0,0c0,0,0,0-0.1,0
c-0.1,0-0.2,0-0.3,0.1c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0-0.1,0.1c0,0,0,0-0.1,0.1l-10,16c0,0,0,0.1,0,0.1
c0,0,0,0.1,0,0.1c0,0.1,0,0.2-0.1,0.3c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0.1,0,0.2,0.1,0.3c0,0,0,0.1,0,0.1c0,0.1,0.1,0.1,0.1,0.2l28,36
c0,0,0,0,0,0c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0,0.1,0c0,0,0,0,0,0
c0.1,0,0.2,0,0.3,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0.1,0,0.2,0,0.3,0c0,0,0,0,0,0
c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1-0.1c0,0,0.1,0,0.1-0.1c0,0,0,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0,0l28-36c0,0,0.1-0.1,0.1-0.2
c0,0,0-0.1,0-0.1C61,22.3,61,22.1,61,21.9C61,22,61,22,61,21.9C61,22,61,22,61,21.9z M13.9,8l6.5,13H5.8L13.9,8z M40.7,23L32,54.3
L23.3,23H40.7z M23.8,21L32,7.9L40.2,21H23.8z M33.8,7h14.6l-6.5,13L33.8,7z M22.1,20L15.6,7h14.6L22.1,20z M21.2,23l8.4,30.4L6,23
H21.2z M42.8,23H58L34.3,53.4L42.8,23z M43.6,21l6.5-13l8.1,13H43.6z"/>
</svg>
<h3>product design</h3>
<p class="botpadding-half-rem">I’m interested in the process, aesthetics, and human factors that go into awesome products.</p>
</div>
<div class="flex-field skills-field contain-text">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" title="a pair of headphones, meant to invoke the stereotype of listening to music while coding" class="display-block botpadding-half-rem">
<path d="M59,22c0-11.6-9.4-21-21-21H26C14.4,1,5,10.4,5,22v14.5C2.5,39.3,1,43,1,47c0,8.8,7.2,16,16,16c1.1,0,2.1-0.1,3.2-0.3
c0.5-0.1,0.8-0.5,0.8-1V32.3c0-0.5-0.3-0.9-0.8-1C19.1,31.1,18.1,31,17,31c-3.8,0-7.3,1.3-10,3.5V22C7,11.5,15.5,3,26,3h12
c10.5,0,19,8.5,19,19v12.5c-2.7-2.2-6.2-3.5-10-3.5c-1.1,0-2.1,0.1-3.2,0.3c-0.5,0.1-0.8,0.5-0.8,1v29.4c0,0.5,0.3,0.9,0.8,1
c1.1,0.2,2.1,0.3,3.2,0.3c8.8,0,16-7.2,16-16c0-4-1.5-7.7-4-10.5V22z M17,33c0.7,0,1.3,0,2,0.1v27.7C18.3,61,17.7,61,17,61
C9.3,61,3,54.7,3,47c0-3.5,1.3-6.6,3.4-9.1c0.3-0.1,0.5-0.3,0.6-0.6C9.5,34.6,13.1,33,17,33z M47,61c-0.7,0-1.3,0-2-0.1V33.1
c0.7-0.1,1.3-0.1,2-0.1c3.9,0,7.5,1.6,10.1,4.3c0.1,0.3,0.3,0.5,0.6,0.6c2.1,2.4,3.4,5.6,3.4,9.1C61,54.7,54.7,61,47,61z"/>
</svg>
<h3>front-end development</h3>
<p class="botpadding-half-rem">Coding is pretty zen — particularly when I'm working in Javascript. React, anyone?</p>
</div>
<div class="flex-field skills-field contain-text">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" title="a conversation bubble to represent the communication of research and results" class="display-block botpadding-half-rem">
<path d="M32,3C14.6,3,1,14,1,28c0,14.1,13.9,25.5,31,25.5c2.6,0,5.3-0.3,8.3-1l15.3,6.4C55.7,59,55.9,59,56,59
c0.2,0,0.4-0.1,0.6-0.2c0.3-0.2,0.4-0.5,0.4-0.9l-1-13.7c4.5-4.6,7-10.3,7-16.2C63,14,49.4,3,32,3z M54.3,43.1
c-0.2,0.2-0.3,0.5-0.3,0.8l0.9,12.6l-14.1-5.9c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0-0.1,0-0.2,0c-3,0.7-5.6,1-8.2,1C16,51.5,3,41,3,28
C3,15.1,15.7,5,32,5s29,10.1,29,23C61,33.6,58.7,38.8,54.3,43.1z"/>
</svg>
<h3>research & writing</h3>
<p class="botpadding-half-rem">I learn about my users through a variety of methods and communicate those needs clearly.</p>
</div>
</section>
<!--
PROJECTS
-->
<section class="flex-row align-items-baseline" id="projects">
<h2 class="flex-header">Projects</h2>
<div class="flex-field">
<a href="/work/magicbus-campaigns">
<img src="/assets/img/magicbus-campaigns/magicbus-campaigns-header.png" alt="a map icon with a bright purple path along it, invoking the feeling of a treasure map" class="flex-image greyscale" />
<h3 class="text-center">magicbus campaigns</h3></a>
<p class="text-center">MagicBus needed a way to open new routes with confidence. Campaigns help commuters provide a stronger signal that they're ready to ride. <a href="/work/magicbus-campaigns">read more... <span class="assistive-text">about magicbus campaigns</span></a></p>
</div>
<div class="flex-field">
<a href="/work/etal-health">
<img src="/assets/img/etal-health/etal-health-header.png" alt="two laptops and a phone with screens showing maps, an illustration of a doctor, and medical journal articles" class="flex-image greyscale" />
<h3 class="text-center">et al. health</h3></a>
<p class="text-center">et al. Health uses peer-reviewed medical journals to connect patients who have rare diseases with a physicians who can treat them. <a href="/work/etal-health">read more...<span class="assistive-text">about et all health</span></a></p>
</div>
<div class="flex-field">
<a href="/work/dance-dance">
<img src="/assets/img/dance-dance/bryan.png" alt="a long exposure photograph that shows bands of bright color spread across space in big, dramatic swirls" class="flex-image greyscale"/>
<h3 class="text-center">dance dance</h3></a>
<p class="text-center">I helped build sweater that uses accelerometers to turn dancing into a vibrant light show, and a platform for sharing motion data. <a href="/work/dance-dance">read more...<span class="assistive-text">about dance dance, a sweater that lights up while you dance.</span></a></p>
</div>
<div class="flex-field">
<a href="/work/aesthetic-notes">
<img src="/assets/img/notes/notes-header.png" alt="a grid of bright colors, text, and photographs" class="flex-image greyscale"/>
<h3 class="text-center">aesthetic notes</h3>
</a>
<p class="text-center">Reviewing notes is often a text-heavy experience. What might it look like if it were a little more visually oriented? <a href="/work/aesthetic-notes">read more... <span class="assistive-text">about the aesthetic note project</span></a></p>
</div>
<div class="flex-field">
<a href="/work/employee-community">
<img src="/assets/img/employee-community/employee-community__header.png" alt="three laptops show clean grids of content, and a hint of a browser plugin" class="flex-image greyscale" />
<h3 class="text-center">employee community</h3></a>
<p class="text-center">Sharing knowledge across organizations with an intranets is hard. I designed a contextual employee community to help solve the problem. <a href="/work/employee-community">read more... <span class="assistive-text">about the salesforce employee community design project</span></a></p>
</div>
<div class="flex-field">
<a href="/work/nickvision">
<img src="/assets/img/nickvision/nickvision-header.png" alt="a grid of brightly colored squares on a mock iPhone screen" class="flex-image greyscale" />
<h3 class="text-center">nickvision</h3></a>
<p class="text-center">My team wanted to build upon the Nickelodeon brand. We proposed an augmented reality experience called Nickvision. <a href="/work/nickvision">read more...<span class="assistive-text">about nickvision, an augmented reality application concept</span></a></p>
</div>
</section>
<!--
CONTACT
-->
<section class="flex-row vmargin-2rem" id="contact">
<div class="flex-field">
<h2 class="flex-row__title">Let’s Talk</h2>
</div>
<div class="flex-field">
<dl>
<dt class="h3">email:</dt>
<dd>hello[at]rickyholtz[dot]com</dd>
<dt class="h3">twitter:</dt>
<dd><a href="http://twitter.com/ayyrickay" target="_blank"> @ayyrickay <span class="assistive-text">is my twitter handle, where I try to be clever.</span></a></dd>
<dt class="h3">instagram:</dt>
<dd><a href="http://instagram.com/ayyrickay" target="_blank">@ayyrickay <span class="assistive-text">is my instagram handle. You’ll discover that it’s mostly landscapes, with a chance of selfies.</span></a></dd>
<dt class="h3">github:</dt>
<dd><a href="http://github.com/ayyrickay" target="_blank">@ayyrickay <span class="assistive-text">is my github username — click to check out my repositories, including the source code for this site.</span></a></dd>
<dt class="h3">resume:</dt>
<dd><a href="/assets/documentation/resume.rickyholtz.pdf" target="_blank"> [PDF]<span class="assistive-text">is a pdf copy of my resume — an HTML version is on the way!</span></a></dd>
</dl>
</div>
<div class="flex-field">
</div>
</section>