-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
320 lines (289 loc) · 16.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Jan Kasper Udaundo - Web Developer and Teacher">
<title>Jan Kasper Udaundo | Web Developer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.5/cdn.min.js"></script>
</head>
<body class="font-sans bg-gray-50" x-data="{ isOpen: false }">
<!-- Navigation -->
<nav class="fixed w-full backdrop-blur z-50 transition-colors duration-300" x-data="{ scrolled: false }"
@scroll.window="scrolled = (window.pageYOffset > 0)"
:class="{ 'bg-transparent': !scrolled, 'bg-indigo-100 shadow-md': scrolled }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-2xl font-bold">Jan Kasper Udaundo</a>
</div>
<!-- Desktop Nav -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="hover:text-gray-600 transition-colors">About</a>
<a href="#experience" class="hover:text-gray-600 transition-colors">Experience</a>
<a href="#education" class="hover:text-gray-600 transition-colors">Education</a>
<a href="#portfolio" class="hover:text-gray-600 transition-colors">Portfolio</a>
<a href="#contact" class="hover:text-gray-600 transition-colors">Contact</a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden flex items-center">
<button @click="isOpen = !isOpen" class="text-gray-600 hover:text-gray-900 focus:outline-none">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path x-show="!isOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
<path x-show="isOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div x-show="isOpen" class="md:hidden bg-white border-b border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" @click="isOpen = false"
class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
<a href="#experience" @click="isOpen = false"
class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Experience</a>
<a href="#education" @click="isOpen = false"
class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Education</a>
<a href="#portfolio" @click="isOpen = false"
class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Portfolio</a>
<a href="#contact" @click="isOpen = false"
class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="profile" class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 pt-16 bg-gray-50">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-8 items-center">
<!-- Profile Image Column -->
<div class="flex flex-col items-center order-1">
<img src="/img/profile-pic.png" alt="Jan Kasper profile"
class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover">
<a href="#contact" class="mt-8 px-6 py-3 bg-black text-white hover:bg-gray-800 transition-colors rounded-full">
Contact Me
</a>
<div class="flex gap-6 mt-6">
<a href="https://www.linkedin.com/in/kasper-udaundo" target="_blank" rel="noopener noreferrer">
<img src="/img/linkedin.png" alt="LinkedIn" class="h-8 w-8">
</a>
<a href="https://github.com/damoves005" target="_blank" rel="noopener noreferrer">
<img src="/img/github.png" alt="GitHub" class="h-8 w-8">
</a>
</div>
</div>
<!-- Text Content Column -->
<div class="text-center md:text-left order-2">
<h1 class="text-4xl sm:text-5xl font-bold mt-2">Jan Kasper Udaundo</h1>
<p class="text-xl text-gray-600 mt-4">Teacher & Web Developer</p>
<p class="mt-4 text-gray-600">Experienced Web Developer and Code Instructor with a background in early childhood
education and IT. Skilled in programming instruction, technical support, e-commerce development, and digital
marketing. Over four years of expertise in Shopify and systems management. Adept at optimizing user
experiences, troubleshooting technical issues, and delivering engaging STEM education.</p>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-20 bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Experience</h2>
<div class="space-y-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between mb-4">
<h3 class="text-xl font-semibold">Code Instructor (Contract, Part-time)</h3>
<span class="text-gray-600">January, 2025 - Present</span>
</div>
<p class="text-gray-600 mb-2">Code Ninjas Windermere | Edmonton, Alberta, CA</p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Instructed students ages 7-14 in fundamental programming concepts using JavaScript, HTML, CSS, and C#
</li>
<li>Led specialized STEM workshops in robotics and game development</li>
<li>Developed and adapted personalized learning plans, tracking progress through the Code Ninjas belt
system while providing constructive feedback to parents</li>
</ul>
</div>
<div class="space-y-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between mb-4">
<h3 class="text-xl font-semibold">Web Developer (Hybrid, Part-time)</h3>
<span class="text-gray-600">March 2021 - Present</span>
</div>
<p class="text-gray-600 mb-2">Rana Pharmaceutical Inc. | Quezon City, Philippines</p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Provided technical support and troubleshooting for e-commerce platforms</li>
<li>Collaborated with cross-functional teams to implement technical solutions</li>
<li>Documented technical processes and created user guides</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between mb-4">
<h3 class="text-xl font-semibold">Advertising Operations Manager</h3>
<span class="text-gray-600">May 2019 - March 2021</span>
</div>
<p class="text-gray-600 mb-2">Rana Pharmaceutical Inc. | Quezon City, Philippines</p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Managed technical implementations of digital advertising platforms</li>
<li>Provided technical support and training to team members</li>
<li>Maintained detailed documentation of operational procedures</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex justify-between mb-4">
<h3 class="text-xl font-semibold">Computer Teacher</h3>
<span class="text-gray-600">June 2018 - April 2019</span>
</div>
<p class="text-gray-600 mb-2">Divine Word College of Laoag | Laoag City, Philippines</p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Taught computer literacy courses covering software applications and programming fundamentals</li>
<li>Managed computer laboratory maintenance and troubleshooting</li>
<li>Provided technical support for students and faculty</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section id="education" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Education</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-2">Diploma of Education</h3>
<p class="text-gray-600">Digital Media and IT (Web Design and Development Concentration)</p>
<p class="text-gray-600">NAIT | January 2024 - Present</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-2">Master of Arts in Education</h3>
<p class="text-gray-600">Major in General Education</p>
<p class="text-gray-600">Divine Word College of Laoag | June 2018 - December 2020</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-2">Bachelor of Technical Teachers Education</h3>
<p class="text-gray-600">Major in Computer Technology</p>
<p class="text-gray-600">Mariano Marcos State University | June 2013 - June 2017</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Portfolio</h2>
<div class="space-y-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-4">Rana Pharmaceutical E-commerce Website</h3>
<p class="text-gray-600 mb-4">Shopify, Liquid, JSON, HTML/CSS, JavaScript | <a
href="http://www.ranapharmaceutical.com" class="text-blue-600 hover:text-blue-800 transition-colors">Live
Website</a></p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Developed a custom Shopify storefront for a pharmaceutical company using Liquid templating and JSON</li>
<li>Implemented secure payment processing and inventory management systems</li>
<li>Built custom product filtering and search functionality</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-4">KleenNfit E-commerce Website</h3>
<p class="text-gray-600 mb-4">Shopify, Liquid, JSON, HTML/CSS, JavaScript | <a
href="http://www.kleenenfit.com" class="text-blue-600 hover:text-blue-800 transition-colors">Live
Website</a></p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Developed a custom Shopify storefront for a pharmaceutical company using Liquid templating and JSON</li>
<li>Implemented secure payment processing and inventory management systems</li>
<li>Built custom product filtering and search functionality</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-4">Kale Vegetable Website</h3>
<p class="text-gray-600 mb-4">HTML, CSS, JavaScript | <a
href="https://github.com/damoves005/kale-vegetable-website-template"
class="text-blue-600 hover:text-blue-800 transition-colors">Github</a> | <a
href="https://kale-nutrition.netlify.app/"
class="text-blue-600 hover:text-blue-800 transition-colors">Live Website</a></p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Developed SEO-optimized educational website focused on kale nutrition and health benefits</li>
<li>Implemented keyword optimization and content strategy to improve search rankings</li>
<li>Enhanced technical SEO elements including meta descriptions and mobile responsiveness</li>
</ul>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-4">Personal Portfolio Website</h3>
<p class="text-gray-600 mb-4">HTML, Tailwind CSS, Alpine.js, JavaScript | <a
href="https://github.com/damoves005/kasper-portfolio"
class="text-blue-600 hover:text-blue-800 transition-colors">Github</a></p>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Developed a responsive personal portfolio website using HTML, Tailwind CSS, and Alpine.js for smooth
user interactions</li>
<li>Implemented dynamic navigation with scroll effects and mobile-responsive features</li>
<li>Created an intuitive layout showcasing professional experience, skills, and contact information with
modern design principles</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-20 bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-bold text-center mb-12">Technical Skills</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-4">Web Development</h3>
<p class="text-gray-600">JavaScript, HTML5, CSS3, Bootstrap, Tailwind, Alpine.js PHP, MySQL, WordPress,
Shopify E-commerce,
WooCommerce</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-4">Software Proficiency</h3>
<p class="text-gray-600">Microsoft Office Suite, Adobe Creative Suite (Photoshop, Illustrator, InDesign)</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-12">Contact Me</h2>
<div class="inline-flex flex-col sm:flex-row gap-8 bg-white rounded-lg p-8">
<a href="mailto:[email protected]"
class="flex items-center gap-3 hover:text-gray-600 transition-colors">
<img src="/img/email.png" alt="Email" class="w-6 h-6">
<span>[email protected]</span>
</a>
<a href="tel:+18258889401" class="flex items-center gap-3 hover:text-gray-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<span>(825) 888-9401</span>
</a>
<a href="https://github.com/damoves005" class="flex items-center gap-3 hover:text-gray-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
</svg>
<span>damoves005</span>
</a>
<a href="https://www.linkedin.com/in/kasper-udaundo/"
class="flex items-center gap-3 hover:text-gray-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z M2 9h4v12H2z M4 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" />
</svg>
<span>Kasper Udaundo</span>
</a>
</div>
<p class="mt-4 text-gray-600">Edmonton, Alberta, T6W 1M6</p>
</div>
</section>
<!-- Footer -->
<footer class="py-8 border-t bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-gray-600">Copyright ©
<script>document.write(new Date().getFullYear())</script> Jan Kasper Udaundo. All Rights Reserved.
</p>
</div>
</footer>
</body>
</html>