-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (178 loc) · 8.12 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sarah Showers | From the Wok to the Web</title>
<link rel="stylesheet" href="css/styles.css">
<!-- Include Font Awesome -->
<link rel="stylesheet" href="vendor/font-awesome-4.2.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="band" data-0="background-position:0px 0px;" data-500="background-position:0px -250px;">
<div class="container">
<div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
<h1>From the Wok to the Web</h1>
<a class="button" href="https://www.linkedin.com/pub/sarah-showers/3a/334/a86">by Sarah Showers</a>
</div>
</div>
</header>
<div class="band main">
<div class="container">
<div class="columns twelve offset-by-two">
<h2>The journey from Restaurant Manager to Web Developer</h2>
<p><strong>Sarah Showers is a British born Web Developer based in Silicon Valley, who brings 13 years of leadership and training to a new career.</strong> The sense of design showcases Sarah's personality, whilst the typography and lay-out makes it work aesthetically.</p>
<p>Below is a display of Sarah's work, so far. To see the code, click on the project of interest to be directed to its repo.</p>
</div>
<!-- slider for regular screens -->
<div class="columns twelve offset-by-two view ">
<div id="slider">
<ul class="slides">
<li class="slide view-fourth">
<img src="img/showersfamilychristmas.jpg" />
<a href="http://showersfamilychristmas.com/">
<div class="mask">
<h2>Showers Family Christmas</h2>
<p>Who wants to send an ordinary holiday greeting. This year, the Showers' sent a hidden link to their holiday website to share with their friends and family.</p>
<a href="#" class="info">Check it out</a>
</div>
</a>
</li>
<li class="slide view-fourth">
<img src="img/jobfinder.jpg"/>
<a href="https://github.com/derrickshowers/job-tracker">
<div class="mask">
<h2>Job Finder</h2>
<p>This gal and her team won third place at the 2014 DevelopHer Hack Day hosted by LinkedIn. A python app, being rebuilt by a husband and wife team that brings you a job tracker dashboard to track application status, calendar events, and your ever growing to-do list.</p>
<a href="#" class="info">Check it out</a>
</div>
</a>
</li>
<li class="slide view-fourth">
<img src="img/findme.jpg"/>
<a href="https://github.com/gopher-snakes-2014/teamfindme">
<div class="mask">
<h2>FindMe</h2>
<p>Leave your digital fingerprint on the world for future visitors to discover. Ruby on Rails application built for Dev Bootcamp final projects.</p>
<a href="#" class="info">Check it out</a>
</div>
</a>
</li>
<li class="slide view-fourth">
<img src="img/digi4.jpg"/>
<a href="https://github.com/Gunga/Digi4">
<div class="mask">
<h2>Digi4</h2>
<p>Digitally remastered four-in-a-row style game. A group project built for Dev Bootcamp that implements Ruby math-magic and JavaScript event handlers</p>
<a href="#" class="info">Check it out</a>
</div>
</a>
</li>
<li class="slide view-fourth">
<img src="img/hatch.jpg"/>
<a href="https://github.com/AndersEverett/Hatch">
<div class="mask">
<h2>Hatch</h2>
<p>Heard of Twitter? Check out Hatch, a social networking app. This is Lil' Twitter! Use of pure CSS to recreate the Twitter landing page as part of a Dev Bootcamp group project.</p>
<a href="#" class="info">Check it out</a>
</div>
</a>
</li>
<li class="slide view-fourth">
<img src="img/showersfamilychristmas.jpg" />
<a href="http://showersfamilychristmas.com/">
<div class="mask">
<h2>Showers Family Christmas</h2>
<p>Who wants to send an ordinary holiday greeting. This year, the Showers' sent a hidden link to their holiday website to share with their friends and family.</p>
<a href="#" class="info">Check it out</a>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- accordion for mobile -->
<div id="mobile-accordion" class="columns twelve offset-by-two">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">FindMe</a>
<div id="accordion-1" class="accordion-section-content">
<a href="https://github.com/gopher-snakes-2014/teamfindme"><p></a>Leave your digital fingerprint on the world for future visitors to discover. Ruby on Rails application built for Dev Bootcamp final projects.</p>
</div>
<a class="accordion-section-title" href="#accordion-1">Digi4</a>
<div id="accordion-1" class="accordion-section-content">
<a href="https://github.com/Gunga/Digi4"><p></a>Digitally remastered four-in-a-row style game. A group project built for Dev Bootcamp that implements Ruby math-magic and JavaScript event handlers</p>
</div>
<a class="accordion-section-title" href="#accordion-1">Hatch</a>
<div id="accordion-1" class="accordion-section-content">
<a href="https://github.com/AndersEverett/Hatch"><p></a>Heard of Twitter? Check out Hatch, a social networking app. This is Lil' Twitter! Use of pure CSS to recreate the Twitter landing page as part of a Dev Bootcamp group project.</p>
</div>
<a class="accordion-section-title" href="#accordion-1">Job Tracker</a>
<div id="accordion-1" class="accordion-section-content">
<a href="https://github.com/derrickshowers/job-tracker"><p></a>This gal and her team won third place at the 2014 DevelopHer Hack Day hosted by LinkedIn. A python app, being rebuilt by a husband and wife team that brings you a job tracker dashboard to track application status, calendar events, and your ever growing to-do list.</p>
</div>
</div>
</div>
</div>
<div class="columns six offset-by-two">
<h3>Cultural Blog</h3>
<p>COMING SOON! Sarah discusses some of the hot topics in the tech community today and also dives into some of the 'feels' that come with the adventure of bootcamp style learning.</p>
</div>
<div class="columns six">
<h3>Tech Blog</h3>
<p>COMING SOON! Read some of the a-ha moments from the journey to becoming a Web Developer and the continued learning, that is of course, never over.</p>
</div>
</div>
</div>
<!-- footer -->
<footer class="band main">
<hr>
<div class="container">
<div class="columns eight">
<p>Copyright © Sarah Showers 2014</p>
</div>
<div class="columns eight social">
<a href="https://twitter.com/sarahlshowers">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
<a href="https://www.linkedin.com/pub/sarah-showers/3a/334/a86">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</span>
</a>
<a href="https://github.com/sarahlshowers">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
</a>
<a href="mailto:[email protected]">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope-o fa-stack-1x"></i>
</span>
</a>
<br>
<br>
</div>
</div>
</footer>
<!-- Include jQuery -->
<script src="vendor/js/jquery.js"></script>
<script src="js/main.js"></script>
<!-- Include skrollr JavaScript -->
<script type="text/javascript" src="vendor/js/skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
forceHeight: false
});
</script>
</body>
</html>