-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
228 lines (216 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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Michael J. Thompson - Portfolio - Bootstrap Project</title>
<meta name="description"
content="Michael's portfolio project showcasing web development skills in Bootstrap 5, HTML, CSS, WCAG Compliance and JavaScript.">
<meta name="robots" content="index, follow">
<!-- SEO: Author and keywords -->
<meta name="author" content="Michael J. Thompson">
<meta name="keywords"
content="Web Developer, Portolio, Bootstrap, Bootstrap 5, Responsive, HTML, CSS, SCSS, WCAG Compliance and JavaScript.">
<!-- Social Sharing: Open Graph -->
<meta property="og:title" content="Michael's Web Developer Portfolio">
<meta property="og:description"
content="Explore Michael's bootstrap web development project with HTML, CSS, and JavaScript.">
<meta property="og:image" content="images/mike.jpeg">
<meta property="og:url" content="https://www.mikethompson100.com/index.html">
<!-- Twitter Card: Twitter link sharing -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Michael's Web Developer Bootstrap Portfolio Project">
<meta name="twitter:description"
content="Web development portfolio project highlighting Bootstrap 5, HTML, CSS, JavaScript.">
<meta name="twitter:image" content="images/mike.jpeg">
<link rel="icon" href="https://www.mikethompson100.com/images/favicon.ico" type="image/x-icon">
<!--
This website uses Bootstrap framework (https://getbootstrap.com)
Bootstrap is licensed under the MIT License (https://opensource.org/licenses/MIT)
Bootstrap is a product of Twitter, Inc.
-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="dist/css/styles.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container-fluid container-md">
<button type="button" class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse"
aria-controls="navbarNav" 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 href="index.html" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="skills.html" class="nav-link">Skills</a>
</li>
<li class="nav-item">
<a href="experience.html" class="nav-link">Experience</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">About</a>
</li>
</ul>
</div>
<div id="nav-logos" class="d-flex align-items-center justify-content-end nav-logos">
<div>
<a href="https://www.linkedin.com/in/mikethompson100/" target="_blank"><img
src="https://www.mikethompson100.com/images/external/[email protected]"
class="img-fluid" alt="linked in profile"></a>
</div>
<div>
<a href="https://github.com/mikethompson100/portfolio_bootstrap" target="_blank"><img
src="https://www.mikethompson100.com/images/external/github-mark-white.svg"
class="img-fluid" alt="github portfolio for this site"></a>
</div>
</div>
</div>
</nav>
<div class="text-bg-primary navTitle">
<div class="container-fluid container-md">
<div class="row">
<div class="col-12 navheight d-flex align-items-center">
<h1>Michael J. Thompson - Front End Developer</h1>
</div>
</div>
</div>
</div>
<div class="hero"></div>
</header>
<main id="home">
<div class="container-fluid container-md">
<div class="row">
<div class="col-12 ps-3">
<h2 class="text-primary mt-4 mb-3">Welcome</h2>
<p>My name is Michael. I have been working in Front-end Web Development for the past 15 years for
<a href="https://www.capgemini.com" target="_blank">Capgemini</a>, an international IT Services
and Consulting firm. I am a very passionate troubleshooter, creative
problem solver and I like to think outside of the box when debugging code. I have been using
Bootstrap for about 7 years for responsive design. I am WCAG Certified and have experience with
accessibility and screenreaders like NVDA and JAWS.
</p>
<p>I have years of experience in troubleshooting problems and have acquired great technical
instincts in approaching solutions to problems using past similar experiences as a reference.
</p>
<p>My approach to development can be summed up in several personal common sense principles:</p>
<ol>
<li><strong>Don't reinvent the wheel.</strong> If there is a fix for something that already
exists in the
codebase or other location, be aware of it and use it. Save time and maintain consistency
throughout.</li>
<li><strong>My three methods of working for successful code delivery:</strong>
<ul class="py-2">
<li class="py-2"><strong class="text-primary">Speed</strong>: Delivering code on-time.
Be fast, but don't rush and sacrifice accuracy. Having the coding maturity to
realize when the workload gets too heavy and you fall behind and ask for help from
the team. Always be aware of changing priorities so you can deliver on-time.</li>
<li class="py-2"><strong class="text-primary">Accuracy</strong>: Taking the necessary
time to do the work itself, spot check the work, review in mobile and desktop, have
an awareness of the impact of the changes and avoid side effects. However, don't
spend too much time being a perfectionist and sacrifice speed.</li>
<li class="py-2"><strong class="text-primary">Best Practices</strong>: Best practices is
not just about writing the code for yourself but also keeping your teammates in mind
as well. Writing comments and writing the code through the eyes of someone that has
never seen it before is key. Shortcuts and technical debt should be avoided if
possible so you and your teammates do not get slowed down by it in the future.
Following best practices can also help us avoid unnecessary validation and
accessibility errors.<br>
<span class="text-danger"><em>“Always code as if the guy who ends up maintaining
your code will be a violent psychopath who knows where you live” ― John
Woods</em></span>
</li>
</ul>
</li>
<li><strong>Less code is more.</strong> Code that doesn't exist can't produce an accessibility
error or produce a
bug. Keeping code simple, refactoring and keeping it efficient for others.</li>
<li><strong>Have a "Microscope" and "Telescope" mentality</strong>: Like a 'football quarterback
in the pocket',
there needs to always be a timer in your head where you put down the microscope of deep code
work and come out to see the big picture, check emails, messages and make sure that
priorities have not changed.</li>
<li><strong>Always be situationally aware</strong> and keep the big picture and business
requirements in mind. If
something doesn't make sense or is inconsistent with the requirements, ask.</li>
<li><strong>Make sure there is a backup</strong> to fall back on in version control when
experimenting with code or files if it needs
to be restored.</li>
</ol>
<p>Some other tools that I use for Accessibility and Validation testing are:</p>
<ul>
<li>WAVE Chrome Extension</li>
<li>Validity Chrome Extension</li>
<li>BrowserStack to debug device-specific issues</li>
</ul>
</div>
</div>
</div>
</main>
<footer>
<hr>
<div class="container-fluid container-md footer-bg">
<div class="row">
<div class="col-4 g-0">
<div class="row bord">
<div class="d-flex pb-2"> </div>
</div>
<div class="row">
<div class="d-flex justify-content-around justify-content-sm-evenly bord">
<a href="https://www.linkedin.com/in/mikethompson100/" class="img-fluid" target="_blank"><img
src="https://www.mikethompson100.com/images/external/In-Blue-40.png"
alt="linked in profile"></a>
<a href="https://github.com/mikethompson100/portfolio_bootstrap" class="img-fluid" target="_blank"><img
src="https://www.mikethompson100.com/images/external/github-mark.png"
alt="github portfolio for this site"></a>
</div>
</div>
</div>
<div class="col-8 g-0">
<div class="container">
<div class="row">
<div class="d-flex justify-content-center pb-2">Validations</div>
</div>
<div class="row justify-content-around">
<div class="col-3 col-md-4 d-flex justify-content-center">
<a href="https://chromewebstore.google.com/detail/validity/bbicmjjbohdfglopkidebfccilipgeif"
target="_blank"><img
src="https://www.mikethompson100.com/images/external/validity.png"
alt="Validity evaluation tool"></a>
</div>
<div class="col-3 col-md-4 d-flex justify-content-center">
<a href="https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US"
target="_blank"><img src="https://www.mikethompson100.com/images/external/wave.png"
alt="Wave evaluation tool">
</a>
</div>
<div class="col-3 col-md-4 d-flex justify-content-center">
<a href="https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk"
target="_blank"><img
src="https://www.mikethompson100.com/images/external/lighthouse.png"
alt="Lighthouse evaluation tool"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="dist/js/scripts.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G072HJDRS4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-G072HJDRS4');
</script>
</body>
</html>