Hugging Face's logo

Spaces:
Windmonk
/
cv
Running

App Files Community
Windmonk commited on
Commit
acc7cbb
·
verified ·
1 Parent(s): dfd07d2

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +71 -49
  2. prompts.txt +3 -1
index.html CHANGED
@@ -141,6 +141,29 @@
141
  .three-d-tools {
142
  color: var(--grunge-green);
143
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  </style>
145
  </head>
146
  <body class="grunge-bg">
@@ -152,8 +175,17 @@
152
 
153
  <!-- Header -->
154
  <header class="mb-12 relative">
155
- <h1 class="text-5xl md:text-7xl font-bold mb-2 text-green-500 handwritten">MICHAEL RUDE</h1>
156
- <h2 class="text-2xl md:text-3xl text-orange-500 handwritten">MOTION DESIGNER / VISUAL ARTIST</h2>
 
 
 
 
 
 
 
 
 
157
 
158
  <div class="absolute top-0 right-0 text-white text-xs opacity-50">EST. 2019</div>
159
  </header>
@@ -181,16 +213,16 @@
181
  <div class="distorted-border">
182
  <h3 class="text-xl text-white handwritten mb-4 border-b border-gray-700 pb-2">SKILLS</h3>
183
  <div class="flex flex-wrap gap-2">
184
- <span class="bg-blue-500 text-black px-2 py-1 text-xs">After Effects</span>
185
- <span class="bg-green-500 text-black px-2 py-1 text-xs">Blender</span>
186
- <span class="bg-white text-black px-2 py-1 text-xs">Photoshop</span>
187
- <span class="bg-blue-500 text-black px-2 py-1 text-xs">Premiere Pro</span>
188
- <span class="bg-green-500 text-black px-2 py-1 text-xs">3ds Max</span>
189
- <span class="bg-purple-500 text-black px-2 py-1 text-xs">Nuke</span>
190
- <span class="bg-blue-500 text-black px-2 py-1 text-xs">VFX</span>
191
- <span class="bg-green-500 text-black px-2 py-1 text-xs">3D Animation</span>
192
  <span class="bg-blue-500 text-black px-2 py-1 text-xs">Motion Graphics</span>
193
- <span class="bg-green-500 text-black px-2 py-1 text-xs">Compositing</span>
 
 
 
 
 
 
 
 
194
  </div>
195
  </div>
196
  </div>
@@ -262,56 +294,51 @@
262
  <h3 class="text-xl text-white handwritten mb-6 border-b border-gray-700 pb-2">TOOLS & SKILL LEVEL</h3>
263
 
264
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
265
- <!-- Editing Software (Blue) -->
266
  <div class="tool-item p-3 border border-gray-700 hover:border-blue-500 transition" data-skill="95">
267
- <div class="montage-tools text-2xl mb-1">AE</div>
268
- <div class="text-white text-xs">After Effects</div>
269
  <div class="skill-level" style="width: 0%;"></div>
270
  </div>
271
- <div class="tool-item p-3 border border-gray-700 hover:border-blue-500 transition" data-skill="88">
272
- <div class="montage-tools text-2xl mb-1">PR</div>
273
- <div class="text-white text-xs">Premiere Pro</div>
274
- <div class="skill-level" style="width: 0%;"></div>
275
- </div>
276
- <div class="tool-item p-3 border border-gray-700 hover:border-blue-500 transition" data-skill="82">
277
- <div class="montage-tools text-2xl mb-1">DR</div>
278
- <div class="text-white text-xs">DaVinci Resolve</div>
279
  <div class="skill-level" style="width: 0%;"></div>
280
  </div>
281
- <div class="tool-item p-3 border border-gray-700 hover:border-blue-500 transition" data-skill="85">
282
- <div class="montage-tools text-2xl mb-1">FC</div>
283
- <div class="text-white text-xs">Final Cut Pro</div>
 
 
284
  <div class="skill-level" style="width: 0%;"></div>
285
  </div>
286
-
287
- <!-- 3D Software (Green) -->
288
- <div class="tool-item p-3 border border-gray-700 hover:border-green-500 transition" data-skill="90">
289
  <div class="three-d-tools text-2xl mb-1">BL</div>
290
  <div class="text-white text-xs">Blender</div>
291
  <div class="skill-level" style="width: 0%;"></div>
292
  </div>
293
- <div class="tool-item p-3 border border-gray-700 hover:border-green-500 transition" data-skill="80">
294
- <div class="three-d-tools text-2xl mb-1">3D</div>
295
- <div class="text-white text-xs">3ds Max</div>
 
 
296
  <div class="skill-level" style="width: 0%;"></div>
297
  </div>
298
-
299
- <!-- Special Software (Purple) -->
300
- <div class="tool-item p-3 border border-gray-700 hover:border-purple-500 transition" data-skill="75">
301
  <div class="special-tools text-2xl mb-1">NK</div>
302
  <div class="text-white text-xs">Nuke</div>
303
  <div class="skill-level" style="width: 0%;"></div>
304
  </div>
305
- <div class="tool-item p-3 border border-gray-700 hover:border-purple-500 transition" data-skill="78">
306
- <div class="special-tools text-2xl mb-1">SD</div>
307
- <div class="text-white text-xs">Stable Diffusion</div>
 
 
308
  <div class="skill-level" style="width: 0%;"></div>
309
  </div>
310
-
311
- <!-- Other -->
312
- <div class="tool-item p-3 border border-gray-700 hover:border-white transition" data-skill="85">
313
- <div class="text-white text-2xl mb-1">PS</div>
314
- <div class="text-white text-xs">Photoshop</div>
315
  <div class="skill-level" style="width: 0%;"></div>
316
  </div>
317
  </div>
@@ -319,8 +346,8 @@
319
 
320
  <!-- Contact button -->
321
  <div class="text-center mb-6">
322
- <button class="grunge-btn" id="contactButton">
323
- CONTACT IN TELEGRAM
324
  </button>
325
  </div>
326
 
@@ -346,11 +373,6 @@
346
  levelBar.style.width = '0%';
347
  });
