-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
388 lines (369 loc) · 21.2 KB
/
index.html
File metadata and controls
388 lines (369 loc) · 21.2 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
<!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="Web Dev Josue - Full Stack Developer showcasing innovative web development projects, modern applications, and technical expertise."
/>
<meta name="keywords" content="web developer, full stack, javascript, react, portfolio, web development" />
<meta name="author" content="Josue Zazueta" />
<meta property="og:title" content="Web Dev Josue - Portfolio" />
<meta property="og:description" content="Innovative web development projects and technical expertise" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://webdevjosue.github.io" />
<title>Web Dev Josue - Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css" />
<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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-white font-sans" style="font-family: 'Inter', sans-serif;">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header Section -->
<header class="text-center py-8 md:py-12">
<div class="mb-4">
<span class="inline-block bg-green-100 text-green-800 text-sm font-medium px-4 py-2 rounded-full mb-4">
Full Stack Developer
</span>
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-gray-900 via-green-600 to-gray-900 bg-clip-text text-transparent mb-4">
Web Dev Josue
</h1>
<p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
Creating innovative web solutions with modern technologies
</p>
</header>
<!-- Hero and Navigation Section -->
<div id="hero" class="flex flex-col items-center py-8 px-4 sm:px-6 lg:px-8 lg:py-12">
<div
class="flex flex-col items-center w-full max-w-2xl lg:max-w-3xl"
>
<!-- Hero Image Section -->
<div
class="w-32 md:w-40 lg:w-48 mb-6 p-2 md:p-3"
>
<img
src="img/avatarholder.png"
alt="Avatar image of Josue Zazueta"
class="rounded-full shadow-lg w-full h-auto"
/>
</div>
<!-- Navigation Section -->
<nav
class="nav-container"
role="navigation"
aria-label="Main navigation"
>
<input
type="checkbox"
id="nav-toggle"
class="nav-checkbox sr-only"
aria-label="Toggle navigation menu"
/>
<label
for="nav-toggle"
class="select-button bg-green-600 text-white px-8 py-4 rounded-lg font-semibold cursor-pointer hover:bg-green-700 transition-all duration-300 w-48 text-center block shadow-lg hover:shadow-xl"
aria-label="Open navigation menu"
>
Select
</label>
<div class="overlay" aria-hidden="true"></div>
<nav class="dropdown" role="menu">
<ul class="space-y-2 p-2">
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
</nav>
</div>
</div>
<!-- About Section -->
<section
id="about"
class="about-section py-16 md:py-24 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto space-y-8"
>
<div class="about-content text-center space-y-6">
<div class="inline-block relative mb-6">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4 relative z-10">
About Me
</h2>
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 rounded-full"></div>
<div class="absolute -inset-4 bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 rounded-full blur-xl opacity-30 -z-10"></div>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="text-left space-y-6">
<p class="text-lg md:text-xl text-gray-700 leading-relaxed">
I'm a passionate full-stack web developer with a unique background that combines technical expertise with practical problem-solving skills. Growing up in a mechanic shop, I developed a mechanical mindset and learned that great solutions come from deep knowledge and hands-on experience.
</p>
<p class="text-lg md:text-xl text-gray-700 leading-relaxed">
This foundation has shaped my approach to web development - I don't just write code, I build solutions that work seamlessly in the real world. My focus on clean code, user experience, and innovative thinking helps me transform ideas into powerful web applications.
</p>
<div class="flex flex-wrap gap-3 mt-6">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">Clean Code</span>
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">UX Focus</span>
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Innovation</span>
<span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-medium">Problem Solving</span>
</div>
</div>
<div class="flex justify-center">
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-green-400 to-blue-500 rounded-full blur-lg opacity-30"></div>
<img
src="img/avatarholder.png"
alt="Josue Zazueta"
class="relative rounded-full shadow-2xl w-64 h-64 object-cover border-4 border-white"
/>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<div class="text-center mb-16">
<div class="inline-block relative mb-6">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-orange-500 via-blue-500 to-green-500 bg-clip-text text-transparent mb-4 relative z-10">
Technical Skills
</h2>
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gradient-to-r from-orange-400 via-blue-400 to-green-400 rounded-full"></div>
<div class="absolute -inset-4 bg-gradient-to-r from-orange-100 via-blue-100 to-green-100 rounded-full blur-xl opacity-30 -z-10"></div>
</div>
<p class="text-lg md:text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
<span class="font-semibold text-orange-500">Comprehensive expertise</span> across the full-stack development lifecycle.
From <span class="font-semibold text-blue-500">responsive frontend interfaces</span> to <span class="font-semibold text-green-500">scalable backend architectures</span>,
database design, and modern DevOps practices - I leverage cutting-edge technologies to build robust, production-ready applications.
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 place-items-center">
<div class="skill-card text-center">
<div class="text-orange-500 text-2xl mb-3">⚡</div>
<h3 class="font-semibold text-gray-900 mb-2">Frontend</h3>
<p class="text-sm text-gray-600">HTML, CSS, JavaScript, React, Vue.js, Tailwind CSS</p>
</div>
<div class="skill-card text-center">
<div class="text-blue-500 text-2xl mb-3">🔧</div>
<h3 class="font-semibold text-gray-900 mb-2">Backend</h3>
<p class="text-sm text-gray-600">Node.js, Python, Express, FastAPI, REST APIs</p>
</div>
<div class="skill-card text-center">
<div class="text-green-500 text-2xl mb-3">🗄️</div>
<h3 class="font-semibold text-gray-900 mb-2">Database</h3>
<p class="text-sm text-gray-600">MongoDB, PostgreSQL, MySQL, Redis</p>
</div>
<div class="skill-card text-center">
<div class="text-purple-500 text-2xl mb-3">☁️</div>
<h3 class="font-semibold text-gray-900 mb-2">DevOps</h3>
<p class="text-sm text-gray-600">Docker, Git, GitHub Actions, Vercel, AWS</p>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto bg-gray-50 rounded-3xl">
<div class="text-center mb-12">
<div class="inline-block relative mb-6">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-green-600 via-blue-600 to-purple-600 bg-clip-text text-transparent mb-4 relative z-10">
Featured Projects
</h2>
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gradient-to-r from-green-400 via-blue-400 to-purple-400 rounded-full"></div>
<div class="absolute -inset-4 bg-gradient-to-r from-green-100 via-blue-100 to-purple-100 rounded-full blur-xl opacity-30 -z-10"></div>
</div>
<p class="text-lg md:text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
Showcasing <span class="font-semibold text-green-600">innovative solutions</span> built with cutting-edge technologies.
From <span class="font-semibold text-blue-600">responsive portfolio websites</span> to <span class="font-semibold text-purple-600">utility platforms</span>,
each project demonstrates my commitment to clean code and exceptional user experience.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 mb-8 lg:mb-12 place-items-center">
<!-- Portfolio Website Project -->
<div class="project-card">
<div class="h-64 bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 rounded-t-lg"></div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-900 mb-3">Portfolio Website</h3>
<p class="text-gray-600 mb-4">Modern responsive portfolio built with vanilla HTML, CSS, JavaScript, and Tailwind CSS. Features smooth navigation, professional design, and accessibility best practices.</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">HTML5</span>
<span class="bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">CSS3</span>
<span class="bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full">JavaScript</span>
<span class="bg-purple-100 text-purple-800 text-sm px-3 py-1 rounded-full">Tailwind CSS</span>
</div>
<div class="flex gap-4">
<a href="https://webdevjosue.github.io" target="_blank" class="inline-flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
<span>🚀</span>
Live Demo
</a>
<a href="https://github.com/webdevjosue/webdevjosue.github.io" target="_blank" class="inline-flex items-center gap-2 bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition-colors">
<span>📁</span>
GitHub
</a>
</div>
</div>
</div>
<!-- Pepewebtech Project -->
<div class="project-card">
<div class="h-64 bg-gradient-to-br from-blue-400 via-purple-500 to-indigo-600 rounded-t-lg"></div>
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-900 mb-3">Pepewebtech - Business Tech Solutions</h3>
<p class="text-gray-600 mb-4">A comprehensive business platform empowering local companies with web design, IT support, and marketing automation solutions. Features custom websites that convert visitors into customers with fast, secure, and affordable service plans.</p>
<div class="flex flex-wrap gap-2 mb-6">
<span class="bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">Hugo</span>
<span class="bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">HTML/CSS</span>
<span class="bg-purple-100 text-purple-800 text-sm px-3 py-1 rounded-full">JavaScript</span>
<span class="bg-orange-100 text-orange-800 text-sm px-3 py-1 rounded-full">Vercel</span>
</div>
<div class="flex gap-4">
<a href="https://www.pepewebtech.com/" target="_blank" class="inline-flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
<span>🚀</span>
Live Demo
</a>
<a href="https://github.com/webdevjosue/pepewebtech" target="_blank" class="inline-flex items-center gap-2 bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition-colors">
<span>📁</span>
GitHub
</a>
</div>
</div>
</div>
</div>
<div class="text-center">
<div class="inline-block collaboration-card p-8 rounded-2xl shadow-lg mb-8">
<div class="space-y-6">
<div class="collaboration-item flex items-center justify-center gap-3 text-green-700">
<span class="emoji text-3xl">🌱</span>
<p class="text-xl font-semibold text-green-800">Currently learning LLM applications for video, music, and art generation</p>
</div>
<div class="divider-line"></div>
<div class="collaboration-item flex items-center justify-center gap-3 text-blue-700">
<span class="emoji text-3xl">👯</span>
<p class="text-xl font-semibold text-blue-800">Open to collaboration on Web, Apps, Design, and Project Launching</p>
</div>
<div class="divider-line"></div>
<div class="collaboration-item flex items-center justify-center gap-3 text-purple-700">
<span class="emoji text-3xl">🤔</span>
<p class="text-xl font-semibold text-purple-800">Building network with freelancers, enthusiasts, and creatives</p>
</div>
</div>
</div>
<div class="cta-button inline-flex items-center gap-2 px-6 py-3 rounded-full shadow-md">
<span class="emoji text-green-600 text-xl">⚡</span>
<span class="text-green-800 font-semibold text-lg">More projects coming soon!</span>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
<div class="text-center mb-12">
<div class="inline-block relative mb-6">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold bg-gradient-to-r from-cyan-600 via-teal-600 to-green-600 bg-clip-text text-transparent mb-4 relative z-10">
Let's Connect
</h2>
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gradient-to-r from-cyan-400 via-teal-400 to-green-400 rounded-full"></div>
<div class="absolute -inset-4 bg-gradient-to-r from-cyan-100 via-teal-100 to-green-100 rounded-full blur-xl opacity-30 -z-10"></div>
</div>
<p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
Interested in <span class="font-semibold text-cyan-600">working together</span> or have a <span class="font-semibold text-teal-600">project in mind</span>?
I'd <span class="font-semibold text-green-600">love to hear from you</span>!
</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-8">
<div class="contact-card p-8">
<h3 class="text-xl font-bold text-gray-900 mb-4">Get In Touch</h3>
<div class="space-y-4">
<div class="flex items-center gap-3">
<span class="text-green-600 text-lg">📧</span>
<a href="mailto:WebDev.Josue@gmail.com" class="text-gray-700 hover:text-green-600 transition-colors">
WebDev.Josue@gmail.com
</a>
</div>
<div class="flex items-center gap-3">
<span class="text-blue-600 text-lg">🌐</span>
<span class="text-gray-700">Available for freelance projects</span>
</div>
<div class="flex items-center gap-3">
<span class="text-purple-600 text-lg">📍</span>
<span class="text-gray-700">San Diego Region</span>
</div>
</div>
</div>
<div class="contact-card p-8">
<h3 class="text-xl font-bold text-gray-900 mb-4">What I'm Looking For</h3>
<div class="space-y-3">
<div class="flex items-start gap-3">
<span class="text-green-600 mt-1">🤝</span>
<span class="text-gray-700">Collaboration on web applications and design</span>
</div>
<div class="flex items-start gap-3">
<span class="text-blue-600 mt-1">🚀</span>
<span class="text-gray-700">Project launching and technical consulting</span>
</div>
<div class="flex items-start gap-3">
<span class="text-purple-600 mt-1">💡</span>
<span class="text-gray-700">Innovation and creative problem-solving</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<a
href="mailto:WebDev.Josue@gmail.com"
class="inline-flex items-center gap-2 bg-green-600 text-white px-8 py-4 rounded-lg text-lg md:text-xl font-bold hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:outline-none transition-all duration-300 shadow-lg hover:shadow-xl"
>
<span>📧</span>
Send Me a Message
</a>
<p class="text-sm text-gray-500 mt-6 text-center font-medium">
⚡ Fun fact: Chihuahuas are the Strongest Dogs in the World! :)
</p>
</div>
</section>
</div>
<!-- Footer Section -->
<footer class="bg-gray-900 text-white py-12 mt-16">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<!-- About Section -->
<div class="text-center md:text-left">
<h3 class="text-xl font-bold mb-4 text-green-400">Web Dev Josue</h3>
<p class="text-gray-300">
Creating innovative web solutions with modern technologies and clean code.
</p>
</div>
<!-- Quick Links Section -->
<div class="text-center">
<h3 class="text-xl font-bold mb-4 text-green-400">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#about" class="text-gray-300 hover:text-green-400 transition-colors">About</a></li>
<li><a href="#projects" class="text-gray-300 hover:text-green-400 transition-colors">Projects</a></li>
<li><a href="#skills" class="text-gray-300 hover:text-green-400 transition-colors">Skills</a></li>
<li><a href="#contact" class="text-gray-300 hover:text-green-400 transition-colors">Contact</a></li>
</ul>
</div>
<!-- Connect Section -->
<div class="text-center">
<h3 class="text-xl font-bold mb-4 text-green-400">Connect</h3>
<div class="space-y-2 flex flex-col items-center">
<a href="mailto:WebDev.Josue@gmail.com" class="connect-link flex items-center gap-2 text-gray-300 hover:text-green-400 transition-colors">
<span>📧</span>
WebDev.Josue@gmail.com
</a>
<a href="#" onclick="scrollToTop()" class="connect-link flex items-center gap-2 text-gray-300 hover:text-green-400 transition-colors">
<span>🌐</span>
webdevjosue.github.io
</a>
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="border-t border-gray-700 pt-8 text-center">
<p class="text-gray-400 text-center">
© <span id="current-year"></span> Josue Zazueta LLC. Built with passion and modern web technologies.
</p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>