-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
347 lines (291 loc) · 16.9 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
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Portfolio for Julie Tippett" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
/>
<title>Julie Tippett</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" sizes="192x192" href="images/android-desktop.png" />
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Material Design Lite" />
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png" />
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta
name="msapplication-TileImage"
content="images/touch/ms-touch-icon-144x144-precomposed.png"
/>
<meta name="msapplication-TileColor" content="#3372DF" />
<link rel="shortcut icon" href="images/favicon.png" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
rel="stylesheet"
href="https://code.getmdl.io/1.3.0/material.teal-purple.min.css"
/>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<!-- Assign container as an mdl container with mdl behaviour to layout and set the background to light grey -->
<!-- See https://material.io/design/color/the-color-system.html#tools-for-picking-colors for colors -->
<div
class="mdl-layout mdl-js-layout mdl-color--grey-100"
>
<main class="mdl-layout__content">
<!-- Define and set up the tabs.
If using a phone, the name will not be displayed mdl-cell--hide-phone in the tab
to keep a clean look and the name is already displayed as part of the info-->
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar navigation-tabs">
<a href="#tab-about-panel" class="mdl-tabs__tab mdl-cell--hide-phone" id="navigation__name-details"
>Julie Tippett</a
>
<div class="mdl-layout-spacer"></div>
<a href="#tab-about-panel" class="mdl-tabs__tab is-active">About</a>
<a href="#tab-portfolio-app-panel" class="mdl-tabs__tab">Projects</a>
<a href="#tab-portfolio-os-panel" class="mdl-tabs__tab">Open Source</a>
<!-- <a href="#tab-contact-panel" class="mdl-tabs__tab contact">Contact</a> -->
</div>
<!-- Setup the 'about-panel' tab display. This is a grid where the left contains and image and
the right contains a brief description about 'me' -->
<div class="panels-container">
<div class="container mdl-tabs__panel is-active" id="tab-about-panel">
<div class="mdl-grid site-max-width">
<div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card about__card mdl-color--grey-100 ">
<img
class="about__image"
src=" ./images/computerDesk1.png"
alt="Desk"
/>
</div>
<div id="about__text" class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card about__card mdl-color--grey-100">
<div style="margin: auto;" class="mdl-card__supporting-text">
<h2 class="about__me">Julie Tippett</h2>
<div>
<a href="http://github.com/tippettj" target="_blank"><img class="about__social-media" src="./images/media/githubIcon.svg"></img></a>
<a href="http://linkedin.com/in/julie-s-tippett" target="_blank"><img class="about__social-media" src="./images/media/linkedInIcon.png"></img>
</a>
<div>
<!-- <h4 class="about__desc"> -->
<h5 class="about__desc">Hi, my name is Julie.</h5>
<h5 class="about__desc">After coding for 15 years, I took a break to grow kids.</h5>
<h5 class="about__desc">I am now ready to get back to work!</54>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Setup the 'project' tab display. This contains the crux of information in cards -->
<div class="container mdl-tabs__panel" id="tab-portfolio-app-panel">
<div class="mdl-grid site-max-width">
<p class="mdl-typography--title mdl-cell--12-col" id="titles">Apps and APIs</p>
<!-- Weather App Card-->
<div class="mdl-cell mdl-card mdl-shadow--2dp">
<div class="mdl-card__media">
<img class="portfolio__article-image" src="./images/cards/weatherApp.png" border="0" alt="Weather App">
</div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Weather</h2>
</div>
<div class="mdl-card__supporting-text">
Displays the weather for a given location.
</div>
<br>
<div >
<div class="icon material-icons">
<a id="w-node-tt" href="https://nodejs.org/en/" target="_blank">
<img class="port__language-icons" src="./images/media/nodejsIcon.svg" alt="Node JS Icon"></a>
<span class="mdl-tooltip " for="w-node-tt">Node</span>
</div>
<div class="icon material-icons">
<a id="w-express-tt" href="https://expressjs.com/" target="_blank">
<img class="port__language-icons" src="./images/media/expressIcon.png" alt="Express Icon"></a>
<span class="mdl-tooltip " for="w-express-tt">Express</span>
</div>
<div class="icon material-icons">
<a id="w-heroku-tt" href="https://heroku.com/" target="_blank">
<img class="port__language-icons" src="./images/media/herokuIcon.svg" alt="Heroku Icon"></a>
<span class="mdl-tooltip " for="w-heroku-tt">Heroku</span>
</div>
</div>
<br>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="https://tippj-weather-app.herokuapp.com" target="_blank">
Try it
</a>
</div>
</div>
<!-- Chat App Card-->
<div class="mdl-cell mdl-card mdl-shadow--2dp">
<div class="mdl-card__media">
<img class="portfolio__article-image" src="./images/cards/chatApp.png" border="0" alt="Chat apple-mobile-web-app-capable">
</div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Chataccino</h2>
</div>
<div class="mdl-card__supporting-text">
Opens up a chat room where multiple people can talk and share their location using google maps.
</div>
<br>
<div >
<div class="icon material-icons">
<a id="c-node-tt" href="https://nodejs.org/en/" target="_blank">
<img class="port__language-icons" src="./images/media/nodejsIcon.svg" alt="Node JS Icon"></a>
<span class="mdl-tooltip " for="c-node-tt">Node</span>
</div>
<div class="icon material-icons">
<a id="c-express-tt" href="https://expressjs.com/" target="_blank">
<img class="port__language-icons" src="./images/media/expressIcon.png" alt="Express Icon"></a>
<span class="mdl-tooltip " for="c-express-tt">Express</span>
</div>
<div class="icon material-icons">
<a id="c-heroku-tt" href="https://heroku.com/" target="_blank">
<img class="port__language-icons" src="./images/media/herokuIcon.svg" alt="Heroku Icon"></a>
<span class="mdl-tooltip " for="c-heroku-tt">Heroku</span>
</div>
</div>
<br>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="https://tippj-chat-app.herokuapp.com" target="_blank">
Try it
</a>
</div>
</div>
<!-- Task Manager API -->
<div class="mdl-cell mdl-card mdl-shadow--2dp">
<div class="mdl-card__media">
<img id="task-api" class="portfolio__article-image" src="./images/cards/taskApi.png" border="0" alt="./images/cards/check-list.png">
</div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Task Manager API</h2>
</div>
<div class="mdl-card__supporting-text">
<p>Utilizes REST API to allow an authenicated user to create and manage tasks.</p>
<p></p>Sends welcome and cancellation email to user.</p>
</div>
<br>
<div >
<div class="icon material-icons">
<a id="t-node-tt" href="https://nodejs.org/en/" target="_blank">
<img class="port__language-icons" src="./images/media/nodejsIcon.svg" alt="Node JS Icon"></a>
<span class="mdl-tooltip " for="t-node-tt">Node</span>
</div>
<div class="icon material-icons">
<a id="t-express-tt" href="https://expressjs.com/" target="_blank">
<img class="port__language-icons" src="./images/media/expressIcon.png" alt="Express Icon"></a>
<span class="mdl-tooltip " for="t-express-tt">Express</span>
</div>
<div class="icon material-icons">
<a id="t-heroku-tt" href="https://heroku.com/" target="_blank">
<img class="port__language-icons" src="./images/media/herokuIcon.svg" alt="Heroku Icon"></a>
<span class="mdl-tooltip " for="t-heroku-tt">Heroku</span>
</div>
<div class="icon material-icons">
<a id="t-mongo-tt" href="https://mongodb.com/" target="_blank">
<img class="port__language-icons" src="./images/media/mongoIcon.png" alt="Mongo Icon"></a>
<span class="mdl-tooltip " for="t-mongo-tt">Mongo</span>
</div>
<div class="icon material-icons">
<a id="t-mongoose-tt" href="https://mongoosejs.com/" target="_blank">
<img class="port__language-icons" src="./images/media/mongooseIcon.jpg" alt="Mongoose Icon"></a>
<span class="mdl-tooltip " for="t-mongoose-tt">Mongoose</span>
</div>
</div>
<br>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="https://github.com/tippettj/task-manager" target="_blank">
REPOSITORY
</a>
</div>
</div>
<!-- Feedback App -->
<div class="mdl-cell mdl-card mdl-shadow--2dp">
<div class="mdl-card__media">
<img id="feedback-border" class="portfolio__article-image" src="./images/cards/feedbackApp.png" border="0" alt="./images/cards/check-list.png">
</div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Feedback App</h2>
</div>
<div class="mdl-card__supporting-text">
<p></p>Feedback system. Allows users to rate their responses to questions.</p>
<p>Backend still in progress - will use express and mongoDB.</p>
</div>
<br>
<div>
<div class="icon material-icons">
<a id="f-node-tt" href="https://nodejs.org/en/" target="_blank">
<img class="port__language-icons" src="./images/media/nodejsIcon.svg" alt="Node JS Icon"></a>
<span class="mdl-tooltip " for="f-node-tt">Node</span>
</div>
<div class="icon material-icons">
<a id="f-react-tt" href="https://reactjs.org/" target="_blank">
<img class="port__language-icons" src="./images/media/reactIcon.png" alt=""></a>
<span class="mdl-tooltip " for="f-react-tt">React</span>
</div>
</div>
<br>
<div class="mdl-card__actions mdl-card--border">
<!-- <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="" target="_blank"> -->
<span class="inprogress">IN PROGRESS</span>
<!-- </a> -->
</div>
</div>
</div> <!-- end grid containing cards-->
</div><!-- end apps and api tab panel -->
<!-- Setup the 'opensource' tab display. Same card format as projects tab -->
<div class="container mdl-tabs__panel" id="tab-portfolio-os-panel">
<div class="mdl-grid site-max-width">
<p class="mdl-typography--title mdl-cell--12-col" id="titles">Open Source</p>
<!-- Phoronix Card-->
<div class="mdl-cell mdl-card mdl-shadow--2dp">
<div class="mdl-card__media">
<img id="pts-border" class="portfolio__article-image" src="./images/cards/pts.png" border="0" alt="Phoronix">
</div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Phoronix Test Suite</h2>
</div>
<div class="mdl-card__supporting-text">
The Phoronix Test Suite performs and displays automated testing and benchmarking.
</div>
<br>
<div >
<div class="icon material-icons">
<a id="p-php-tt" href="https://phoronix-test-suite.com" target="_blank">
<img class="port__language-icons" src="./images/media/phpIcon.svg" alt="PHP Icon"></a>
<span class="mdl-tooltip " for="p-php-tt">PHP</span>
</div>
</div>
<br>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="https://github.com/phoronix-test-suite/phoronix-test-suite" target="_blank">
Repository
</a>
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent" href="https://phoronix-test-suite.com" target="_blank">
Website
</a>
</div>
</div>
</div><!-- end grid containing cards-->
</div><!-- end openSource tab panel -->
</div><!-- end tab panels -->
</div><!-- end tabs section -->
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>