-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
302 lines (287 loc) · 17.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css">
<title>Lance Portfolio</title>
</head>
<body>
<nav>
<div class="nav-container">
<div class="logo" data-aos="zoom-in" data-aos-duration="1500">
Lance <span>Roller</span>
</div>
<div class="links">
<div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100"><a href="#home">Home</a></div>
<div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200"><a href="#projects">Projects</a></div>
<div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300"><a href="#skills">Skills</a></div>
<div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400"><a href="#education">Education</a></div>
<div class="link" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="500"><a href="#certifications">Certifications</a></div>
</div>
<i class="fa-solid fa-bars hamburg" onclick="hamburg()"></i>
</div>
<div class="dropdown">
<div class="links">
<a href="#home">Home</a>
<a href="#projects">Projects</a>
<a href="#skills">Skills</a>
<a href="#education">Education</a>
<a href="#certifications">Certifications</a>
<i class="fa-solid fa-xmark cancel" onclick="cancel()"></i>
</div>
</div>
</nav>
<section id="home">
<div class="main-container">
<div class="image" data-aos="zoom-out" data-aos-duration="3000">
<img src="main.png" alt="Lance Roller">
</div>
<div class="content">
<h1 data-aos="fade-left" data-aos-duration="1500" data-aos-delay="700">Hey I'm <span>Lance</span></h1>
<div class="typewriter" data-aos="fade-right" data-aos-duration="1500" data-aos-delay="900">I'm a <span class="typewriter-text"></span><label>|</label></div>
<p data-aos="flip-down" data-aos-duration="1500" data-aos-delay="1100">Passionate Software Developer and Game Developer with a keen eye for creating engaging user experiences and innovative gaming solutions.</p>
<div class="about-me-section">
<button class="about-me-toggle" onclick="toggleAboutMe()">About Me <i class="fa-solid fa-chevron-down"></i></button>
<div class="about-me-content">
<p>As a multidisciplinary developer with a Bachelor of Science in Software Engineering from Western Governor's University and a Bachelor of Science in Psychology from Capella University, I bring a unique perspective to technology and game development. My passion lies in creating intuitive, engaging experiences that not only solve problems but also connect with users on a deeper level.</p>
<p>With expertise in software engineering, game development, and a keen understanding of human behavior, I strive to develop innovative solutions that are both technically robust and psychologically compelling. Notably, I successfully solo-developed and released a game on multiple platforms, including Android and PC, demonstrating my ability to design, develop, and deploy complex projects. Additionally, I hold certifications as an AWS Cloud Practitioner and CompTIA Project+, further solidifying my technical expertise. My portfolio also showcases other notable solo-built projects, showcasing my versatility and skill as a developer.</p>
</div>
</div>
<div class="social-links">
<a href="https://github.com/Lanceroyy/" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="1300"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/lanceroller/" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="1400"><i class="fa-brands fa-linkedin"></i></a>
</div>
<div class="btn" data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="1800">
<a href="Lance-Resume.pdf" download="Lance-Resume" class="hire-me-button">
<button>Hire me</button>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="projects">
<div class="section-container">
<h2 class="section-title" data-aos="fade-down">Projects</h2>
<div class="projects-grid">
<div class="project-card" data-aos="fade-up">
<div class="project-content">
<div class="project-image">
<img src="foxtrot.png" alt="Fox Trot Screenshot">
</div>
<div class="project-text">
<h3>PC and Mobile Game - Fox Trot</h3>
<p>A cross-platform PC and mobile game developed using Unity, PlayFab, and C#, providing an immersive user experience. The game features innovative gameplay mechanics, including interactive levels. As a solo-developed project, it showcases comprehensive design and development.</p>
<div class="project-tech">
<span>Unity</span>
<span>C#</span>
<span>PlayFab API</span>
<span>Audacity</span>
<span>Photoshop</span>
<span>PC Development</span>
<span>Mobile Development</span>
</div>
<div class="project-links">
<a href="https://store.steampowered.com/app/2743060/Fox_Trot/" target="_blank" class="btn">PC Version</a>
<a href="https://play.google.com/store/apps/details/Fox_Trot?id=com.LanceroyProductions.FoxTrot&hl=en-US" target="_blank" class="btn">Mobile Version</a>
</div>
</div>
</div>
</div>
<div class="project-card" data-aos="fade-up" data-aos-delay="200">
<div class="project-content">
<div class="project-image">
<img src="Inventory-System.png" alt="Inventory System Screenshot">
</div>
<div class="project-text">
<h3>Products Parts Inventory Management System</h3>
<p>A Windows Forms C# .NET application for managing parts and products in a small manufacturing organization. This system enables users to add, modify, delete, and associate parts with products, replacing the outdated spreadsheet-based process.</p>
<div class="project-tech">
<span>C#</span>
<span>.NET Windows Forms</span>
<span>UX Design</span>
</div>
<div class="project-links">
<a href="https://github.com/Lanceroyy/Products-Parts-Inventory-Management-System" target="_blank" class="btn">GitHub Repo</a>
</div>
</div>
</div>
</div>
<div class="project-card" data-aos="fade-up" data-aos-delay="200">
<div class="project-content">
<div class="project-image">
<img src="interactive-map.png" alt="Interactive World Map Project Screenshot">
</div>
<div class="project-text">
<h3>Interactive World Map Project</h3>
<p>An interactive world map web app built with Angular, TypeScript, and Javascript, highlighting countries on user interaction. It retrieves country details from the World Bank API, emphasizing responsive design, interactivity, and real-time data.</p>
<div class="project-tech">
<span>Angular</span>
<span>TypeScript</span>
<span>JavaScript</span>
<span>HTML</span>
<span>CSS</span>
<span>Json</span>
<span>World Bank API</span>
<span>Web Development</span>
</div>
<div class="project-links">
<a href="https://github.com/Lanceroyy/Interactive-World-Map-Project" target="_blank" class="btn">GitHub Repo</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="skills" class="section">
<h2 class="section-title">Skills</h2>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="badge-container">
<span class="badge">C#</span>
<span class="badge">Unity</span>
<span class="badge">Python</span>
<span class="badge">JavaScript</span>
<span class="badge">Angular</span>
<span class="badge">.NET</span>
<span class="badge">Windows Forms</span>
<span class="badge">HTML</span>
<span class="badge">CSS</span>
<span class="badge">LUA</span>
<span class="badge">SQL</span>
<span class="badge">MySQL</span>
<span class="badge">PostgreSQL</span>
<span class="badge">Databases</span>
<span class="badge">PlayFab</span>
<span class="badge">APIs</span>
<span class="badge">AI Prompts</span>
<span class="badge">Software Engineering</span>
<span class="badge">Game Development</span>
<span class="badge">Web Development</span>
<span class="badge">Mobile Development</span>
<span class="badge">Android</span>
<span class="badge">Front-end Development</span>
<span class="badge">Back-end Development</span>
<span class="badge">Cloud Computing</span>
<span class="badge">Data Management</span>
<span class="badge">IT Leadership</span>
<span class="badge">Network Security</span>
<span class="badge">Software Testing</span>
<span class="badge">Quality Assurance</span>
<span class="badge">Debugging</span>
<span class="badge">CI/CD</span>
<span class="badge">SDLC</span>
<span class="badge">Agile</span>
<span class="badge">Waterfall</span>
<span class="badge">Version Control</span>
<span class="badge">GitLab</span>
<span class="badge">Github</span>
<span class="badge">Frameworks</span>
<span class="badge">User Experience (UX) Design</span>
<span class="badge">Human-Centered Design</span>
<span class="badge">Psychology</span>
<span class="badge">Human Behavior</span>
<span class="badge">Cognition</span>
<span class="badge">Emotions</span>
<span class="badge">Digital Art</span>
<span class="badge">Graphic Design</span>
<span class="badge">Audio Editing</span>
<span class="badge">Photoshop</span>
<span class="badge">Audacity</span>
<span class="badge">AWS Cloud Practitioner</span>
<span class="badge">CompTIA Project+</span>
</div>
</div>
</div>
</div>
</section>
<section id="education">
<div class="section-container">
<h2 class="section-title" data-aos="fade-down">Education</h2>
<div class="education-grid">
<div class="education-card" data-aos="fade-up">
<div class="education-card-icon">
<img src="wgu-logo.png" alt="Western Governor's University Logo">
</div>
<div class="education-card-content">
<h3>Bachelor of Software Engineering</h3>
<p class="institution">Western Governor's University</p>
<p class="year">2024 - 2025</p>
<p class="description">At Western Governor's University, I earned a Bachelor of Science in Software Engineering,
specializing in C# development. Throughout the program, I gained a comprehensive understanding of software engineering
principles, including data structures, algorithms, and software design patterns. I developed proficiency in C# programming
language and applied it to real-world problems, including building Windows applications, web services, and mobile apps.
Additionally, I acquired skills in version control using Git, and programming languages such as Python and JavaScript,
as well as frameworks like Angular, while also covering web development, data management, IT leadership, network security,
and software testing and quality assurance. </p>
</div>
</div>
</div>
<div class="education-grid">
<div class="education-card" data-aos="fade-up">
<div class="education-card-icon">
<img src="capella-logo.png" alt="Capella University Logo">
</div>
<div class="education-card-content">
<h3>Bachelor of Psychology</h3>
<p class="institution">Capella University</p>
<p class="year">2019 - 2019</p>
<p class="description">At Capella University, I pursued a Bachelor of Science in Psychology, gaining a unique understanding
of human behavior, cognition, and emotions that I can apply to software development and game development. By studying
psychological principles, I developed a deeper understanding of user experience and behavior, enabling me to design
more intuitive and engaging interfaces. Additionally, my knowledge of cognitive biases and human factors informs my
approach to game development, allowing me to craft more immersive and psychologically resonant experiences. This
interdisciplinary background enhances my ability to create software and games that are both functional and
enjoyable, with a focus on user-centered design.</p>
</div>
</div>
</div>
</div>
</section>
<section id="certifications" class="section-padding">
<div class="section-container">
<h2 class="section-title" data-aos="fade-down">Certifications</h2>
<div class="certifications-grid">
<div class="cert-card" data-aos="fade-up">
<div class="cert-image">
<img src="compTiaProject.png" alt="CompTIA Project+ Certification">
</div>
<h3>CompTIA - Project+</h3>
<p class="year">2024</p>
</div>
<div class="cert-card" data-aos="fade-up" data-aos-delay="200">
<div class="cert-image">
<img src="AWSCloudPractioner.png" alt="AWS Cloud Certification">
</div>
<h3>AWS - Cloud Practitioner</h3>
<p class="year">2024</p>
</div>
<div class="cert-card" data-aos="fade-up" data-aos-delay="300">
<div class="cert-image">
<img src="wgu-logo.png" alt="WGU Certification">
</div>
<h3>WGU - Bachelor of Science - Software Engineering</h3>
<p class="year">2025</p>
</div>
<div class="cert-card" data-aos="fade-up" data-aos-delay="400">
<div class="cert-image">
<img src="capella-logo.png" alt="Capella University Certification">
</div>
<h3>CU - Bachelor of Science - General Psychology</h3>
<p class="year">2019</p>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({offset:0});
</script>
<script src="script.js"></script>
</body>
</html>