Hugging Face's logo

Spaces:
VSPAN
/
Developer
Running

App Files Community
VSPAN commited on
Commit
2d87326
·
verified ·
1 Parent(s): 801b568

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +513 -513
index.html CHANGED
@@ -1,514 +1,514 @@
1
- <!DOCTYPE html>
2
- <html lang="ru">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Johnny Raspberry - Full-Stack Developer</title>
7
- <style>
8
- @font-face {
9
- font-family: 'AppleColorEmoji';
10
- src: url('AppleColorEmoji.ttf') format('truetype');
11
- }
12
-
13
- * {
14
- margin: 0;
15
- padding: 0;
16
- box-sizing: border-box;
17
- }
18
-
19
- body {
20
- font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
21
- background: linear-gradient(135deg, #f0f9f4 0%, #ecfdf5 50%, #f0fdf4 100%);
22
- min-height: 100vh;
23
- color: #1f2937;
24
- line-height: 1.6;
25
- overflow-x: hidden;
26
- }
27
-
28
- .container {
29
- max-width: 1200px;
30
- margin: 0 auto;
31
- padding: 2rem;
32
- }
33
-
34
- .card {
35
- background: rgba(255, 255, 255, 0.85);
36
- backdrop-filter: blur(20px);
37
- border-radius: 24px;
38
- box-shadow: 0 20px 60px rgba(16, 185, 129, 0.1);
39
- border: 1px solid rgba(16, 185, 129, 0.1);
40
- padding: 3rem;
41
- margin-bottom: 2rem;
42
- transition: all 0.3s ease;
43
- }
44
-
45
- .card:hover {
46
- transform: translateY(-5px);
47
- box-shadow: 0 30px 80px rgba(16, 185, 129, 0.15);
48
- }
49
-
50
- .header {
51
- text-align: center;
52
- margin-bottom: 3rem;
53
- position: relative;
54
- }
55
-
56
- .name {
57
- font-size: 3.5rem;
58
- font-weight: 700;
59
- background: linear-gradient(135deg, #059669, #10b981, #34d399);
60
- -webkit-background-clip: text;
61
- -webkit-text-fill-color: transparent;
62
- background-clip: text;
63
- margin-bottom: 0.5rem;
64
- text-shadow: 0 4px 8px rgba(16, 185, 129, 0.1);
65
- }
66
-
67
- .telegram {
68
- display: inline-block;
69
- background: linear-gradient(135deg, #10b981, #34d399);
70
- color: white;
71
- padding: 0.8rem 2rem;
72
- border-radius: 50px;
73
- text-decoration: none;
74
- font-weight: 600;
75
- transition: all 0.3s ease;
76
- box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
77
- margin-top: 1rem;
78
- }
79
-
80
- .telegram:hover {
81
- transform: translateY(-2px);
82
- box-shadow: 0 12px 35px rgba(16, 185, 129, 0.35);
83
- }
84
-
85
- .position {
86
- background: linear-gradient(135deg, #d1fae5, #a7f3d0);
87
- padding: 2rem;
88
- border-radius: 20px;
89
- margin-bottom: 2rem;
90
- border-left: 4px solid #10b981;
91
- }
92
-
93
- .position h2 {
94
- color: #047857;
95
- font-size: 1.8rem;
96
- margin-bottom: 0.5rem;
97
- font-weight: 700;
98
- }
99
-
100
- .position p {
101
- color: #065f46;
102
- font-size: 1.1rem;
103
- font-weight: 500;
104
- }
105
-
106
- .section-title {
107
- color: #047857;
108
- font-size: 1.5rem;
109
- font-weight: 700;
110
- margin-bottom: 1.5rem;
111
- padding-bottom: 0.5rem;
112
- border-bottom: 2px solid #a7f3d0;
113
- display: flex;
114
- align-items: center;
115
- gap: 0.5rem;
116
- }
117
-
118
- .emoji {
119
- font-family: 'AppleColorEmoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
120
- font-size: 1.8rem;
121
- display: inline-block;
122
- }
123
-
124
- .project {
125
- background: linear-gradient(135deg, #f0fdf4, #dcfce7);
126
- padding: 2rem;
127
- border-radius: 16px;
128
- margin-bottom: 1.5rem;
129
- border-left: 4px solid #22c55e;
130
- transition: all 0.3s ease;
131
- }
132
-
133
- .project:hover {
134
- transform: translateX(5px);
135
- background: linear-gradient(135deg, #ecfdf5, #d1fae5);
136
- }
137
-
138
- .project-title {
139
- color: #15803d;
140
- font-size: 1.3rem;
141
- font-weight: 700;
142
- margin-bottom: 1rem;
143
- display: flex;
144
- align-items: center;
145
- gap: 0.5rem;
146
- }
147
-
148
- .project-description {
149
- color: #166534;
150
- font-size: 1rem;
151
- line-height: 1.7;
152
- }
153
-
154
- .project-link {
155
- color: #059669;
156
- text-decoration: none;
157
- font-weight: 600;
158
- border-bottom: 2px solid transparent;
159
- transition: border-color 0.3s ease;
160
- }
161
-
162
- .project-link:hover {
163
- border-bottom-color: #059669;
164
- }
165
-
166
- .tech-grid {
167
- display: grid;
168
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
169
- gap: 1.5rem;
170
- margin-bottom: 2rem;
171
- }
172
-
173
- .tech-category {
174
- background: linear-gradient(135deg, #f0fdf4, #dcfce7);
175
- padding: 1.5rem;
176
- border-radius: 16px;
177
- border-left: 4px solid #16a34a;
178
- }
179
-
180
- .tech-category h4 {
181
- color: #15803d;
182
- font-size: 1.1rem;
183
- font-weight: 700;
184
- margin-bottom: 1rem;
185
- }
186
-
187
- .tech-list {
188
- color: #166534;
189
- font-size: 0.95rem;
190
- line-height: 1.6;
191
- }
192
-
193
- .approach-grid {
194
- display: grid;
195
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
196
- gap: 1rem;
197
- margin-bottom: 2rem;
198
- }
199
-
200
- .approach-item {
201
- background: linear-gradient(135deg, #ecfdf5, #d1fae5);
202
- padding: 1.5rem;
203
- border-radius: 12px;
204
- display: flex;
205
- align-items: flex-start;
206
- gap: 1rem;
207
- transition: all 0.3s ease;
208
- }
209
-
210
- .approach-item:hover {
211
- transform: scale(1.02);
212
- background: linear-gradient(135deg, #d1fae5, #a7f3d0);
213
- }
214
-
215
- .approach-item .emoji {
216
- font-size: 1.5rem;
217
- margin-top: 0.2rem;
218
- }
219
-
220
- .approach-text {
221
- color: #166534;
222
- font-size: 0.95rem;
223
- font-weight: 500;
224
- }
225
-
226
- .education, .philosophy {
227
- background: linear-gradient(135deg, #f0fdf4, #dcfce7);
228
- padding: 2rem;
229
- border-radius: 16px;
230
- margin-bottom: 1.5rem;
231
- border-left: 4px solid #22c55e;
232
- }
233
-
234
- .philosophy-quote {
235
- font-style: italic;
236
- font-size: 1.2rem;
237
- color: #047857;
238
- font-weight: 600;
239
- margin-bottom: 1rem;
240
- padding: 1rem;
241
- background: rgba(16, 185, 129, 0.1);
242
- border-radius: 12px;
243
- border-left: 3px solid #10b981;
244
- }
245
-
246
- .philosophy-text {
247
- color: #166534;
248
- line-height: 1.7;
249
- }
250
-
251
- @media (max-width: 768px) {
252
- .container {
253
- padding: 1rem;
254
- }
255
-
256
- .card {
257
- padding: 2rem;
258
- }
259
-
260
- .name {
261
- font-size: 2.5rem;
262
- }
263
-
264
- .tech-grid {
265
- grid-template-columns: 1fr;
266
- }
267
-
268
- .approach-grid {
269
- grid-template-columns: 1fr;
270
- }
271
- }
272
-
273
- .floating-elements {
274
- position: fixed;
275
- top: 0;
276
- left: 0;
277
- width: 100%;
278
- height: 100%;
279
- pointer-events: none;
280
- z-index: -1;
281
- }
282
-
283
- .floating-element {
284
- position: absolute;
285
- opacity: 0.1;
286
- animation: float 20s infinite linear;
287
- }
288
-
289
- @keyframes float {
290
- from {
291
- transform: translateY(100vh) rotate(0deg);
292
- }
293
- to {
294
- transform: translateY(-100px) rotate(360deg);
295
- }
296
- }
297
-
298
- .floating-element:nth-child(1) {
299
- left: 10%;
300
- animation-delay: -5s;
301
- font-size: 2rem;
302
- }
303
-
304
- .floating-element:nth-child(2) {
305
- left: 20%;
306
- animation-delay: -10s;
307
- font-size: 1.5rem;
308
- }
309
-
310
- .floating-element:nth-child(3) {
311
- left: 70%;
312
- animation-delay: -15s;
313
- font-size: 2.5rem;
314
- }
315
-
316
- .floating-element:nth-child(4) {
317
- left: 80%;
318
- animation-delay: -2s;
319
- font-size: 1.8rem;
320
- }
321
- </style>
322
- </head>
323
- <body>
324
- <div class="floating-elements">
325
- <div class="floating-element emoji">🎲</div>
326
- <div class="floating-element emoji">🤖</div>
327
- <div class="floating-element emoji">🏥</div>
328
- <div class="floating-element emoji">✨</div>
329
- </div>
330
-
331
- <div class="container">
332
- <div class="card">
333
- <div class="header">
334
- <h1 class="name">Johnny Raspberry</h1>
335
- <a href="https://t.me/Enter_yes" class="telegram" target="_blank">
336
- <span class="emoji">📱</span> Telegram: @Enter_yes
337
- </a>
338
- </div>
339
-
340
- <div class="position">
341
- <h2>Full-Stack Developer / Technical Problem Solver</h2>
342
- <p>Мультитул с фокусом на нестандартные решения и глубокую кастомизацию систем</p>
343
- </div>
344
- </div>
345
-
346
- <div class="card">
347
- <h2 class="section-title">
348
- <span class="emoji">🚀</span>
349
- КЛЮЧЕВЫЕ ПРОЕКТЫ
350
- </h2>
351
-
352
- <div class="project">
353
- <div class="project-title">
354
- <span class="emoji">🎲</span>
355
- FoundryVTT Ecosystem Development | 2+ года активной разработки
356
- </div>
357
- <div class="project-description">
358
- <strong>Экономическая система для D&D</strong> (<a href="https://boosty.to/alofa" class="project-link" target="_blank">boosty.to/alofa</a>) -
359
- универсальное решение для управления игровой экономикой с возможностью адаптации под любые системы<br><br>
360
-
361
- <strong>Discord-Foundry интеграция</strong> - приложение для отображения активности в реальном времени
362
- (количество игроков, система, автоматическое создание серверов по ссылкам)<br><br>
363
-
364
- <strong>Визуальные компоненты:</strong> календарь достижений, стилизованные газеты для игроков,
365
- доска объявлений с продвинутым CSS
366
- </div>
367
- </div>
368
-
369
- <div class="project">
370
- <div class="project-title">
371
- <span class="emoji">🤖</span>
372
- ChatGPT RPG Bot (t.me/ChatGPT_RPG) | 2.5 года разработки
373
- </div>
374
- <div class="project-description">
375
- Полноценная RPG-система с интеграцией множественных ИИ-моделей<br><br>
376
-
377
- Система выбора рас/классов с анимацией, звуковыми эффектами и Markdown-поддержкой<br><br>
378
-
379
- Управление командой разработчиков и рекламодателей<br><br>
380
-
381
- Масштабируемая архитектура для различных платформ
382
- </div>
383
- </div>
384
-
385
- <div class="project">
386
- <div class="project-title">
387
- <span class="emoji">🏥</span>
388
- Medical AI Analysis Tool | Python + HuggingFace
389
- </div>
390
- <div class="project-description">
391
- Анализ глазных патологий и опухолей через компьютерное зрение<br><br>
392
-
393
- Определение межзрачкового расстояния и диагностика проблем со зрением<br><br>
394
-
395
- Автоматизированная предварительная диагностика без участия врача
396
- </div>
397
- </div>
398
- </div>
399
-
400
- <div class="card">
401
- <h2 class="section-title">
402
- <span class="emoji">⚡</span>
403
- ТЕХНИЧЕСКИЕ КОМПЕТЕНЦИИ
404
- </h2>
405
-
406
- <div class="tech-grid">
407
- <div class="tech-category">
408
- <h4>Системы и модули FoundryVTT:</h4>
409
- <div class="tech-list">
410
- <strong>Глубокая модификация:</strong> wfrp4e, pf2e, knave2e, gurps, ironsworn, dnd5e, cyberpunk-red-core<br><br>
411
-
412
- <strong>Кастомизация модулей:</strong> ru-ru, ag-dnd2024, ag-tokens, bg3-inspired-hotbar, jb2a_patreon<br><br>
413
-
414
- Reverse engineering и переписывание сторонних решений под собственные нужды
415
- </div>
416
- </div>
417
-
418
- <div class="tech-category">
419
- <h4>ИИ и Machine Learning:</h4>
420
- <div class="tech-list">
421
- Интеграция GPT API и HuggingFace моделей<br><br>
422
-
423
- Разработка собственных нейросетей ��ля диалоговых систем<br><br>
424
-
425
- Автоматизация игровых процессов через ИИ
426
- </div>
427
- </div>
428
-
429
- <div class="tech-category">
430
- <h4>Языки и технологии:</h4>
431
- <div class="tech-list">
432
- <strong>Frontend:</strong> HTML, CSS, JavaScript, TypeScript<br><br>
433
-
434
- <strong>Backend:</strong> Python, Node.js<br><br>
435
-
436
- <strong>API Integration:</strong> FoundryVTT API, Discord API, Telegram Bot API<br><br>
437
-
438
- <strong>Platforms:</strong> FoundryVTT, Discord, Telegram, HuggingFace
439
- </div>
440
- </div>
441
- </div>
442
- </div>
443
-
444
- <div class="card">
445
- <h2 class="section-title">
446
- <span class="emoji">🎯</span>
447
- ПОДХОД К РАБОТЕ
448
- </h2>
449
-
450
- <div class="approach-grid">
451
- <div class="approach-item">
452
- <span class="emoji">✅</span>
453
- <div class="approach-text">
454
- <strong>Итеративная разработка</strong> - от идеи до MVP за 2 недели, затем непрерывное улучшение
455
- </div>
456
- </div>
457
-
458
- <div class="approach-item">
459
- <span class="emoji">✅</span>
460
- <div class="approach-text">
461
- <strong>Проактивность</strong> - не жду готовых решений, создаю их сам или модифицирую существующие
462
- </div>
463
- </div>
464
-
465
- <div class="approach-item">
466
- <span class="emoji">✅</span>
467
- <div class="approach-text">
468
- <strong>Командная работа</strong> - опыт найма и управления разработчиками, дизайнерами, маркетологами
469
- </div>
470
- </div>
471
-
472
- <div class="approach-item">
473
- <span class="emoji">✅</span>
474
- <div class="approach-text">
475
- <strong>Исследовательский подход</strong> - изучаю чужой код, чтобы понять принципы и улучшить их
476
- </div>
477
- </div>
478
- </div>
479
- </div>
480
-
481
- <div class="card">
482
- <h2 class="section-title">
483
- <span class="emoji">🎓</span>
484
- ОБРАЗОВАНИЕ
485
- </h2>
486
-
487
- <div class="education">
488
- <strong>Юриспруденция</strong> - специализация на анализе сложных дел и консультировании коллег
489
- </div>
490
- </div>
491
-
492
- <div class="card">
493
- <h2 class="section-title">
494
- <span class="emoji">💡</span>
495
- ФИЛОСОФИЯ
496
- </h2>
497
-
498
- <div class="philosophy">
499
- <div class="philosophy-quote">
500
- "У меня масса идей и возможностей их реализовать. Даже если их нет, я найду способ."
501
- </div>
502
-
503
- <div class="philosophy-text">
504
- Работаю на пике мотивации - когда идея "взрывает мозг", могу кодить с 5 утра до полного выгорания.
505
- Результат всегда стоит затраченных усилий.<br><br>
506
-
507
- Готов к нестандартным задачам, быстрому обучению новым технологиям и созданию решений,
508
- которые другие считают невозможными.
509
- </div>
510
- </div>
511
- </div>
512
- </div>
513
- </body>
514
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Johnny Raspberry - Full-Stack Developer</title>
7
+ <style>
8
+ @font-face {
9
+ font-family: 'AppleColorEmoji';
10
+ src: url('AppleColorEmoji.ttf') format('truetype');
11
+ }
12
+
13
+ * {
14
+ margin: 0;
15
+ padding: 0;
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
21
+ background: linear-gradient(135deg, #f0f9f4 0%, #ecfdf5 50%, #f0fdf4 100%);
22
+ min-height: 100vh;
23
+ color: #1f2937;
24
+ line-height: 1.6;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ .container {
29
+ max-width: 1200px;
30
+ margin: 0 auto;
31
+ padding: 2rem;
32
+ }
33
+
34
+ .card {
35
+ background: rgba(255, 255, 255, 0.85);
36
+ backdrop-filter: blur(20px);
37
+ border-radius: 24px;
38
+ box-shadow: 0 20px 60px rgba(16, 185, 129, 0.1);
39
+ border: 1px solid rgba(16, 185, 129, 0.1);
40
+ padding: 3rem;
41
+ margin-bottom: 2rem;
42
+ transition: all 0.3s ease;
43
+ }
44
+
45
+ .card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 30px 80px rgba(16, 185, 129, 0.15);
48
+ }
49
+
50
+ .header {
51
+ text-align: center;
52
+ margin-bottom: 3rem;
53
+ position: relative;
54
+ }
55
+
56
+ .name {
57
+ font-size: 3.5rem;
58
+ font-weight: 700;
59
+ background: linear-gradient(135deg, #059669, #10b981, #34d399);
60
+ -webkit-background-clip: text;
61
+ -webkit-text-fill-color: transparent;
62
+ background-clip: text;
63
+ margin-bottom: 0.5rem;
64
+ text-shadow: 0 4px 8px rgba(16, 185, 129, 0.1);
65
+ }
66
+
67
+ .telegram {
68
+ display: inline-block;
69
+ background: linear-gradient(135deg, #10b981, #34d399);
70
+ color: white;
71
+ padding: 0.8rem 2rem;
72
+ border-radius: 50px;
73
+ text-decoration: none;
74
+ font-weight: 600;
75
+ transition: all 0.3s ease;
76
+ box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
77
+ margin-top: 1rem;
78
+ }
79
+
80
+ .telegram:hover {
81
+ transform: translateY(-2px);
82
+ box-shadow: 0 12px 35px rgba(16, 185, 129, 0.35);
83
+ }
84
+
85
+ .position {
86
+ background: linear-gradient(135deg, #d1fae5, #a7f3d0);
87
+ padding: 2rem;
88
+ border-radius: 20px;
89
+ margin-bottom: 2rem;
90
+ border-left: 4px solid #10b981;
91
+ }
92
+
93
+ .position h2 {
94
+ color: #047857;
95
+ font-size: 1.8rem;
96
+ margin-bottom: 0.5rem;
97
+ font-weight: 700;
98
+ }
99
+
100
+ .position p {
101
+ color: #065f46;
102
+ font-size: 1.1rem;
103
+ font-weight: 500;
104
+ }
105
+
106
+ .section-title {
107
+ color: #047857;
108
+ font-size: 1.5rem;
109
+ font-weight: 700;
110
+ margin-bottom: 1.5rem;
111
+ padding-bottom: 0.5rem;
112
+ border-bottom: 2px solid #a7f3d0;
113
+ display: flex;
114
+ align-items: center;
115
+ gap: 0.5rem;
116
+ }
117
+
118
+ .emoji {
119
+ font-family: 'AppleColorEmoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
120
+ font-size: 1.8rem;
121
+ display: inline-block;
122
+ }
123
+
124
+ .project {
125
+ background: linear-gradient(135deg, #f0fdf4, #dcfce7);
126
+ padding: 2rem;
127
+ border-radius: 16px;
128
+ margin-bottom: 1.5rem;
129
+ border-left: 4px solid #22c55e;
130
+ transition: all 0.3s ease;
131
+ }
132
+
133
+ .project:hover {
134
+ transform: translateX(5px);
135
+ background: linear-gradient(135deg, #ecfdf5, #d1fae5);
136
+ }
137
+
138
+ .project-title {
139
+ color: #15803d;
140
+ font-size: 1.3rem;
141
+ font-weight: 700;
142
+ margin-bottom: 1rem;
143
+ display: flex;
144
+ align-items: center;
145
+ gap: 0.5rem;
146
+ }
147
+
148
+ .project-description {
149
+ color: #166534;
150
+ font-size: 1rem;
151
+ line-height: 1.7;
152
+ }
153
+
154
+ .project-link {
155
+ color: #059669;
156
+ text-decoration: none;
157
+ font-weight: 600;
158
+ border-bottom: 2px solid transparent;
159
+ transition: border-color 0.3s ease;
160
+ }
161
+
162
+ .project-link:hover {
163
+ border-bottom-color: #059669;
164
+ }
165
+
166
+ .tech-grid {
167
+ display: grid;
168
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
169
+ gap: 1.5rem;
170
+ margin-bottom: 2rem;
171
+ }
172
+
173
+ .tech-category {
174
+ background: linear-gradient(135deg, #f0fdf4, #dcfce7);
175
+ padding: 1.5rem;
176
+ border-radius: 16px;
177
+ border-left: 4px solid #16a34a;
178
+ }
179
+
180
+ .tech-category h4 {
181
+ color: #15803d;
182
+ font-size: 1.1rem;
183
+ font-weight: 700;
184
+ margin-bottom: 1rem;
185
+ }
186
+
187
+ .tech-list {
188
+ color: #166534;
189
+ font-size: 0.95rem;
190
+ line-height: 1.6;
191
+ }
192
+
193
+ .approach-grid {
194
+ display: grid;
195
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
196
+ gap: 1rem;
197
+ margin-bottom: 2rem;
198
+ }
199
+
200
+ .approach-item {
201
+ background: linear-gradient(135deg, #ecfdf5, #d1fae5);
202
+ padding: 1.5rem;
203
+ border-radius: 12px;
204
+ display: flex;
205
+ align-items: flex-start;
206
+ gap: 1rem;
207
+ transition: all 0.3s ease;
208
+ }
209
+
210
+ .approach-item:hover {
211
+ transform: scale(1.02);
212
+ background: linear-gradient(135deg, #d1fae5, #a7f3d0);
213
+ }
214
+
215
+ .approach-item .emoji {
216
+ font-size: 1.5rem;
217
+ margin-top: 0.2rem;
218
+ }
219
+
220
+ .approach-text {
221
+ color: #166534;
222
+ font-size: 0.95rem;
223
+ font-weight: 500;
224
+ }
225
+
226
+ .education, .philosophy {
227
+ background: linear-gradient(135deg, #f0fdf4, #dcfce7);
228
+ padding: 2rem;
229
+ border-radius: 16px;
230
+ margin-bottom: 1.5rem;
231
+ border-left: 4px solid #22c55e;
232
+ }
233
+
234
+ .philosophy-quote {
235
+ font-style: italic;
236
+ font-size: 1.2rem;
237
+ color: #047857;
238
+ font-weight: 600;
239
+ margin-bottom: 1rem;
240
+ padding: 1rem;
241
+ background: rgba(16, 185, 129, 0.1);
242
+ border-radius: 12px;
243
+ border-left: 3px solid #10b981;
244
+ }
245
+
246
+ .philosophy-text {
247
+ color: #166534;
248
+ line-height: 1.7;
249
+ }
250
+
251
+ @media (max-width: 768px) {
252
+ .container {
253
+ padding: 1rem;
254
+ }
255
+
256
+ .card {
257
+ padding: 2rem;
258
+ }
259
+
260
+ .name {
261
+ font-size: 2.5rem;
262
+ }
263
+
264
+ .tech-grid {
265
+ grid-template-columns: 1fr;
266
+ }
267
+
268
+ .approach-grid {
269
+ grid-template-columns: 1fr;
270
+ }
271
+ }
272
+
273
+ .floating-elements {
274
+ position: fixed;
275
+ top: 0;
276
+ left: 0;
277
+ width: 100%;
278
+ height: 100%;
279
+ pointer-events: none;
280
+ z-index: -1;
281
+ }
282
+
283
+ .floating-element {
284
+ position: absolute;
285
+ opacity: 0.1;
286
+ animation: float 20s infinite linear;
287
+ }
288
+
289
+ @keyframes float {
290
+ from {
291
+ transform: translateY(100vh) rotate(0deg);
292
+ }
293
+ to {
294
+ transform: translateY(-100px) rotate(360deg);
295
+ }
296
+ }
297
+
298
+ .floating-element:nth-child(1) {
299
+ left: 10%;
300
+ animation-delay: -5s;
301
+ font-size: 2rem;
302
+ }
303
+
304
+ .floating-element:nth-child(2) {
305
+ left: 20%;
306
+ animation-delay: -10s;
307
+ font-size: 1.5rem;
308
+ }
309
+
310
+ .floating-element:nth-child(3) {
311
+ left: 70%;
312
+ animation-delay: -15s;
313
+ font-size: 2.5rem;
314
+ }
315
+
316
+ .floating-element:nth-child(4) {
317
+ left: 80%;
318
+ animation-delay: -2s;
319
+ font-size: 1.8rem;
320
+ }
321
+ </style>
322
+ </head>
323
+ <body>
324
+ <div class="floating-elements">
325
+ <div class="floating-element emoji">🎲</div>
326
+ <div class="floating-element emoji">🤖</div>
327
+ <div class="floating-element emoji">🏥</div>
328
+ <div class="floating-element emoji">✨</div>
329
+ </div>
330
+
331
+ <div class="container">
332
+ <div class="card">
333
+ <div class="header">
334
+ <h1 class="name">Johnny Raspberry</h1>
335
+ <a href="https://t.me/Enter_yes" class="telegram" target="_blank">
336
+ <span class="emoji">📱</span> Telegram: @Enter_yes
337
+ </a>
338
+ </div>
339
+
340
+ <div class="position">
341
+ <h2>Full-Stack Developer / Technical Problem Solver</h2>
342
+ <p>Мультитул с фокусом на нестандартные решения и глубокую кастомизацию систем</p>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="card">
347
+ <h2 class="section-title">
348
+ <span class="emoji">🚀</span>
349
+ КЛЮЧЕВЫЕ ПРОЕКТЫ
350
+ </h2>
351
+
352
+ <div class="project">
353
+ <div class="project-title">
354
+ <span class="emoji">🎲</span>
355
+ FoundryVTT Ecosystem Development | 2+ года активной разработки
356
+ </div>
357
+ <div class="project-description">
358
+ <strong>Экономическая система для D&D</strong> (<a href="https://boosty.to/alofa" class="project-link" target="_blank">boosty.to/alofa</a>) -
359
+ универсальное решение для управления игровой экономикой с возможностью адаптации под любые системы<br><br>
360
+
361
+ <strong>Discord-Foundry интеграция</strong> - приложение для отображения активности в реальном времени
362
+ (количество игроков, система, автоматическое создание серверов по ссылкам)<br><br>
363
+
364
+ <strong>Визуальные компоненты:</strong> Календарь, Достижение, стилизованные газеты для игроков,
365
+ доска объявлений с продвинутым CSS
366
+ </div>
367
+ </div>
368
+
369
+ <div class="project">
370
+ <div class="project-title">
371
+ <span class="emoji">🤖</span>
372
+ ChatGPT RPG Bot (t.me/ChatGPT_RPG) | 2.5 года разработки
373
+ </div>
374
+ <div class="project-description">
375
+ Полноценная RPG-система с интеграцией множественных ИИ-моделей<br><br>
376
+
377
+ Система выбора рас/классов с анимацией, звуковыми эффектами и Markdown-поддержкой<br><br>
378
+
379
+ Управление командой разработчиков и рекламодателей<br><br>
380
+
381
+ Масштабируемая архитектура для различных платформ
382
+ </div>
383
+ </div>
384
+
385
+ <div class="project">
386
+ <div class="project-title">
387
+ <span class="emoji">🏥</span>
388
+ Medical AI Analysis Tool | Python + HuggingFace
389
+ </div>
390
+ <div class="project-description">
391
+ Анализ глазных патологий и опухолей через компьютерное зрение<br><br>
392
+
393
+ Определение межзрачкового расстояния и диагностика проблем со зрением<br><br>
394
+
395
+ Автоматизированная предварительная диагностика без участия врача
396
+ </div>
397
+ </div>
398
+ </div>
399
+
400
+ <div class="card">
401
+ <h2 class="section-title">
402
+ <span class="emoji">⚡</span>
403
+ ТЕХНИЧЕСКИЕ КОМПЕТЕНЦИИ
404
+ </h2>
405
+
406
+ <div class="tech-grid">
407
+ <div class="tech-category">
408
+ <h4>Системы и модули FoundryVTT:</h4>
409
+ <div class="tech-list">
410
+ <strong>Глубокая модификация:</strong> wfrp4e, pf2e, knave2e, gurps, ironsworn, dnd5e, cyberpunk-red-core<br><br>
411
+
412
+ <strong>Кастомизация модулей:</strong> ru-ru, ag-dnd2024, ag-tokens, bg3-inspired-hotbar, jb2a_patreon<br><br>
413
+
414
+ Reverse engineering и переписывание сторонних решений под собственные нужды
415
+ </div>
416
+ </div>
417
+
418
+ <div class="tech-category">
419
+ <h4>ИИ и Machine Learning:</h4>
420
+ <div class="tech-list">
421
+ Интеграция GPT API и HuggingFace моделей<br><br>
422
+
423
+ Разработка собственных нейросетей для диалоговых систем<br><br>
424
+
425
+ Автоматизация игровых процессов через ИИ
426
+ </div>
427
+ </div>
428
+
429
+ <div class="tech-category">
430
+ <h4>Языки и технологии:</h4>
431
+ <div class="tech-list">
432
+ <strong>Frontend:</strong> HTML, CSS, JavaScript, TypeScript<br><br>
433
+
434
+ <strong>Backend:</strong> Python, Node.js<br><br>
435
+
436
+ <strong>API Integration:</strong> FoundryVTT API, Discord API, Telegram Bot API<br><br>
437
+
438
+ <strong>Platforms:</strong> FoundryVTT, Discord, Telegram, HuggingFace
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="card">
445
+ <h2 class="section-title">
446
+ <span class="emoji">🎯</span>
447
+ ПОДХОД К РАБОТЕ
448
+ </h2>
449
+
450
+ <div class="approach-grid">
451
+ <div class="approach-item">
452
+ <span class="emoji">✅</span>
453
+ <div class="approach-text">
454
+ <strong>Итеративная разработка</strong> - от идеи до MVP за 2 недели, затем непрерывное улучшение
455
+ </div>
456
+ </div>
457
+
458
+ <div class="approach-item">
459
+ <span class="emoji">✅</span>
460
+ <div class="approach-text">
461
+ <strong>Проактивность</strong> - не жду готовых решений, создаю их сам или модифицирую существующие
462
+ </div>
463
+ </div>
464
+
465
+ <div class="approach-item">
466
+ <span class="emoji">✅</span>
467
+ <div class="approach-text">
468
+ <strong>Командная работа</strong> - опыт найма и управления разработчиками, дизайнерами, маркетологами
469
+ </div>
470
+ </div>
471
+
472
+ <div class="approach-item">
473
+ <span class="emoji">✅</span>
474
+ <div class="approach-text">
475
+ <strong>Исследовательский подход</strong> - изучаю чужой код, чтобы понять принципы и улучшить их
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+
481
+ <div class="card">
482
+ <h2 class="section-title">
483
+ <span class="emoji">🎓</span>
484
+ ОБРАЗОВАНИЕ
485
+ </h2>
486
+
487
+ <div class="education">
488
+ <strong>Юриспруденция</strong> - специализация на анализе сложных дел и консультировании коллег
489
+ </div>
490
+ </div>
491
+
492
+ <div class="card">
493
+ <h2 class="section-title">
494
+ <span class="emoji">💡</span>
495
+ ФИЛОСОФИЯ
496
+ </h2>
497
+
498
+ <div class="philosophy">
499
+ <div class="philosophy-quote">
500
+ "У меня масса идей и возможностей их реализовать. Даже если их нет, я найду способ."
501
+ </div>
502
+
503
+ <div class="philosophy-text">
504
+ Работаю на пике мотивации - когда идея "взрывает мозг", могу кодить с 5 утра до полного выгорания.
505
+ Результат всегда стоит затраченных усилий.<br><br>
506
+
507
+ Готов к нестандартным задачам, быстрому обучению новым технологиям и созданию решений,
508
+ которые другие считают невозможными.
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </body>
514
  </html>