Hugging Face's logo

Spaces:
Windmonk
/
cv
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +54 -46
  2. prompts.txt +3 -1
index.html CHANGED
@@ -14,6 +14,8 @@
14
  --grunge-green: #00ff88;
15
  --grunge-white: #e0e0e0;
16
  --grunge-black: #0a0a0a;
 
 
17
  }
18
 
19
  body {
@@ -53,19 +55,6 @@
53
  z-index: 10;
54
  }
55
 
56
- .corner-damage::before {
57
- content: "";
58
- position: absolute;
59
- top: 10px;
60
- left: 10px;
61
- width: 50px;
62
- height: 50px;
63
- border-left: 2px solid var(--grunge-orange);
64
- border-top: 2px solid var(--grunge-orange);
65
- clip-path: polygon(0 0, 100% 0, 0 100%);
66
- opacity: 0.5;
67
- }
68
-
69
  .corner-damage::after {
70
  content: "";
71
  position: absolute;
@@ -140,6 +129,18 @@
140
  overflow: hidden;
141
  transition: all 0.3s ease;
142
  }
 
 
 
 
 
 
 
 
 
 
 
 
143
  </style>
144
  </head>
145
  <body class="grunge-bg">
@@ -151,8 +152,8 @@
151
 
152
  <!-- Header -->
153
  <header class="mb-12 relative">
154
- <h1 class="text-5xl md:text-7xl font-bold mb-2 text-orange-500 handwritten">MICHAEL RUDE</h1>
155
- <h2 class="text-2xl md:text-3xl text-green-500 handwritten">MOTION DESIGNER / VISUAL ARTIST</h2>
156
 
157
  <div class="absolute top-0 right-0 text-white text-xs opacity-50">EST. 2019</div>
158
  </header>
@@ -180,15 +181,15 @@
180
  <div class="distorted-border">
181
  <h3 class="text-xl text-white handwritten mb-4 border-b border-gray-700 pb-2">SKILLS</h3>
182
  <div class="flex flex-wrap gap-2">
183
- <span class="bg-orange-500 text-black px-2 py-1 text-xs">After Effects</span>
184
  <span class="bg-green-500 text-black px-2 py-1 text-xs">Blender</span>
185
  <span class="bg-white text-black px-2 py-1 text-xs">Photoshop</span>
186
- <span class="bg-orange-500 text-black px-2 py-1 text-xs">Premiere Pro</span>
187
  <span class="bg-green-500 text-black px-2 py-1 text-xs">3ds Max</span>
188
- <span class="bg-white text-black px-2 py-1 text-xs">Nuke</span>
189
- <span class="bg-orange-500 text-black px-2 py-1 text-xs">VFX</span>
190
  <span class="bg-green-500 text-black px-2 py-1 text-xs">3D Animation</span>
191
- <span class="bg-orange-500 text-black px-2 py-1 text-xs">Motion Graphics</span>
192
  <span class="bg-green-500 text-black px-2 py-1 text-xs">Compositing</span>
193
  </div>
194
  </div>
@@ -261,49 +262,56 @@
261
  <h3 class="text-xl text-white handwritten mb-6 border-b border-gray-700 pb-2">TOOLS & SKILL LEVEL</h3>
262
 
263
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
264
- <div class="tool-item p-3 border border-gray-700 hover:border-orange-500 transition" data-skill="95">
265
- <div class="text-green-500 text-2xl mb-1">AE</div>
 
266
  <div class="text-white text-xs">After Effects</div>
267
  <div class="skill-level" style="width: 0%;"></div>
268
  </div>
269
- <div class="tool-item p-3 border border-gray-700 hover:border-green-500 transition" data-skill="90">
270
- <div class="text-orange-500 text-2xl mb-1">BL</div>
271
- <div class="text-white text-xs">Blender</div>
272
  <div class="skill-level" style="width: 0%;"></div>
273
  </div>
