-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (170 loc) · 8.85 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rebecca G. Estes</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" user-scaleable="no">
<link href='https://fonts.googleapis.com/css?family=Lato:400|Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="head">
<img src="image/shouldershot.jpg" alt="Rebecca Estes, web developer" id="headshot">
<h1>Rebecca G. Estes</h1>
<nav id="contact">
<a href="mailto:[email protected]"><i class="fa fa-envelope"></i></a>
<a href="https://www.linkedin.com/in/restes"><i class="fa fa-linkedin-square"></i></a>
<a href="http://www.twitter.com/calamity"><i class="fa fa-twitter-square"></i></a>
<a href="https://github.com/rebeccaestes"><i class="fa fa-github-square"></i></a>
</nav>
</div>
</header>
<div class="container wide">
<h2>I'm a DC-based full-stack web developer who loves building practical things that make people's lives easier—or better yet, more fun.</h2>
<h3>My main languages are JavaScript and Ruby on Rails. I believe in dreaming big, collaborating efficiently, and always paying extra for the guacamole.</h3>
</div>
<div class="container"><h4>Life To Date</h4>
<p>Please note: this is <strong>not my resume</strong>. <a href="resume.pdf" target="_blank">Download that</a> for a more detailed—and more conventional—recap of my experience and education.</p>
<div class="timeline_item">
<span class="date">02/87</span>
<span>Born</span>
<i class="fa fa-ambulance icon"></i>
</div>
<div class="timeline_item">
<span class="date">06/04</span>
<span>Perfected <a class="kitten-link">kitten photography skills</a> in Thimpu, Bhutan</span>
</div>
</div>
<div class="kitten-container">
<div class="kitten">
<i class="fa fa-times kitten-close"></i>
<img src="image/kitten.jpg" alt="kitten" class="kitten-img">
</div>
</div>
<div class="container">
<div class="timeline_item">
<span class="date">09/04-12/05</span>
<span>University of Virginia</span>
</div>
<div class="timeline_item">
<span class="date">01/06-05/08</span>
<span>Barnard College at Columbia University</span>
<ul class="timeline_note">
<li>Graduated cum laude with a B.A. in political science.</li>
</ul>
</div>
<div class="timeline_item">
<span class="date">11/09-03/11</span>
<span>Pew Environment Group, Web Intern/Contractor</span>
</div>
<div class="timeline_item">
<span class="date">03/11-04/12</span>
<span>The American Prospect, Publishing Fellow</span>
</div>
<div class="timeline_item">
<span class="date">04/12-08/15</span>
<span>NAFSA: Assoc. of International Educators, Web Systems Manager</span>
</div>
<div class="timeline_item">
<span class="date">10/15-01/16</span>
<span>Web Development Immersive at General Assembly</span>
<ul class="timeline_note">
<li>Learned <a href="https://generalassemb.ly/education/web-development-immersive">a lot</a>. Built <a href="#projects">cool stuff</a>.</li>
</ul>
</div>
<!-- <div class="timeline_item">
<span class="date">03/16-pres.</span>
<span id="exclamation"><strong>You(r Company) Could Be Here!</strong></span>
<i class="fa fa-rocket icon"></i>
</div> -->
<p>I'm currently working as a full-time front-end contractor with RP3 Agency, building out pages in Backbone, SASS, and JavaScript. I'm seeking a permanent position until the end of March.
</div>
<div class="container"><a id="projects"></a><h4>Projects</h4>
</div>
<div class="container">
<ul id="project_grid">
<li>
<figure>
<img src="image/readysetom.png" class="project_img">
<figcaption>
<a href="https://github.com/rebeccaestes/readysetom"><i class="fa fa-github"></i></a>
<a href="http://readysetom.herokuapp.com/"><i class="fa fa-link"></i></a>
</figcaption>
</figure>
<div class="project_about">
<h5>Ready Set OM</h5>
<p>An experiment in pairing React and Rails. Users create yoga poses and group them in sequences. <i class="fa fa-plus-square icon more"></i></p>
<div class="more_about">
<p>After achieving my my initial goal—a working app—I focused on improving the user experience. In particular, I gave users the option to share their sequences publicly, and integrated jQuery plugins that allowed drag-and-drop and search functionality when building sequences.</p>
<p>Additionally, in the course of building this project I created what is perhaps <a href="github.com/rebeccaestes/yoga_api">the only yoga API</a> on the entire internet. <i class="fa fa-minus-square icon less"></i></p>
</div>
</div>
</li>
<li>
<figure>
<img src="image/pansorius.png" class="project_img">
<figcaption>
<a href="https://github.com/rebeccaestes/pansorius"><i class="fa fa-github project-repo"></i></a>
<a href="http://pansorius.herokuapp.com/"><i class="fa fa-link"></i></a>
</figcaption>
</figure>
<div class="project_about">
<h5>Pansori.us</h5>
<p>A social platform that matches young Asian women with mentors. <i class="fa fa-plus-square icon more"></i></p>
<p class="project_repo"></p>
<div class="more_about">
<p>I worked alongside two other developers, a UX designer, and a product manager to build this networking app. I took the lead on converting the designer's mockups into CSS, including integrating and manipulating user information. The back-end was Rails with a Postgres database. <i class="fa fa-minus-square icon less"></i></p>
</div>
</div>
</li>
<li>
<figure>
<img src="image/heatmapr.png" class="project_img">
<figcaption>
<a href="https://github.com/MarkhamShofner/Project-3-API"><i class="fa fa-github"></i></a>
<a href="http://secure-ridge-6206.herokuapp.com/"><i class="fa fa-link"></i></a>
</figcaption>
</figure>
<div class="project_about">
<h5>Heatmapr</h5>
<p>A Node.js group project. Integrates Leaflet's mapping abilities and the Yelp API. <i class="fa fa-plus-square icon more"></i></p>
<div class="more_about">
<p>I worked on a team of four developers to build this app. We all worked together while planning the structure and styling, and also gathered at least daily to merge the branches each of us were working on. My main personal responsibilities were implementing and customizing the Leaflet API that serves as our backdrop, building out user authentication, and deployment. <i class="fa fa-minus-square icon less"></i></p>
</div>
</div>
</li>
<li>
<figure>
<img src="image/track12.png" class="project_img">
<figcaption>
<a href="https://github.com/rebeccaestes/project2"><i class="fa fa-github"></i></a>
<a href="http://track12.herokuapp.com"><i class="fa fa-link"></i></a>
</figcaption>
</figure>
<div class="project_about">
<h5>Track 12</h5>
<p>A social concert-tracking platform, built in Ruby on Rails. <i class="fa fa-plus-square icon more"></i></p>
<div class="more_about">
<p>During my first major project, I had time to build out extra functionality, like a robust friending system between users. <i class="fa fa-minus-square icon less"></i></p>
</div>
</div>
</li>
</ul>
</div>
<div class="container">
<p>Finally, I'm in the process of writing a set of introductory tutorials on React.js, suitable for anyone with intermediate Javascript experience. <a href="https://gist.github.com/rebeccaestes/af41586a2bc99c6696db">The first installment</a> walks you through setup and states, and introduces properties.</p>
</div>
<div class="container"><h4>Skills</h4>
<p>In a somewhat descending order:</p>
<p id="skills"><span>HTML</span> <span>CSS/SASS</span> <span>Javascript/jQuery</span> <span>Ruby/Rails</span> <span>Backbone</span> <span>Angular</span> <span>React</span> <span>PostgreSQL</span> <span>Git</span> <span>Bootstrap</span> <span>ActiveRecord</span> <span>MongoDB</span> <span>Express</span> <span>Node</span></p>
</div>
<div class="container">
<footer>
<p>© 2016 Rebecca G. Estes</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>