-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
236 lines (205 loc) · 12.3 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
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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>camille mauban | portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/normalize-css/normalize.css" />
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" />
<!-- endbower -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Old+Standard+TT:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<main class="container">
<header id="main-header">
<h1></h1>
<nav class="nav">
<a href="#home" class="active">Home</a>
<a href="#portfolio" class="">Portfolio</a>
<a href="#contact" class="">Contact</a>
<!-- <a href="#blog" class="">Blog</a> -->
</nav>
<a href="#" class="hamburger fa fa-bars"></a>
<nav class="hamburger-nav">
<ul>
<li><a href="#home" class="">Home</a></li>
<li><a href="#portfolio" class="">Portfolio</a></li>
<li><a href="#contact" class="">Contact</a></li>
<!-- <li><a href="#blog" class="">Blog</a></li> -->
</ul>
</nav>
</header>
<section class="main-content">
<section id="home" class="panel active">
<div class="intro">
<h2 class="name">Camille Mauban</h2>
<h4 class="title">Front End Developer</h3>
<p class="about">I'm a recent graduate from the Front End Engineering program at <a href="http://theironyard.com/courses/front-end-engineering/" target="_blank">The Iron Yard</a> in Durham, NC.
I am looking for a position where I can utilize my UI skills as well as continue to learn. I am passionate about building a clean, modern user interface and value responsive design. When I'm not on a computer, I'm either watercoloring, binge watching New Girl, or cheering for my Green Bay Packers.</p>
<section class="social-media">
<a href="http://www.twitter.com/cmaubs" target="_blank" class="fa fa-twitter fa-2x"></a>
<a href="https://www.linkedin.com/in/camillemauban" target="_blank" class="fa fa-linkedin-square fa-2x"></a>
<a href="mailto:[email protected]" target="_blank" class="fa fa-envelope-o fa-2x"></a>
<a href="https://github.com/cmauban" target="_blank" class="fa fa-github fa-2x"></a>
</section>
</div>
</section> <!-- END HOME -->
<section id="portfolio" class="panel">
<h3 class="heading">Portfolio</h3>
<article>
<img src="img/ziptrip.jpg"/>
<div class="title-desc">
<h2 class="project-title">Ziptrip</h2>
<p class="desc">Ziptrip is a single-page application that generates a personalized road trip for you based
on your taste in food, music, sports and hobbies. It finds the major cities along the route and suggests stopping points.
Ziptrip was my final project for The Iron Yard and presented first at Demo Day. This AngularJs application was built in less
than two and a half weeks.</p>
<p class="links"><a href="https://ziptrip.firebaseapp.com/#/" target="_blank">visit site</a> | <a href="https://github.com/Roadtripp/roadtrip-gui" target="_blank">view code on GitHub</a></p>
</div>
</article>
<!-- <article>
<img src="img/stackoverflow.jpg"/>
<div class="title-desc">
<h2 class="project-title">stack overflow</h2>
<p class="desc">This was my first cross-collaboration with two ruby on rails students, first exposure with Angularjs, and really integrating live API data. We were to re-create stack overflow where users are available
to create an account, post a question, answer a question and rate answers. This project was created in three days.</p>
<p class="links"><a href="https://blacajojo--gui.firebaseapp.com/#/home" target="_blank">visit site</a> | <a href="https://github.com/BlaCaJoJo/gui" target="_blank">view code on GitHub</a></p>
</div>
</article> -->
<article>
<img src="img/jacstat.jpg"/>
<div class="title-desc">
<h2 class="project-title">Stat tracker</h2>
<p class="desc">jacStat Tracker is a mobile web application that tracks the daily activity of a user. You are able to add an activity on a specific date and see your overall stats.
This was a cross-collaboration with two python students, working with and integrating APIs from them. It was created in three days.</p>
<p class="links"><a href="https://jjac-stat.firebaseapp.com/#/" target="_blank">visit site</a> | <a href="https://github.com/JJAC-Stat/gui" target="_blank">view code on GitHub</a></p>
</div>
</article>
<article>
<img src="img/chessboard.jpg"/>
<div class="title-desc">
<h2 class="project-title">Chessboard</h2>
<p class="desc">To get a better understanding of JavaScript MVC, we were to create the first nine moves in the <a href="http://www.chess.com/opening/eco/E06_Catalan_Opening_Closed_Variation" target="_blank">Catalan Opening</a>
move by move, fast-forward to the end, or rewind to the beginning. We practiced test-driven development with Mocha Chai.</p>
<p class="links"><a href="http://cmauban.github.io/TIY-Chessboard" target="_blank">visit site</a> | <a href="https://github.com/cmauban/TIY-Chessboard" target="_blank">view code on GitHub</a></p>
</div>
</article>
<article>
<a href="http://cmauban.github.io/Digital-Illustrations" target="_blank"><img class="more" src="img/12.jpg"/></a>
<div class="title-desc">
<h2 class="project-title">Digital Illustrations</h2>
<p class="desc">These are a collection of digital illustrations created with Photoshop. The best way I learn is by constantly practicing and creating my own projects. You can also find some of my illustratins on my
<a href="https://www.etsy.com/shop/LavenderPlusInk?ref=hdr_shop_menu" target="_blank">Etsy site.</a></p>
</div>
</article>
<article>
<a href="http://cmauban.github.io/Freehand-Illustrations" target="_blank"><img class="more" src="img/mermaid.jpg"/></a>
<div class="title-desc">
<h2 class="project-title">Freehand Illustrations</h2>
<p class="desc">These are a collection of handmade watercolor illustrations, sketches, and typography.
Some of these are watercolor minimalist posters and cartoons created from portraits.
</div>
</article>
<!-- <article>
<div class="box">
<h4><a href="http://cmauban.github.io/Digital-Illustrations">click to see more</a></h4>
</div>
<div class="title-desc">
<h2 class="project-title">Screen & Web Graphics</h2>
<p class="desc">This project was my first freelance opportunity working with Precision Marketing Partners.
I was to design the screen and web graphics for Easter and Good Friday services at Calvary Chapel Cary.
</div>
</article> -->
<!-- <article>
<div class="box">
<h4><a href="http://cmauban.github.io/Digital-Illustrations">click to see more</a></h4>
</div>
<div class="title-desc">
<h2 class="project-title">Logo Design</h2>
<p class="desc">A collection of logo designs for practice. Logos are what represent and give companies an identity.
I've learned that the use of contrast and simplicity give the client a point of recognition.
</div>
</article> -->
<!-- <article>
<div class="box">
<h4><a href="http://cmauban.github.io/Digital-Illustrations">click to see more</a></h4>
</div>
<div class="title-desc">
<h2 class="project-title">Advertisements</h2>
<p class="desc">Promo card designs for Asa Pressley Photography, LLC. These were to be mailed out to boutique
fashion retailers and consumer beauty boutiques in South Carolina, Georgia and North Carolina.
</div>
</article> -->
<!-- <article>
<div class="sliderTwo">
<a href="#" class="control_next2"><i class="fa fa-arrow-right"></i></a>
<a href="#" class="control_prev2"><i class="fa fa-arrow-left"></i></a>
<ul>
<li><img src="img/mermaid.jpg"></li>
<li><img src="img/kelsey.jpg"></li>
<li><img src="img/kristines.jpg"></li>
<li><img src="img/josies.jpg"></li>
<li><img src="img/nc_raleigh.jpg"></li>
<li><img src="img/heel.jpg"></li>
<li><img src="img/moms.jpg"></li>
<li><img src="img/man.jpg"></li>
</ul>
</div>
<div class="title-desc">
<h2 class="project-title">Watercolor Illustrations</h2>
<p class="desc">A collection of handmade watercolor illustrations.
</div>
</article> -->
</section> <!-- END PORFOLIO -->
<section id="contact" class="panel">
<h3 class="heading">Contact</h3>
<section class="contact">
<a href="http://www.twitter.com/cmaubs" target="_blank" class="fa fa-twitter fa-2x"> <p>cmaubs</p></a><br>
<a href="https://www.linkedin.com/in/camillemauban" target="_blank" class="fa fa-linkedin-square fa-2x"> <p>camillemauban</p></a><br>
<a href="mailto:[email protected]" target="_blank" class="fa fa-envelope-o fa-2x"> <p>[email protected]</p></a><br>
<a href="https://github.com/cmauban" target="_blank" class="fa fa-github fa-2x"> <p>cmauban</p></a><br>
<a href="mauban_resume.pdf" target="_blank" class="fa fa-file-pdf-o fa-2x"> <p>resume</p></a>
</section>
</section> <!-- END CONTACT -->
<!-- <section id="blog" class="panel">
<h3 class="heading">Blog</h3>
</section> -->
</section> <!-- END MAIN-CONTENT -->
<!-- <footer class="page-footer">
<section class="social-media">
<a href="http://www.twitter.com/cmaubs" target="_blank" class="fa fa-twitter fa-2x"></a>
<a href="https://www.linkedin.com/in/camillemauban" target="_blank" class="fa fa-linkedin-square fa-2x"></a>
<a href="[email protected]" target="_blank" class="fa fa-envelope-o fa-2x"></a>
<a href="https://github.com/cmauban" target="_blank" class="fa fa-github fa-2x"></a>
</section>
</footer> -->
</main> <!--END PAGE CONTAINER-->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
<!-- <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>