|
|
<!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> |
