/
index.html
342 lines (328 loc) · 19.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
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
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mark Weigel's Portfolio Site</title>
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<!-- The main layout out container for MDL -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--waterfall site-header">
<!-- Top row, always visible -->
<section class="mdl-layout__header-row site-header__title-row" aria-hidden="false">
<!-- Title -->
<div class="picture-me"></div>
<div class="title-text">
<h1 class="page-title mdl-typography--title">Mark Weigel</h1>
<h2 class="page-subtitle mdl-typography--subhead">Front End Developer</h2>
</div>
</section>
<!-- Bottom row, not visible on scroll -->
<section class="mdl-layout__header-row site-header__link-row">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Portfolio</a>
<nav class="navigation__nested-links">
<a href="project-0.html" class="mdl-navigation__link navigation__nested-link">
GOATOOLS GO Grouping
</a>
<a href="project-1.html" class="mdl-navigation__link navigation__nested-link">
Dapper Goose Website
</a>
<a href="project-2.html" class="mdl-navigation__link navigation__nested-link">
Neighborhood Map
</a>
<a href="project-3.html" class="mdl-navigation__link navigation__nested-link">
Frogger Clone
</a>
<a href="project-4.html" class="mdl-navigation__link navigation__nested-link">
Mobile Portfolio
</a>
<a href="project-5.html" class="mdl-navigation__link navigation__nested-link">
Resume Project
</a>
<a href="project-6.html" class="mdl-navigation__link navigation__nested-link">
Portfolio Site
</a>
</nav>
<a class="mdl-navigation__link" href="about.html">About Me</a>
<a type="button" class="mdl-navigation__link show-dialog" href="#">Contact</a>
</nav>
</section>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Portfolio</a>
<nav class="navigation__nested-links">
<a href="project-0.html" class="mdl-navigation__link navigation__nested-link">
GOATOOLS GO Grouping
</a>
<a href="project-1.html" class="mdl-navigation__link navigation__nested-link">
Dapper Goose Website
</a>
<a href="project-2.html" class="mdl-navigation__link navigation__nested-link">
Neighborhood Map
</a>
<a href="project-3.html" class="mdl-navigation__link navigation__nested-link">
Frogger Clone
</a>
<a href="project-4.html" class="mdl-navigation__link navigation__nested-link">
Mobile Portfolio
</a>
<a href="project-5.html" class="mdl-navigation__link navigation__nested-link">
Resume Project
</a>
<a href="project-6.html" class="mdl-navigation__link navigation__nested-link">
Portfolio Site
</a>
</nav>
<a class="mdl-navigation__link" href="about.html">About Me</a>
<a type="button" class="mdl-navigation__link show-dialog" href="#">Contact</a>
</nav>
</div>
<main class="mdl-layout__content">
<!-- Portfolio -->
<section id="portfolio" class="mdl-grid">
<!-- <h1 class="mdl-cell mdl-cell--12-col">Portfolio</h1> -->
<div class="card project-card mdl-card mdl-cell"> <!-- mdl-cell--12-col -->
<div class="mdl-card__media">
<img src="assets/img/goatools-results-download-400.png" srcset="assets/img/goatools-results-download-100.png 100w, assets/img/goatools-results-download-250.png 250w, assets/img/goatools-results-download-500.png 500w, assets/img/goatools-results-download-750.png 750w, assets/img/goatools-results-download-1000.png 1000w, assets/img/goatools-results-download-1500.png 1500w, assets/img/goatools-results-download-2000.png 2000w" alt="">
</div>
<!-- <div class="solve-flexdirection-problem mdl-cell--8-col"> -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">GOATOOLS GO Grouping</h2>
<p class="project-card__date mdl-card__subtitle-text">
- Work in Progress
</p>
</div>
<div class="mdl-card__supporting-text">Given a python command line program called GOATOOLS, my task was to build a web interface that would make the program more accessible for biologists doing Gene Ontology Enrichment Analysis. This was the most challenging project I have worked on to date since it required me to use a language that I was not familiar with and also required me to write some code for the backend.</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="project-0.html" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect">
Read More
</a>
<a href="http://192.241.142.207/" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
<!-- </div> -->
</div>
<div class="card project-card mdl-card mdl-cell"> <!-- mdl-cell--12-col -->
<div class="mdl-card__media">
<img src="assets/img/dapper-goose-400.png" srcset="assets/img/dapper-goose-100.png 100w, assets/img/dapper-goose-250.png 250w, assets/img/dapper-goose-500.png 500w, assets/img/dapper-goose-750.png 750w, assets/img/dapper-goose-1000.png 1000w, assets/img/dapper-goose-1500.png 1500w, assets/img/dapper-goose-2000.png 2000w" alt="">
</div>
<!-- <div class="solve-flexdirection-problem mdl-cell--8-col"> -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Dapper Goose Website</h2>
<p class="project-card__date mdl-card__subtitle-text">
- June 2016
</p>
</div>
<div class="mdl-card__supporting-text">The primary goal for this site was to keep it simple. A new restaurant for which the owners moved to a new city implied that the site would change very quickly so I focused only on the information that would be of the utmost importance.</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="project-1.html" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect">
Read More
</a>
<a href="BuffaloRestaurant" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
<!-- </div> -->
</div>
<div class="card project-card mdl-card mdl-cell"> <!-- mdl-cell--12-col -->
<div class="mdl-card__media">
<img src="assets/img/NeighborhoodMap-400.png" srcset="assets/img/NeighborhoodMap-100.png 100w, assets/img/NeighborhoodMap-250.png 250w, assets/img/NeighborhoodMap-500.png 500w, assets/img/NeighborhoodMap-750.png 750w, assets/img/NeighborhoodMap-1000.png 1000w, assets/img/NeighborhoodMap-1500.png 1500w, assets/img/NeighborhoodMap-2000.png 2000w" alt="">
</div>
<!-- <div class="solve-flexdirection-problem mdl-cell--8-col"> -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Neighborhood Map</h2>
<p class="project-card__date mdl-card__subtitle-text">
- Feb 2016
</p>
</div>
<div class="mdl-card__supporting-text">Web application that finds points of interest in my neighborhood using Google Maps. The application also makes AJAX calls to the Foursquare, Wikipedia, and Google Places API’s to provide information relevant to the locations that are found. This was built using knockout.js for data-binding. </div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="project-2.html" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect">
Read More
</a>
<a href="Neighborhood-Map" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
<!-- </div> -->
</div>
<div class="card project-card mdl-card mdl-cell"> <!-- mdl-cell--12-col -->
<div class="mdl-card__media">
<img src="assets/img/frogger-400.png" srcset="assets/img/frogger-100.png 100w, assets/img/frogger-250.png 250w, assets/img/frogger-500.png 500w, assets/img/frogger-750.png 750w, assets/img/frogger-1000.png 1000w, assets/img/frogger-1500.png 1500w, assets/img/frogger-2000.png 2000w" alt="">
</div>
<!-- <div class="solve-flexdirection-problem mdl-cell--8-col"> -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Frogger Clone</h2>
<p class="project-card__date mdl-card__subtitle-text">
- Nov 2015
</p>
</div>
<div class="mdl-card__supporting-text">A game that is based on the classic arcade game, Frogger, which I built as part of my Nanodegree program on Udacity.com. I was given a game engine and assets. It was my job to write Object Oriented code to provide player, enemy, and gem logic. The game was built using Javascript and HTML canvas.</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="project-3.html" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect">
Read More
</a>
<a href="Frogger-Clone" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
<!-- </div> -->
</div>
<div class="card project-card mdl-card mdl-cell"> <!-- mdl-cell--12-col -->
<div class="mdl-card__media">
<img src="assets/img/MobilePortfolio-400.png" srcset="assets/img/MobilePortfolio-100.png 100w, assets/img/MobilePortfolio-250.png 250w, assets/img/MobilePortfolio-500.png 500w, assets/img/MobilePortfolio-750.png 750w, assets/img/MobilePortfolio-1000.png 1000w, assets/img/MobilePortfolio-1500.png 1500w, assets/img/MobilePortfolio-2000.png 2000w" alt="">
</div>
<!-- <div class="solve-flexdirection-problem mdl-cell--8-col"> -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Mobile Portfolio</h2>
<p class="project-card__date mdl-card__subtitle-text">
- Dec 2015
</p>
</div>
<div class="mdl-card__supporting-text">Part of the Front-End Nanodegree at Udacity.com focuses on performance. I was given a complete site that performed woefully and was expected to optimize the site to load as fast as possible. The site started with a Page Speed Insights score of 28 for mobile and I was able to improve this to 95.</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="project-4.html" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect">
Read More
</a>
<a href="Mobile-Portfolio" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
<!-- </div> -->
</div>
<div class="card project-card mdl-card mdl-cell"> <!-- mdl-cell--12-col -->
<div class="mdl-card__media">
<img src="assets/img/Resume-400.png" srcset="assets/img/Resume-100.png 100w, assets/img/Resume-250.png 250w, assets/img/Resume-500.png 500w, assets/img/Resume-750.png 750w, assets/img/Resume-1000.png 1000w, assets/img/Resume-1500.png 1500w, assets/img/Resume-2000.png 2000w" alt="">
</div>
<!-- <div class="solve-flexdirection-problem mdl-cell--8-col"> -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Resume Project</h2>
<p class="project-card__date mdl-card__subtitle-text">
- Oct 2015
</p>
</div>
<div class="mdl-card__supporting-text">A website to showcase my skills. This served as my introduction to Javascript at Udacity.com. Having learned the basics of HTML and CSS, it was time to learn the power of JQuery.</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="project-5.html" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect">
Read More
</a>
<a href="Resume" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
<!-- </div> -->
</div>
<div class="card project-card mdl-card mdl-cell"> <!-- mdl-cell--12-col -->
<div class="mdl-card__media">
<img src="assets/img/Portfolio-400.png" srcset="assets/img/Portfolio-100.png 100w, assets/img/Portfolio-250.png 250w, assets/img/Portfolio-500.png 500w, assets/img/Portfolio-750.png 750w, assets/img/Portfolio-1000.png 1000w, assets/img/Portfolio-1500.png 1500w, assets/img/Portfolio-2000.png 2000w" alt="">
</div>
<!-- <div class="solve-flexdirection-problem mdl-cell--8-col"> -->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Portfolio Site</h2>
<p class="project-card__date mdl-card__subtitle-text">
- Sept 2015
</p>
</div>
<div class="mdl-card__supporting-text">A very basic portfolio site that was built using purely HTML and CSS. The focus of this was to learn the basics of responsive design and use my newly acquired HTML/CSS knowledge. I used srcset to provide appropriate sized images depending on the device that is viewing the site as well as SVG icons for beautiful scaling.</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="project-6.html" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect">
Read More
</a>
<a href="Portfolio" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
<!-- </div> -->
</div>
</section>
<footer id="footer" class="mdl-mini-footer">
<section class="mdl-mini-footer__left-section">
<div class="mdl-logo">Find Me</div>
</section>
<section class="mdl-mini-footer__right-section">
<ul class="mdl-mini-footer__link-list">
<li>
<a href="https://www.github.com/mrkjesus2">
<svg id="github" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-github"></use>
</svg>
<div for="github" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
View my Github
</div>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/markweig">
<svg id="linkedin" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-linkedin"></use>
</svg>
<div for="linkedin" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
See my LinkedIn profile
</div>
</a>
</li>
<li>
<a href="mailto:markweig@gmail.com?subject=Weigel.site Contact" "email me">
<span class="sr-only">email me at</span>
<svg id="email" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-email"></use>
</svg>
<div for="email" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
markweig@gmail.com
</div>
</a>
</li>
<li>
<!-- TODO: Handle desktop cases where click does nothing -->
<a href="tel:+12676032621">
<span class="sr-only">Call me at</span>
<svg id="phone" class="svg-icon">
<use xlink:href="assets/icons/icons.svg#icon-phone"></use>
</svg>
<div for="phone" class="mdl-tooltip mdl-tooltip--top mdl-tooltip--large">
1-267-603-2621
</div>
</a>
</li>
</ul>
</section>
</footer>
</main>
</div>
<dialog class="mdl-dialog">
<h4 class="mdl-dialog-title">Get a hold of me!</h4>
<div class="mdl-dialog__content">
<p>
Email is the best way to get a hold of me, but feel free to call
if it is a reasonable hour in GMT -5.
</p>
</div>
<div class="mdl-dialog__actions mdl-dialog__actions--full-width">
<a href="mailto:markweig@gmail.com?Weigel.site Contact" class="mdl-button mdl-button--accent">Email Me</a>
<a href="tel:2676032621" class="mdl-button mdl-button--accent">Call Me</a>
<a href="#" class="mdl-button close">Nevermind</a>
</div>
</dialog>
<script src="assets/js/app.js" async></script>
<!-- Use Web Font Loader to prevent render blocking -->
<script async>
WebFontConfig = {
google: {
families: ['Roboto:300,400,500', 'Material Icons']
}
};
(function(d) {
var wf = d.createElement('script');
var s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
</script>
</body>
</html>