Hugging Face's logo

Spaces:
VSPAN
/
Developer
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +612 -474
index.html CHANGED
@@ -3,512 +3,650 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Johnny Raspberry - Архитектор цифровых систем будущего. Специализация: FoundryVTT, AI-интеграции, нестандартные технологические решения.">
7
+ <meta name="author" content="Johnny Raspberry">
8
+ <title>Johnny Raspberry /// Визионер Технологий</title>
9
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 fill=%22%23040f1a%22/><text x=%2250%22 y=%2268%22 font-family=%22Orbitron, sans-serif%22 font-size=%2250%22 fill=%22%2333ffcc%22 text-anchor=%22middle%22>JR</text></svg>">
10
  <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Syne:wght@400;500;700&family=Roboto+Mono:wght@300;400&display=swap');
12
+
13
+ :root {
14
+ --font-display: 'Orbitron', sans-serif;
15
+ --font-primary: 'Syne', sans-serif;
16
+ --font-mono: 'Roboto Mono', monospace;
17
+
18
+ --color-bg-deep: #01060e; /* Очень темный, почти черный с сине-зеленым отливом */
19
+ --color-bg-main: #040f1a; /* Основной фон */
20
+ --color-bg-surface: #0a192f; /* Для карточек и поверхностей */
21
+
22
+ --color-text-primary: #e6f1ff; /* Очень светлый, почти белый */
23
+ --color-text-secondary: #a8b2d1; /* Светло-серый с синим оттенком */
24
+ --color-text-muted: #7488a1; /* Более темный серый */
25
+
26
+ --color-accent-neon-green: #33ffcc; /* Яркий неоновый зеленый/бирюзовый */
27
+ --color-accent-electric-blue: #00aaff; /* Электрический синий */
28
+ --color-accent-white: #ffffff;
29
+
30
+ --color-glass-bg: rgba(10, 25, 47, 0.25); /* Темное стекло */
31
+ --color-glass-border: rgba(51, 255, 204, 0.2); /* Неоново-зеленая граница */
32
+ --color-glass-highlight: rgba(51, 255, 204, 0.1); /* Подсветка для стекла */
33
+ --color-glow: rgba(51, 255, 204, 0.5);
34
+
35
+ --shadow-soft: 0 4px 15px rgba(0,0,0,0.2);
36
+ --shadow-medium: 0 8px 30px rgba(0,0,0,0.3);
37
+ --shadow-hard-glow: 0 0 15px var(--color-glow), 0 0 30px var(--color-glow), 0 0 45px color-mix(in srgb, var(--color-accent-neon-green) 30%, transparent);
38
+
39
+ --border-radius-sm: 3px;
40
+ --border-radius-md: 6px;
41
+ --border-radius-lg: 12px;
42
+
43
+ --transition-swift: 0.15s ease-out;
44
+ --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
45
+ --transition-elastic: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
46
+ }
47
+
48
+ [data-theme="light"] {
49
+ --color-bg-deep: #e0f0ff;
50
+ --color-bg-main: #f0f8ff;
51
+ --color-bg-surface: #ffffff;
52
+
53
+ --color-text-primary: #0a192f;
54
+ --color-text-secondary: #2c3e50;
55
+ --color-text-muted: #56687e;
56
+
57
+ --color-accent-neon-green: #008060; /* Темнее для контраста */
58
+ --color-accent-electric-blue: #005f99;
59
+ --color-accent-white: #01060e;
60
+
61
+ --color-glass-bg: rgba(255, 255, 255, 0.5);
62
+ --color-glass-border: rgba(0, 128, 96, 0.3);
63
+ --color-glass-highlight: rgba(0, 128, 96, 0.1);
64
+ --color-glow: rgba(0, 128, 96, 0.4);
65
+
66
+ --shadow-soft: 0 4px 15px rgba(10,25,47,0.05);
67
+ --shadow-medium: 0 8px 30px rgba(10,25,47,0.1);
68
+ --shadow-hard-glow: 0 0 15px var(--color-glow), 0 0 30px var(--color-glow), 0 0 45px color-mix(in srgb, var(--color-accent-neon-green) 30%, transparent);
69
  }
70
 
