generated from nisarhassan12/portfolio-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
269 lines (242 loc) · 15.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/png" href="./images/favicon.png" />
<!-- Put your site title here -->
<title>
Eric Owens | Portfolio
</title>
<meta name="description" content="Software Engineer seeking opportunities.">
<!-- Add some coding keywords below, Ex: (React, CSS etc) -->
<meta name="keywords" content="Eric Owens, Software Engineer, C#, .NET, C, React, SQL, Java, Python, Assembly, JavaScript, Visual Studio, Git, AWS" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- ***** Header ***** -->
<header class="header" role="banner" id="top">
<div class="row">
<nav class="nav" role="navigation">
<ul class="nav__items">
<li class="nav__item"><a href="#work" class="nav__link">Projects</a></li>
<li class="nav__item">
<a href="#about" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="header__text-box row">
<div class="header__text">
<h1 class="heading-primary">
<!-- Replace the following name with your name -->
<span>Eric Owens</span>
</h1>
<!-- Put a small paragraph about yourself -->
<p>Software Engineer with over 2 years of experience seeking Software Engineering opportunities in the Eastern United States.</p>
<a href="#contact" class="btn btn--pink">Contact</a>
</div>
</div>
</header>
<main role="main">
<!-- ***** Work ***** -->
<section class="work" id="work">
<div class="row">
<h2> Personal Projects</h2>
<div class="work__boxes">
<!-- Each div with the work__box class is a project. -->
<div class="work__box">
<div class="work__text">
<h3>NES Game: Runner</h3>
<p>
For a personal project, I used Assembly language to create an entire video game for the Nintendo Entertainment System console from scratch.
This process included every step along the way from creating custom pixel art sprites to creating the logic behind the game.
I find it fascinating to work under the limitations of the 6502, the 8-bit microprocessor that the NES uses.
It requires much more planning and research in order to implement your logic.
This example game isn't that complex, but I still find it fun! You play as a cat that needs to dodge incoming cacti that will approach faster and faster.
To play the game, press Enter to pause/unpause and to restart. Use the left and right arrow keys to move the character. Make sure to click into the frame first!
</p>
<ul class="work__list">
<li>6502 Assembly</li>
</ul>
<div class="work__links">
<a href="https://github.com/Eo6637/nesrunner">
<img src="./images/github.svg" class="work__code" title="View Source Code" alt="GitHub">
</a>
</div>
</div>
<div class="work__image-box">
<iframe width=640 height=600 src="https://8bitworkshop.com/v3.7.0/embed.html?p=nes&r=TFpHAADAEAAADMEuh8h5AS4vYWNORVMaAgEBAGMGeNii%2F5rojgEgjhBAjgAgLAIgLBVAqUCNF0CpD40VQCDbhCC5hGOhqQCNBiBjQan%2FhQOpAIURhRKpA4UTYQIPqXCFDanPhQ6pAYUUYRYVqaSFFmEEF6lAhRljYRCpP2FvYXe9Mo%2BNByDo4CDQ9SAFham4hQepKIUGqR6NASCpkI0AIIUEYTAFY2EPTJaAYYMDhQ8g7YQpEMkQ0PdMAICpFI0AAqkqjQECqSCNAgKp8Y0DAmDmCqUKyQzQCqkAhQqlC0kBhQupAY0FAqkCjQkCpQvJAdANqQONDQKpBI0RAkz7gKkFYUUGYQUvAowCjQoCjQ4CjRICpQeNBAKlBo0HY4EYaQiNC2FKCGOBYUUMYVIPLwUFEC8FGhMCYKYF4AHwIkgpAckB0AqlB8m48AQvAs9oKQLJAmGJpGEJpIUHYKkAjTECjTUCjTkCjT0CjUECjUUCjUkCjU0CpQ%2FJANBIqRRhGKkZYRqpDWHcpQ6NMAKNNAKNOAKNPAKlDY0zAi8CbTdjoztjoz8CqQONMgKNNgKNOgKNPgJMNYPJAdBbqRovAkQQLwJEHo05AqkcjT0CqRKNQS8NS41ALxZOY6JDLw1UjUIvA1cC0GupGS8CVx4vAlcRLwJXFS8CVw0vHVcvEFfGEKUQyQDQVy9DLACFDy8CZwMvJhIvA8YXLwJnEi8CZxmNQQKpH41FYUdJAqkbLyJALwt2LwJcQAKNRAKNSAKNTAJM7IJMNYMvA4iNQy8Fi41HLwWOjUsvBZGNTy8Qjo1GAo1KAo1OLwSXQNC4LwKTYKURGGkgjRUCpRJj4hkvApgUAo0YAqk8jRcvA0UbLwJCFgKNGgIvIvMdAo0hAo0lAqUTyQDwG6krYQlhAwHwEGEDIWFDAvAFYQMlLwJAHAKNIAKNJAKptI0fLwNDI2OjJy8CSR4CjSICjSYCYKUSyQnwBeYSTNSDqQCFEqURYYcRYccRYOYGYyylBckB8FulGckA8AXGGUxGhKUUKQHwKaYXysYVpRVhDgvFBvAO4ADQ72EUYToUY8EgtoOlFsUH8DVMC4TmFC8C6S9izP%2BFFaUSIOGEYTcHL2LhYWi4hRbGBmMsYMYTqQKFD2EzqQCNUQKNVQKNWQKNXQKlFMkA8ESpCWEMqQphDqkLYRCpDGFSFo1QAo1ULwPkWAKNXAKlFY1TAo1bYYlXAo1fL2LJUgKNVgKNWgKNXi8iT6qVAOD%2BsAOdAAGdAAKdAGEBBJ0ABZ0ABp0AB%2BjQ4mAsAiAQ%2B2BKkAJJ1GAKY6GpYKAAqQGZFkBKY2GiCEi5YQJoKsrQ9mCtAiCpIi%2BCnkBjggaiAC%2BDn0DQ%2BGFRJi8WEWGqgGOCBC8FEWAvCSovEhFhquBjggIvESovEhEjLwd1BS8MdScvFhFhqi%2BjogFhDy8HCgEvCgovA4DiLw8cKC8PCgkvDy7qLw8cMC8PChEvDy7yLw8cOC8PChkvDy76LwoKLwPpLwvQYYovC9AvIz8vC9BhnC8L0GGKLwvQYa4vC9BhnC8L0GGKLwvQYa4vC9BhnC8L0GGKLwvQYa4vC9AvA%2BLDY4IDLwoKpC8PCoUvDwrLLw8KrC8PCo0vDwrTLw8KtC8PCpUvDwrbLw8KvC8PCp0vCgovA%2BIvC9Bhii8L0GGKLwvQYYovC9Bhii8L0GGKLwvQYYovC9Bhii8L0GGKLwvQYYovC9Bhii8L0GGKLwvQLwPiYmOCBy8KCkYvDwpsLw8KVS8PCnwvCgovA2RpLw8KTi8PCnEvDwpSLw8Kei8KCi9jL4NjgggvBQohLwesLwsKTC8KCmGukS8PCvUvDy6bLwoKJWFFL2PJLwYKJGFFyi8PHE8vDxzWLw8KLyOELwYKLyMqNC9kty8JChRjggovCoj0Y4ILLwoK1C8KCi8jGAYvDwpjgy8LChAvDwovgwwvBgovA77YLw8K%2BC8PLhgvDwovgx4vBgovA74tY4IMYQovCq%2BULwYNLwcKsy8JHy8KbcYvCiJhiuYvDwrQLw8K7y8VRrgvCiIvA5cvI8kNLwoKLC8PCg0vCgovA6ayLw8Kky8KCi8DZM8vDwq3Lw9SL0MEDi8KCg4vCgovA1IvY9MvCwq2LwoKLwNS0S8PCrkvCgovQ9cvI5gcYQqpEWOCGWOCG2OCEi9KkS8bHi8HRDZjgithTxZjghMvDz8vGhkvI2vwY4JQLyeaY00vx1wvGx8vCEYuAwBaqGEKqaJjgqBjgqovBwKhLwYCLwpSYathl6YvByEvDCYvCAIvB2DcL2avqRovCkTZY4KAYU9hhy%2Bjc2GHLwJqYegvAvVgSIpImEipAI0DIKkCjRRAqQBhBAUgY0GlDMkQ8ALmDCDthEguAwYNEmFK0AylBUkBhQWFD6kAhQxoID6BIMKAIK2AIDaDIGKDIGeBINWDIGCEpRPJANADIJmALAIgcPtjgVD7pQPJ%2F9ANpQRhNgSNACBhNwOlA40FYQFjgaUFYSgM5i8JCmioaKpoQCInFyAiBhcZIhkqOyJjAhAtACIRITEiGQkqIiIVIP9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jHGMClI4AgGNhYw3AgIDP%2F38%2FP2EDSQsULgN4IAye%2F%2F%2F%2BAAAQEABEoAA%2FMGBgYaEGBgMDY8Hw8DgcDGGJQGGRPzg4GBhhRwQGB2F2%2BPBgYDAwYUmAgIBjoThqbkJCQmYkABAwPDw8GBgkJBgYPEKB%2F2GtPH4AAAEDYwIjAQIEBQQEJlQAwOBjAeLiwKAQUBASVxUjIz8%2FYVlUfEFQPgQEBOL%2BYVjg4F0FHxBhGhAYGBg4MABgYGPmHDYGDgwAGBhj5gBAYwN8Y%2BcYJCRCfkJCY%2BceIGEPIB5j535AQGNCY%2Bp8YRJj5zxgQE5CYj5j50JCYX9CY%2Bd%2BCGMCYTBj5UJmWmEPYRhj5WJSUkpKSkZj5zxhTkI8Y%2Bd8QkIvA2Bj5nhERHhQSERj5z5AQDwCAnxj5y8EYAhj52G%2FQjxj6i8ibGPnPEZKSlJiPGPnCBgoLwOgY%2BY8QgIEGCBj6HwCAmNCY%2BcEDBQkfgQEY%2Bd8QEB4BAR4Y%2Bc4Y%2BFERDhj534CBAQIEBBj5zwvIyAvA%2Bhj5EREPAQEBGPnYwQuCHqpYwJAIBAAInd%2Ff348L0NjYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MeYwL%2F%2Fv37%2F%2B%2F%2FvwEDBgwQMEDALgYIJi8GGC8HEC8FIC8HMGMNLw4QLwgI8%2BHJpABhCAwePn9jwQgYPPz%2Ff0dj52MCCBAwPmMBfnbvzWEGIBAQEAh8fHxcbGxsNmEVBCAAABA8PDQ4HDw8LP%2Ffvv%2F%2F972%2FACBBYRNCQAADHh83e9%2F%2FAAABYaKAwOCw8N73LwKgQAAgCEAuDggYLh8H%2BC4dB%2FguAwfwcC4FB%2Fhj4i4dB%2FhCQiQkJBgAY%2BcuHgf4LhYH%2BBggIDwkJDxj5y4dB%2FhjDi4OCbhjH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx4uHxf4Lh8X%2BC4fB%2FguHxf4Lh8X%2BC4fF%2FhjH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfLh8X%2BC4fF%2FguHwf4Lh8X%2BC4fF%2FguHxf4Yx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jH2MfYx9jHmMcYwo%3D"></iframe>
</div>
</div>
</div>
<h2> Professional Projects</h2>
<div class="work__boxes">
<div class="work__box">
<div class="work__text">
<h3>Penn State Vending Machine</h3>
<p>
My senior design project involved creating a custom interface for a vending machine
that would be used by Penn State students using an alternative currency tied to
student accounts. I was the sole manager of the software used in this project and I
created a Python program for use on a touch screen.
</I>
</p>
<ul class="work__list">
<li>C#</li>
<li>Python</li>
</ul>
<div class="work__links">
<a href="https://sites.psu.edu/lfshowcasefa22/2022/12/06/learning-factory-vending-machine/" target="_blank" class="link__text">
Project Showcase Site <span>→</span>
</a>
</div>
<div class="work__links">
<a href="https://www.youtube.com/watch?v=gtZO7hI3RXM" target="_blank" class="link__text">
Demo Video<span>→</span>
</a>
</div>
</div>
<div class="work__image-box">
<img src="./images/LFVendingMachine.png" class="work__image" alt="Project 1" />
</div>
</div>
<div class="work__box">
<div class="work__text">
<h3>Octopart Datasheet Subdomain</h3>
<p>
Octopart is essentially a search engine for electronic parts. During my internship at Octopart, my main project was implementing the /datasheet/ subdomain of the website.
For eligible electronic parts listed on their site, a pdf of the part's datasheet will be directly accessible, keeping users on the site.
I implemented this solution using React, Next.js and Node to ensure a stable experience across devices. My changes were deployed using Docker and pushed to the live site using AWS and Jenkins. This subdomain has been live on the site for some time.
</p>
<ul class="work__list">
<li>React</li>
<li>Next.js</li>
<li>Node</li>
<li>Docker</li>
<li>AWS</li>
<li>Jenkins</li>
</ul>
<div class="work__links">
<a href="https://octopart.com/datasheet/ab0805-t3-abracon-24642930" target="_blank" class="link__text">
Live Example<span>→</span>
</a>
</div>
</div>
<div class="work__image-box">
<img src="./images/octopart.png" class="work__image" alt="Example" />
</div>
</div>
<!--
<div class="work__box">
<div class="work__text">
<h3>Notificator</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod,
eius.
</p>
<ul class="work__list">
<li>React</li>
<li>Next.js</li>
<li>Node</li>
<li>MongoDB</li>
</ul>
<div class="work__links">
<a href="#" class="link__text">
Visit Site <span>→</span>
</a>
<a href="#">
<img src="./images/github.svg" class="work__code" title="View Source Code" alt="GitHub">
</a>
</div>
</div>
<div class="work__image-box">
<img src="./images/project-3.png" class="work__image" alt="Project 3" />
</div>
</div>-->
</div>
</div>
</section>
<!-- ***** About ***** -->
<section class="about" id="about">
<div class="row">
<h2>About Me</h2>
<div class="about__content">
<div class="about__text">
<p>
I am a passionate Software Developer with a Bachelor's degree in Computer Engineering
from Pennsylvania State University. Since I first had access to a computer, I have
been interested in how computer software and hardware work. I started when I was young,
modifying my video game consoles to create custom levels. I always enjoy learning about
how products work, both physical and digital.
</p>
<p>
Highlights of my college coursework include Linux development in C and low-level CPU programming
in Assembly. A great example of my college work is the custom vending machine project listed above.
My professional work includes mostly backend software development, but I have also designed and
implemented a live subdomain for Octopart. I currently have over 2 years of Software Engineering
experience in C#.NET.
</p>
<p>
My past year of Software Engineering experience has also included direct interaction with our
clients. It is crucial that I understand the clients' needs by meeting and asking questions before
making design decisions about the software product. Being driven and experienced in designing
code is not enough; I have recognized how important it is to cooperate and communicate on large-scale
professional projects.
</p>
<a href="https://www.dropbox.com/scl/fi/vxj9vbagftd0x1hyhrfle/Eric-Owens-Resume-Current.pdf?rlkey=w6jb2r1dlz5cfr6qibxyyasc5&st=rcc55gta&dl=0" class="btn">My Resume</a>
</div>
<div class="about__photo-container">
<img class="about__photo" src="./images/eric_owens_headshot.jpg" alt="" width="400" height="400" />
</div>
</div>
</div>
</section>
</main>
<!-- ***** Contact ***** -->
<section class="contact" id="contact">
<div class="row">
<h2>Contact</h2>
<div class="contact__info">
<p>
If you wish to contact me, the best way is to send me an email.
</p>
<a href="mailto:[email protected]" class="btn">[email protected]</a>
</div>
</div>
</section>
<!-- ***** Footer ***** -->
<footer role="contentinfo" class="footer">
<div class="row">
<ul class="footer__social-links">
<li class="footer__social-link-item">
<a href="https://github.com/Eo6637/" title="Github Profile">
<img src="./images/github.svg" class="footer__social-image" alt="Github">
</a>
</li>
<li class="footer__social-link-item">
<a href="https://www.linkedin.com/in/eric-owens-31a02519b/">
<img src="./images/linkedin.svg" title="Linkedin Profile" class="footer__social-image" alt="Linkedin">
</a>
</li>
</ul>
<p>
© 2023 - Template designed & developed by <a href="https://nisar.dev" class="link">Nisar</a>.
</p>
<div class="footer__github-buttons">
<iframe
src="https://ghbtns.com/github-btn.html?user=nisarhassan12&repo=portfolio-template&type=watch&count=true"
frameborder="0" scrolling="0" width="170" height="20" title="Watch Portfolio Template on GitHub">
</iframe>
</div>
</div>
</footer>
<a href="#top" class="back-to-top" title="Back to Top">
<img src="./images/arrow-up.svg" alt="Back to Top" class="back-to-top__image"/>
</a>
<script src="./index.js"></script>
</body>
</html>