348
  });
349
-
350
- // Add click handler for contact button (Telegram)
351
- document.getElementById('contactButton').addEventListener('click', function() {
352
- window.open('https://t.me/Windmonk', '_blank');
353
- });
354
  </script>
355
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Windmonk/cv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
356
  </html>
 
141
  .three-d-tools {
142
  color: var(--grunge-green);
143
  }
144
+
145
+ .profile-image-container {
146
+ width: 120px;
147
+ height: 120px;
148
+ border-radius: 50%;
149
+ border: 3px solid var(--grunge-orange);
150
+ overflow: hidden;
151
+ position: relative;
152
+ box-shadow: 0 0 20px rgba(255, 94, 0, 0.3);
153
+ transition: all 0.3s ease;
154
+ }
155
+
156
+ .profile-image {
157
+ width: 100%;
158
+ height: 100%;
159
+ object-fit: cover;
160
+ object-position: center;
161
+ }
162
+
163
+ .profile-image-container:hover {
164
+ border-color: var(--grunge-green);
165
+ transform: rotate(5deg);
166
+ }
167
  </style>
168
  </head>
169
  <body class="grunge-bg">
 
175
 
176
  <!-- Header -->
177
  <header class="mb-12 relative">
178
+ <div class="flex justify-between items-start">
179
+ <div>
180
+ <h1 class="text-5xl md:text-7xl font-bold mb-2 text-green-500 handwritten">MICHAEL RUDE</h1>
181
+ <h2 class="text-2xl md:text-3xl text-orange-500 handwritten">MOTION DESIGNER / VISUAL ARTIST</h2>
182
+ </div>
183
+ <div class="profile-image-container">
184
+ <img src="https://disk.yandex.ru/i/DssMf21Uo-_yxw"
185
+ alt="Michael Rude"
186
+ class="profile-image">
187
+ </div>
188
+ </div>
189
 
190
  <div class="absolute top-0 right-0 text-white text-xs opacity-50">EST. 2019</div>
191
  </header>
 
213
  <div class="distorted-border">
214
  <h3 class="text-xl text-white handwritten mb-4 border-b border-gray-700 pb-2">SKILLS</h3>
215
  <div class="flex flex-wrap gap-2">
 
 
 
 
 
 
 
 
216
  <span class="bg-blue-500 text-black px-2 py-1 text-xs">Motion Graphics</span>
217
+ <span class="bg-green-500 text-black px-2 py-1 text-xs">3D Animation</span>
218
+ <span class="bg-purple-500 text-black px-2 py-1 text-xs">Visual Effects</span>
219
+ <span class="bg-blue-500 text-black px-2 py-1 text-xs">Compositing</span>
220
+ <span class="bg-green-500 text-black px-2 py-1 text-xs">Video Editing</span>
221
+ <span class="bg-purple-500 text-black px-2 py-1 text-xs">Color Grading</span>
222
+ <span class="bg-blue-500 text-black px-2 py-1 text-xs">Typography</span>
223
+ <span class="bg-green-500 text-black px-2 py-1 text-xs">Generative Art</span>
224
+ <span class="bg-purple-500 text-black px-2 py-1 text-xs">Creative Direction</span>
225
+ <span class="bg-blue-500 text-black px-2 py-1 text-xs">Storyboarding</span>
226
  </div>
227
  </div>
228
  </div>
 
294
  <h3 class="text-xl text-white handwritten mb-6 border-b border-gray-700 pb-2">TOOLS & SKILL LEVEL</h3>
295
 
296
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
297
+ <!-- Motion Graphics Tools -->
298
  <div class="tool-item p-3 border border-gray-700 hover:border-blue-500 transition" data-skill="95">
299
+ <div class="montage-tools text-2xl mb-1">MG</div>
300
+ <div class="text-white text-xs">Motion Graphics</div>
301
  <div class="skill-level" style="width: 0%;"></div>
302
  </div>
303
+ <div class="tool-item p-3 border border-gray-700 hover:border-blue-500 transition" data-skill="90">
304
+ <div class="montage-tools text-2xl mb-1">AE</div>
305
+ <div class="text-white text-xs">After Effects</div>
 
 
 
 
 
