|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Johnny Raspberry - Full-Stack Developer</title> |
|
|
<style> |
|
|
@font-face { |
|
|
font-family: 'AppleColorEmoji'; |
|
|
src: url('AppleColorEmoji.ttf') format('truetype'); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
background: linear-gradient(135deg, #f0f9f4 0%, #ecfdf5 50%, #f0fdf4 100%); |
|
|
min-height: 100vh; |
|
|
color: #1f2937; |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: rgba(255, 255, 255, 0.85); |
|
|
backdrop-filter: blur(20px); |
|
|
border-radius: 24px; |
|
|
box-shadow: 0 20px 60px rgba(16, 185, 129, 0.1); |
|
|
border: 1px solid rgba(16, 185, 129, 0.1); |
|
|
padding: 3rem; |
|
|
margin-bottom: 2rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 30px 80px rgba(16, 185, 129, 0.15); |
|
|
} |
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 3rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.name { |
|
|
font-size: 3.5rem; |
|
|
font-weight: 700; |
|
|
background: linear-gradient(135deg, #059669, #10b981, #34d399); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
margin-bottom: 0.5rem; |
|
|
text-shadow: 0 4px 8px rgba(16, 185, 129, 0.1); |
|
|
} |
|
|
|
|
|
.telegram { |
|
|
display: inline-block; |
|
|
background: linear-gradient(135deg, #10b981, #34d399); |
|
|
color: white; |
|
|
padding: 0.8rem 2rem; |
|
|
border-radius: 50px; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25); |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.telegram:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.35); |
|
|
} |
|
|
|
|
|
.position { |
|
|
background: linear-gradient(135deg, #d1fae5, #a7f3d0); |
|
|
padding: 2rem; |
|
|
border-radius: 20px; |
|
|
margin-bottom: 2rem; |
|
|
border-left: 4px solid #10b981; |
|
|
} |
|
|
|
|
|
.position h2 { |
|
|
color: #047857; |
|
|
font-size: 1.8rem; |
|
|
margin-bottom: 0.5rem; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.position p { |
|
|
color: #065f46; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
color: #047857; |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 1.5rem; |
|
|
padding-bottom: 0.5rem; |
|
|
border-bottom: 2px solid #a7f3d0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.emoji { |
|
|
font-family: 'AppleColorEmoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; |
|
|
font-size: 1.8rem; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.project { |
|
|
background: linear-gradient(135deg, #f0fdf4, #dcfce7); |
|
|
padding: 2rem; |
|
|
border-radius: 16px; |
|
|
margin-bottom: 1.5rem; |
|
|
border-left: 4px solid #22c55e; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.project:hover { |
|
|
transform: translateX(5px); |
|
|
background: linear-gradient(135deg, #ecfdf5, #d1fae5); |
|
|
} |
|
|
|
|
|
.project-title { |
|
|
color: #15803d; |
|
|
font-size: 1.3rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 1rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.project-description { |
|
|
color: #166534; |
|
|
font-size: 1rem; |
|
|
line-height: 1.7; |
|
|
} |
|
|
|
|
|
.project-link { |
|
|
color: #059669; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
border-bottom: 2px solid transparent; |
|
|
transition: border-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.project-link:hover { |
|
|
border-bottom-color: #059669; |
|
|
} |
|
|
|
|
|
.tech-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.tech-category { |
|
|
background: linear-gradient(135deg, #f0fdf4, #dcfce7); |
|
|
padding: 1.5rem; |
|
|
border-radius: 16px; |
|
|
border-left: 4px solid #16a34a; |
|
|
} |
|
|
|
|
|
.tech-category h4 { |
|
|
color: #15803d; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.tech-list { |
|
|
color: #166534; |
|
|
font-size: 0.95rem; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.approach-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 1rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.approach-item { |
|
|
background: linear-gradient(135deg, #ecfdf5, #d1fae5); |
|
|
padding: 1.5rem; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
gap: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.approach-item:hover { |
|
|
transform: scale(1.02); |
|
|
background: linear-gradient(135deg, #d1fae5, #a7f3d0); |
|
|
} |
|
|
|
|
|
.approach-item .emoji { |
|
|
font-size: 1.5rem; |
|
|
margin-top: 0.2rem; |
|
|
} |
|
|
|
|
|
.approach-text { |
|
|
color: #166534; |
|
|
font-size: 0.95rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.education, .philosophy { |
|
|
background: linear-gradient(135deg, #f0fdf4, #dcfce7); |
|
|
padding: 2rem; |
|
|
border-radius: 16px; |
|
|
margin-bottom: 1.5rem; |
|
|
border-left: 4px solid #22c55e; |
|
|
} |
|
|
|
|
|
.philosophy-quote { |
|
|
font-style: italic; |
|
|
font-size: 1.2rem; |
|
|
color: #047857; |
|
|
font-weight: 600; |
|
|
margin-bottom: 1rem; |
|
|
padding: 1rem; |
|
|
background: rgba(16, 185, 129, 0.1); |
|
|
border-radius: 12px; |
|
|
border-left: 3px solid #10b981; |
|
|
} |
|
|
|
|
|
.philosophy-text { |
|
|
color: #166534; |
|
|
line-height: 1.7; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.container { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
.card { |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.name { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.tech-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.approach-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
.floating-elements { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.floating-element { |
|
|
position: absolute; |
|
|
opacity: 0.1; |
|
|
animation: float 20s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
from { |
|
|
transform: translateY(100vh) rotate(0deg); |
|
|
} |
|
|
to { |
|
|
transform: translateY(-100px) rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.floating-element:nth-child(1) { |
|
|
left: 10%; |
|
|
animation-delay: -5s; |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.floating-element:nth-child(2) { |
|
|
left: 20%; |
|
|
animation-delay: -10s; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.floating-element:nth-child(3) { |
|
|
left: 70%; |
|
|
animation-delay: -15s; |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.floating-element:nth-child(4) { |
|
|
left: 80%; |
|
|
animation-delay: -2s; |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="floating-elements"> |
|
|
<div class="floating-element emoji">🎲</div> |
|
|
<div class="floating-element emoji">🤖</div> |
|
|
<div class="floating-element emoji">🏥</div> |
|
|
<div class="floating-element emoji">✨</div> |
|
|
</div> |
|
|
|
|
|
<div class="container"> |
|
|
<div class="card"> |
|
|
<div class="header"> |
|
|
<h1 class="name">Johnny Raspberry</h1> |
|
|
<a href="https://t.me/Enter_yes" class="telegram" target="_blank"> |
|
|
<span class="emoji">📱</span> Telegram: @Enter_yes |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="position"> |
|
|
<h2>Full-Stack Developer / Technical Problem Solver</h2> |
|
|
<p>Мультитул с фокусом на нестандартные решения и глубокую кастомизацию систем</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="section-title"> |
|
|
<span class="emoji">🚀</span> |
|
|
КЛЮЧЕВЫЕ ПРОЕКТЫ |
|
|
</h2> |
|
|
|
|
|
<div class="project"> |
|
|
<div class="project-title"> |
|
|
<span class="emoji">🎲</span> |
|
|
FoundryVTT Ecosystem Development | 2+ года активной разработки |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
<strong>Экономическая система для D&D</strong> (<a href="https://boosty.to/alofa" class="project-link" target="_blank">boosty.to/alofa</a>) - |
|
|
универсальное решение для управления игровой экономикой с возможностью адаптации под любые системы<br><br> |
|
|
|
|
|
<strong>Discord-Foundry интеграция</strong> - приложение для отображения активности в реальном времени |
|
|
(количество игроков, система, автоматическое создание серверов по ссылкам)<br><br> |
|
|
|
|
|
<strong>Визуальные компоненты:</strong> Календарь, Достижение, стилизованные газеты для игроков, |
|
|
доска объявлений с продвинутым CSS |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project"> |
|
|
<div class="project-title"> |
|
|
<span class="emoji">🤖</span> |
|
|
ChatGPT RPG Bot (t.me/ChatGPT_RPG) | 2.5 года разработки |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
Полноценная RPG-система с интеграцией множественных ИИ-моделей<br><br> |
|
|
|
|
|
Система выбора рас/классов с анимацией, звуковыми эффектами и Markdown-поддержкой<br><br> |
|
|
|
|
|
Управление командой разработчиков и рекламодателей<br><br> |
|
|
|
|
|
Масштабируемая архитектура для различных платформ |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project"> |
|
|
<div class="project-title"> |
|
|
<span class="emoji">🏥</span> |
|
|
Medical AI Analysis Tool | Python + HuggingFace |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
Анализ глазных патологий и опухолей через компьютерное зрение<br><br> |
|
|
|
|
|
Определение межзрачкового расстояния и диагностика проблем со зрением<br><br> |
|
|
|
|
|
Автоматизированная предварительная диагностика без участия врача |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="section-title"> |
|
|
<span class="emoji">⚡</span> |
|
|
ТЕХНИЧЕСКИЕ КОМПЕТЕНЦИИ |
|
|
</h2> |
|
|
|
|
|
<div class="tech-grid"> |
|
|
<div class="tech-category"> |
|
|
<h4>Системы и модули FoundryVTT:</h4> |
|
|
<div class="tech-list"> |
|
|
<strong>Глубокая модификация:</strong> wfrp4e, pf2e, knave2e, gurps, ironsworn, dnd5e, cyberpunk-red-core<br><br> |
|
|
|
|
|
<strong>Кастомизация модулей:</strong> ru-ru, ag-dnd2024, ag-tokens, bg3-inspired-hotbar, jb2a_patreon<br><br> |
|
|
|
|
|
Reverse engineering и переписывание сторонних решений под собственные нужды |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tech-category"> |
|
|
<h4>ИИ и Machine Learning:</h4> |
|
|
<div class="tech-list"> |
|
|
Интеграция GPT API и HuggingFace моделей<br><br> |
|
|
|
|
|
Разработка собственных нейросетей для диалоговых систем<br><br> |
|
|
|
|
|
Автоматизация игровых процессов через ИИ |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="tech-category"> |
|
|
<h4>Языки и технологии:</h4> |
|
|
<div class="tech-list"> |
|
|
<strong>Frontend:</strong> HTML, CSS, JavaScript, TypeScript<br><br> |
|
|
|
|
|
<strong>Backend:</strong> Python, Node.js<br><br> |
|
|
|
|
|
<strong>API Integration:</strong> FoundryVTT API, Discord API, Telegram Bot API<br><br> |
|
|
|
|
|
<strong>Platforms:</strong> FoundryVTT, Discord, Telegram, HuggingFace |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="section-title"> |
|
|
<span class="emoji">🎯</span> |
|
|
ПОДХОД К РАБОТЕ |
|
|
</h2> |
|
|
|
|
|
<div class="approach-grid"> |
|
|
<div class="approach-item"> |
|
|
<span class="emoji">✅</span> |
|
|
<div class="approach-text"> |
|
|
<strong>Итеративная разработка</strong> - от идеи до MVP за 2 недели, затем непрерывное улучшение |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="approach-item"> |
|
|
<span class="emoji">✅</span> |
|
|
<div class="approach-text"> |
|
|
<strong>Проактивность</strong> - не жду готовых решений, создаю их сам или модифицирую существующие |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="approach-item"> |
|
|
<span class="emoji">✅</span> |
|
|
<div class="approach-text"> |
|
|
<strong>Командная работа</strong> - опыт найма и управления разработчиками, дизайнерами, маркетологами |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="approach-item"> |
|
|
<span class="emoji">✅</span> |
|
|
<div class="approach-text"> |
|
|
<strong>Исследовательский подход</strong> - изучаю чужой код, чтобы понять принципы и улучшить их |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="section-title"> |
|
|
<span class="emoji">🎓</span> |
|
|
ОБРАЗОВАНИЕ |
|
|
</h2> |
|
|
|
|
|
<div class="education"> |
|
|
<strong>Юриспруденция</strong> - специализация на анализе сложных дел и консультировании коллег |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card"> |
|
|
<h2 class="section-title"> |
|
|
<span class="emoji">💡</span> |
|
|
ФИЛОСОФИЯ |
|
|
</h2> |
|
|
|
|
|
<div class="philosophy"> |
|
|
<div class="philosophy-quote"> |
|
|
"У меня масса идей и возможностей их реализовать. Даже если их нет, я найду способ." |
|
|
</div> |
|
|
|
|
|
<div class="philosophy-text"> |
|
|
Работаю на пике мотивации - когда идея "взрывает мозг", могу кодить с 5 утра до полного выгорания. |
|
|
Результат всегда стоит затраченных усилий.<br><br> |
|
|
|
|
|
Готов к нестандартным задачам, быстрому обучению новым технологиям и созданию решений, |
|
|
которые другие считают невозможными. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
