-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-old.html
265 lines (265 loc) · 18.2 KB
/
index-old.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
<!doctype html>
<html lang="en">
<head>
<title>Portfolio of Patrick Warner</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's github.io page">
<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="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/animate-svg.css">
<link rel="stylesheet" href="style/mod-svg.css">
</head>
<body>
<header>
<nav>
<div id="nav_bar" class="nav-bar flex-center"><!-- height 60px-->
<div class="nav-logo-title-bar flex-center">
<div class="space-left">
<img src="media/favicon/favicon-48x48.png">
</div>
<div class="space-left">
<p class="nav-logo-title-bar-text">pnwarner.github.io</p>
</div>
</div>
<div class="nav-bar-links flex-center">
|
<a class="nav-bar-link" href="#banner">
<p>About</p>
</a>
|
<a class="nav-bar-link" href="#experience">
<p>Experience</p>
</a>
|
<a class="nav-bar-link" href="#contact">
<p>Contact Me</p>
</a>
|
</div>
</div>
</nav>
</header>
<div class="content-scroll-wrapper">
<main>
<section class="banner flex-center" id="banner">
<div class="banner_container dark_boxes_logo">
<div class="dark_boxes_main" id="dark_boxes"></div>
</div>
<div class="banner-logo flex-center">
<div class="banner-images">
<div class="logo-animation-frame" style="opacity: 0.3;">
<img id="logo-frame-1" class="filter-white">
<img id="logo-frame-2" class="filter-white">
</div>
<div class="user-tie-svg-image bg-svg banner-svg-img"></div>
</div>
<h1>Patrick Warner</h1>
</div>
</section>
<section class="main-content-wrapper">
<section id="about">
<article class="intro-paragraph top-left-border background-corner-logo less-bold">
<h3 class="about-title">Software / Web Developer</h3>
<p class="about-paragraph">
<span class="indent-text">I</span> am a designer and software developer with formal education in computer science, graphic design, and fine arts. I am proficient in HTML, CSS, JavaScript, PHP, and Python. Driven by an early curiosity for science and technology, I have a passion for learning and applying my knowledge to real-world projects. I have a DIY ethos and love to design and build new projects from the ground up, learning the different roles involved in project development along the way. I have a proven ability to learn new technologies quickly and apply them to solve complex problems.
</p>
<p class="about-paragraph">
Outside of my profressions, and studies: I am a dedicated father, musician, and artist. When time allows, I can be found with my better half searching for antiques, art, or Star Wars and Green Bay Packers memorabilia. I also enjoy venturing out with my family, and our kayaks.
</p>
</article>
<div id="experience" class="project-card">
<div class="portfolio-card background-img-decoration top-left-border less-bold">
<h3 class="about-title">Skills</h3>
<ul class="item-list">
<li>
<p class="bold-text">Front-end software development:</p>
<div class="portfolio-lang-box">
<div class="portfolio-lang-box-item">
HTML
</div>
<div class="portfolio-lang-box-item">
CSS
</div>
<div class="portfolio-lang-box-item">
Javascript
</div>
</div>
</li>
<li>
<p class="bold-text">Back-end software development:</p>
<div class="portfolio-lang-box">
<div class="portfolio-lang-box-item">
PHP
</div>
<div class="portfolio-lang-box-item">
Python
</div>
<div class="portfolio-lang-box-item">
C
</div>
<div class="portfolio-lang-box-item">
NodeJS
</div>
</div>
</li>
<li>
<p class="bold-text">
Graphic design:
<div class="portfolio-lang-box">
<div class="portfolio-lang-box-item">
Photoshop
</div>
<div class="portfolio-lang-box-item">
Illustrator
</div>
<div class="portfolio-lang-box-item">
GIMP
</div>
<div class="portfolio-lang-box-item">
Inkscape
</div>
</div>
</p>
</li>
<li>
<p class="bold-text">Network and Server Administration:</p>
<div class="portfolio-lang-box">
<div class="portfolio-lang-box-item">
Debian based GNU/Linux distributions
</div>
<div class="portfolio-lang-box-item">
Apache2
</div>
<div class="portfolio-lang-box-item">
Git
</div>
<div class="portfolio-lang-box-item">
Shell Scripting
</div>
</div>
</li>
<li>
<p class="bold-text">Electrician:</p>
<div class="portfolio-lang-box">
<div class="portfolio-lang-box-item">
High-Voltage & Low-Voltage conduit/wire installation
</div>
<div class="portfolio-lang-box-item">
Data line terminations
</div>
</div>
</li>
</ul>
<br>
<hr>
<h3 class="about-title">Experience</h3>
<ul class="item-list">
<li>Build and configure physical servers; deploy and host servers in virtual environments. </li>
<li>Developed a small dynamic <a href="#project-crmbl">content management system</a> (CMS) written primarily in PHP for hosting multiple websites, and domains. </li>
<li>Host, and maintain my own <a href="#project-paradoxresearch" title="paradoxresearch.net">servers</a>, acting as roles such as administrator, designer, and developer.</li>
<li>5+ years commercial experience installing conduit, pulling electrical and data lines, and data terminations</li>
<li>5 years of experience using/maintaining large retail security camera systems</li>
<li>20+ Years building, and troubleshooting PC issues. Very experienced with MS Windows, but has spent the last 10 years primarily working with various GNU/Linux distributions</li>
</ul>
</div>
</div>
</section>
<div class="project-card">
<div class="portfolio-card top-left-border background-corner-logo less-bold">
<section class="project-tile" id="projects">
<h2 class="project-tile">Projects</h2>
<ul class="item-list">
<li id="project-paradoxresearch">
<a class="project-title" href="http://www.paradoxresearch.net/">Paradoxresearch.net</a>
<p>
A test environment, and demonstration of my CRMBL CMS project and the multiple domains it currently serves. This project is hosted by a cluster of servers from my HomeLab.
</p>
<section id="server-demo-info" class="server-demo-info">
<div id="server-4-wrapper" class="server-demo-info-card flex-center">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-4-text">Server 4</p>
</div>
<div id="server-3-wrapper" class="server-demo-info-card flex-center">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-3-text">Server 3</p>
</div>
<div id="server-2-wrapper" class="server-demo-info-card flex-center">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-2-text">Server 2</p>
</div>
<div id="server-1-wrapper" class="server-demo-info-card flex-center">
<div class="server-svg-image bg-svg server-demo-info-card-icon"></div>
<p id="server-1-text">Server 1</p>
</div>
</section>
</li>
<li id="project-crmbl">
<a class="project-title" href="https://github.com/pnwarner/crmbl">CRMBL CMS</a>
<p>
A small dynamic CMS for hosting multiple websites with dynamic content. Still under considerable development.
</p>
</li>
<li>
<a class="project-title" href="https://pnwarner.github.io/script/mxblog">MxBlog</a>
<p>
A blog/article web application for loading articles, blogs(host a range of articles), and multi-blogs(host a range of blogs). Being developed as a standalone javascript application/project.
</p>
</li>
</ul>
</section>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-item-container flex-center">
<div id="footer-items" class="footer-items flex-center">
<div id="footer-info" class="footer-info">
<ul>
<li><h3><span id="footer-company-name">@pnwarner</span></h3></li>
<li>
<div id="powered-by-display" class="powered-by-display flex-center">
<p>Powered By:</p>
<a id="footer-address-site-link" href="http://paradoxresearch.net" title="Check out Paradox Research"><span id="footer-address-site-title">curiosity</span></a>
</div>
</li>
</ul>
</div>
<div id="contact">
<p class="contact-title">Contact</p>
<hr>
<div id="footer-icon-links" class="footer-icon-links flex-center">
<a id="footer-link-email" href="mailto:[email protected]?subject=Contacting you from your github.io page" title="Email Me"><div id="footer-icon-envelope" class="footer-icon envelope-svg-image bg-svg"></div></a>
<a id="footer-link-linkedin" href="https://www.linkedin.com/in/patrick-warner-4452292b3/" title="Connect on LinkedIn"><div id="footer-icon-mastodon" class="footer-icon linkedin-svg-image bg-svg"></div></a>
<a id="footer-link-mastodon" rel="me" href="https://fosstodon.org/@prdoxi" title="Find me on Mastodon"><div id="footer-icon-mastodon" class="footer-icon mastodon-svg-image bg-svg"></div></a>
<a id="footer-link-codepen" href="https://codepen.io/pnwarner" title="Visit my Codepen page"><div id="footer-icon-codepen" class="footer-icon codepen-svg-image bg-svg"></div></a>
<a id="footer-link-github" href="https://github.com/pnwarner" title="Visit my github page"><div id="footer-icon-github" class="footer-icon github-svg-image bg-svg"></div></a>
</div>
</div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="script/darkboxes.js"></script>
<script type="text/javascript" src="script/animate-svg/animate-svg.js"></script>
<script type="text/javascript" src="script/animate-svg/logo-transition.js"></script>
<script type="text/javascript" src="script/site-status/site-status.js"></script>
</body>
</html>