-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
334 lines (330 loc) · 12.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- first two meta tags filled in by Repl.it but important for the code to work;
third meta tag written by me -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="author" content="Merritt Baggett" />
<meta
name="description"
content="portfolio of web design projects made by Merritt Baggett"
/>
<title>My Brief Bio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="navbar">
<h1>Merritt Baggett</h1>
<nav>
<!-- internal page navigation -->
<ul>
<li><a href="#Intro">Intro</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="border">
<div id="Intro">
<section class="section-top">
<!-- 1st main content portion -->
<h2 class="spacing">Brief Intro</h2>
<p>
I am a budding programmer eager to hone my skills. I live in
Northern Virginia, a short ways from Washington D.C. I bring a
degree of trusted professionalism to the team having held various
clearances with the U.S. Govt.
</p>
</section>
<hr />
<span class="about" id="About"></span>
<h2>About Me</h2>
<section class="flex-group">
<!-- 2nd main content portion -->
<div class="item item-double trail-desc">
<p>
In my former career I supported several tech and programming
oriented teams administratively.
<a
href="http://investor.raytheon.com/news-releases/news-release-details/raytheon-purchases-si-government-solutions"
target="_blank"
>
My last programming team
</a>
in particular was highly skilled and placed a high premium on
teamwork. Now that I'm looking to switch careers, I'm excited to
gain a more professional, solid foundation in coding practical
applications to make peoples' lives easier as well as live up to
the great team that inspired me.
</p>
<p>Outside of work, a couple interests are:</p>
<ol>
<!-- 1 or 2 sentences of interests outside of web development -->
<li>
I enjoy walking along the
<a
href="https://www.alltrails.com/trail/us/virginia/sugarland-run-trail"
target="_blank"
>local park trails</a
>. Having spent most of my career behind an office desk, it's
good to get out, get some exercise and clear your head from time
to time.
</li>
<li>
I dabble a little bit with cooking, when I have time to spare.
Mostly light breakfast things, but it's fun to try
<a
href="https://www.youtube.com/watch?v=XMsXKCr9kL4"
target="_blank"
>an unfamiliar dessert</a
>
once in awhile to mix things up.
</li>
</ol>
<p>List of services I can provide:</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>React</li>
<li>Node</li>
<li>Express</li>
<li>PostgreSQL</li>
</ol>
</div>
<div class="item flex-group">
<img
src="images/trail-chalk.jpg"
alt="Chalk Message on Trail"
class="trail"
/>
</div>
</section>
<hr />
<section>
<span class="projects" id="Projects"></span>
<h2>Project Section</h2>
<div class="">
<article class="item-double">
<div class="">
<h3>Massachusetts Platform for Legislative Engagement</h3>
<p class="mapleWidth">
MAPLE (the Massachusetts Platform for Legislative Engagement)
makes it easy for residents to submit their testimony to the
MA legislature and read the testimony of others. Our goals are
to shine a light on the statehouse by 1) providing a public
archive of legislative testimony; 2) standardizing and
demystifying the testimony process, so that more people can
make their voices heard; 3) creating a space for constituents
and legislators to maintain prolonged focus on key issues, and
to learn more efficiently about the laws that will shape our
lives.
</p>
<p>( HTML / CSS / JavaScript / React / Python / Flask )</p>
</div>
<div>
<img
src="images/maple.png"
alt="App Demo Screenshot"
width="832"
/><br />
<a href="https://www.mapletestimony.org/" target="_blank"
>Live App</a
><br />
<a href="https://github.com/codeforboston/maple" target="_blank"
>GitHub Frontend Repo</a
>
</div>
</article>
</div>
<div class="container">
<div>
<h3>Capitol Flag Tracker</h3>
<p>
This app allows US Congressional staffers to more easily track
the progress of their constituents flag orders. Previously,
staffers would have to manually reach out to agencies to get the
status of their orders. Now, agencies can use QR codes to update
the order progress with the app saving staffers time and hassle.
</p>
<p>( HTML / CSS / JavaScript / React / Python / Flask )</p>
</div>
<div class="item3">
<img
src="images/flagpizza1.png"
alt="App Demo Screenshot"
/><br />
<a href="https://codefordc-flag.netlify.app/" target="_blank"
>Live App</a
><br />
<a
href="https://github.com/codefordc/us-congress-pizza-flag-tracker-frontend"
target="_blank"
>GitHub Frontend Repo</a
><br />
<a
href="https://github.com/codefordc/us-congress-pizza-flag-tracker"
target="_blank"
>GitHub Backend Repo</a
>
</div>
<div>
<h3>US National Parks Weather Forecaster</h3>
<p>
This app allows users to search a state for national parks. They
can then choose a park to get a weather forecast for.
Additionally, if there are weather reports in that area, those
will be displayed as well.
</p>
<p>( HTML / CSS / JavaScript / jQuery )</p>
<p>APIs: National Parks Service, National Weather Service</p>
</div>
<div>
<img src="images/scnshot.png" alt="App Demo Screenshot" /><br />
<a
href="https://mertbagt.github.io/US-National-Parks-Weather-Forecaster/"
target="_blank"
>Live App</a
><br />
<a
href="https://github.com/mertbagt/US-National-Parks-Weather-Forecaster"
target="_blank"
>GitHub Repo</a
>
</div>
<div>
<h3>What's For Dinner</h3>
<p>
App allows users to plan menus either by selecting and arranging
dishes for their menu, or by using a random function to generate
ideas to plan a menu around. Meant to be a basic framework to
allow for expansions to potentially include calorie counting,
dietary filters and linked ingrediants to start a shopping list
with.
</p>
<p>
( HTML / CSS / JavaScript / React / Node / Express / PostgreSQL
)
</p>
</div>
<div class="item6">
<img src="images/scrshot.jpg" alt="App Demo Screenshot" /><br />
<a href="https://whats-for-dinner-ten.vercel.app/" target="_blank"
>Live App</a
><br />
<a
href="https://github.com/mertbagt/whats-for-dinner"
target="_blank"
>GitHub Repo</a
>
</div>
<div>
<h3>Park Trail Test</h3>
<p>Simple website layout to test various optimization tools</p>
<ul>
<li>
Optimized design for 7 screen sizes (desktop and mobile) using
Responsively app, flexbox, and media queries
</li>
<li>
Refactored for best practices by validating HTML and CSS using
W3C Markup Validation Service
</li>
<li>
Reduced Cumulative Layout Shift from .402 to 0 by running web
performance tests to identify opportunities to speed up the
application
</li>
</ul>
<p>( HTML / CSS / Responsively / Lighthouse)</p>
</div>
<div>
<img
src="images/parkTrailTestScnshot.jpg"
alt="App Demo Screenshot"
/><br />
<a
href="https://mertbagt.github.io/park-trail-test/"
target="_blank"
>Live App</a
><br />
<a
href="https://github.com/mertbagt/park-trail-test"
target="_blank"
>GitHub Repo</a
>
</div>
</div>
<div class="">
<article class="item">
<h3>Librarian</h3>
<div class="">
<!-- class reserved for spacing if another project is added -->
<p class="mapleWidth">
App allows a librarian to manage a collection of books and
track which patron they are checked out to. Future expansions
include tracking dates, late fees and a patron interface.
</p>
<p>
( HTML / CSS / JavaScript / React / Node / Express /
PostgreSQL )
</p>
</div>
<div>
<img
src="images/scnshot03.jpg"
alt="App Demo Screenshot"
/><br />
<a href="https://librarian-drab.vercel.app/" target="_blank"
>Live App</a
><br />
<a href="https://github.com/mertbagt/librarian" target="_blank"
>GitHub Repo</a
>
</div>
</article>
<article class="item"></article>
</div>
</section>
</div>
</main>
<footer>
<div class="contact-container">
<h3>Website visit count:</h3>
<div class="website-counter-container">
<div class="website-counter"></div>
</div>
<h3 id="Contact">Contact</h3>
<ul>
<!-- list of contact links -->
<li><a href="mailto:mertbagt@gmail.com">Email</a></li>
<li>
<a
href="https://www.linkedin.com/in/merritt-baggett-448500186/"
target="_blank"
rel="noopener noreferrer"
>LinkedIn</a
>
</li>
<li>
<a
href="https://github.com/mertbagt"
target="_blank"
rel="noopener noreferrer"
>GitHub</a
>
</li>
</ul>
</div>
</footer>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"
></script>
<script src="index.js"></script>
</body>
</html>