274
- <div class="tool-item p-3 border border-gray-700 hover:border-white transition" data-skill="85">
275
- <div class="text-green-500 text-2xl mb-1">PS</div>
276
- <div class="text-white text-xs">Photoshop</div>
277
  <div class="skill-level" style="width: 0%;"></div>
278
  </div>
279
- <div class="tool-item p-3 border border-gray-700 hover:border-orange-500 transition" data-skill="88">
280
- <div class="text-white text-2xl mb-1">PR</div>
281
- <div class="text-white text-xs">Premiere Pro</div>
 
 
 
 
 
 
 
282
  <div class="skill-level" style="width: 0%;"></div>
283
  </div>
284
  <div class="tool-item p-3 border border-gray-700 hover:border-green-500 transition" data-skill="80">
285
- <div class="text-orange-500 text-2xl mb-1">3D</div>
286
  <div class="text-white text-xs">3ds Max</div>
287
  <div class="skill-level" style="width: 0%;"></div>
288
  </div>
289
- <div class="tool-item p-3 border border-gray-700 hover:border-white transition" data-skill="75">
290
- <div class="text-green-500 text-2xl mb-1">NK</div>
 
 
291
  <div class="text-white text-xs">Nuke</div>
292
  <div class="skill-level" style="width: 0%;"></div>
293
  </div>
294
- <div class="tool-item p-3 border border-gray-700 hover:border-orange-500 transition" data-skill="82">
295
- <div class="text-white text-2xl mb-1">DR</div>
296
- <div class="text-white text-xs">DaVinci Resolve</div>
297
- <div class="skill-level" style="width: 0%;"></div>
298
- </div>
299
- <div class="tool-item p-3 border border-gray-700 hover:border-green-500 transition" data-skill="78">
300
- <div class="text-orange-500 text-2xl mb-1">SD</div>
301
  <div class="text-white text-xs">Stable Diffusion</div>
302
  <div class="skill-level" style="width: 0%;"></div>
303
  </div>
304
- <div class="tool-item p-3 border border-gray-700 hover:border-white transition" data-sskill="85">
305
- <div class="text-green-500 text-2xl mb-1">FC</div>
306
- <div class="text-white text-xs">Final Cut Pro</div>
 
 
307
  <div class="skill-level" style="width: 0%;"></div>
308
  </div>
309
  </div>
@@ -312,7 +320,7 @@
312
  <!-- Contact button -->
313
  <div class="text-center mb-6">
314
  <button class="grunge-btn" id="contactButton">
315
- CONTACT FOR PROJECTS
316
  </button>
317
  </div>
318
 
@@ -339,7 +347,7 @@
339
  });
340
  });
341
 
342
- // Add click handler for contact button
343
  document.getElementById('contactButton').addEventListener('click', function() {
344
  window.open('https://t.me/Windmonk', '_blank');
345
  });
 
14
  --grunge-green: #00ff88;
15
  --grunge-white: #e0e0e0;
16
  --grunge-black: #0a0a0a;
17
+ --grunge-purple: #a855f7;
18
+ --grunge-blue: #3b82f6;
19
  }
20
 
21
  body {
 
55
  z-index: 10;
56
  }
57
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  .corner-damage::after {
59
  content: "";
60
  position: absolute;
 
129
  overflow: hidden;
130
  transition: all 0.3s ease;
131
  }
132
+
133
+ .montage-tools {
134
+ color: var(--grunge-blue);
135
+ }
136
+
137
+ .special-tools {
138
+ color: var(--grunge-purple);
139
+ }
140
+
141
+ .three-d-tools {
142
+ color: var(--grunge-green);
143
+ }
144
  </style>
145
  </head>
146
  <body class="grunge-bg">
 
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
  <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>
 
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>
 
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
 
 
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
  });
prompts.txt CHANGED
@@ -1,2 +1,4 @@
1
  давай сделаем что при нажатии на contact for projects их перекидывало по этой ссылке https://t.me/Windmonk
2
- Отлично только в кнопке contact button убери значок телеграмм
 
 
 
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 вверху