-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (186 loc) · 9.2 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
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Mark Halverstadt Web Dev</title>
<meta name="description" content="Mark Halverstadt's personal portfolio and landing page">
<meta charset="utf-8" />
<script src="https://kit.fontawesome.com/81bae0ccbe.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1," />
<link rel="stylesheet" href="assets/css/main2.css" />
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<div class="inner">
<a href="#aboutMe" class="image avatar"><img src="images\PXL_20220913_221424042.PORTRAIT1.webp" alt="my profile picture" /></a>
<h1><strong>Hi! I'm Mark Halverstadt</strong>,
your next software engineer based in Denver CO.
Let's build something <a href="#three">together</a>.</h1>
</div>
</header>
<!-- Main -->
<div id="main">
<!-- One -->
<section id="one">
<header class="major">
<h2>Building Things For The Web.<br />What do you need?</h2>
</header>
<p>From small webpages to full stack web applications - let’s build it.</p>
<ul class="actions">
<li><a href="#aboutMe" class="button">Learn More</a></li>
</ul>
</section>
<!-- Two -->
<section id="two">
<h2>Recent Work</h2>
<div class="row">
<article class="col-6 col-12-xsmall work-item">
<a href="https://the-flavor-db.cyclic.app/" class="image fit thumb"><img src="images/thumbs/the-flavor-db_2_725x432.webp" alt="The Flavor DB website" /></a>
<h3>The Flavor DB</h3>
<p>A full-stack web application that enables chefs to assemble and share
flavor profiles with smart flavor-pairing recommendations. Built with EJS, CSS, Tailwind, JavaScript, Node, Express, MongoDB, and local auth</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="https://national-parks-api.cyclic.app/" class="image fit thumb"><img src="images/thumbs/national-parks-api2.webp" alt="national parks website" /></a>
<h3>National Parks API</h3>
<p>Small App with fuzzy auto-complete search, built with MongoDB, HTML, CSS and Cyclic</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="https://lightness-of-bean.netlify.app" class="image fit thumb"><img src="images/thumbs/coffee-thumb2.webp" alt="coffee shop website" /></a>
<h3>The Unbearable Lightness of Bean</h3>
<p>Denver Coffee Shop website.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="https://about-dumpling.netlify.app/" class="image fit thumb"><img src="images/thumbs/dumpling-thumb2.webp" alt="dumpling restaurant website" /></a>
<h3>Much Ado About Dumpling</h3>
<p>Denver Dumpling Restaurant website</p>
</article>
</div>
</section>
<!-- Insert The Process-->
<!-- <section id="about">
<h2>The Process</h2>
<section class = "process">
<section class = "steps">
<h1><i class="fa-regular fa-comments fa-xl"></i></h1>
<h4>Consultation</h4>
<p>Time to get creative! What do you need your website to do? What do you want it to achieve? What do you want it to look like? Let’s talk about it.
</p>
</section>
<section class = "steps">
<h1><i class="fa-solid fa-pen-to-square fa-xl"></i></h1>
<h4>Proposal</h4>
<p> I’ll send you a detailed proposal outlining what we discussed, a mock up of how it might look and how we’re going to get it done.
</p>
</section>
<section class = "steps">
<h1><i class="fa-solid fa-laptop-code fa-xl"></i></h1>
<h4>Creation</h4>
<p>Let’s build it. With regular updates on how the project is progressing you will be involved in making sure your vision is coming together just the way you want.
</p>
</section>
<section class = "steps">
<h1><i class="fa-solid fa-rocket fa-xl"></i></h1>
<h4>Launch</h4>
<p>Time to go live! Your project along with all corresponding files will be transferred to you with ongoing support available.
</p>
</section>
</section> -->
<ul class="actions">
<!-- <li><a href="#" class="button">Learn More</a></li> -->
</ul>
</section>
<!-- About Me -->
<section>
<h2>About Me</h2>
<section id='aboutMe'>
<!-- <section class = 'aboutMeSections'>
<h4>Skills</h4>
<ul >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>MongoDB</li>
<li>Node.js</li>
<li>Express</li>
<li>React</li>
</ul>
</section> -->
<section class = 'me'>
<p>Though I’ve always had a deep interest in tech since I was young, I devoted the first chapter of my career to my other passion: culinary arts. After college I moved to NYC and I was classically trained at the French Culinary Institute and worked in some of the top-rated restaurants in New York before moving out to the Bay Area where I took my skills to Pixar Animation Studios working in the culinary department. Throughout my culinary career my interest in technology remained, I tracked tech news and built my own computer to learn about hardware. And while working at Pixar, being around some of the most creative and innovative people in technology, that environment made me even more curious about the field. Our department was shut down during the pandemic, and I had the time to dive deep into coding and found it incredibly satisfying. I was inspired to complete a full-stack web development program and began doing freelance work.</p>
<p>When I'm not in front of a computer or over a stove, you can find me in the mountains.</p>
</section>
</section>
</section>
<section>
<h2>Skills</h2>
<div class="svgs">
<img class ="icon" src="images/SVG/html-5-svgrepo-com.svg" alt="html5 logo">
<img class ="icon" src="images/SVG/css-3-svgrepo-com.svg" alt="html5 logo">
<img class ="icon" src="images/SVG/javascript-svgrepo-com.svg" alt="html5 logo">
<img class ="icon" src="images/SVG/node-js-svgrepo-com.svg" alt="html5 logo">
<img class ="icon" src="images/SVG/express-svgrepo-com.svg" alt="html5 logo">
<img class ="icon" src="images/SVG/mongodb-svgrepo-com.svg" alt="html5 logo">
<img class ="icon" src="images/SVG/react-svgrepo-com.svg" alt="html5 logo">
</div>
</section>
<!-- Three -->
<section id="three">
<h2>Get In Touch</h2>
<p>Please contact me with any questions!</p>
<div class="row">
<div class="col-8 col-12-small">
<form method="post" action="#" netlify>
<div class="row gtr-uniform gtr-50">
<div class="col-6 col-12-xsmall"><input type="text" name="name" id="name" placeholder="Name" /></div>
<div class="col-6 col-12-xsmall"><input type="email" name="email" id="email" placeholder="Email" /></div>
<div class="col-12"><textarea name="message" id="message" placeholder="Message" rows="4"></textarea></div>
</div>
</form>
<ul class="actions" netlify>
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>
<div class="col-4 col-12-small">
<ul class="labeled-icons">
<li>
<h3 class="icon solid fa-home"><span class="label">Address</span></h3>
Denver CO, 80212<br />
United States<br />
</li>
<li>
<h3 class="icon solid fa-mobile-alt"><span class="label">Phone</span></h3>
360-701-****
</li>
<li>
<h3 class="icon solid fa-envelope"><span class="label">Email</span></h3>
<a href="mailto: markhalverstadt@gmail.com">markhalverstadt@gmail.com</a>
</li>
</ul>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="https://twitter.com/MarkHalverstadt" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/mhalverstadt" class="icon brands fa-github"><span class="label">Github</span></a></li>
<li><a href="https://www.linkedin.com/in/mark-halverstadt/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="mailto: markhalverstadt@gmail.com" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Mark Halverstadt</li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>