VSPAN/Developer
0
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 <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:altarofadventures@gmail.com">altarofadventures@gmail.com</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:altarofadventures@gmail.com?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>