-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
394 lines (393 loc) · 39 KB
/
Copy pathindex.html
File metadata and controls
394 lines (393 loc) · 39 KB
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
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
<!doctype html>
<html lang="en">
<head>
<title>Patrick Warner | Github.io</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio Resume Information page for Patrick Warner">
<meta name="author" content="Patrick Warner">
<meta property="og:title" content="Patrick Warner | github.io">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pnwarner.github.io/">
<meta property="og:description" content="Portfolio Resume Information page for Patrick Warner">
<meta property="og:image" content="https://pnwarner.github.io/media/ident_medium-grey.svg">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="16x16" href="media/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="24x24" href="media/favicon/favicon-24x24.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="32x32" href="media/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="48x48" href="media/favicon/favicon-48x48.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="64x64" href="media/favicon/favicon-64x64.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="96x96" href="media/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="180x180" href="media/favicon/favicon-180x180.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="192x192" href="media/favicon/favicon-192x192.png">
<link rel="icon" type="image/png" rel="noopener" target="_blank" sizes="196x196" href="media/favicon/favicon-196x196.png">
<link rel="apple-touch-icon" rel="noopener" target="_blank" sizes="180x180" href="media/favicon/favicon-180x180.png">
<link rel="apple-touch-icon" rel="noopener" target="_blank" sizes="196x196" href="media/favicon/favicon-196x196.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://pnwarner.github.io/style/style.css">
<link rel="stylesheet" href="style/site-status.css">
</head>
<body>
<header>
<nav class="fixed">
<div class="navmenu flexbox flex-row accent-text-color">
<div class="nav-left">
<div class="flexbox flex-row item-center">
<img class="nav-image" src="https://pnwarner.github.io/media/site-media/paradoxi.webp" />
<a class="nav-logo-link" href="https://pnwarner.github.io/">pnwarner<span class="article-bg-color">.github.io</span></a>
</div>
</div>
<div class="nav-right">
<a class="nav-link" href="#projects">Projects</a> | <a class="nav-link" href="https://pnwarner.github.io/blog">Blog</a> | <a class="nav-link" href="#contact">Contact</a>
</div>
</div>
</nav>
</header>
<main>
<section class="hero flexbox item-center content-center" id="top-section">
<div class="flexbox flex-row accent-text-color">
<div class="headshot"></div>
<div class="flexbox flex-column align-end">
<h1 class="accent-text-color">
Patrick Warner
</h1>
<p class="text-underline">Web & Software Development | IT | Design</p>
</div>
</div>
</section>
<!--Intro Paragraph-->
<section>
<article class="article-top-margin article-padding">
<p class="paragraph-margin article-paragraph">
Patrick leverages his formal education in computer science, graphic design, and fine arts as a full-stack developer with expertise in HTML, CSS, JavaScript, PHP, and Python. This well-rounded skillset allows him to manage all aspects of web development. Beyond the web, his strong computer science foundation empowers him to utilize various programming languages for data analysis and automate complex solutions. Additionally, Patrick's understanding of IT infrastructure and server hosting ensures efficient application deployment and maintenance.
</p>
<p class="paragraph-margin indent-paragraph">
Driven by a lifelong passion for science and technology, Patrick thrives on learning and applying his knowledge to real-world projects. With a "DIY ethos," he enjoys designing and building projects from the ground up, acquiring a multifaceted understanding of project development. Patrick's proven ability to quickly grasp new technologies enables him to creatively solve complex problems.
</p>
</article>
</section>
<!--Professional Projects-->
<section id="projects">
<article class="article-top-margin article-padding">
<h2>Professional Projects</h2>
<!--SWMedia.tv-->
<div class="project-container flexbox">
<div class="flexbox project-logo-container">
<img class="project-image-container" src="https://pnwarner.github.io/media/site-media/swmedia-logo.webp" />
<div class="flexbox project-name-container">
<h3 class="project-name"><a href="https://swmedia.tv/">SWMedia.tv</a></h3>
<hr>
<div class="flexbox project-tags-container">
<div class="project-tag">Front-End Development</div>
<div class="project-tag">Web Development</div>
<div class="project-tag">Web Design</div>
<div class="project-tag">WordPress Development</div>
<div class="project-tag">Custom Theme Development</div>
<div class="project-tag">CMS Implementation</div>
<div class="project-tag">Content Creation</div>
<div class="project-tag">Email Hosting Integration</div>
<div class="project-tag">DNS Management</div>
<div class="project-tag">Website Security</div>
<div class="project-tag">Website Performance Optimization</div>
</div>
</div>
</div>
<div class="flexbox flex-column project-info-container"><!--Project Info-->
<p><span class="bold-text">Project Summary:</span> Successfully designed, developed, and launched a user-friendly and high-performing website for SW Media. The project encompassed domain registration, hosting setup, content management system (CMS) installation, email integration, custom website design and development, and website security optimization. [<a href="https://swmedia.tv/">Visit Site</a>]</p>
<div class="project-details">
<h4>Project Scope:</h4>
<details>
<summary><span class="summary-text"> Press arrow to show/hide project scope</span></summary>
<ul class="project-info-list">
<li class="project-info-list-item"><span class="bold-text">Content Management System (CMS):</span> Implemented WordPress through cPanel, providing a user-friendly platform for SW Media to manage and update website content effectively.</li>
<li class="project-info-list-item"><span class="bold-text">Integrated Email Solution:</span> Established a new email hosting account with Zoho for professional communication and configured DNS records for seamless integration with the website domain.</li>
<li class="project-info-list-item"><span class="bold-text">Custom Website Design & Development: </span>Designed a visually appealing and brand-aligned website tailored to SW Media's target audience. Generated engaging content and sourced high-quality media elements to enhance the user experience. Optimized all website images using WebP format for faster loading times.</li>
<li class="project-info-list-item"><span class="bold-text">Enhanced User Engagement:</span> Implemented functional contact forms allowing users to easily connect with SW Media and configured them to send notifications specifying the contact source for valuable lead tracking. Developed a custom WordPress theme empowering SW Media to effortlessly create blog posts and generate new leads.</li>
<li class="project-info-list-item"><span class="bold-text">Robust Security & Performance:</span> Secured the website login area with strong password requirements and limited login attempts to prevent unauthorized access. Implemented website caching techniques to improve page load speed and enhance overall user experience.</li>
</ul>
</details>
</div>
</div>
</div>
</article>
</section>
<!--Personal Projects-->
<section>
<article class="article-top-margin article-padding">
<h2>Personal Projects</h2>
<!--PBN-Bot-->
<div class="project-container flexbox">
<div class="flexbox project-logo-container">
<img class="project-image-container" src="https://pnwarner.github.io/media/project-media/pbn-bot/UI-001.webp" />
<div class="flexbox project-name-container">
<h3 class="project-name"><a href="https://github.com/pnwarner/pbn-bot">PBN-Bot</a></h3>
<hr>
<div class="flexbox project-tags-container">
<div class="project-tag">Nodejs</div>
<div class="project-tag">Puppeteer</div>
<div class="project-tag">Javascript</div>
<div class="project-tag">Web Automation</div>
<div class="project-tag">Web Scraping</div>
<div class="project-tag">Game Automation</div>
<div class="project-tag">Content Creation</div>
<div class="project-tag">Automation Script</div>
</div>
</div>
</div>
<div class="flexbox flex-column project-info-container"><!--Project Info-->
<p><span class="bold-text">Project Summary:</span> <a href="https://github.com/pnwarner/pbn-bot">PBN-Bot</a> is an automation project, refactored into a streamlined, JavaScript-only codebase, that functions as a controllable character within the 2D web-based multiplayer game, <a href="https://www.paintballnet.net">Paintball-Net</a>. Originally a larger project utilizing Python and Selenium, this new version is built entirely on Node.js and uses the Puppeteer library for browser automation and interaction.</p>
<div class="project-details">
<h4>Project Scope:</h4>
<details>
<summary><span class="summary-text"> Press arrow to show/hide project scope</span></summary>
<ul class="project-info-list">
<li class="project-info-list-item"><span class="bold-text">Node.js:</span> The bot's core logic and automation capabilities are now built entirely on a Node.js foundation.</li>
<li class="project-info-list-item"><span class="bold-text">Puppeteer:</span> Utilizes Puppeteer to launch and control a web browser, automating user interactions like logging in, sending commands, and navigating the game's front end.</li>
<li class="project-info-list-item"><span class="bold-text">Real-time Event Monitoring:</span> Employs JavaScript to intercept and parse WebSocket communications directly from the game server. This allows for real-time monitoring of in-game events, including various chat message types and player status updates.</li>
<li class="project-info-list-item"><span class="bold-text">Communicate with Players:</span> The bot has configurable abilities for in-game interaction. It can display chats, tells, whispers, and other message types in the console and can be directed to send messages to the game. It also features an automated reply system for /tell commands.</li>
<li class="project-info-list-item"><span class="bold-text">Monitor game servers:</span> PBN-Bot actively tracks player logins and logouts across all game servers by periodically sending the rwho command. These events can be reported to the local console, sent as messages to the in-game chat, and pushed to a Discord server via webhook.</li>
<li class="project-info-list-item"><span class="bold-text">Track player activity:</span> The bot tracks active player sessions, noting when users log in. It can be configured to send a notification to Discord when a player has remained online for a specific duration.</li>
</ul>
</details>
</div>
</div>
</div>
<!--SHSSG-->
<div class="project-container flexbox">
<div class="flexbox project-logo-container">
<img class="project-image-container" src="https://pnwarner.github.io/media/favicon/favicon-196x196.png" />
<div class="flexbox project-name-container">
<h3 class="project-name"><a href="https://github.com/paradoxresearch/shssg">The Self Hosted Server Survival Guide</a></h3>
<hr>
<div class="flexbox project-tags-container">
<div class="project-tag">Self-hosting</div>
<div class="project-tag">Linux</div>
<div class="project-tag">Server administration</div>
<div class="project-tag">Networking</div>
<div class="project-tag">Home-lab</div>
<div class="project-tag">Open Source</div>
<div class="project-tag">Privacy</div>
<div class="project-tag">Automation</div>
</div>
</div>
</div>
<div class="flexbox flex-column project-info-container"><!--Project Info-->
<p><span class="bold-text">Project Summary:</span> The Self Hosted Server Survival Guide is a living knowledge base designed to help users reclaim digital autonomy by hosting their own services. Whether you're spinning up a personal media server, securing your home network, or deploying resilient infrastructure, SHSSG offers practical, modular guidance for every step of the journey.</p>
<p></p>
<div class="project-details">
<h4>Project Scope:</h4>
<details>
<summary><span class="summary-text"> Press arrow to show/hide project scope</span></summary>
<ul class="project-info-list">
<li class="project-info-list-item"><span class="bold-text">Manuals & Tutorials:</span> Step-by-step guides for system setup, service deployment, and maintenance.</li>
<li class="project-info-list-item"><span class="bold-text">Modular Architecture:</span> Designed for incremental learning and implementation.</li>
<li class="project-info-list-item"><span class="bold-text">Real-World Projects (Coming Soon):</span> Hands-on examples of self-hosted applications with annotated configs.</li>
<li class="project-info-list-item"><span class="bold-text">Multi-Format Documentation:</span> Available in Markdown and PDF, with HTML planned.</li>
</ul>
</details>
</div>
</div>
</div>
<!--Paradoxresearch.net-->
<div class="project-container flexbox">
<div class="flexbox project-logo-container">
<img class="project-image-container" src="https://pnwarner.github.io/media/favicon/favicon-196x196.png" />
<div class="flexbox project-name-container">
<h3 class="project-name"><a href="https://paradoxresearch.net/">ParadoxResearch.net</a></h3>
<hr>
<div class="flexbox project-tags-container">
<div class="project-tag">Full-stack development</div>
<div class="project-tag">PHP</div>
<div class="project-tag">CMS development</div>
<div class="project-tag">Server administration</div>
<div class="project-tag">Network security</div>
<div class="project-tag">Apache HTTP</div>
<div class="project-tag">Load balancing</div>
<div class="project-tag">Reverse proxy</div>
<div class="project-tag">GNU/Linux</div>
<div class="project-tag">DIY website hosting</div>
</div>
</div>
</div>
<div class="flexbox flex-column project-info-container"><!--Project Info-->
<p><span class="bold-text">Project Summary:</span> <a href="https://paradoxresearch.net/">ParadoxResearch.net</a> is a dynamic platform that showcases my full-stack development expertise. At its core lies a custom PHP content management system (<a href="https://github.com/pnwarner/crmbl">crmbl CMS</a>) I built, which seamlessly handles hosting multiple domains (<a href="https://paradoxresearch.net/?about">explore the examples!</a>). This project not only demonstrates my back-end development skills but also serves as a springboard for future educational resources. The site will eventually offer tutorials on do-it-yourself home server and website hosting, reflecting the very functionality it exemplifies – running entirely on a home-based cluster of load-balanced servers.</p>
<!--ParadoxResearch.net Server Status-->
<h4 class="site-status-label">Site Status:</h4>
<section id="server-demo-info" class="flexbox server-demo-info">
<div id="server-4-wrapper" class="flexbox server-demo-info-card">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-4-text" class="server-title">Server 4</p>
</div>
<div id="server-3-wrapper" class="flexbox server-demo-info-card">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-3-text" class="server-title">Server 3</p>
</div>
<div id="server-2-wrapper" class="flexbox server-demo-info-card">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-2-text" class="server-title">Server 2</p>
</div>
<div id="server-1-wrapper" class="flexbox server-demo-info-card">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-1-text" class="server-title">Server 1</p>
</div>
</section>
<div class="project-details">
<h4>Project Scope:</h4>
<details>
<summary><span class="summary-text"> Press arrow to show/hide project scope</span></summary>
<ul class="project-info-list">
<li class="project-info-list-item"><span class="bold-text">Full-stack Development:</span> Built a custom PHP content management system (crmbl CMS) demonstrating proficiency in both front-end and back-end development.</li>
<li class="project-info-list-item"><span class="bold-text">Server Administration & Maintenance:</span> Managed a home-based cluster of load-balanced servers, including server setup, configuration, and ongoing maintenance.</li>
<li class="project-info-list-item"><span class="bold-text">Network & Security:</span> Secured a home network for website hosting, showcasing knowledge of GNU/Linux server administration and best practices.</li>
<li class="project-info-list-item"><span class="bold-text">Load Balancing & Hosting:</span> Configured Apache2 for load balancing and reverse proxy functionality, enabling seamless hosting of multiple domains.</li>
</ul>
</details>
</div>
</div>
</div>
<!--crmbl CMS-->
<div class="project-container flexbox">
<div class="flexbox project-logo-container">
<img class="project-image-container" src="https://pnwarner.github.io/media/project-media/crmbl/crmbl_logo.webp" />
<div class="flexbox project-name-container">
<h3 class="project-name"><a href="https://github.com/pnwarner/crmbl/">crmbl CMS</a></h3>
<hr>
<div class="flexbox project-tags-container">
<div class="project-tag">Content Management System (CMS)</div>
<div class="project-tag">Multi-Domain Hosting</div>
<div class="project-tag">Modular</div>
<div class="project-tag">RESTful API</div>
<div class="project-tag">PHP</div>
<div class="project-tag">JavaScript</div>
<div class="project-tag">HTML</div>
<div class="project-tag">CSS</div>
<div class="project-tag">BASH</div>
<div class="project-tag">Command-Line Interface (CLI)</div>
</div>
</div>
</div>
<div class="flexbox flex-column project-info-container"><!--Project Info-->
<p><span class="bold-text">Project Summary:</span> <a href="https://github.com/pnwarner/crmbl">crmbl CMS</a> is a dynamic, PHP-based content management system designed for scalability and multi-domain hosting. Built with a modular architecture, crmbl allows individual sites to define and manage their own plugins, modules, and themes, while maintaining separate data for each. This empowers users with fine-grained control and enables them to create a customized web experience that scales seamlessly alongside their needs.</p>
<div class="project-details">
<h4>Project Scope:</h4>
<details>
<summary><span class="summary-text"> Press arrow to show/hide project scope</span></summary>
<ul class="project-info-list">
<li class="project-info-list-item"><span class="bold-text">Core Functionality:</span> Developed in PHP, providing a robust foundation for content management.</li>
<li class="project-info-list-item"><span class="bold-text">Multi-Domain Hosting:</span> A single crmbl instance efficiently hosts and manages multiple websites.</li>
<li class="project-info-list-item"><span class="bold-text">Modular Architecture: </span> Enables individual sites to define and manage their own plugins (modules), themes, and custom media.</li>
<li class="project-info-list-item"><span class="bold-text">Data Separation: </span> Ensures each website maintains its own data for security and organization.</li>
<li class="project-info-list-item"><span class="bold-text">API Support:</span> Handles CRUD (Create, Read, Update, Delete) operations through individual GET, POST, PUT, and DELETE requests, facilitating interaction with crmbl as a RESTful API (Still under development).</li>
<li class="project-info-list-item"><span class="bold-text">Deployment Management:</span> Built-in functionality to package and deploy entire websites with themes, modules, and data across crmbl instances.</li>
<li class="project-info-list-item"><span class="bold-text">Staging and Publishing:</span> Streamlined workflow for local development and server publishing using a BASH script (future plans include a front-end dashboard).</li>
<li class="project-info-list-item"><span class="bold-text">Theming System::</span> Granular control over theme design, including custom HTML for specific sections (head, meta, link, body, script) with dynamic capabilities.</li>
</ul>
</details>
</div>
</div>
</div>
<!--MXBlog-->
<div class="project-container flexbox">
<div class="flexbox project-logo-container">
<img class="project-image-container" src="https://pnwarner.github.io/media/project-media/mxblog/mxblog3.webp" />
<div class="flexbox project-name-container">
<h3 class="project-name"><a href="https://pnwarner.github.io/script/mxblog/">MXBlog</a></h3>
<hr>
<div class="flexbox project-tags-container">
<div class="project-tag">JavaScript</div>
<div class="project-tag">Web App</div>
<div class="project-tag">JSON</div>
<div class="project-tag">Content Management System (CMS)</div>
<div class="project-tag">Embeddable</div>
<div class="project-tag">Decentralized</div>
<div class="project-tag">Customizable</div>
<div class="project-tag">Content Filtering</div>
</div>
</div>
</div>
<div class="flexbox flex-column project-info-container"><!--Project Info-->
<p><span class="bold-text">Project Summary:</span> <a href="https://pnwarner.github.io/script/mxblog/">MXBlog</a> is a JavaScript web app under development that empowers creators to share their content - blogs, magazines, or media galleries - on their own terms. Free from the limitations of traditional platforms, MXBlog lets you host your content almost anywhere on the internet, while still delivering a sleek and customizable blog experience for your audience.</p>
<div class="project-details">
<h4>Project Scope:</h4>
<details>
<summary><span class="summary-text"> Press arrow to show/hide project scope</span></summary>
<ul class="project-info-list">
<li class="project-info-list-item"><span class="bold-text">Decentralized Freedom:</span> Host your blog files (JSON) anywhere online, no platform lock-in!</li>
<li class="project-info-list-item"><span class="bold-text">Content Flexibility:</span> Create single articles, full-fledged blogs, or curate multi-blogs with ease</li>
<li class="project-info-list-item"><span class="bold-text">Advanced Categorization:</span> Organize your content with category, sub-category, and niche-category options.</li>
<li class="project-info-list-item"><span class="bold-text">Content Control:</span> Filter content with ratings, warnings, and trigger-warnings for a safe and informed audience.</li>
<li class="project-info-list-item"><span class="bold-text">Effortless Integration:</span> Embed MXBlog seamlessly into your webpage with just a script and a tag - the app handles the HTML generation.</li>
<li class="project-info-list-item"><span class="bold-text">Under Development:</span> More features to be announced.</li>
</ul>
</details>
</div>
</div>
</div>
<!--View More-->
<div class="project-container flexbox">
<div class="flexbox project-logo-container">
<img class="project-image-container" src="https://pnwarner.github.io/media/site-media/paradoxi.webp" />
<div class="flexbox project-name-container">
<h3 class="project-name"><a href="#">View More Projects!</a></h3>
<hr>
<div class="flexbox project-tags-container">
<div class="project-tag">Web Development</div>
<div class="project-tag">Programming</div>
<div class="project-tag">Documentation</div>
<div class="project-tag">Projects</div>
</div>
</div>
</div>
<div class="flexbox flex-column project-info-container item-center"><!--Project Info-->
<p><span class="bold-text">Looking to dive deeper?</span> My projects are actively developed and maintained on <a href="https://github.com/pnwarner">GitHub</a> and <a href="https://codepen.io/pnwarner">CodePen</a>. Here, you'll find the full source code, detailed explanations, and the opportunity to contribute or ask questions.</p>
<div class="project-details">
<!-- Project Details-->
</div>
</div>
</div>
</article>
</section>
</main>
<footer>
<div class="flexbox flex-column">
<div class="flexbox footer-container footer-content">
<div class="flexbox content-center footer-content-item footer-content-left">
<a class="footer-logo-link" href="https://pnwarner.github.io/"><p class="footer-title"><span class="git-username">pnwarner</span><span class="git-domain">.github.io</span></p></a>
</div>
<div class="flexbox flex-row content-center footer-content-item footer-content-right">
<div class="flexbox flex-column content-center item-center margin-right">
<div>
<p class="footer-contact-text">View More Projects</p>
</div>
<div class="width-90">
<hr>
</div>
<div>
<!--Github-->
<a href="https://github.com/pnwarner" title="Visit my GitHub page"><svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#e0e7eb" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></a>
<!--codepen.io-->
<a href="https://codepen.io/pnwarner" title="Visit my Codepen page"><svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#e0e7eb" d="M502.3 159.7l-234-156c-8-4.9-16.5-5-24.6 0l-234 156C3.7 163.7 0 170.8 0 178v156c0 7.1 3.7 14.3 9.7 18.3l234 156c8 4.9 16.5 5 24.6 0l234-156c6-4 9.7-11.1 9.7-18.3V178c0-7.1-3.7-14.3-9.7-18.3zM278 63.1l172.3 114.9-76.9 51.4L278 165.7V63.1zm-44 0v102.6l-95.4 63.7-76.9-51.4L234 63.1zM44 219.1l55.1 36.9L44 292.8v-73.7zm190 229.7L61.7 334l76.9-51.4L234 346.3v102.6zm22-140.9l-77.7-52 77.7-52 77.7 52-77.7 52zm22 140.9V346.3l95.4-63.7 76.9 51.4L278 448.8zm190-156l-55.1-36.9L468 219.1v73.7z"/></svg></a>
</div>
</div>
<div class="flexbox flex-column content-center item-center margin-left" id="contact">
<div>
<p class="footer-contact-text">Contact Me</p>
</div>
<div class="width-90">
<hr>
</div>
<div>
<!--LinkedIn-->
<a href="https://www.linkedin.com/in/patrick-warner-4452292b3/" title="Connect with me on LinkedIn"><svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#e0e7eb" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></a>
<!--email-->
<a href="mailto:patrick.warner@paradoxresearch.net" title="Contact me through email"><svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#e0e7eb" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="script/site-status/site-status.js"></script>
</body>
</html>