-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwebsamples.html
More file actions
315 lines (286 loc) · 18.5 KB
/
websamples.html
File metadata and controls
315 lines (286 loc) · 18.5 KB
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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>BuiltByCooper - Web Samples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsAAAAAAAAARwAAADkAAAAAAAAAAAAAAAAAAAALAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAHYAAAC9AAAAAAAAAGMAAAC8AAAAAAAAAAAAAAAAAAAAvgAAAHkAAAAIAAAAAAAAAAAAAAABAAAATQAAANoAAAD+AAAAmAAAAAAAAAAVAAAA9gAAABUAAAAAAAAAAAAAAJEAAAD9AAAA3gAAAFQAAAABAAAArAAAAP8AAADJAAAARAAAAAAAAAAAAAAAAAAAALsAAABlAAAAAAAAAAAAAAAAAAAAMgAAALQAAAD/AAAAuAAAALgAAAD/AAAAtAAAADIAAAAAAAAAAAAAAAAAAABoAAAAuQAAAAAAAAAAAAAAAAAAAEQAAADJAAAA/wAAAKwAAAABAAAAVAAAAN4AAAD9AAAAkQAAAAAAAAAAAAAAFwAAAPYAAAAUAAAAAAAAAJkAAAD+AAAA2gAAAE0AAAABAAAAAAAAAAAAAAAIAAAAeQAAAL4AAAAAAAAAAAAAAAAAAADAAAAAYgAAAAAAAAC9AAAAdgAAAAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALAAAAAAAAAAAAAAAAAAAAOwAAAEcAAAAAAAAACwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAP//AAD//wAA//8AAPTvAADE4wAABGAAAARgAAAGIAAABiAAAMcjAAD3LwAA//8AAP//AAD//wAA//8AAA==" rel="icon" type="image/x-icon">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92893041-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<!-- Page Content -->
<div class="container-fluid"> <!-- begin container -->
<div class="row" id="web-intro"><!-- text web intro seciton -->
<div class="col-md-12"><!-- col 12 -->
<h1>Web Samples</h1>
<hr>
<p>
Private client work available upon request. <br>
[ <a href="code.html">see code samples</a> , <a href="index.html">go home</a> , <a href="http://www.blog.builtbycooper.com"> my dev blog </a>]
<p>
</div><!-- end col 12 -->
</div><!-- end web intro -->
</div><!-- end container -->
<div id="work"> <!-- begin body section, AKA "work" -->
<div class="inner"> <!-- inner wrapper -->
<div class="row"><!-- row 1 -->
<div class="portfolio-thumb pthumb1"><!-- card 1 -->
<img src="assets/images/development.png">
<h3>Albatross Creative Collective</h3>
<p>Complete design and development of a site from start to finish. "See our work" video courtesy of <a href="http://www.herkoimagery.com" target="_blank">Alex Herko</a></p>
<hr>
<h4><a href="#" data-toggle="modal" data-target="#myModal">Learn More</a>
<a target="_blank" href="http://www.albatrosscc.com">Visit Site</a></h4>
</div><!-- end card 1 -->
<div class="portfolio-thumb"><!-- card 2-->
<img src="assets/images/coding.png">
<h3>Brandish Concept Site</h3>
<p>Built an interactive particle logo (based on tut from bricksdev) and site animations. Aided in design. Partner credit: <a href="mattmacneil.com" target="_blank">Matt Macneil</a></p>
<hr>
<h4><a href="#" data-toggle="modal" data-target="#myModal2">Learn More</a>
<a target="_blank" href="http://brandish.builtbycooper.com">Visit Site</a></h4>
</div><!-- end card 2 -->
</div><!-- end row 1 -->
<div class="row"><!-- row 2 -->
<div class="portfolio-thumb"><!-- card 3 -->
<img src="assets/images/design.png">
<h3>Marconi Development Group</h3>
<p>Wrote and edited all site copy. UI/UX and Design work. Site credit: <a href="mattmacneil.com" target="_blank">Matt Macneil</a> </p>
<hr>
<h4><a href="#" data-toggle="modal" data-target="#myModal3">Learn More</a>
<a target="_blank" href="http://marconidgroup.com/">Visit Site</a></h4>
</div><!-- end card 3 -->
<div class="portfolio-thumb"><!-- card 4 -->
<img src="assets/images/graphic.png">
<h3>The Fit Fiture</h3>
<p>Co-founded company in 2013. Extensive design, UI/UX, and content work. Site credit <a href="mattmacneil.com" target="_blank">Matt Macneil</a></p>
<hr>
<h4><a href="#" data-toggle="modal" data-target="#myModal4">Learn More</a>
<a target="_blank" href="http://www.kingsofcalabria.com/fittest">Visit Site</a></h4>
</div><!-- end card 4 -->
</div><!-- end row 2 -->
<div class="row"><!-- row 3 -->
<div class="portfolio-thumb">
<img src="assets/images/responsive.png">
<h3>Flat Design "Frankensite"</h3>
<p>An ode to Flat Design principles patched together from design tutorials. I do not own the images! (I own some of the graphics)</p>
<hr>
<h4><a href="#" data-toggle="modal" data-target="#myModal5">Learn More</a>
<a target="_blank" href="http://flat.builtbycooper.com/">Visit Site</a></h4>
</div>
<div class="portfolio-thumb">
<img src="assets/images/webdesign.png">
<h3>Algorithm/Data Structure Quiz</h3>
<p>I built a javascript based timed exam to help my class prep for our final. Images for the problems are curtesy of <a target="_blank" href="http://swamiiyer.net/">Professor Iyer</a></p>
<hr>
<h4><a href="#" data-toggle="modal" data-target="#myModal6">Learn More</a>
<a target="_blank" href="http://exam.builtbycooper.com/">Visit Site</a></h4>
</div>
</div><!-- end row 3 -->
<div class="row"><!-- row 4 -->
<div class="portfolio-thumb">
<img src="assets/images/coding.png"></a>
<h3>Current: Refactoring this Site!</h3>
<p>Using good UI/UX principles, new skills in SASS, Gulp, and JS, I will build a better portfolio.</p>
<hr>
<h4><a href="http://www.blog.builtbycooper.com">See Dev Blog</a></h4>
</div>
<div class="portfolio-thumb">
<img src="assets/images/idea.png"></a>
<h3>The Next Idea...</h3>
<p>In an effort to learn the MEAN stack, I am designing an SPA/game to learn the command line.</p>
<hr>
<h4><a href="http://www.blog.builtbycooper.com">See Dev Blog</a></h4>
</div>
</div><!-- end row 4 -->
</div><!-- end inner -->
<!-- BEGIN MODAL SECTION -->
<!-- Albatross Modal -->
<div class="modal fade custom" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<!-- dummy spacer -->
<div class="col-md-2"></div>
<!-- content divs -->
<div class="col-md-8">
<h2>Background</h2>
<p>Albatross Creative Collective is an idea born out of work my partner and I do for a Country Club media company.
After seeing a need in the Country Club space for media services, we decided to move in by
targeting upscale country clubs with a wide range of brand and media services.
</p>
<h2>My Role</h2>
<p>I mocked and coded the site from scratch. The site is simple, but our target demo ranges from 50-65, so complex design and interfaces would be ill-advised.</p>
<h2>Challenges</h2>
<p>The main challenge on this project was the speed. This site went from concept to creation to hosting in 3 weeks in an attempt start selling clubs before winter 2016.</p>
</div><!-- end col 8 -->
</div><!-- end row -->
</div> <!-- end modal body -->
</div><!-- end modal content -->
</div><!-- end modal dialogue -->
</div><!-- end modal 1 -->
<!-- Brandish Modal -->
<div class="modal fade custom" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<!-- dummy spacer -->
<div class="col-md-2"></div>
<!-- content divs -->
<div class="col-md-8">
<h2>Background</h2>
<p>
Client wanted a visually interesting and interactive site for their new Agency. While concepting the site with partner Matt MacNeil, I came up with the idea of an interactive logo based on a particle-image found on a competitor's site.
</p>
<h2>My Role</h2>
<p>
I had a small part in the design of the site (credit Matt MacNeil). I also created and coded the scrolling site animations. My main project was the development and testing of the interactive particle logo.
</p>
<h2>Challenges</h2>
<p>
Learning new technology - html5 canvas and particle "physics". <br>
Specific challenge: adapting mouse position after a window has been resized. Solution: re-calculating mouse position dynamically on a timed function to account for window changes.
</p>
</div><!-- end col 8 -->
</div><!-- end row -->
</div> <!-- end modal body -->
</div><!-- end modal content -->
</div><!-- end modal dialogue -->
</div><!-- end modal 2 -->
<!-- Margconi Modal -->
<div class="modal fade custom" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<!-- dummy spacer -->
<div class="col-md-2"></div>
<!-- content divs -->
<div class="col-md-8">
<h2>Background</h2>
<p>
Clients did not have the mental bandwith to provide copy for us.
</p>
<h2>My Role</h2>
<p>I Interviewed the clients to garner as much information as possible for a B2B site. After the interview phase, I sourced their pitch deck for more information and went from there.</p>
<h2>Challenges</h2>
<p>Capturing a company's vision in my own language with little input from the clients themselves. </p>
</div><!-- end col 8 -->
</div><!-- end row -->
</div> <!-- end modal body -->
</div><!-- end modal content -->
</div><!-- end modal dialogue -->
</div><!-- end modal 3 -->
<!-- Flat Site Modal -->
<div class="modal fade custom" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<!-- dummy spacer -->
<div class="col-md-2"></div>
<!-- content divs -->
<div class="col-md-8">
<h2>Background</h2>
<p>I recently fell in love with flat design (and minimalism, but that's another story) and sought out some design and development tutorials to get into it. A lot of the resources (images, sprites etc.) are sourced from the tuts. </p>
<h2>My Role</h2>
<p>I built this site from a few different tutorial projects and graphics made in illustrator.</p>
</div><!-- end col 8 -->
</div><!-- end row -->
</div> <!-- end modal body -->
</div><!-- end modal content -->
</div><!-- end modal dialogue -->
</div><!-- end modal 4 -->
<!-- Fit Future Modal -->
<div class="modal fade custom" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<!-- dummy spacer -->
<div class="col-md-2"></div>
<!-- content divs -->
<div class="col-md-8">
<h2>The Story</h2>
<p>When I got back from the Army in 2014 it was very difficult to shift gears. After working as a security guard and feeling very unfulfilled, My sister and I decided to start a company together.
The idea was simple, personal training and health coaching live, over web-cam. With my background in fitness and my sister's background as a health coach, we felt we could pull it off. </br>
We immediately ran into countless hurdles. Together we sourced help from the SBDC, SCORE, and personal mentors to build a viable business plan. We put all the money we had into a developer and started concepting. </br>
Later in the process we applied for and were granted legal assistance from the Harvard Transactional Law Clinic. It was through them that major legal concerns arose in regards to our classification of independant contractors during the period of our first revenue.</br>
After 2 years, countless hours, and everyting we had as a team, we shut it down due to longevity concerns and well-funded competitors emerging in the marketplace (We mostly blame Oprah and you can ask me why). </br>
However, despite the business closing, it was a pivotal time in my life. Because of our endless troubles trying to shoe-string a working platform, I was motivated to learn web development. When the business ended, I decided to pursue Computer Science as a scholastic option. My CS career then began on Khan Academy with 4th grade arithmetic, but that's another story.</br>
</p>
<h2>My Role</h2>
<p>Co-developed and ran the business. I learned everything on the fly to be able to handle the day to day operations including bookkeeping, human-resources practices, Massachusetts employee law, interviewing techinques, and more. </p>
</div><!-- end col 8 -->
</div><!-- end row -->
</div> <!-- end modal body -->
</div><!-- end modal content -->
</div><!-- end modal dialogue -->
</div><!-- end modal 5 -->
<!-- Java Music Modal -->
<div class="modal fade custom" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<!-- dummy spacer -->
<div class="col-md-2"></div>
<!-- content divs -->
<div class="col-md-8">
<h2>Background</h2>
<p>
I took Advanced Data Structures and Algorithms in the fall of 2016. The class used Java to learn about, construct, and utilize everything from priority queues to hash tables. As the final approached, I wanted to make something that would help my peers and I succeed (a group of us were together through over a year of programming classes). <br>
I settled on a timed practice exam. Research shows active practice aids retention better than passive learning techniques. Using Professor Iyer's study materials as questions, I created the quiz with html, css, and javascript. <br>
</p>
<h2>My Role</h2>
<p>
I Built and hosted the site. The backend for the quiz is vanilla javascript and could be optimized. Answers are stored in an array and checked in linear order. The timer function auto-submits answers when the timer hits 0:00.
</p>
<h2>Challenges</h2>
<p>
After relying on jQuery, writing vanilla javascript was a challenge. There are still some bugs that I will be returning to in the future.
</p>
</div><!-- end col 8 -->
</div><!-- end row -->
</div> <!-- end modal body -->
</div><!-- end modal content -->
</div><!-- end modal dialogue -->
</div><!-- end modal 6 -->
<!-- END MODAL SECTION -->
</div><!-- end Work section -->
</body>
<!-- scripts, yo -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>