-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexperience.html
212 lines (200 loc) · 11.8 KB
/
experience.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
<!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 - Experience</title>
<meta name="description"
content="Michael's web development experience with Capgemini in customer acquistions and the creditcards.chase.com microsite">
<meta name="robots" content="index, follow">
<!-- SEO: Author and keywords -->
<meta name="author" content="Michael J. Thompson">
<meta name="keywords"
content="Web development experience, experience, current projects. Landing pages, WCAG, Debugging, NVDA, JAWS, screen readers">
<!-- 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/experience.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">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 active">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>
</header>
<main id="experience">
<div class="container-fluid container-md">
<div class="row">
<div class="col-12">
<div class="ext-links float-end mt-4">
<a href="pdf/resume.pdf" target="_blank" class="btn btn-primary me-2">
View CV
<span class="visually-hidden">Open new window to pdf document. C V of Michael J.
Thompson</span>
</a>
<a href="pdf/resume.docx" target="_blank" class="btn btn-primary">
Download CV
<span class="visually-hidden">Opens dialog box for download of a Microsoft Word document. C
V of Michael J.
Thompson</span>
</a>
</div>
<h2 class="text-primary mt-4 mb-4">Projects</h2>
<h3 class="pt-2 pt-md-0">Marketplace microsite:</h3>
<ul>
<li>At <a href="https://www.capgemini.com" target="_blank">Capgemini</a>, I'm currently working
on our flagship microsite <a href="https://creditcards.chase.com"
target="_blank">creditcards.chase.com</a> for <a href="https://www.jpmorganchase.com/"
target="_blank">J.P. Morgan Chase</a> as part of a cross-functional team. I manage
content updates, troubleshoot WCAG errors and approve Gitlab merge requests. Utilize Jenkins
for CI/CD pipelines to automate the build and deployment process, ensuring streamlined
integration and delivery.
</li>
<li>Gaining new experience with Adobe Experience Manager and Jira as this site gets migrated to
the new platform.
</li>
</ul>
<h3>Customer Acquisitions:</h3>
<ul>
<li>Collaborate with project managers, graphic designers, DevOps and software engineers to
successfully meet project requirements for landing pages and microsites.</li>
<li>Develop with mobile-first design, responsiveness and cross-browser compatibility in mind on
all projects. Ensuring that pages are designed semantically and meet WCAG standards for ADA
accessibility using NVDA/JAWS screen readers and Voiceover for the visually impaired. Use
BrowserStack for device specific troubleshooting.</li>
<li>Collaborate with design team to translate wireframes and mockups into interactive user
interfaces. Convert Figma designs into responsive HTML/CSS layouts, ensuring pixel-perfect
accuracy and adherence to design specifications.</li>
<li>Build usability landing pages for client UX evaluation and feedback.</li>
<li>Coordinate workflow for daily stage and production releases with quality assurance and
DevOps leads. Enter clear and concise instructions into our Workfront project management
tool for seamless communication between departments.</li>
<li>Conduct thorough testing and debugging to ensure functionality across various devices and
browsers, achieving a consistent user experience.</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>