-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (223 loc) · 14 KB
/
index.html
File metadata and controls
230 lines (223 loc) · 14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Soy Juan Vargas, desarrollador backend especializado en Laravel y Vue.js. Mira mis proyectos como CarriersMate y Zertificated. Disponible para contratación." />
<meta name="author" content="jotasyntax" />
<title> Juan Vargas | Desarrollador Backend Laravel & Vue.js</title>
<link rel="canonical" href="https://jotasyntax.github.io/" />
<meta property="og:title" content="Juan Vargas | Desarrollador Backend" />
<meta property="og:description" content="Laravel · Vue.js · Proyectos reales como CarriersMate y Zertificated." />
<meta property="og:image" content="https://github.com/user-attachments/assets/3af3cc77-46d8-443c-8b42-8647db266a2c" />
<meta property="og:url" content="https://jotasyntax.github.io/" />
<meta name="twitter:card" content="https://github.com/user-attachments/assets/3af3cc77-46d8-443c-8b42-8647db266a2c" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="manifest" href="css/site.webmanifest">
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<span class="d-block d-lg-none">Juan Vargas</span>
<span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.png" alt="jotasyntax juan vargas selfie" /></span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">Soy Juanjo</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Tech Stack</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experiencia</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Educación</a></li>
</ul>
</div>
</nav>
<!-- Page Content-->
<div class="container-fluid p-0">
<!-- About-->
<section class="resume-section" id="about">
<div class="resume-section-content">
<h1 class="mb-0">
Juan
<span class="text-primary">Vargas</span>
</h1>
<div class="subheading mb-5">
Backend Developer | Laravel + Vue.js | aka <a href="https://www.youtube.com/@jotasyntax" target="_blank" >@jotasyntax</a>
</div>
<p class="lead mb-5">
Hola, soy Juan Vargas, desarrollador backend especializado en Laravel y Vue.js.
Me dedico a crear soluciones web funcionales, seguras y adaptadas a las necesidades de empresas reales.
<br/><br />
He liderado el desarrollo de plataformas como CarriersMate (software para empresas de transporte en EE.UU.) y
Zertificated (certificación de archivos con blockchain), y también he colaborado en proyectos para universidades y
compañías internacionales.
<br />
<br />
Mi enfoque combina desarrollo backend robusto, interfaces interactivas, y automatización con herramientas modernas como
GitLab, Docker y servidores Linux.
<br /><br />
Aquí comparto algunos de mis proyectos y aportes.
También puedes encontrarme como <a href="https://www.youtube.com/@jotasyntax" target="_blank">@jotasyntax</a> en YouTube, donde comparto contenido sobre Laravel, Vue.js y buenas
prácticas de programación.<br /><br />
📬 ¿Quieres trabajar conmigo? <a href="mailto:ibluecode@gmail.com">Contáctame.</a></p>
<div class="social-icons">
<a rel="noopener noreferrer" target="_blank" class="social-icon" href="https://www.linkedin.com/in/jotasyntax"><i class="fab fa-linkedin-in"></i></a>
<a rel="noopener noreferrer" target="_blank" class="social-icon" href="https://github.com/jotasyntax/"><i class="fab fa-github"></i></a>
<a rel="noopener noreferrer" target="_blank" class="social-icon" href="https://x.com/jotasyntax"><i class="fab fa-x-twitter"></i> </a>
<a rel="noopener noreferrer" target="_blank" class="social-icon" href="https://www.youtube.com/@jotasyntax"><i class="fab fa-youtube"></i></a>
<a rel="noopener noreferrer" target="_blank" class="social-icon" href="https://www.facebook.com/profile.php?id=61577538051872"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
</section>
<hr class="m-0" />
<!-- Skills-->
<section class="resume-section" id="skills">
<div class="resume-section-content">
<h2 class="mb-5">Tech Stack</h2>
<div class="subheading mb-3">Laravel · Vue.js · PHP · FLUTTER · MySQL · APIs REST · Docker · Git · CI/CD ·
PHPUnit</div>
<ul class="list-inline dev-icons">
<li class="list-inline-item"><i class="fab fa-git"></i></li>
<li class="list-inline-item"><i class="fab fa-laravel"></i></li>
<li class="list-inline-item"><i class="fab fa-php"></i></li>
<li class="list-inline-item"><i class="fab fa-vuejs"></i></li>
<li class="list-inline-item"><i class="fab fa-node"></i></li>
<li class="list-inline-item"><i class="fab fa-docker"></i></li>
<li class="list-inline-item"><i class="fab fa-gitlab"></i></li>
<li class="list-inline-item"><i class="fab fa-github"></i></li>
<li class="list-inline-item"><i class="fab fa-npm"></i></li>
<li class="list-inline-item"><i class="fab fa-bootstrap"></i></li>
</ul>
<div class="subheading mb-3">Workflow</div>
<ul class="fa-ul mb-0">
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Integración y entrega continua (CI/CD)
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Desarrollo guiado por pruebas (TDD con PHPUnit)
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Automatización de despliegues
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Control de versiones con Git y flujos como Git Flow
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Documentación de APIs (Postman, Swagger)
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Diseño Mobile-First y adaptativo (responsive)
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Compatibilidad entre navegadores y depuración
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Colaboración en equipos multifuncionales
</li>
<li>
<span class="fa-li"><i class="fas fa-check"></i></span>
Metodologías ágiles (Scrum, Kanban)
</li>
</ul>
</div>
</section>
<hr class="m-0" />
<!-- Experience-->
<section class="resume-section" id="experience">
<div class="resume-section-content">
<h2 class="mb-5">Experiencia</h2>
<div class="d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="flex-grow-1">
<h3 class="mb-0">Programador Backend</h3>
<div class="subheading mb-3">Magicotools LTD</div>
<p>Aptitudes: Gestión básica de servidores. · Flutter (iOS/Android), DevOps · DevOps: CI/CD, Scrum.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">Abril 2024 - Junio 2025</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="flex-grow-1">
<h3 class="mb-0">Lider de equipo Backend & CTO</h3>
<div class="subheading mb-3">Zaapteam LTD</div>
<p>Lideré equipos remotos para garantizar la entrega eficiente de proyectos.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">Enero 2021 - Diciembre 2023</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="flex-grow-1">
<h3 class="mb-0">Programador FullStack</h3>
<div class="subheading mb-3">Orion Notebooks SL</div>
<p>Participé en el desarrollo de soluciones web y aplicaciones empresariales.
Aprendí y apliqué tecnologías como PHP, JavaScript y SQL en proyectos prácticos.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">Enero 2011 - Enero 2019</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between">
<div class="flex-grow-1">
<h3 class="mb-0">Freelance</h3>
<p>Creación de sitios web y aplicaciones a medida para emprendedores y pequeñas empresas.
Optimización de diseños para garantizar rendimiento y adaptabilidad.</p>
</div>
<div class="flex-shrink-0"><span class="text-primary">Febrero 2010 - Marzo 2011</span></div>
</div>
</div>
</section>
<hr class="m-0" />
<!-- Education-->
<section class="resume-section" id="education">
<div class="resume-section-content">
<h2 class="mb-5">Educación</h2>
<div class="d-flex flex-column flex-md-row justify-content-between">
<div class="flex-grow-1">
<h3 class="mb-0">INFOTEP</h3>
<div class="subheading mb-3">Formación de Tutores en Ambientes Virtuales</div>
</div>
<div class="flex-shrink-0"><span class="text-primary">Marzo 2025 - Mayo 2025</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between">
<div class="flex-grow-1">
<h3 class="mb-0">INFOTEP</h3>
<div class="subheading mb-3">Facilitador de procesos de enseñanza y aprendizaje centrado en el participante</div>
</div>
<div class="flex-shrink-0"><span class="text-primary">Junio 2024 - Diciembre 2024</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between">
<div class="flex-grow-1">
<h3 class="mb-0">UCATECI</h3>
<div class="subheading mb-3">Ingeniería en Sistemas</div>
</div>
<div class="flex-shrink-0"><span class="text-primary">2008 - 2011</span></div>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between mb-5">
<div class="flex-grow-1">
<h3 class="mb-0">CEFAM</h3>
<div class="subheading mb-3">Bachiller Técnico en informatica</div>
</div>
<div class="flex-shrink-0"><span class="text-primary">2006 - 2008</span></div>
</div>
</div>
</section>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>