-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
450 lines (431 loc) · 20.7 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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio Website-TJ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- linking css file -->
<link rel="stylesheet" href="style.css">
<!-- bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="font-mfizz.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- font awesome -->
<script src="https://kit.fontawesome.com/31149d48b0.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbarScroll navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#" style="color: rgb(53, 226, 47)">TJ</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#" style="color: rgb(53, 226, 47)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" style="color: rgb(53, 226, 47)">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workhistory" style="color: rgb(53, 226, 47)">Work History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills" style="color: rgb(53, 226, 47)">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio" style="color: rgb(53, 226, 47)">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" style="color: rgb(53, 226, 47)">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main banner -->
<section class="bgimage" id="home">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text">
<h2 class="hero_title">Hi! My name is TJ</h2>
<p class="hero_desc"> I'm a self-taught Developer that wants to work for you! <br> Scroll down and find out why I would be a great addition to your company </br></p>
</div>
</div>
</div>
</section>
<!-- about section-->
<section id="about">
<div class="container mt-4 pt-4">
<h1 class="text-center">About Me</h1>
<div class="row mt-4">
<div class="col-lg-4">
<img src="images/linkedin profile.jpg" class="imageAboutPage" alt="" style="width:250px; height:275px">
</div>
<div class="col-lg-8">
<p> I am a driven, 28 year old, who is highly motivated to be a thriving developer. I was around 5 years
into working in the marketing industry; which I majored in at Missouri State University, when I realized my
skill sets weren't being used to the fullest. I've always enjoyed learning how things are built and finding
ways to make tasks easier. After a year or so of working with multiple "IT" clients at the last marketing
firm I worked for, I developed an interest in the tech industry as a whole. My ability to communicate
effectively with clients matched with picking up something completetly foreign to me and running with it is
showing that I am going to have lots of potential in programming and development. I would love to show you
what I have learned over the last several months and showcase some of my work. I believe I would be a great asset to your company!
</p>
<div class="row mt-3">
<div class="col-md-6">
<ul>
<li>Name: TJ Hiegel</li>
<li>Age: 28</li>
<li>Targeted Occupation: Web Developer</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>Cell: (636)387-3212</li>
<li>Email: [email protected]</li>
<li>Central Location: St Peters, MO</li>
</ul>
</div>
</div>
<div class="icons col-12 text-color">
<span style='font-size:80px;'>🏒</span>
<span style='font-size:80px;'>🎵</span>
<span style='font-size:80px;'>🎨</span>
<span style='font-size:80px;'>📽</span>
<span style='font-size:80px;'>🎸</span>
<span style='font-size:80px;'>⚾</span>
<img src="images/blueslogo.jpeg" class="blues" alt="blues" width="80" height="94.5">
<img src="images/cardslogo.jpeg" class="cardinals" alt="cards" width="80" height="94.5">
<img src="images/msulogo.jpeg" class="msu" alt="cards" width="80" height="94.5">
</div>
</div>
</div>
</section>
<!-- services section-->
<section id="workhistory">
<div class="container">
<h1 class="text-center2">Work History</h1>
<div class="row">
<div class="experience">
<div class="col-12 blue-color">
<ul class="shadow-lg p-0 mb-5 bg-body rounded" style="list-style-type:square">
<hr class="rounded"><br></br>
<li class="workhistorytext"><i><b>Abstrakt Marketing Group</i></b> (Aug 2020 - Nov 2021)<br> I was hired as a Partner Sales Representative working with up to five IT clients located in various states and built a predictable sales pipeline for them. I was promoted within the first 6 months to work for Abstrakts Executive Sales team, where my role was to help bring on new partnerships for Abstrakt and generate internal growth. In my last few months working there, I worked along side the operations team on my own time to learn more about salesforce and how to use the software more efficiently.</li>
</li><br></br>
<hr class="rounded"><br></br>
<li class="workhistorytext"><i><b>Sculpture Hospitality</i></b> (Aug 2018 - May 2020)<br> This company is assentially bar rescue. I began as a bar auditor who would collect data (inventory, usage, sales) and report the numbers to a supervisor. After a few months I had my own territory and delivered my own reports that I wrote weekly for each client based off the sales compared to usage of the bar. This taught me how to find ways to use excell more efficiently on my own so that I could have time for more new clients. Within a year I moved to STL to run that whole territory while managing the southwest territory giving me more experience in managing time and people.</li><br></br>
<hr class="rounded"><br></br>
<li class="workhistorytext"><i><b>J-MO Marketing Inc.</i></b> (Aug 2017 - Apr 2018)<br> Here I worked as a third party marketing specialist doing B to C sales. I began as a sales representative and grew into a corporate trainer position leading a team of my own. The most beneficial experience from this was gaining thick skin and a combination of positivity with hustle. </li><br></br>
<hr class="rounded"><br></br>
<li class="workhistorytext"><i><b>Springfield Missouri Convention & Visitors Bureau</i></b> (Sep 2014 - Aug 2015)<br> I interned while attending Missouri State University and gained some experience with researching as well as working with websites. Here I was responsible for keeping Springfield Missouri's website updated with everything going on in the city and showing visitors the hotspots to check out. I researched these places and events, went out to take pictures occasionally, and uploaded the pictures and descriptions of each thing on the site.</li><br></br>
<hr class="rounded">
</ul>
</div>
</div>
<!-- <div class="col-lg-4 mt-4">
<div class="card servicesText shadow-lg">
<div class="card-body">
<i class="fas servicesIcon fa-clock"></i>
<h4 class="card-title mt-3">Website Development</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the
card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText shadow-lg">
<div class="card-body">
<i class='fas servicesIcon fa-layer-group'></i>
<h4 class="card-title mt-3">Website Design</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the
card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText shadow-lg">
<div class="card-body">
<i class='far servicesIcon fa-check-circle'></i>
<h4 class="card-title mt-3">Website Deployment</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the
card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card servicesText shadow-lg">
<div class="card-body">
<i class='fas servicesIcon fa-search'></i>
<h4 class="card-title mt-3">SEO</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the
card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText shadow-lg">
<div class="card-body">
<i class='fas servicesIcon fa-shield-alt'></i>
<h4 class="card-title mt-3">DevOps</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the
card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card servicesText shadow-lg">
<div class="card-body">
<i class='fas servicesIcon fa-wrench'></i>
<h4 class="card-title mt-3">QA</h4>
<p class="card-text mt-3">Some quick example text to build on the card title and make up the bulk of the
card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</div>
</div> -->
</div>
</div>
</section>
<!-- skills section -->
<section id="skills">
<h1 class="text-center3">Skills</h1>
<div class="container-fluid">
<div class="skillsets row text-center">
<div class="col-md-3 ">
<i class="fab fa-html5"></i>
<h2></h2>
<h6>HTML5</h6>
</div>
<div class="col-md-3 ">
<i class="fab fa-css3-alt"></i>
<h2></h2>
<h6>CSS</h6>
</div>
<div class="col-md-3 ">
<i class="fab fa-js-square"></i>
<h2></h2>
<h6>Javascript</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>C++</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>C#</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>SQL</h6>
</div>
<div class="col-md-3 ">
<i class="fab fa-python"></i>
<h2></h2>
<h6>Python</h6>
</div>
<div class="col-md-3 ">
<i class="fab fa-bootstrap"></i>
<h2></h2>
<h6>Bootstrap</h6>
</div>
<div class="col-md-3 ">
<i class="fab fa-github"></i>
<h2></h2>
<h6>Github</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>Postman</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>User Interface</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>dotnet6 API</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>Responsive Design</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>Detail Oriented</h6>
</div>
<div class="col-md-3 ">
<h2></h2>
<h6>User Experience</h6>
</div>
</div>
</div>
</section>
<!-- portfolio section -->
<section id="portfolio">
<div class="container mt-3">
<h1 class="text-center4">Portfolio</h1>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card shadow-lg">
<img class="card-img-top" src="images/bankAppPic2.jpeg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Banking App</h4>
<p class="card-text">This app was created for the use of bank employees to view, add, and edit member
accounts. The app is two projects in one. The first being the UI; which I used React for, and the second
being the API & data layer that was created with Dotnet6.</p>
<div class="text-center">
<!-- <a href="#" class="btn btn-success">Link</a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent shadow-lg">
<img class="card-img-top" src="images/quizPic1.jpeg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Random Quiz Generator</h4>
<p class="card-text">This is a program that can generate random orders of questions with random orders of
multiple choice answers to prevent cheating on quizes. This program was written in Python.</p>
<div class="text-center">
<!-- <a href="#" class="btn btn-success">Link</a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent shadow-lg">
<img class="card-img-top" src="images/menuPic1.webp" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Menu Page</h4>
<p class="card-text">A javascript focused project that showcases my ability to ajdust code for unforseen
additional content by using pieces of hard code. For instance, adding another food category section when
a new item is added to the menu that doesnt fit an existing category.</p>
<div class="text-center">
<!-- <a href="#" class="btn btn-success">Link</a> -->
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4 mt-4">
<div class="card portfolioContent shadow-lg">
<img class="card-img-top" src="images/colorChangeGif1.gif" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Color Flipper</h4>
<p class="card-text">This javascript focused project is simple yet useful for gaining some css
inspiration. The webpage shows a color along with its hex css code. A button will change the color
randomly and show its cooresponding css code.</p>
<div class="text-center">
<!-- <a href="#" class="btn btn-success">Link</a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent shadow-lg">
<img class="card-img-top" src="images/loaderGif2.gif" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Background Video With Loader</h4>
<p class="card-text">I created a background video to be played on a webpage with the options to pause and
resume. Before the video is loaded there is a loader that appears so there is no whitespace for the
veiwer while waiting. This was a javascript focused project that used html and css.</p>
<div class="text-center">
<!-- <a href="#" class="btn btn-success">Link</a> -->
</div>
</div>
</div>
</div>
<div class="col-lg-4 mt-4">
<div class="card portfolioContent shadow-lg">
<img class="card-img-top" src="images/ticTacToeGif1.gif" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Tic Tac Toe Game</h4>
<p class="card-text">This game was written with Python and one of my first projects I completed. Being
able to write code that turned into something I can see and interact with was a big driver for me to
continue to learn. The program allows you to play tic tac toe, log your moves, and has an algorithm that
can predict and counter moves! </p>
<div class="text-center">
<!-- <a href="#" class="btn btn-success">Link</a> -->
</div>
</div>
</div>
</div>
</div>
<div class="card text-center shadow-lg">
<div class="card-body">
Click <a href="https://www.github.com/teejhieg" target="_blank"><i class="fab fa-github"></i></a> for code for these projects and more
</div>
</div>
</section>
<!-- contact section-->
<section id="contact">
<div class="container mt-3 contactContent">
<h1 class="text-center5">Contact Me</h1>
<div class="row mt-4">
<div class="col-lg-6">
<!-- to edit google map goto https://www.embed-map.com type your location, generate html code and copy the html -->
<div style="max-width:100%;list-style:none; transition: none;overflow:hidden;width:500px;height:500px;">
<div id="embeddedmap-canvas" style="height:100%; width:100%;max-width:100%;">
<iframe style="height:100%;width:100%;border:0;" frameborder="0"
src="https://www.google.com/maps/embed/v1/place?q=1211+ridgeland+cir&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8">
</iframe>
</div>
<a class="googlemap-code" href="http://dedicatedhosting.pro"
id="get-data-forembedmap">http://dedicatedhosting.pro</a>
<style>
#embeddedmap-canvas img {
max-height: none;
max-width: none !important;
background: none !important;
}
</style>
</div>
</div>
<div class="col-lg-6">
<!-- form fields -->
<form name="contact" netlify>
<input type="text" class="form-control form-control-lg" placeholder="Name">
<input type="email" class="form-control mt-3" placeholder="Email">
<input type="text" class="form-control mt-3" placeholder="Subject">
<div class="mb-3 mt-3">
<textarea class="form-control" rows="5" id="comment" name="text" placeholder="Project Details"></textarea>
</div>
</form>
<button type="submit" class="btn btn-success mt-3">Contact Me</button>
</div>
</div>
</div>
</section>
<!-- footer section-->
<footer id="footer">
<div class="container-fluid">
<!-- social media icons -->
<div class="social-icons mt-4">
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://www.github.com/teejhieg" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/tj-hiegel-4964371ab/" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</footer>
<!-- load javascript after loading all html content -->
<script src="/script.js"></script>
</body>
</html>