71
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
72
+ html { scroll-behavior: smooth; font-size: 16px; }
73
  body {
74
+ font-family: var(--font-primary);
75
+ background-color: var(--color-bg-main);
76
+ color: var(--color-text-primary);
77
+ line-height: 1.75;
78
+ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
79
  overflow-x: hidden;
80
+ position: relative;
81
+ min-height: 100vh;
82
+ transition: background-color var(--transition-smooth), color var(--transition-smooth);
83
+ }
84
+
85
+ .noise-overlay {
86
+ position: fixed; top: 0; left: 0; width: 100%; height: 100%;
87
+ pointer-events: none; z-index: -1; opacity: 0.03;
88
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
89
+ animation: noiseAnim 0.2s infinite alternate;
90
+ }
91
+ @keyframes noiseAnim { 0% { transform: translate(0,0); } 100% { transform: translate(-1px, -1px); } }
92
+
93
+ .animated-bg-lines {
94
+ position: fixed; top: 0; left: 0; width: 100%; height: 100%;
95
+ pointer-events: none; z-index: -2; overflow: hidden;
96
+ }
97
+ .animated-bg-lines > div {
98
+ position: absolute; height: 150%; width: 1px;
99
+ background: linear-gradient(to bottom, transparent 0%, var(--color-accent-neon-green) 50%, transparent 100%);
100
+ opacity: 0.05;
101
+ animation: moveLine 20s linear infinite;
102
+ }
103
+ .animated-bg-lines > div:nth-child(1) { left: 10%; animation-delay: -2s; }
104
+ .animated-bg-lines > div:nth-child(2) { left: 30%; animation-delay: -7s; }
105
+ .animated-bg-lines > div:nth-child(3) { left: 50%; animation-delay: -12s; }
106
+ .animated-bg-lines > div:nth-child(4) { left: 70%; animation-delay: -15s; }
107
+ .animated-bg-lines > div:nth-child(5) { left: 90%; animation-delay: -18s; }
108
+ @keyframes moveLine { 0% { transform: translateY(-25%); } 100% { transform: translateY(-125%); } }
109
+
110
+ .container { max-width: 1150px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1;}
111
+
112
+ h1, h2, h3, h4 { text-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-neon-green) 20%, transparent); }
113
+ h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.05; margin-bottom: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
114
+ h2 {
115
+ font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem);
116
+ margin-top: 5rem; margin-bottom: 2.5rem;
117
+ padding-bottom: 1rem;
118
+ display: flex; align-items: baseline;
119
+ border-bottom: 1px solid var(--color-glass-border);
120
  position: relative;
121
  }
122
+ h2::after {
123
+ content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 80px;
124
+ background: linear-gradient(90deg, var(--color-accent-neon-green), var(--color-accent-electric-blue));
125
+ box-shadow: 0 0 8px var(--color-accent-neon-green);
126
+ animation: scanLine 4s ease-in-out infinite alternate;
127
+ }
128
+ @keyframes scanLine { 0% { width: 80px; } 50% { width: 160px; } 100% { width: 80px; } }
129
+ h2 .section-prefix {
130
+ font-family: var(--font-mono); font-size: 0.6em; color: var(--color-accent-neon-green);
131
+ margin-right: 0.75rem; opacity: 0.9; font-weight: 400;
132
+ }
133
+ h3 { font-family: var(--font-primary); font-size: clamp(1.4rem, 3.5vw, 1.8rem); color: var(--color-text-primary); font-weight: 700; margin-bottom: 1rem; letter-spacing: 0.01em;}
134
+ p { margin-bottom: 1.5rem; color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.8; }
135
+ a { color: var(--color-accent-neon-green); text-decoration: none; transition: color var(--transition-swift), text-shadow var(--transition-swift); font-weight: 500; position: relative; }
136
+ a:hover { color: var(--color-accent-white); text-shadow: 0 0 8px var(--color-accent-neon-green), 0 0 15px var(--color-accent-neon-green); }
137
+ ul { list-style: none; padding-left: 0; }
138
+ li { margin-bottom: 0.85rem; color: var(--color-text-secondary); position: relative; padding-left: 1.75rem; font-size: 1rem;}
139
+ li::before {
140
+ content: "»"; position: absolute; left: 0; top: 0.1em; color: var(--color-accent-neon-green);
141
+ font-size: 1.1em; line-height: inherit; font-weight: 700;
142
+ text-shadow: 0 0 5px var(--color-glow);
143
+ }
144
+ strong { color: var(--color-text-primary); font-weight: 700; }
145
+ code {
146
+ font-family: var(--font-mono); background-color: var(--color-bg-surface);
147
+ color: var(--color-accent-electric-blue); padding: 0.25em 0.6em;
148
+ border-radius: var(--border-radius-sm); font-size: 0.9em;
149
+ border: 1px solid var(--color-glass-border);
150
+ box-shadow: inset 0 0 5px color-mix(in srgb, var(--color-accent-electric-blue) 10%, transparent);
151
+ }
152
+
153
+ .navbar {
154
+ position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
155
+ padding: 0.75rem 0; height: 70px;
156
+ background: transparent;
157
+ transition: background-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth);
158
+ }
159
+ .navbar.scrolled {
160
+ background: color-mix(in srgb, var(--color-bg-main) 85%, transparent);
161
+ backdrop-filter: blur(12px);
162
+ box-shadow: 0 0 25px color-mix(in srgb, var(--color-accent-neon-green) 8%, transparent);
163
+ }
164
+ .navbar.nav-hidden { transform: translateY(-110%); }
165
+ .navbar-container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
166
+ .nav-logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--color-text-primary); letter-spacing: 1px; }
167
+ .nav-logo span { color: var(--color-accent-neon-green); text-shadow: 0 0 10px var(--color-glow); }
168
+ .nav-menu { list-style: none; display: flex; align-items: center; }
169
+ .nav-menu li { margin-left: 2.25rem; }
170
+ .nav-link { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.5px; padding: 0.5rem 0; position: relative; color: var(--color-text-secondary); }
171
+ .nav-link::before {
172
+ content: ""; position: absolute; left: 50%; bottom: -5px; width: 0; height: 2px;
173
+ transform: translateX(-50%);
174
+ background: linear-gradient(90deg, var(--color-accent-neon-green), var(--color-accent-electric-blue));
175
+ box-shadow: 0 0 8px var(--color-accent-neon-green);
176
+ transition: width var(--transition-smooth); border-radius: 1px;
177
+ }
178
+ .nav-link:hover, .nav-link.active { color: var(--color-accent-neon-green); text-shadow: 0 0 5px var(--color-glow); }
179
+ .nav-link:hover::before, .nav-link.active::before { width: 110%; }
180
+
181
+ .nav-controls { display: flex; align-items: center; }
182
+ .theme-toggle-btn {
183
+ background: transparent; border: 1px solid var(--color-glass-border); border-radius: 50%;
184
+ color: var(--color-text-secondary); cursor: pointer;
185
+ font-size: 1.2rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
186
+ transition: color var(--transition-swift), border-color var(--transition-swift), box-shadow var(--transition-swift), transform var(--transition-swift);
187
+ }
188
+ .theme-toggle-btn:hover { color: var(--color-accent-neon-green); border-color: var(--color-accent-neon-green); box-shadow: 0 0 10px var(--color-glow); transform: scale(1.1); }
189
+ .hamburger { display: none; margin-left: 1rem; }
190
+
191
+ .hero-section {
192
+ min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
193
+ padding-top: 70px; position: relative;
194
+ }
195
+ .hero-content { max-width: 750px; position: relative; z-index: 1; }
196
+ .hero-greeting { font-family: var(--font-mono); font-size: 1.1rem; color: var(--color-accent-neon-green); margin-bottom: 1rem; letter-spacing: 1px; display: inline-block; padding: 0.25rem 0.5rem; border: 1px solid var(--color-accent-neon-green); border-radius: var(--border-radius-sm); text-shadow: 0 0 8px var(--color-glow);}
197
+ .hero-name { color: var(--color-text-primary); }
198
+ .hero-tagline { font-family: var(--font-primary); font-size: clamp(2rem, 5.5vw, 3.5rem); color: var(--color-text-secondary); margin-bottom: 2.5rem; font-weight: 400; line-height: 1.2; }
199
+ .hero-description { max-width: 600px; margin-bottom: 3rem; font-size: 1.1rem; color: var(--color-text-secondary); }
200
+ .cta-button {
201
+ font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.5px;
202
+ color: var(--color-accent-neon-green);
203
+ background: transparent;
204
+ border: 1.5px solid var(--color-accent-neon-green);
205
+ padding: 1rem 2.25rem; border-radius: var(--border-radius-md);
206
+ transition: background-color var(--transition-smooth), color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-swift);
207
+ position: relative; overflow: hidden; z-index: 1; text-shadow: 0 0 5px var(--color-glow);
208
+ }
209
+ .cta-button:hover {
210
+ background-color: var(--color-accent-neon-green);
211
+ color: var(--color-bg-deep);
212
+ box-shadow: var(--shadow-hard-glow);
213
+ transform: translateY(-4px) scale(1.02);
214
+ text-shadow: none;
215
+ }
216
+
217
+ .section-wrapper {
218
+ padding: 4rem 0;
219
+ opacity: 0; transform: translateY(50px);
220
+ transition: opacity 0.8s var(--transition-elastic), transform 0.8s var(--transition-elastic);
221
+ }
222
+ .section-wrapper.visible { opacity: 1; transform: translateY(0); }
223
+
224
+ .glass-card {
225
+ background: var(--color-glass-bg);
226
+ border: 1px solid var(--color-glass-border);
227
+ border-radius: var(--border-radius-lg);
228
+ padding: 2.5rem 3rem;
229
+ backdrop-filter: blur(15px);
230
+ box-shadow: 0 0 40px var(--color-glass-highlight), inset 0 0 20px color-mix(in srgb, var(--color-glass-border) 30%, transparent);
231
+ position: relative;
232
+ overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
233
  }