306
  <div class="skill-level" style="width: 0%;"></div>
307
  </div>
308
+
309
+ <!-- 3D Animation Tools -->
310
+ <div class="tool-item p-3 border border-gray-700 hover:border-green-500 transition" data-sskill="88">
311
+ <div class="three-d-tools text-2xl mb-1">3D</div>
312
+ <div class="text-white text-xs">3D Animation</div>
313
  <div class="skill-level" style="width: 0%;"></div>
314
  </div>
315
+ <div class="tool-item p-3 border border-gray-700 hover:border-green-500 transition" data-skill="85">
 
 
316
  <div class="three-d-tools text-2xl mb-1">BL</div>
317
  <div class="text-white text-xs">Blender</div>
318
  <div class="skill-level" style="width: 0%;"></div>
319
  </div>
320
+
321
+ <!-- VFX Tools -->
322
+ <div class="tool-item p-3 border border-gray-700 hover:border-purple-500 transition" data-skill="92">
323
+ <div class="special-tools text-2xl mb-1">VFX</div>
324
+ <div class="text-white text-xs">Visual Effects</div>
325
  <div class="skill-level" style="width: 0%;"></div>
326
  </div>
327
+ <div class="tool-item p-3 border border-gray-700 hover:border-purple-500 transition" data-skill="85">
 
 
328
  <div class="special-tools text-2xl mb-1">NK</div>
329
  <div class="text-white text-xs">Nuke</div>
330
  <div class="skill-level" style="width: 0%;"></div>
331
  </div>
332
+
333
+ <!-- Editing Tools -->
334
+ <div class="tool-item p-3 border border-gray-700 hover:border-white transition" data-skill="90">
335
+ <div class="text-white text-2xl mb-1">PR</div>
336
+ <div class="text-white text-xs">Premiere Pro</div>
337
  <div class="skill-level" style="width: 0%;"></div>
338
  </div>
339
+ <div class="tool-item p-3 border border-gray-700 hover:border-white transition" data-skill="88">
340
+ <div class="text-white text-2xl mb-1">DR</div>
341
+ <div class="text-white text-xs">DaVinci Resolve</div>
 
 
342
  <div class="skill-level" style="width: 0%;"></div>
343
  </div>
344
  </div>
 
346
 
347
  <!-- Contact button -->
348
  <div class="text-center mb-6">
349
+ <button class="grunge-btn" id="contactButton" onclick="window.open('https://t.me/Windmonk', '_blank')">
350
+ CONTACT FOR PROJECTS
351
  </button>
352
  </div>
353
 
 
373
  levelBar.style.width = '0%';
374
  });
375
  });
 
 
 
 
 
376
  </script>
377
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Windmonk/cv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
378
  </html>
prompts.txt CHANGED
@@ -1,4 +1,6 @@
1
  давай сделаем что при нажатии на contact for projects их перекидывало по этой ссылке https://t.me/Windmonk
2
  Отлично только в кнопке contact button убери значок телеграмм
3
  Давай уберем палочку оранжевую над словом Michael в начале. Подсветим одним цветом AE PR DR FC так как это про монтаж в tool skill level. SD BL тоже одним цветом. Nuke и SD тоже каким-нибудь цветом что это типа экстра софт
4
- Ты забыл что кнопка contact for projects ведет в телеграмм мой и также ты не убрал закорючку возлe Michael Rude вверху
 
 
 
1
  давай сделаем что при нажатии на contact for projects их перекидывало по этой ссылке https://t.me/Windmonk
2
  Отлично только в кнопке contact button убери значок телеграмм
3
  Давай уберем палочку оранжевую над словом Michael в начале. Подсветим одним цветом AE PR DR FC так как это про монтаж в tool skill level. SD BL тоже одним цветом. Nuke и SD тоже каким-нибудь цветом что это типа экстра софт
4
+ Ты забыл что кнопка contact for projects ведет в телеграмм мой и также ты не убрал закорючку возлe Michael Rude вверху
5
+ Из скиллов убираем After effects Blender Photoshop Premiere Pro 3ds Max Nuke. Пишем только скиллы. Можешь какие-нибудь ещё дописать если знаешь. Потом скорректируем если что. Тепеь справа от Michael Rude и Motion Designer / Visual artist вставляем в пустое место кругляшок в которое поместим моё изображение. Изображение доступно по ссылке https://2.downloader.disk.yandex.ru/preview/b112c76f9042cd9bf12163051d4fd2e800fde0baffc4c657be024280fd6be51b/inf/yjEKwr1UbUlPwICySVxrE9uQ8gEAhMh2_Cbfx80wsVeJSIKhYtZpMrDSJJqacYw9csLY9jSlEfO8QOIWfSEe8g%3D%3D?uid=1511005612&filename=download.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&owner_uid=1511005612&tknv=v3&size=1920x925
6
+ Ага. Но что-то не так с картинкой в кружке - она не отображается по центру. Грубо говоря мы берем картинку по ссылке которую я дал тебе и потом обрезаем её кружком из центра по максимуму чтобы она была как в кружке обрезанной