/
project-1.html
230 lines (212 loc) · 11.4 KB
/
project-1.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
<!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>
<!-- The main container, calls project-detail partial -->
<main class="mdl-layout__content">
<main class="mdl-layout">
<section class="mdl-grid project-detail">
<div class="card mdl-card mdl-cell--8-col">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Dapper Goose Website</h1>
</div>
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--2-offset-desktop mdl-typography--headline">Initial Step</h3>
<div class="mdl-cell mdl-cell--4-col-tablet">
<p 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. New opportunities and unexpected market trends all but guaranteed that the site would have to change quickly so I focused only on the information that would be of the utmost importance.
</p>
</div>
<div class="mdl-cell mdl-cell--4-col-tablet desc-img">
<img src="assets/img/dapper-goose-250.png" srcset="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" alt="Image of the Dapper Goose website">
</div>
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--2-offset-desktop mdl-typography--headline">Next Step</h3>
<div class="mdl-cell mdl-cell--4-col-tablet desc-img">
<img src="assets/img/dapper-goose-menu-1-1000.png" srcset="assets/img/dapper-goose-menu-1-250.png 250w, assets/img/dapper-goose-menu-1-500.png 500w, assets/img/dapper-goose-menu-1-750.png 750w, assets/img/dapper-goose-menu-1-1000.png 1000w" alt="Image of the Dapper Goose website">
</div>
<div class="mdl-cell mdl-cell--4-col-tablet">
<p class="mdl-card__supporting-text">
I decided that the menu was of primary importance so I hard-coded the menu information into the HTML and used Javascript to only show the relevant menu. This provided for a very quick display when the user changed the menu. The next most important information was of course location and contact info, but since it was a new restaurant, I highlighted the Owner and Chef first. Because this information was less important but higher on the page, I hid the details about the owners until the user expresses interest by clicking to see them.
</p>
</div>
<h3 class="mdl-cell mdl-cell--12-col mdl-cell--2-offset-desktop mdl-typography--headline">Wrap Up</h3>
<div class="mdl-cell mdl-cell--4-col-tablet desc-img">
<img src="assets/img/dapper-goose-menu-2-1000.png" srcset="assets/img/dapper-goose-menu-2-250.png 250w, assets/img/dapper-goose-menu-2-500.png 500w, assets/img/dapper-goose-menu-2-750.png 750w, assets/img/dapper-goose-menu-2-1000.png 1000w" alt="Image of the Dapper Goose website">
</div>
<div class="mdl-cell mdl-cell--4-col-tablet">
<p class="mdl-card__supporting-text">
Unfortunately, in a rush to secure their domain name, the owner hastily signed up with Squarespace. Despite receiving good feedback on the initial development, I was unable to continue gratis development due to the maintenance requirements due to Squarespace platform updates.
</p>
</div>
<div class="project-card__links mdl-card__actions mdl-card--border">
<a href="BuffaloRestaurant" class="mdl-button mdl-button--raised mdl-button--accent mdl-js-button mdl-js-ripple-effect" >
View Project
</a>
</div>
</div>
</section>
</main>
<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>