234
+ .glass-card::before { /* Subtle animated border highlight */
235
+ content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
236
+ background: conic-gradient(transparent, color-mix(in srgb, var(--color-accent-neon-green) 20%, transparent), transparent 30%);
237
+ animation: rotateBorderHighlight 8s linear infinite;
238
+ z-index: -1;
239
  }
240
+ @keyframes rotateBorderHighlight { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
241
 
242
+ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2.5rem; }
243
+ .project-item {
244
+ background: var(--color-bg-surface);
245
+ border-radius: var(--border-radius-md);
246
  padding: 2rem;
247
+ border: 1px solid var(--color-glass-border);
248
+ transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
249
+ position: relative; overflow: hidden;
250
+ box-shadow: var(--shadow-soft);
251
+ }
252
+ .project-item:hover {
253
+ transform: translateY(-8px) scale(1.03);
254
+ box-shadow: var(--shadow-medium), 0 0 20px var(--color-glass-highlight);
255
+ border-color: var(--color-accent-neon-green);
256
+ }
257
+ .project-item .icon-placeholder { /* Placeholder for project icons */
258
+ width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-glass-border);
259
+ display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
260
+ font-family: var(--font-display); font-size: 1.2rem; color: var(--color-accent-neon-green);
261
+ }
262
+ .project-title { font-family: var(--font-primary); font-size: 1.3rem; color: var(--color-text-primary); margin-bottom: 0.5rem; font-weight: 700;}
263
+ .project-meta { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.5px;}
264
+ .project-description { font-size: 0.95rem; margin-bottom: 1.25rem; color: var(--color-text-secondary); }
265
+ .project-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
266
+ .project-tags code { font-size: 0.85rem; padding: 0.3em 0.7em; }
267
+
268
+ .skills-list ul { display: flex; flex-wrap: wrap; gap: 1rem; }
269
+ .skills-list li {
270
+ background-color: var(--color-bg-surface);
271
+ color: var(--color-text-secondary);
272
+ padding: 0.6rem 1.2rem;
273
+ border-radius: var(--border-radius-md);
274
+ border: 1px solid var(--color-glass-border);
275
+ font-family: var(--font-mono); font-size: 0.95rem;
276
+ transition: background-color var(--transition-swift), color var(--transition-swift), transform var(--transition-swift), box-shadow var(--transition-swift);
277
+ margin: 0; padding-left: 1.2rem; cursor: default;
278
+ }
279
+ .skills-list li::before { top: 0.25em; }
280
+ .skills-list li:hover {
281
+ background-color: var(--color-accent-neon-green);
282
+ color: var(--color-bg-deep);
283
+ transform: translateY(-3px) scale(1.03);
284
+ box-shadow: 0 0 15px var(--color-glow);
285
+ text-shadow: none;
286
+ }
287
+
288
+ .contact-links { list-style: none; padding: 0; margin-top: 1.5rem;}
289
+ .contact-links li { padding-left: 0; margin-bottom: 1.25rem; display: flex; align-items: center; }
290
+ .contact-links li::before { display: none; }
291
+ .contact-links .contact-label { display: inline-block; min-width: 100px; color: var(--color-text-primary); font-family: var(--font-mono); font-size: 0.9rem; }
292
+ .contact-links a { font-size: 1rem; }
293
+
294
+ .site-footer {
295
+ text-align: center; padding: 4rem 0 2.5rem;
296
+ font-family: var(--font-mono); font-size: 0.9rem;
297
+ color: var(--color-text-muted);
298
+ border-top: 1px solid var(--color-glass-border);
299
+ margin-top: 5rem; position: relative;
300
+ }
301
+ .site-footer p { margin-bottom: 0.5rem; }
302
+ .site-footer a { color: var(--color-text-muted); }
303
+ .site-footer a:hover { color: var(--color-accent-neon-green); }
304
+
305
+ #scrollToTopBtn {
306
+ position: fixed; bottom: 2.5rem; right: 2.5rem;
307
+ background-color: var(--color-accent-neon-green);
308
+ color: var(--color-bg-deep);
309
+ border: none; border-radius: 50%;
310
+ width: 50px; height: 50px;
311
+ font-size: 1.5rem; font-weight: bold;
312
+ cursor: pointer; display: none; align-items: center; justify-content: center;
313
+ box-shadow: var(--shadow-hard-glow);
314
+ transition: background-color var(--transition-swift), transform var(--transition-swift), opacity var(--transition-swift), box-shadow var(--transition-swift);
315
+ opacity: 0.8; z-index: 999;
316
+ }
317
+ #scrollToTopBtn:hover {
318
+ background-color: var(--color-accent-white);
319
+ color: var(--color-accent-neon-green);
320
+ transform: scale(1.15) translateY(-4px) rotate(360deg); opacity: 1;
321
+ box-shadow: 0 0 25px var(--color-accent-neon-green);
322
+ }
323
+
324
+ @media (max-width: 992px) {
325
+ .project-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
326
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
327
  @media (max-width: 768px) {
328
+ .container { padding: 0 1rem; }
329
+ .navbar-container { padding: 0 1rem; }
330
+ .nav-menu {
331
+ display: none; position: fixed; top: 0; bottom: 0; right: 0;
332
+ width: min(85vw, 320px);
333
+ background: color-mix(in srgb, var(--color-bg-main) 90%, transparent);
334
+ backdrop-filter: blur(20px);
335
+ flex-direction: column; justify-content: center; align-items: center;
336
  padding: 2rem;
337
+ box-shadow: -8px 0 30px color-mix(in srgb, var(--color-accent-neon-green) 15%, transparent);
338
+ transform: translateX(110%);
339
+ transition: transform var(--transition-elastic);
340
+ z-index: 998;
341
  }
342
+ .nav-menu.active { transform: translateX(0); }
343
+ .nav-menu li { margin: 1.25rem 0; width: 100%; text-align: center; }
344
+ .nav-link { font-size: 1.1rem; display: block; width: 100%; }
345
+ .hamburger {
346
+ display: flex; align-items: center; justify-content: center;
347
+ width: 40px; height: 40px;
348
+ border: 1px solid var(--color-glass-border); border-radius: 50%;
349
+ color: var(--color-text-secondary); z-index: 1001;
350
+ padding: 0;
351
+ transition: color var(--transition-swift), border-color var(--transition-swift), box-shadow var(--transition-swift);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
352
  }
353
+ .hamburger:hover { color: var(--color-accent-neon-green); border-color: var(--color-accent-neon-green); }
354
+ .hamburger.active { color: var(--color-accent-neon-green); border-color: var(--color-accent-neon-green); box-shadow: 0 0 10px var(--color-glow); }
355
+ .hero-section { text-align: center; padding-top: 100px; padding-bottom: 4rem;}
356
+ .hero-content, .hero-description { margin-left: auto; margin-right: auto; }
357
+ .glass-card { padding: 2rem 1.5rem; }
358
+ h2 { margin-top: 4rem; margin-bottom: 2rem; }
359
+ .cta-button { padding: 0.9rem 1.75rem; font-size: 1rem; }
360
+ }
361
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
362
  </style>
363
  </head>
364
  <body>
365
+ <div class="noise-overlay"></div>
366
+ <div class="animated-bg-lines"><div></div><div></div><div></div><div></div><div></div></div>
367
+
368
+ <nav class="navbar" id="main-navbar">
369
+ <div class="container navbar-container">
370
+ <a href="#hero" class="nav-logo">J<span>R</span></a>
371
+ <div class="nav-controls">
372
+ <ul class="nav-menu" id="main-nav-menu">
373
+ <li><a href="#profile" class="nav-link">Профиль</a></li>
374
+ <li><a href="#experience" class="nav-link">Опыт</a></li>
375
+ <li><a href="#skills" class="nav-link">Компетенции</a></li>
376
+ <li><a href="#contact" class="nav-link">Связь</a></li>
377
+ </ul>
378
+ <button id="theme-toggle" class="theme-toggle-btn" aria-label="Переключить тему">
379
+ <svg class="theme-icon-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 18a6 6 0 100-12 6 6 0 000 12zM12 20a8 8 0 100-16 8 8 0 000 16z"/><path d="M12 3.25A.75.75 0 0112.75 4v.001A.75.75 0 0112 4.752v-.001A.75.75 0 0111.25 4V3.25a.75.75 0 01.75-.75zM5.08 6.144a.75.75 0 011.06-.004l.004.004a.75.75 0 01-.004 1.06l-.004-.003a.75.75 0 01-1.06.004zm12.785-.004a.75.75 0 011.06 1.062l-.003.003a.75.75 0 01-1.06-1.061l.003-.004zM12 19.25a.75.75 0 01.75.75v.001a.75.75 0 01-1.5 0v-.001a.75.75 0 01.75-.75zM5.08 17.856a.75.75 0 01.004-1.06l.003-.004a.75.75 0 011.061 1.06l-.004.004a.75.75 0 01-1.06-.003zM17.857 17.852a.75.75 0 01.003.004l.004.003a.75.75 0 01-1.06 1.06l-.004-.003a.75.75 0 011.058-1.061l-.001.001zM4 11.25a.75.75 0 01.75.75v.001a.75.75 0 01-1.5 0V12a.75.75 0 01.75-.75zm15.25.75a.75.75 0 010 1.5H20v-.001a.75.75 0 010-1.5h-.75z"/></svg>
380
+ <svg class="theme-icon-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor" style="display:none;"><path d="M11.48 2.503a.75.75 0 01.434.435l.024.054a9.013 9.013 0 0010.09 10.09l.053.024a.75.75 0 01-.658 1.322A9.753 9.753 0 0112 21.75 9.75 9.75 0 012.25 12c0-4.063 2.479-7.51 5.903-8.938a.75.75 0 011.328.657z"/></svg>
381
+ </button>
382
+ <button class="hamburger" id="hamburger-menu" aria-label="Открыть меню" aria-expanded="false">
383
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="currentColor" class="open-icon"><path d="M21 18H3v-2h18v2zm0-5H3v-2h18v2zm0-5H3V6h18v2z"></path></svg>
384
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" fill="currentColor" class="close-icon" style="display:none;"><path d="M18.3 5.71a.996.996 0 00-1.41 0L12 10.59 7.11 5.7A.996.996 0 105.7 7.11L10.59 12 5.7 16.89a.996.996 0 101.41 1.41L12 13.41l4.89 4.89a.996.996 0 101.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"></path></svg>
385
+ </button>
386
+ </div>
387
+ </div>
388
+ </nav>
389
+
390
  <div class="container">
391
+ <section id="hero" class="hero-section section-wrapper">
392
+ <div class="hero-content">
393
+ <p class="hero-greeting">ONLINE-SYSTEM /// JOHNNY RASPBERRY</p>
394
+ <h1 class="hero-name">Архитектор Цифровых Систем.</h1>
395
+ <h1 class="hero-tagline">Инноватор. Проблем Солвер. Кодер.</h1>
396
+ <p class="hero-description">Моя специализация – это воплощение амбициозных идей в высокотехнологичный код. Я создаю нестандартные решения для FoundryVTT, интегрирую передовые AI и решаю задачи, от которых другие предпочитают отказаться. Превращаю сложность в элегантность, а вы��овы – в прорывные продукты.</p>
397
+ <a href="#contact" class="cta-button">ЗАПРОСИТЬ КОНСУЛЬТАЦИЮ</a>
398
  </div>
399
+ </section>
400
+
401
+ <section id="profile" class="section-wrapper">
402
+ <div class="glass-card">
403
+ <h2><span class="section-prefix">// DATA STREAM</span>Профессиональный Профиль</h2>
404
+ <p>Я – Full-Stack разработчик высшей квалификации с обширным и подтвержденным опытом в создании, адаптации и полной кастомизации сложных программных экосистем. Моя ключевая экспертиза лежит в глубокой работе с платформой FoundryVTT и виртуозной интеграции передовых технологий искусственного интеллекта. Обладаю не только глубокими техническими знаниями, но и стратегическим видением, позволяющим доводить проекты от первоначальной концепции до безупречной реализации, с неизменным фокусом на высочайшее качество кода, продуманную архитектуру и скрупулезную проработку каждого аспекта функционала.</p>
405
+ <p>Мой подход к работе характеризуется проактивностью, неустанным поиском наиболее эффективных и элегантных решений, а также готовностью смело браться за нетривиальные, комплексные задачи, требующие инновационного мышления и глубокого погружения в специфику предметной области. Демонстрирую пиковую производительность и непоколебимую целеустремленность, особенно в проектах, представляющих собой значительный технологический вызов или обладающих высоким инновационным потенциалом.</p>
406
  </div>
407
+ </section>
408
+
409
+ <section id="experience" class="section-wrapper">
410
+ <div class="glass-card">
411
+ <h2><span class="section-prefix">// CORE MODULES</span>Опыт и Ключевые Проекты</h2>
412
+ <div class="project-grid">
413
+ <article class="project-item">
414
+ <div class="icon-placeholder">FVT</div>
415
+ <h3 class="project-title">FoundryVTT Экосистема</h3>
416
+ <p class="project-meta">2+ Года Интенсивной Разработки / JavaScript / TypeScript</p>
417
+ <p class="project-description">Полный цикл разработки и кастомизации для FoundryVTT: создание универсальной экономической модели, системы глубокой Discord-интеграции, разработка уникальных UI-компонентов (динамические календари, системы достижений, генераторы процедурного контента), а также реинжиниринг и оптимизация существующих игровых систем (<code>dnd5e</code>, <code>pf2e</code>, <code>cyberpunk-red-core</code>) и популярных модулей.</p>
418
+ <div class="project-tags">
419
+ <code>FoundryVTT API</code><code>Node.js (серверные части)</code>
420
+ </div>
421
+ </article>
422
+ <article class="project-item">
423
+ <div class="icon-placeholder">AIR</div>
424
+ <h3 class="project-title">AI RPG Telegram Bot (@ChatGPT_RPG)</h3>
425
+ <p class="project-meta">2.5 Года Разработки / Python / AI-Интеграции</p>
426
+ <p class="project-description">Разработка и развитие комплексной RPG-системы в Telegram, построенной на синергии ChatGPT и широкого спектра AI-моделей от HuggingFace. Проектирование уникального пользовательского интерфейса для создания и кастомизации персонажей с использованием анимации, звуковых эффектов и продвинутой Markdown-разметки. Успешный опыт управления командой разработчиков и маркетологов.</p>
427
+ <div class="project-tags">
428
+ <code>Python (Asyncio)</code><code>Telegram Bot API</code><code>OpenAI GPT-4</code>
429
+ </div>
430
+ </article>
431
+ <article class="project-item">
432
+ <div class="icon-placeholder">MAI</div>
433
+ <h3 class="project-title">Медицинский AI Анализатор (Прототип)</h3>
434
+ <p class="project-meta">Исследовательский Проект / Python / Computer Vision</p>
435
+ <p class="project-description">Создание прототипа интеллектуальной системы для анализа медицинских изображений, специализирующейся на офтальмологических патологиях и ранней диагностике опухолей. Использование библиотек OpenCV, PyTorch и передовых моделей с HuggingFace для обработки изображений и автоматизированного формирования предварительных диагностических заключений.</p>
436
+ <div class="project-tags">
437
+ <code>PyTorch/TensorFlow</code><code>OpenCV</code>
438
+ </div>
439
+ </article>
440
  </div>
441
  </div>
442
+ </section>
443
+
444
+ <section id="skills" class="section-wrapper">
445
+ <div class="glass-card">
446
+ <h2><span class="section-prefix">// TECH MATRIX</span>Технические Компетенции</h2>
447
+ <h3 style="margin-bottom:1.5rem;">Ключевые Языки и Технологии:</h3>
448
+ <div class="skills-list">
449
+ <ul>
450
+ <li>Python (Expert)</li><li>JavaScript</li><li>TypeScript</li><li>HTML5</li><li>CSS3</li>
451
+ <li>Node.js</li><li>FoundryVTT API</li><li>OpenAI API (GPT-3.5/4)</li><li>HuggingFace Transformers</li>
452
+ <li>Telegram Bot API</li><li>Discord API</li><li>Git</li><li>Docker</li>
453
+ <li>MongoDB</li><li>PyTorch/TensorFlow (для AI)</li>
454
+ </ul>
455
  </div>
456
+ <h3 style="margin-top: 2.5rem; margin-bottom:1.5rem;">Области Экспертизы:</h3>
457
+ <div class="skills-list">
458
+ <ul>
459
+ <li>Full-Stack Architecture</li><li>Distributed Systems Design</li><li>Microservices (Концепции)</li>
460
+ <li>Advanced AI Integration</li><li>Natural Language Processing (NLP)</li><li>Computer Vision (CV)</li>
461
+ <li>Game Mechanics Design & Implementation</li><li>Real-time Systems</li><li>Data Engineering (Основы)</li>
462
+ <li>Technical Leadership</li>
463
+ </ul>
464
  </div>
465
  </div>
466
+ </section>
467
+
468
+ <section id="philosophy" class="section-wrapper">
469
+ <div class="glass-card">
470
+ <h2><span class="section-prefix">// OPERATING SYSTEM</span>Образование и Философия</h2>
471
+ <h3>Высшее юридическое образование</h3>
472
+ <p>Специализация: Глубинный анализ прецедентного права, разработка многоуровневых правовых стратегий и разрешение комплексных юридических коллизий. Юридическая практика отшлифовала системное и критическое мышление, сверхвысокое внимание к деталям и умение находить элегантные, нешаблонные решения в условиях информационной неопределенности и жестких ограничений – компетенции, которые я успешно трансформировал и активно применяю в сфере информационных технологий и программной инженерии.</p>
473
+ <h3 style="margin-top: 2.5rem;">Моя Философия Разработки:</h3>
474
+ <p>Я функционирую на пике когнитивной производительности, когда передо мной стоит задача, бросающая вызов моему интеллекту, или идея, способная "перезагрузить" существующие парадигмы. Готов к полной самоотдаче, глубокому погружению в новые технологические стеки и созданию прорывных решений, которые другие могут счесть нереализуемыми. Мои фундаментальные принципы: итеративная эволюция продукта (от MVP к совершенству), проактивный инжиниринг и абсолютная сфокусированность на достижении измеримого, превосходящего ожидания результата.</p>
 
 
 
 
475
  </div>
476
+ </section>
477
+
478
+ <section id="contact" class="section-wrapper">
479
+ <div class="glass-card" style="text-align: center;">
480
+ <h2><span class="section-prefix">// COMMLINK</span>Связь и Потенциал Сотрудничества</h2>
481
+ <p style="max-width: 700px; margin-left: auto; margin-right:auto;">Я максимально эффективен, когда задача требует серьезного умственного напряжения или когда появляется идея, меняющая парадигму. Полностью отдаюсь изучению новых технологий и создаю прорывные решения, даже для 'нереализуемых' проблем. В основе моей работы: постоянное развитие продукта – начинаю с простого рабочего минимума (MVP), а потом улучшаю до совершенства – проактивность в разработке и абсолютная нацеленность на выдающийся, измеримый результат.</p>
482
+ <ul class="contact-links" style="text-align:left; max-width:450px; margin: 2.5rem auto 0 auto;">
483
+ <li><span class="contact-label">TELEGRAM:</span> <a href="https://t.me/Enter_yes" target="_blank" rel="noopener noreferrer">@Enter_yes (Primary)</a></li>
484
+ <li><span class="contact-label">EMAIL:</span> <a href="mailto:[email protected]">[email protected]</a></li>
485
+ <li><span class="contact-label">AI RPG DEV:</span> <a href="https://t.me/ChatGPT_RPG" target="_blank" rel="noopener noreferrer">@ChatGPT_RPG Channel</a></li>
486
+ <li><span class="contact-label">PROJECTS:</span> <a href="https://boosty.to/alofa" target="_blank" rel="noopener noreferrer">boosty.to/alofa Portfolio</a></li>
487
+ </ul>
488
+ <a href="mailto:[email protected]?subject=Запрос на сотрудничество от Johnny Raspberry" class="cta-button" style="margin-top:3rem;">ОТПРАВИТЬ ЗАПРОС</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
489
  </div>
490
+ </section>
491
+ </div>
492
+
493
+ <footer class="site-footer">
494
+ <p>JOHNNY RASPBERRY /// SYSTEM ONLINE /// <span id="currentYear"></span></p>
495
+ <p>Проектирование и Реализация: JR /// <a href="https://github.com/McMrool" target="_blank" rel="noopener noreferrer" aria-label="GitHub">GitHub</a></p>
496
+ </footer>
497
+
498
+ <button id="scrollToTopBtn" title="Наверх" aria-label="Прокрутить наверх">▲</button>
499
+
500
+ <script>
501
+ document.addEventListener('DOMContentLoaded', () => {
502
+ const mainNavbar = document.getElementById('main-navbar');
503
+ const hamburgerMenuBtn = document.getElementById('hamburger-menu');
504
+ const mainNavMenu = document.getElementById('main-nav-menu');
505
+ const navLinks = mainNavMenu.querySelectorAll('.nav-link');
506
+ const themeToggleBtn = document.getElementById('theme-toggle');
507
+ const scrollToTopBtn = document.getElementById('scrollToTopBtn');
508
+ const animatedSections = document.querySelectorAll('.section-wrapper, .hero-content > *');
509
+ const projectItems = document.querySelectorAll('.project-item');
510
+ const themeIconSun = themeToggleBtn.querySelector('.theme-icon-sun');
511
+ const themeIconMoon = themeToggleBtn.querySelector('.theme-icon-moon');
512
+
513
+ let lastScrollTop = 0;
514
+ const scrollHandler = () => {
515
+ let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
516
+ if (scrollTop > 50) mainNavbar.classList.add('scrolled');
517
+ else mainNavbar.classList.remove('scrolled');
518
+
519
+ if (scrollTop > lastScrollTop && scrollTop > mainNavbar.offsetHeight && !mainNavMenu.classList.contains('active')) {
520
+ mainNavbar.classList.add('nav-hidden');
521
+ } else {
522
+ mainNavbar.classList.remove('nav-hidden');
523
+ }
524
+ lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
525
+
526
+ if (window.pageYOffset > 300) scrollToTopBtn.style.display = 'flex';
527
+ else scrollToTopBtn.style.display = 'none';
528
+ };
529
+ window.addEventListener('scroll', scrollHandler, { passive: true });
530
+
531
+ const updateThemeIcons = (theme) => {
532
+ if (theme === 'dark') {
533
+ themeIconSun.style.display = 'block';
534
+ themeIconMoon.style.display = 'none';
535
+ } else {
536
+ themeIconSun.style.display = 'none';
537
+ themeIconMoon.style.display = 'block';
538
+ }
539
+ };
540
+
541
+ const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
542
+ let currentTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light');
543
+ document.documentElement.setAttribute('data-theme', currentTheme);
544
+ updateThemeIcons(currentTheme);
545
 
546
+ themeToggleBtn.addEventListener('click', () => {
547
+ currentTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
548
+ document.documentElement.setAttribute('data-theme', currentTheme);
549
+ localStorage.setItem('theme', currentTheme);
550
+ updateThemeIcons(currentTheme);
551
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
552
 
553
+ prefersDarkScheme.addEventListener('change', (e) => {
554
+ if (localStorage.getItem('theme') === null) {
555
+ currentTheme = e.matches ? 'dark' : 'light';
556
+ document.documentElement.setAttribute('data-theme', currentTheme);
557
+ updateThemeIcons(currentTheme);
558
+ }
559
+ });
 
 
 
560
 
561
+ hamburgerMenuBtn.addEventListener('click', () => {
562
+ const isActive = mainNavMenu.classList.toggle('active');
563
+ hamburgerMenuBtn.classList.toggle('active');
564
+ hamburgerMenuBtn.setAttribute('aria-expanded', isActive.toString());
565
+ hamburgerMenuBtn.querySelector('.open-icon').style.display = isActive ? 'none' : 'block';
566
+ hamburgerMenuBtn.querySelector('.close-icon').style.display = isActive ? 'block' : 'none';
567
+ document.body.style.overflow = isActive ? 'hidden' : '';
568
+ mainNavbar.style.transform = isActive ? 'translateY(0)' : '';
569
+ if (isActive) mainNavbar.classList.add('scrolled');
570
+ });
571
+
572
+ navLinks.forEach(link => {
573
+ link.addEventListener('click', () => {
574
+ if (mainNavMenu.classList.contains('active')) {
575
+ mainNavMenu.classList.remove('active');
576
+ hamburgerMenuBtn.classList.remove('active');
577
+ hamburgerMenuBtn.setAttribute('aria-expanded', 'false');
578
+ hamburgerMenuBtn.querySelector('.open-icon').style.display = 'block';
579
+ hamburgerMenuBtn.querySelector('.close-icon').style.display = 'none';
580
+ document.body.style.overflow = '';
581
+ scrollHandler();
582
+ }
583
+ });
584
+ });
585
+
586
+ const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };
587
+ let delayCounter = 0;
588
+ const elementObserver = new IntersectionObserver((entries, observer) => {
589
+ entries.forEach((entry) => {
590
+ if (entry.isIntersecting) {
591
+ entry.target.style.transitionDelay = `${delayCounter * 100}ms`;
592
+ entry.target.classList.add('visible');
593
+ delayCounter++;
594
+ observer.unobserve(entry.target);
595
+ }
596
+ });
597
+ if (entries.some(entry => !entry.isIntersecting)) delayCounter = 0;
598
+ }, observerOptions);
599
+ animatedSections.forEach(el => elementObserver.observe(el));
600
+
601
+ function updateActiveNavLinkOnScroll() {
602
+ let currentSectionId = '';
603
+ const sections = document.querySelectorAll('section[id]');
604
+ const scrollY = window.pageYOffset;
605
+ const navHeight = mainNavbar.offsetHeight;
606
+
607
+ sections.forEach(section => {
608
+ const sectionTop = section.offsetTop - navHeight - window.innerHeight * 0.3;
609
+ if (scrollY >= sectionTop) currentSectionId = section.getAttribute('id');
610
+ });
611
 
612
+ const heroSection = document.getElementById('hero');
613
+ if (heroSection && scrollY < (heroSection.offsetTop + heroSection.offsetHeight * 0.5 - navHeight) ) {
614
+ currentSectionId = "hero";
615
+ }
616
+
617
+ navLinks.forEach(link => {
618
+ link.classList.remove('active');
619
+ const hrefTarget = link.getAttribute('href').substring(1);
620
+ if (hrefTarget === currentSectionId) link.classList.add('active');
621
+ });
622
+ }
623
+ window.addEventListener('scroll', updateActiveNavLinkOnScroll, { passive: true });
624
+
625
+ scrollToTopBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
626
+ document.getElementById('currentYear').textContent = new Date().getFullYear();
627
+ updateActiveNavLinkOnScroll();
628
+
629
+ projectItems.forEach(item => {
630
+ item.addEventListener('mousemove', (e) => {
631
+ const rect = item.getBoundingClientRect();
632
+ item.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
633
+ item.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
634
+ });
635
+ });
636
+
637
+ setTimeout(() => {
638
+ document.querySelectorAll('.hero-content > *').forEach((el, index) => {
639
+ el.style.transition = `opacity 0.5s ease-out ${index * 0.15 + 0.2}s, transform 0.5s ease-out ${index * 0.15 + 0.2}s`;
640
+ el.style.opacity = '1';
641
+ el.style.transform = 'translateY(0)';
642
+ });
643
+ }, 100);
644
+ document.querySelectorAll('.hero-content > *').forEach((el) => {
645
+ el.style.opacity = '0';
646
+ el.style.transform = 'translateY(20px)';
647
+ });
648
+
649
+ });
650
+ </script>
651
  </body>
652
  </html>