-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
214 lines (201 loc) · 13.4 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
<!DOCTYPE HTML>
<!--
Read Only by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="en">
<head>
<!-- Matomo Tag Manager -->
<script>
var _mtm = window._mtm = window._mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
(function() {
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src='https://matomo-g6ro.onrender.com/js/container_BMAGEN4N.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Tag Manager -->
<meta name="description" content="Portfolio website for professional software engineer and web developer John Wheeler, skilled in TypeScript, React, Node.js, Next.js, MongoDB, HTML5, CSS3, accessibility, Git, SCRUM, Agile, Express, Mongoose, and more">
<meta name="keywords" content="react developer, javascript developer, software engineer for hire, colorado web developer, denver web developer, typescript developer, professional software engineer, john wheeler, john wheeler software engineer">
<title>John Wheeler - Software Engineer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta property="og:image" content="https://i.ibb.co/Tw0wXkj/ogimage.png" />
<link rel="stylesheet" href="assets/css/main.css" />
<body class="is-preload">
<!-- Header -->
<section id="header">
<header>
<span class="image avatar"><img src="images/headshot480.webp" alt="professional headshot photo of John Wheeler" /></span>
<h1 id="logo"><a href="#">John Wheeler</a></h1>
<p>Professional full stack web developer</p>
</header>
<nav id="nav">
<ul>
<li><a href="#about" class="active">About</a></li>
<li><a href="#tech-stack">My Tech Stack</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<footer>
<ul class="icons">
<li><a href="https://www.linkedin.com/in/johnbwheelerv/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/wheeler6123" class="icon brands fa-github"><span class="label">Github</span></a></li>
<li><a href="mailto:[email protected]" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
</ul>
</footer>
</section>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<!-- One -->
<section id="about">
<div class="image main" data-position="center">
<img src="images/redrocks.webp" alt="" />
</div>
<div class="container">
<header class="major">
<h2>Hey, I'm John Wheeler</h2>
<p>I am a professional full stack software engineer<br />
based in the Mid-Atlantic area and I would love to work with you and your team!</p>
</header>
<p>Are you looking for a driven full stack software engineer to join your team and work together writing clean scalable code? A software engineer with a proven history of achieving and setting goals, leadership experience, and proficiency for learning and understanding complex technical subject matter? Don't hesitate, reach out now so I can tell you more about all of the value I can bring to your team and organization and let's get started today!</p>
</div>
</section>
<!-- Two -->
<section id="tech-stack">
<div class="container">
<h3>Tech Stack Skills</h3>
<p>These are just a few of the skills I am proficient in at this time. If I am not already using one or more of the technologies used in your stack, I am a fast learner and my development as a programmer is founded on the fundamental principles of programming, not technology specific. Most recently, my work is comprised primarily of TypeScript, Node.js, React, Next.js, and MongoDB.</p>
<ul class="feature-icons">
<li class="icon brands fa-js-square">JavaScript/TypeScript</li>
<li class="icon brands fa-react">React</li>
<li class="icon brands fa-node">Node.js</li>
<li class="icon brands fa-linux">Linux</li>
<li class="icon brands fa-git">Git</li>
<li class="icon brands fa-stack-overflow">Stack Overflow - for when all else fails!</li>
</ul>
</div>
</section>
<!-- Three -->
<section id="portfolio">
<div class="container">
<h3>Check Out My Work</h3>
<p>Take a look at a few of my more recently built sites and web applications.</p>
<div class="features">
<article>
<a href="https://geargremlin.onrender.com" class="image"><img src="images/geargrem690.webp" alt="the items dashboard on the gear gremlin outdoor adventure app" /></a>
<div class="inner">
<h4>Gear Gremlin - Full Stack Application</h4>
<p><strong>TypeScript, React, MongoDB, JWT, OAuth, Vite, Recharts </strong> - Login using your secure encrypted credentials or use your Google account for fast registration and gain access to the powerful elegant dashboard interface driving the user experience. Easily create your own gear inventory where React charts and table components offer a simple yet sophisticated visual overview of your gear chest. When you are ready to plan your next adventure, effortlessly navigate to the Trip Planner where you can select the items from your stash and add them to your pack. If it's a backpacking trip or an expedition into the remote backcountry where every ounce counts, you're in luck! Your pack weight is monitored in real time as you add and remove gear. Once you are finished, save the trip for future use, export the pack list, share it with your companions and of course, use it as a packing checklist to ensure you don't forget any critical gear! Feel free to login using the demo account credentials below to explore a sandbox version of the app with preloaded data.
<br />
<br />
Demo Login: <br />
Email - [email protected] <br /> Password - DemoPass$1
</p>
</div>
</article>
<article>
<a href="http://realizedreamstravel.onrender.com" class="image"><img src="images/travel690.webp" alt="professionally built Nextjs website for Realize Dreams Travel Agency" /></a>
<div class="inner">
<h4>Travel Agency - Next.js Website</h4>
<p><strong>Next.js, TypeScript, React, Tailwind CSS</strong> - Custom website for a travel agency featuring a sleek and dynamic responsive interface, captivating visual elements, a dark-mode light-mode toggle, and perfect 100 Lighthouse scores for Accessibility, Best Practices, and SEO! Harnessing the power of cutting-edge image optimization technology, this stunning design delivers lightning-fast performance and fluid navigation even while hosting high-definition statically rendered images and a smooth bug-free image carousel component featured in the hero section to grab the user's attention immediately. A website delivering as much beauty as the world-class destinations it features!</p>
</div>
</article>
<article>
<a href="http://soblandscapedesign.netlify.app" class="image"><img src="images/landscape-690.webp" alt="homepage for SOB Landscape & Design professional landscaping contractor website" /></a>
<div class="inner">
<h4>Landscape & Design - Conventional HTML5 Website</h4>
<p><strong>HTML5, CSS3, JavaScript </strong>- A simple yet sophisticated build for a landscaping contractor, this thoughtfully curated site showcases the timeless utility of HTML, CSS, and JavaScript. Featuring SEO-friendly blog posts to drive customer engagement, a richly detailed company history, and a form element inviting potential clients to reach out, this site cuts through the competition to drive increased lead activity, conversions, and most importantly, revenue! Highly efficient, optimized for accessiblity, and a perfect 100 Lighthouse score for SEO.</p>
</div>
</article>
<article>
<a href="https://github.com/reactjs/react.dev/pull/6735" class="image"><img src="images/reactDevOsContribution.webp" alt="side-by-side screenshots of open source contribution to React Dev repository showing issue and resolution" /></a>
<div class="inner">
<h4>Open Source Software Contribution - ReactJS </h4>
<p><strong>React, Next.js, TypeScript, Tailwind CSS</strong> - Resolved a bug in the React.dev source code and documentation repo. <br> <br>Issue: Error messages were formatted all on one line, but should have new lines. <br><br>Solution: Wrapped the parsedContent object containing the ErrorDecoderContext and the errorMessage content in a new div, applying the Tailwind CSS class rule for whitespace: pre-line in order to preserve whitespace and break on newline characters.</p>
</div>
</article>
<article>
<a href="https://wildturkeydatedecoder.onrender.com" class="image"><img src="images/turkeydecoder690.webp" alt="screenshot of the wild turkey date decoder application" /></a>
<div class="inner">
<h4>Wild Turkey Bottling Date Decoder </h4>
<p><strong>TypeScript, React, Next.js, Tailwind CSS</strong> - This popular web application built with the latest web development technologies features a clean and intuitive UI that allows hundreds of whiskey enthusiasts every month to enter the laser code off of a bottle of Wild Turkey whiskey and instantly discover the exact date the bottle was filled. Responsive and accessible, this optimized web application scores perfect 100s across all areas of Lighthouse, including performance, accessibility, best practices, and SEO! Want to try it out? Enter code L0218FF1059 or L2625213 to see it in action!</p>
</div>
</article>
<!-- <article>
<a href="http://mandolinebistro.netlify.app" class="image"><img src="images/mandoline-688.webp" alt="homepage for mandoline bistro & cafe website" /></a>
<div class="inner">
<h4>Mandoline Bistro & Cafe - Static React Website</h4>
<p><strong>TypeScript, React, Vite</strong> - Another custom built website, this one for a restaurant and bakery. Utilizes a responsive scrolling carousel component that adapts for a proper viewing experience on any size device screen.</p>
</div>
</article> -->
</div>
</div>
</section>
<!-- Four -->
<section id="contact">
<div class="container">
<h3>Contact Me</h3>
<p>Please feel free to contact me via email or LinkedIn to discuss any opportunities</p>
<form method="post" action="submit" name="contact" netlify>
<div class="row gtr-uniform">
<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"><input type="text" name="subject" id="subject" placeholder="Subject" /></div>
<div class="col-12"><textarea name="message" id="message" placeholder="Message" rows="6"></textarea></div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" class="primary" value="Send Message" /></li>
<li><input type="reset" value="Reset Form" /></li>
</ul>
</div>
</div>
</form>
</div>
</section>
</div>
<!-- Footer -->
<section id="footer">
<div class="container">
<ul class="copyright">
<li>© 2024 - John Wheeler. All rights reserved.</li><li>Design: HTML5 Up</li>
</ul>
</div>
</section>
</div>
<div id="modal">
<div class="modalContent">
<p>Hi! This page is the portfolio website for John Wheeler, a professional software engineer available for hire. If you are looking for the John Wheeler Web Development Agency, please click the link below.</p>
<button id="portfolio-button">Continue to John Wheeler's Portfolio</button>
<a href="https://johnwheelerdevagency.onrender.com">
<button id="agency-button">John Wheeler Dev Agency</button>
</a>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.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>
<script>
window.onload = function() {
// Select the modal and the portfolio button
var modal = document.getElementById('modal');
var portfolioButton = document.getElementById('portfolio-button');
// Display the modal when the page loads
modal.style.display = 'block';
// Hide the modal when the portfolio button is clicked
portfolioButton.onclick = function() {
modal.style.display = 'none';
}
}
</script>
</body>
</html>