-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
261 lines (240 loc) · 14.5 KB
/
index.html
File metadata and controls
261 lines (240 loc) · 14.5 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
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/jpeg" href="mi_putisimo_careto_chaval.jpg">
<title>Ismael Merlo - Game Developer</title>
<!-- Que haces aqui chismoso? fuera bazofia! -->
<style>
#perfil {
background-image: url('elavila.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
:root{
--bg:#1f1305;
--card:rgba(0,0,0,0.55);
--accent:#f97316;
--muted:#e5e5e5;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#fff;background:var(--bg);}
body{position:relative;overflow-y:auto;scroll-behavior:smooth;}
video.bg-video{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
nav{position:fixed;top:18px;left:18px;z-index:40;background:rgba(0,0,0,0.4);backdrop-filter:blur(6px);border-radius:14px;padding:8px 12px;display:flex;gap:8px;align-items:center}
nav a{color:var(--accent);text-decoration:none;padding:6px 10px;border-radius:8px;font-weight:600;font-size:14px;transition:background 0.3s}
nav a.active, nav a:hover{background:rgba(249,115,22,0.2)}
section{min-height:100vh;padding:48px;display:flex;align-items:center;justify-content:center;transition:all 0.4s ease;}
.card{background:var(--card);border-radius:18px;padding:28px;box-shadow:0 6px 30px rgba(0,0,0,0.6);width:900px;max-width:calc(100vw - 120px);backdrop-filter:blur(8px);}
.profile{display:flex;gap:28px;align-items:center}
.avatar{width:160px;height:160px;border-radius:20px;overflow:hidden;flex:0 0 160px;background:#061022;display:grid;place-items:center}
.avatar img{width:100%;height:100%;object-fit:cover}
.meta h1{margin:0;font-size:26px}
.meta p{color:var(--muted);margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag{background:rgba(255,255,255,0.08);padding:6px 10px;border-radius:999px;font-weight:600}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.project{padding:12px;border-radius:12px;background:rgba(255,255,255,0.05)}
.project h3{margin:0 0 6px 0}
.project p{margin:0;color:var(--muted);font-size:14px}
.muted{color:var(--muted)}
.section-title{font-size:20px;margin-bottom:12px}
.download-btn{display:inline-block;margin-top:8px;padding:6px 12px;background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;font-weight:600;transition:background 0.3s}
.download-btn:hover{background:#ea580c}
audio{width:100%;margin-top:8px}
.timeline{position:relative;margin-top:20px;padding-left:30px;border-left:3px solid var(--accent);}
.timeline-entry{margin-bottom:20px;position:relative;padding-left: 15px;}
.timeline-entry::before{content:'';position:absolute;left:-10px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(249,115,22,0.8);}
.timeline-entry.old::before{background:#999;box-shadow:none;}
@media (max-width:900px){
.card{width:calc(100vw - 80px)}
.columns{grid-template-columns:1fr}
.avatar{width:120px;height:120px}
}
</style>
</head>
<body>
<video class="bg-video" autoplay muted loop>
<source src="trabajitos.mp4" type="video/mp4">
</video>
<nav>
<a href="#perfil">Perfil</a>
<a href="#gd">C++/GDscript - Godot Engine</a>
<a href="#blender">Blender - Blockbench</a>
<a href="#lmms">LMMS</a>
<a href="#exp">Experiencia</a>
</nav>
<section id="perfil">
<div class="card profile">
<div class="avatar">
<img src="mi_putisimo_careto_chaval.jpg" alt="Foto de perfil">
</div>
<div class="meta">
<h1>Ismael Merlo — Game Developer</h1>
<p class="muted">Me diagnosticaron autismo a los 5 años por lo cuál no puedo detectar el sarcasmo, así que este portafolio será lo más directo que hayas leído en tu vida. <br> <br> Vivir en un entorno extremadamente impredecible (Venezuela) me ha hecho tener que aprender de todo, y la falta de presupuesto tener que aprender todos los aspectos de un juego, desde el arte, hasta la programación y la música. <br> <br> PD: Está página web no es responsive pero eso solo demuestra que la abriste desde tu celular y que no te estás tomando mi portafolio con la suficiente seriedad.</p>
<div class="tags">
<span class="tag">GDScript</span>
<span class="tag">C++</span>
<span class="tag">Godot Engine</span>
<span class="tag">Blender</span>
<span class="tag">Blockbench</span>
<span class="tag">LMMS</span>
</div>
<div style="margin-top:18px">
<small class="muted">Correo — <a href="mailto:ismaelmerlo05@gmail.com" style="color:var(--accent);text-decoration:underline;">ismaelmerlo05@gmail.com</a></small> <br>
<small class="muted">Whatsapp — <a href="https://wa.me/584127869165" style="color:var(--accent);text-decoration:underline;">+584127869165</a></small> <br>
<small class="muted">Github — <a href="https://www.github.com/IsmaelMerlo" target="_blank" style="color:var(--accent);text-decoration:underline;">github.com/IsmaelMerlo</a></small>
</div>
</div>
</div>
</section>
<section id="gd">
<div class="card">
<div class="section-title">C++/GDscript — Godot Engine</div>
<p class="muted">Unity me enseñó que mantener una arquitectura antigua a largo plazo es igual a mantener una relación tóxica, desgastante y deprimente. Godot es como aquel amor curioso, al que siempre vuelves para aprender algo nuevo, empalagoso, delirante. <br> <br> Salí del Tutorial Hell y empecé a crear juegos serios de verdad. <br> <br> Mi secreto: <a href="https://docs.godotengine.org" target="_blank" style="color: #ea580c;">Leer la documentación</a><br> <br> Así fue como creé mi propio estudio de videojuegos <a href="https://viremorfe-studios.github.io/" target="_blank" style="color: #ea580c;">Viremorfe Studios</a>, en el cuál actualmente estoy desarrollando un juego de terror psicológico procedural (como si no fuera suficiente terror ya vivir en Venezuela). <br> <br> Actualmente estoy desarrollando un plugin en C++ con GDextension para manejar la proceduralidad de mi juego en Godot! <br> <br> Primer vistazo a Shadead: <br> </p>
<br>
<video controls loop style="width:100%;border-radius:12px;margin-bottom:16px">
<source src="shadead.mp4" type="video/mp4">
</video>
</div>
</section>
<section id="blender">
<div class="card">
<div class="section-title">Blender — Blockbench</div>
<div class="columns">
<p class="muted">Creo que todos ya sabemos de que va Blender, el programita para 3D, así que hablemos de Blockbench, si hiciera un videojuego tipo voxel esta definitivamente sería mi herramienta preferida, el uv mapping es fantasticamente más sencillo que en Blender y el texturizado es prácticamente hacer pixel art encima de los modelos. <br> <br> Sin embargo hay cosas que sencillamente no puede hacer Blockbench, por mucho que me encante (simulaciones realistas, por ejemplo) así que lo complemento con Blender. <br> <br></p>
<div>
<h3>Mario RTX</h3>
<video controls loop style="width:100%;border-radius:12px">
<source src="render_mario.mp4" type="video/mp4">
</video>
<a href="https://drive.google.com/drive/u/1/folders/1sKfjajUdniQr6cbwZAytIbR4DV3v9B9L" target="_blank" class="download-btn" download>Descargar modelo</a>
<p class="muted"> <br>Creado con: Blender</p>
</div>
<div>
<h3>Little Truck</h3>
<video controls loop style="width:100%;border-radius:12px">
<source src="little_truck.mp4" type="video/mp4">
</video>
<a href="https://drive.google.com/drive/u/1/folders/1C0Zof0LPfUXeNaZuqtlVVFh05KasglTh" target="_blank" class="download-btn" download>Descargar modelo</a>
<p class="muted"> <br>Creado con: Blockbench</p>
</div>
<div>
<h3>Apocalyptic House</h3>
<img src="apocalyptic_house.png" alt="Apocalyptic House" style="width:100%;border-radius:12px">
<a href="https://drive.google.com/drive/u/1/folders/1qobQfGIi4TQpzOXBCiGH0fuB7cndIeg-" target="_blank" class="download-btn" download>Descargar modelo</a>
<p class="muted"> <br>Creado con: Blender</p>
</div>
<div>
<h3>Hornet Low-Poly</h3>
<img src="hornet_low_poly.gif" alt="Hornet Low Poly" style="width:100%;border-radius:12px">
<a href="https://drive.google.com/drive/folders/1t-FYb1wRPYek-4-wEG1mGgxEM6_hbejD" target="_blank" class="download-btn" download>Descargar modelo</a>
<p class="muted"> <br>Creado con: Blockbench</p>
</div>
<div>
<h3>Happy Three Cats</h3>
<img src="happy_three_cats.gif" alt="Happy Three Cats" style="width:100%;border-radius:12px">
<a href="https://drive.google.com/drive/folders/1VivRi4UGUlFJcdk2N82aZhclDlza5nRl" target="_blank" class="download-btn" download>Descargar modelo</a>
<p class="muted"> <br>Creado con: Blockbench</p>
</div>
</div>
</div>
</section>
<section id="lmms">
<div class="card">
<div class="section-title">LMMS</div>
<div class="columns">
<p class="muted">Intenté FLstudio pero luego me di cuenta que era una herramienta para satisfacer a un sistema educativo desfasado, así que me quedé con LMMS con el cuál no tenía que pasar un semestre entero para saberlo usar. Todo lo que escuchas aquí lo hice en LMMS.</p>
<div>
<h3>Discusión</h3>
<audio controls>
<source src="Discusión.wav" type="audio/wav">
</audio>
</div>
<div>
<h3>Void</h3>
<audio controls>
<source src="Void.wav" type="audio/wav">
</audio>
</div>
<div>
<h3>Holy</h3>
<audio controls>
<source src="Holy.wav" type="audio/wav">
</audio>
</div>
<div>
<h3>Space Insanity</h3>
<audio controls>
<source src="space_insanity.wav" type="audio/wav">
</audio>
</div>
</div>
</div>
</section>
<section id="exp">
<div class="card">
<div class="section-title">Experiencia</div>
<div class="timeline">
<div class="timeline-entry">
<strong>2025 — Presente:</strong> <br><br>
<div>
<span><b>Empresa:</b> <a href="https://viremorfe-studios.github.io/" target="_blank" style="color:var(--accent);text-decoration:underline;">Viremorfe Studios</a></span><br><br>
<span><b>Cargo:</b> Fundador y Director</span> <br><br>
<span><b>Descripción:</b> Actualmente estoy más empeñado en mis propios proyectos que en otras cosas, mientras que hago trabajitos freelance para no morir de hambre, sin embargo estoy abierto a cualquier tipo de trabajo ya sea a tiempo parcial o tiempo completo.</span> <br>
</div>
</div>
<div class="timeline-entry old">
<strong>2025 — 2025:</strong> <br><br>
<div>
<span><b>Empresa:</b> Clasificado (NDA)</span><br><br>
<span><b>Cargo:</b> Músico y especialista de SFX para videojuegos</span> <br><br>
<span><b>Descripción:</b> Trabaje para esta empresa extranjera durante varios meses haciendo todo el apartado sonoro de su videojuego, desde los efectos de sonido hasta los temas principales, por suerte a la empresa no le importó el software que usará para hacer el trabajo asi que use LMMS durante absolutamente todo el proceso, quizás el trabajo que más he disfrutado hasta el momento y del cual no tengo ninguna queja.</span>
</div>
</div>
<div class="timeline-entry old">
<strong>2024 — 2025:</strong><br><br>
<div>
<span><b>Empresa:</b> <a href="https://credismart.co" target="_blank" style="color:var(--accent);text-decoration:underline;">Credismart</a></span><br><br>
<span><b>Cargo:</b> Analista de soporte IT</span> <br><br>
<span><b>Descripción:</b> Trabaje resolviendole las dudas a un montón de colombianos y administrando bases de datos, y encima eran de PHP, mi odio a PHP ha llegado a niveles galácticos.</span>
</div>
</div>
<div class="timeline-entry old">
<strong>2024 — 2024:</strong><br><br>
<div>
<span><b>Empresa:</b> <a href="https://paramlabs.io" target="_blank" style="color:var(--accent);text-decoration:underline;">Paramlabs</a></span><br><br>
<span><b>Cargo:</b> Programador de UIs en Godot Engine</span> <br><br>
<span><b>Descripción:</b> Trabaje en algo que realmente me gustaba, el problema, el ambiente, gambling, abuso a clientes, y el contrato solo era de 3 meses, sin embargo no me puedo quejar, aprendí bastante de UIs en Godot y la paga era buena, pero creo que jamás volveré a participar en un ambiente laboral que contenga gambling.</span>
</div>
</div>
<div class="timeline-entry old">
<strong>2023 — 2024:</strong><br><br>
<div>
<span><b>Empresa:</b> <a href="https://www.tatticaweb.it" target="_blank" style="color:var(--accent);text-decoration:underline;">Tattica Web</a></span><br><br>
<span><b>Cargo:</b> Programador de Plugins en PHP para Wordpress</span> <br><br>
<span><b>Descripción:</b> Aquí fue dónde mi odio hacia PHP comenzó, Wordpress es una herramienta poderosa, pero la forma en que está construido PHP es simplemente horrible, lento y deprimente, hubiera preferido hacerlo en GDscript.</span>
</div>
</div>
</div>
</div>
</section>
<script>
const links = document.querySelectorAll('nav a');
const sections = Array.from(document.querySelectorAll('section'));
function updateActive(){
let idx = 0;
const pos = window.scrollY + window.innerHeight/2;
sections.forEach((s,i)=>{
if(pos >= s.offsetTop) idx = i;
});
links.forEach(l=>l.classList.remove('active'));
if(links[idx]) links[idx].classList.add('active');
}
window.addEventListener('scroll', updateActive);
updateActive();
</script>
</body>
</html>