-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
359 lines (359 loc) · 21.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Matthew Dorner - Developer Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./jquery.transit.min.js"></script>
<script src="./bootstrap.min.js"></script>
<link rel="stylesheet" href="./fontawesome-v5-6-3.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="./portfolio.css">
</head>
<body>
<div class="modal fade" id="about-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Hello,</p>
<p>I am Matthew Dorner and this is my web development portfolio. Use the left and right arrows, or click 'Projects' to see a list of all projects.</p>
<hr />
</div>
<div class="modal-footer">
<p class="quote"></p>
<button type="button" class="btn btn-default modal-button about-close-button" id="about-modal-close-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="projects-modal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-body">
<div class="container">
<div class="row modal-header-row">
<div class="col-lg-12" style="border-radius:3px;">
<span style="font-size:1.25rem;">Projects</span>
</div>
</div>
<hr style="border-top: 2px solid silver;"/>
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(0)" style="width:100%;">ABC Songbook</button>
</div>
<div class="col-lg-2 modal-type">
Personal
</div>
<div class="col-lg-6 modal-technologies">
<i>JavaScript, React Native, Android, SQLite, React Native Navigation</i>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(1)" style="width:100%;">Abcjs VexFlow Renderer</button>
</div>
<div class="col-lg-2 modal-type">
Personal
</div>
<div class="col-lg-6 modal-technologies">
<i>JavaScript, abcjs, VexFlow, Jest, ESLint, Webpack, NPM</i>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(2)" style="width:100%;">Mattermost</button>
</div>
<div class="col-lg-2 modal-type">
Open Source
</div>
<div class="col-lg-6 modal-technologies">
<i>JavaScript, Golang, React, Redux, OAuth, CSS</i>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(3)" style="width:100%;">Benson Cloud Services</button>
</div>
<div class="col-lg-2 modal-type">
Professional
</div>
<div class="col-lg-6 modal-technologies">
<i>C#, ASP.NET MVC, JavaScript (Dojo Toolkit), SQL (SSRS), SVN</i>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(4)" style="width:100%;">HospitalRun</button>
</div>
<div class="col-lg-2 modal-type">
Open Source
</div>
<div class="col-lg-6 modal-technologies">
<i>JavaScript, TypeScript, React, Redux, Ember, CouchDB, Jest, Docker</i>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(5)" style="width:100%;">FreeCodeCamp Front End Development</button>
</div>
<div class="col-lg-2 modal-type">
Certification
</div>
<div class="col-lg-6 modal-technologies">
<i>JavaScript, JQuery, Bootstrap, HTML, CSS, AJAX</i>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(6)" style="width:100%;">Simon Game</button>
</div>
<div class="col-lg-2 modal-type">
Personal
</div>
<div class="col-lg-6 modal-technologies">
<i>JavaScript, CSS, Bootstrap, JQuery, HTML</i>
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-4 modal-name">
<button type="button" class="btn btn-default modal-button" data-dismiss="modal" autofocus="true" onclick="goToSlide(7)" style="width:100%;">Tic Tac Toe Game</button>
</div>
<div class="col-lg-2 modal-type">
Personal
</div>
<div class="col-lg-6 modal-technologies">
<i>JavaScript, CSS, Bootstrap, JQuery, HTML</i>
</div>
</div>
<hr />
</div>
</div>
<div class="modal-footer">
<p class="quote"></p>
<button type="button" class="btn btn-default modal-button" id="about-modal-close-button" data-dismiss="modal" autofocus="true">Close</button>
</div>
</div>
</div>
</div>
<div class="wrapper">
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top py-1">
<span class="navbar-brand">Matthew Dorner</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars"></i></span></button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" onClick="showAboutModal()" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" onClick="showProjectsModal()" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="MatthewDorner-Resume.pdf">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/3745354365436">LinkedIn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/matthewdorner">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.youtube.com/channel/UCZ9q9ElK406JUKrg6krolZA">YouTube</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:me@matthewdorner.com">E-Mail</a>
</li>
</ul>
</div>
</nav>
<!-- Main Container -->
<div class="container">
<!-- Carousel -->
<div id="examples-carousel" class="carousel slide" data-wrap="false" data-keyboard="true" data-interval="false">
<a class="carousel-control-prev" href="#examples-carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#examples-carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Carousel Inner -->
<div class="carousel-inner anim">
<div class="carousel-item active">
<div class="item-background"></div>
<h2 class="example-title">Personal Project - ABC Songbook</h2>
<video class="example-image" width="100%" height="100%" poster="./songbook.png" controls>
<source src="./songbook.mp4" type="video/webm">
</video>
<div class="carousel-item-text">
<p class="summary">This mobile app allows the user to import <a href="https://en.wikipedia.org/wiki/ABC_notation">ABC notation</a> music data and view it in the form of sheet music and tablature for a variety of instruments. It uses a local SQLite database which is pre-loaded with songs from <a href="https://github.com/jukedeck/nottingham-dataset">Nottingham Dataset</a>, a collection of free, open-source ABC music. It makes use of my <a href="#" onclick="goToSlide(1)">abcjs-vexflow-renderer</a> library to process and format the music.</a></p>
<p class="technologies">
Technologies: JavaScript, React Native, Redux, React Hooks, Android, SQLite, React Native Navigation
<br>
Links:
<a href="https://play.google.com/store/apps/details?id=com.reactnativesongbook">Google Play Store</a> |
<a href="https://github.com/matthewdorner/react-native-songbook">GitHub repo</a> |
<a href="https://github.com/MatthewDorner/react-native-songbook/tree/master/src/components">Components</a> |
<a href="https://github.com/MatthewDorner/react-native-songbook/tree/master/src/data-access">Database</a> |
<a href="https://github.com/MatthewDorner/react-native-songbook/tree/master/src/redux">Redux</a>
</p>
</div>
</div>
<div class="carousel-item">
<div class="item-background"></div>
<h2 class="example-title">Personal Project - Abcjs VexFlow Renderer</h2>
<img class="example-image" src="./abcjs-vexflow-renderer-screenshot.png" alt="abcjs-vexflow-renderer screenshot"/>
<div class="carousel-item-text">
<p class="summary">I started writing this code as part of my <a href="#" onclick="goToSlide(0)">react-native-songbook</a> project, then decided to break it into a separate library. This library takes the parser output of the <a href="https://github.com/paulrosen/abcjs">abcjs</a> library (for music formatted in <a href="https://en.wikipedia.org/wiki/ABC_notation">ABC notation</a>) and renders it to SVG using the <a href="https://github.com/0xfe/vexflow">VexFlow</a> music engraving library. Writing this code myself allowed me to include specific features I wanted for my app, such as the ability to generate tablature for fretted instruments, violin fingerings, harmonica and tin whistle. The repository includes a browser-based tool to view the output of the library and a unit test suite via Jest.</p>
<p class="technologies">
Technologies: JavaScript, abcjs, VexFlow, Jest, ESLint, Webpack, NPM
<br>
Links:
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer">GitHub repo</a> |
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/utils/get-tab-position.js">Guitar tab algorithm</a> +
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/utils/tests/get-tab-position.test.js">Tests</a> |
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/main/set-bar-positions.js">Position music 1</a> +
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/main/fill-empty-space.js">2</a> |
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/main/generate-vex-objects.js">Main algorithm</a> |
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/main/parse-tune-structure.js">Parser</a> |
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/utils/generate-beams-compound.js">Beam music notes</a> |
<a href="https://github.com/MatthewDorner/abcjs-vexflow-renderer/blob/master/lib/main/draw-to-context.js">Draw music</a>
</p>
</div>
</div>
<div class="carousel-item">
<div class="item-background"></div>
<h2 class="example-title">Open Source Contribution - Mattermost</h2>
<video class="example-image" width="100%" height="100%" poster="./mattermost-plugin-chess.png" controls>
<source src="./mattermost-plugin-chess.webm" type="video/webm">
</video>
<div class="carousel-item-text">
<p class="summary">I created a plugin for the <a href="https://mattermost.com/">Mattermost</a> group messaging app which allows users to play chess against each other. It uses the <a href="https://chessboardjs.com/">chessboard.js</a> and <a href="https://github.com/jhlywa/chess.js/">chess.js</a> libraries. I've also made some Golang backend contributions to other Mattermost plugins. In April of 2023, I received the recognition of <a href="https://developers.mattermost.com/contribute/more-info/mvp">Mattermost MVP</a> for the v7.10 release of the project.</p>
<div>
<hr class="summary" />
<p class="summary testimonial">
<i>
"Matthew made several open-source contributions to the server part of Mattermost Microsoft Calendar plugin. He demonstrated good knowledge of Go, provided extensive test coverage and excellent written communications for his contributions. I am looking forward to Matthew's continuing engagement with Mattermost."
</i> -
<a href="https://www.linkedin.com/in/lbrouk/">Lev Brouk, Mattermost Engineering Lead for Extensibility</a>
</p>
<hr class="summary" />
</div>
<p class="technologies">
Technologies: JavaScript, Golang, React, Redux, OAuth, CSS
<br>
Links:
<a href="https://github.com/MatthewDorner/mattermost-plugin-chess">Chess plugin GitHub repo</a> |
<a href="https://github.com/mattermost/mattermost-plugin-mscalendar/pull/188">Golang Feature PR</a> |
<a href="https://github.com/mattermost/mattermost-plugin-gitlab/pull/308">Golang OAuth Fix PR</a> |
<a href="https://github.com/mattermost/mattermost-plugin-mscalendar/pull/40">Golang PR</a> |
<a href="https://github.com/mattermost/mattermost-plugin-mscalendar/pull/42">Golang PR</a> |
<a href="https://github.com/mattermost/mattermost-plugin-mscalendar/issues/37">Golang bug report</a> |
<a href="https://github.com/mattermost/mattermost-webapp/pull/3411">mattermost-webapp PR</a> |
<a href="https://github.com/mattermost/mattermost-plugin-demo/pull/58">mattermost-plugin-demo PR</a> |
<a href="https://github.com/mattermost/mattermost-plugin-mscalendar/pull/38">Documentation fix PR</a> |
<a href="./mattermost-coffee-mug.jpg">Mattermost contributor coffee mug</a>
</p>
</div>
</div>
<div class="carousel-item">
<div class="item-background"></div>
<h2 class="example-title">Benson Medical Instruments - Benson Cloud Services</h2>
<img class="example-image" src="./bensoncloudservices.jpg" alt="Benson Cloud Services screenshot"/>
<div class="carousel-item-text">
<p class="summary">Benson Cloud Services is a web application for storage and analysis of occupational health testing data. I was a developer on this project for 8 months and worked on the frontend, backend and SSRS reporting module.</p>
<p class="technologies">
Technologies: C#, ASP.NET MVC, JavaScript (Dojo Toolkit), SQL (SSRS), SVN
<br>
Links:
<a href="https://www.youtube.com/watch?v=DJEwcp0adNU">YouTube video</a>
</p>
</div>
</div>
<div class="carousel-item">
<div class="item-background"></div>
<h2 class="example-title">Open Source Contribution - HospitalRun</h2>
<img class="example-image" src="./hospitalrun.png" alt="HospitalRun screenshot"/>
<div class="carousel-item-text">
<p class="summary">HospitalRun is a web application for hospital management written in JavaScript with an offline-first design. It originally used Ember, but is now being rewritten in React with Redux and TypeScript. I made contributions to both stages of the project.</p>
<p class="technologies">
Technologies: JavaScript, TypeScript, React, Redux, Ember, CouchDB, Jest, Docker
<br>
Links:
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1845">React-Redux feature</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1819">Jest test fixes</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1806">React-Redux feature</a> |
<a href="https://github.com/HospitalRun/components/pull/193">React Component</a> +
<a href="https://github.com/HospitalRun/components/pull/172">React Component</a> |
<a href="https://github.com/HospitalRun/components/pull/201">SASS Bootstrap theme</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1526">Ember fix</a> |
<a href="https://github.com/HospitalRun/hospitalrun-server/pull/111">Docker config</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1466">Reviewing a PR</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1424">Deprecation fix</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1447">Bugfix and test cases</a> |
<a href="https://github.com/HospitalRun/hospitalrun-server/pull/119">Docker and Node.js config fix</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/issues/1440">Bug report</a> +
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1441">Fix</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/issues/1561">Troubleshooting</a> +
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1562">Fix</a> +
<a href="https://github.com/HospitalRun/hospitalrun-frontend/pull/1563">Fix</a> |
<a href="https://github.com/HospitalRun/hospitalrun-frontend/issues/1518">Electron config</a>
</p>
</div>
</div>
<div class="carousel-item">
<div class="item-background"></div>
<h2 class="example-title">Certification - FreeCodeCamp Front End Development</h2>
<img class="example-image" src="./certificate.png" alt="FreeCodeCamp Certification image"/>
<div class="carousel-item-text">
<p class="technologies">
Technologies: JavaScript, JQuery, Bootstrap, HTML, CSS, AJAX
<br>
Links:
<a href="https://www.freecodecamp.org/certification/matthewdorner/legacy-front-end">Certification</a>
</p>
</div>
</div>
<div class="carousel-item">
<div class="item-background"></div>
<h2 class="example-title">Personal Project - Simon Game</h2>
<img class="example-image" src="./simon.png" alt="Simon game screenshot"/>
<div class="carousel-item-text">
<p class="summary">This "Simon" game in JavaScript was an exercise I did for the FreeCodeCamp Front End Developer course.</p>
<p class="technologies">
Technologies: JavaScript, CSS, Bootstrap, JQuery, HTML.
<br>
Links:
<a href="https://codepen.io/MatthewDorner/pen/bMvJzy">CodePen</a>
</p>
</div>
</div>
<div class="carousel-item">
<div class="item-background"></div>
<h2 class="example-title">Personal Project - Tic Tac Toe Game</h2>
<img class="example-image" src="./tictactoe.png" alt="Tic Tac Toe game screenshot"/>
<div class="carousel-item-text">
<p class="summary">This "Tic Tac Toe" game in JavaScript was an exercise I did for the FreeCodeCamp Front End Developer course.</p>
<p class="technologies">
Technologies: JavaScript, CSS, Bootstrap, JQuery, HTML.
<br>
Links:
<a href="https://codepen.io/MatthewDorner/pen/ELoyKa">CodePen</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>