| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="Johnny Raspberry - Архитектор цифровых систем будущего. Специализация: FoundryVTT, AI-интеграции, нестандартные технологические решения."> |
| <meta name="author" content="Johnny Raspberry"> |
| <title>Johnny Raspberry /// Визионер Технологий</title> |
| <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>"> |
| <style> |
| @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'); |
| |
| :root { |
| --font-display: 'Orbitron', sans-serif; |
| --font-primary: 'Syne', sans-serif; |
| --font-mono: 'Roboto Mono', monospace; |
| |
| --color-bg-deep: #01060e; |
| --color-bg-main: #040f1a; |
| --color-bg-surface: #0a192f; |
| |
| --color-text-primary: #e6f1ff; |
| --color-text-secondary: #a8b2d1; |
| --color-text-muted: #7488a1; |
| |
| --color-accent-neon-green: #33ffcc; |
| --color-accent-electric-blue: #00aaff; |
| --color-accent-white: #ffffff; |
| |
| --color-glass-bg: rgba(10, 25, 47, 0.25); |
| --color-glass-border: rgba(51, 255, 204, 0.2); |
| --color-glass-highlight: rgba(51, 255, 204, 0.1); |
| --color-glow: rgba(51, 255, 204, 0.5); |
| |
| --shadow-soft: 0 4px 15px rgba(0,0,0,0.2); |
| --shadow-medium: 0 8px 30px rgba(0,0,0,0.3); |
| --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); |
| |
| --border-radius-sm: 3px; |
| --border-radius-md: 6px; |
| --border-radius-lg: 12px; |
| |
| --transition-swift: 0.15s ease-out; |
| --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| --transition-elastic: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); |
| } |
| |
| [data-theme="light"] { |
| --color-bg-deep: #e0f0ff; |
| --color-bg-main: #f0f8ff; |
| --color-bg-surface: #ffffff; |
| |
| --color-text-primary: #0a192f; |
| --color-text-secondary: #2c3e50; |
| --color-text-muted: #56687e; |
| |
| --color-accent-neon-green: #008060; |
| --color-accent-electric-blue: #005f99; |
| --color-accent-white: #01060e; |
| |
| --color-glass-bg: rgba(255, 255, 255, 0.5); |
| --color-glass-border: rgba(0, 128, 96, 0.3); |
| --color-glass-highlight: rgba(0, 128, 96, 0.1); |
| --color-glow: rgba(0, 128, 96, 0.4); |
| |
| --shadow-soft: 0 4px 15px rgba(10,25,47,0.05); |
| --shadow-medium: 0 8px 30px rgba(10,25,47,0.1); |
| --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); |
| } |
| |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } |
| html { scroll-behavior: smooth; font-size: 16px; } |
| body { |
| font-family: var(--font-primary); |
| background-color: var(--color-bg-main); |
| color: var(--color-text-primary); |
| line-height: 1.75; |
| -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; |
| overflow-x: hidden; |
| position: relative; |
| min-height: 100vh; |
| transition: background-color var(--transition-smooth), color var(--transition-smooth); |
| } |
| |
| .noise-overlay { |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; |
| pointer-events: none; z-index: -1; opacity: 0.03; |
| 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"); |
| animation: noiseAnim 0.2s infinite alternate; |
| } |
| @keyframes noiseAnim { 0% { transform: translate(0,0); } 100% { transform: translate(-1px, -1px); } } |
| |
| .animated-bg-lines { |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; |
| pointer-events: none; z-index: -2; overflow: hidden; |
| } |
| .animated-bg-lines > div { |
| position: absolute; height: 150%; width: 1px; |
| background: linear-gradient(to bottom, transparent 0%, var(--color-accent-neon-green) 50%, transparent 100%); |
| opacity: 0.05; |
| animation: moveLine 20s linear infinite; |
| } |
| .animated-bg-lines > div:nth-child(1) { left: 10%; animation-delay: -2s; } |
| .animated-bg-lines > div:nth-child(2) { left: 30%; animation-delay: -7s; } |
| .animated-bg-lines > div:nth-child(3) { left: 50%; animation-delay: -12s; } |
| .animated-bg-lines > div:nth-child(4) { left: 70%; animation-delay: -15s; } |
| .animated-bg-lines > div:nth-child(5) { left: 90%; animation-delay: -18s; } |
| @keyframes moveLine { 0% { transform: translateY(-25%); } 100% { transform: translateY(-125%); } } |
| |
| .container { max-width: 1150px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1;} |
| |
| h1, h2, h3, h4 { text-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-neon-green) 20%, transparent); } |
| 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; } |
| h2 { |
| font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); |
| margin-top: 5rem; margin-bottom: 2.5rem; |
| padding-bottom: 1rem; |
| display: flex; align-items: baseline; |
| border-bottom: 1px solid var(--color-glass-border); |
| position: relative; |
| } |
| h2::after { |
| content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 80px; |
| background: linear-gradient(90deg, var(--color-accent-neon-green), var(--color-accent-electric-blue)); |
| box-shadow: 0 0 8px var(--color-accent-neon-green); |
| animation: scanLine 4s ease-in-out infinite alternate; |
| } |
| @keyframes scanLine { 0% { width: 80px; } 50% { width: 160px; } 100% { width: 80px; } } |
| h2 .section-prefix { |
| font-family: var(--font-mono); font-size: 0.6em; color: var(--color-accent-neon-green); |
| margin-right: 0.75rem; opacity: 0.9; font-weight: 400; |
| } |
| 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;} |
| p { margin-bottom: 1.5rem; color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.8; } |
| 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; } |
| 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); } |
| ul { list-style: none; padding-left: 0; } |
| li { margin-bottom: 0.85rem; color: var(--color-text-secondary); position: relative; padding-left: 1.75rem; font-size: 1rem;} |
| li::before { |
| content: "»"; position: absolute; left: 0; top: 0.1em; color: var(--color-accent-neon-green); |
| font-size: 1.1em; line-height: inherit; font-weight: 700; |
| text-shadow: 0 0 5px var(--color-glow); |
| } |
| strong { color: var(--color-text-primary); font-weight: 700; } |
| code { |
| font-family: var(--font-mono); background-color: var(--color-bg-surface); |
| color: var(--color-accent-electric-blue); padding: 0.25em 0.6em; |
| border-radius: var(--border-radius-sm); font-size: 0.9em; |
| border: 1px solid var(--color-glass-border); |
| box-shadow: inset 0 0 5px color-mix(in srgb, var(--color-accent-electric-blue) 10%, transparent); |
| } |
| |
| .navbar { |
| position: fixed; top: 0; left: 0; right: 0; z-index: 1000; |
| padding: 0.75rem 0; height: 70px; |
| background: transparent; |
| transition: background-color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-smooth); |
| } |
| .navbar.scrolled { |
| background: color-mix(in srgb, var(--color-bg-main) 85%, transparent); |
| backdrop-filter: blur(12px); |
| box-shadow: 0 0 25px color-mix(in srgb, var(--color-accent-neon-green) 8%, transparent); |
| } |
| .navbar.nav-hidden { transform: translateY(-110%); } |
| .navbar-container { display: flex; justify-content: space-between; align-items: center; height: 100%; } |
| .nav-logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--color-text-primary); letter-spacing: 1px; } |
| .nav-logo span { color: var(--color-accent-neon-green); text-shadow: 0 0 10px var(--color-glow); } |
| .nav-menu { list-style: none; display: flex; align-items: center; } |
| .nav-menu li { margin-left: 2.25rem; } |
| .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); } |
| .nav-link::before { |
| content: ""; position: absolute; left: 50%; bottom: -5px; width: 0; height: 2px; |
| transform: translateX(-50%); |
| background: linear-gradient(90deg, var(--color-accent-neon-green), var(--color-accent-electric-blue)); |
| box-shadow: 0 0 8px var(--color-accent-neon-green); |
| transition: width var(--transition-smooth); border-radius: 1px; |
| } |
| .nav-link:hover, .nav-link.active { color: var(--color-accent-neon-green); text-shadow: 0 0 5px var(--color-glow); } |
| .nav-link:hover::before, .nav-link.active::before { width: 110%; } |
| |
| .nav-controls { display: flex; align-items: center; } |
| .theme-toggle-btn { |
| background: transparent; border: 1px solid var(--color-glass-border); border-radius: 50%; |
| color: var(--color-text-secondary); cursor: pointer; |
| font-size: 1.2rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; |
| transition: color var(--transition-swift), border-color var(--transition-swift), box-shadow var(--transition-swift), transform var(--transition-swift); |
| } |
| .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); } |
| .hamburger { display: none; margin-left: 1rem; } |
| |
| .hero-section { |
| min-height: 100vh; display: flex; flex-direction: column; justify-content: center; |
| padding-top: 70px; position: relative; |
| } |
| .hero-content { max-width: 750px; position: relative; z-index: 1; } |
| .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);} |
| .hero-name { color: var(--color-text-primary); } |
| .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; } |
| .hero-description { max-width: 600px; margin-bottom: 3rem; font-size: 1.1rem; color: var(--color-text-secondary); } |
| .cta-button { |
| font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.5px; |
| color: var(--color-accent-neon-green); |
| background: transparent; |
| border: 1.5px solid var(--color-accent-neon-green); |
| padding: 1rem 2.25rem; border-radius: var(--border-radius-md); |
| transition: background-color var(--transition-smooth), color var(--transition-smooth), box-shadow var(--transition-smooth), transform var(--transition-swift); |
| position: relative; overflow: hidden; z-index: 1; text-shadow: 0 0 5px var(--color-glow); |
| } |
| .cta-button:hover { |
| background-color: var(--color-accent-neon-green); |
| color: var(--color-bg-deep); |
| box-shadow: var(--shadow-hard-glow); |
| transform: translateY(-4px) scale(1.02); |
| text-shadow: none; |
| } |
| |
| .section-wrapper { |
| padding: 4rem 0; |
| opacity: 0; transform: translateY(50px); |
| transition: opacity 0.8s var(--transition-elastic), transform 0.8s var(--transition-elastic); |
| } |
| .section-wrapper.visible { opacity: 1; transform: translateY(0); } |
| |
| .glass-card { |
| background: var(--color-glass-bg); |
| border: 1px solid var(--color-glass-border); |
| border-radius: var(--border-radius-lg); |
| padding: 2.5rem 3rem; |
| backdrop-filter: blur(15px); |
| box-shadow: 0 0 40px var(--color-glass-highlight), inset 0 0 20px color-mix(in srgb, var(--color-glass-border) 30%, transparent); |
| position: relative; |
| overflow: hidden; |
| } |
| .glass-card::before { |
| content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; |
| background: conic-gradient(transparent, color-mix(in srgb, var(--color-accent-neon-green) 20%, transparent), transparent 30%); |
| animation: rotateBorderHighlight 8s linear infinite; |
| z-index: -1; |
| } |
| @keyframes rotateBorderHighlight { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } |
| |
| .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2.5rem; } |
| .project-item { |
| background: var(--color-bg-surface); |
| border-radius: var(--border-radius-md); |
| padding: 2rem; |
| border: 1px solid var(--color-glass-border); |
| transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth); |
| position: relative; overflow: hidden; |
| box-shadow: var(--shadow-soft); |
| } |
| .project-item:hover { |
| transform: translateY(-8px) scale(1.03); |
| box-shadow: var(--shadow-medium), 0 0 20px var(--color-glass-highlight); |
| border-color: var(--color-accent-neon-green); |
| } |
| .project-item .icon-placeholder { |
| width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-glass-border); |
| display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; |
| font-family: var(--font-display); font-size: 1.2rem; color: var(--color-accent-neon-green); |
| } |
| .project-title { font-family: var(--font-primary); font-size: 1.3rem; color: var(--color-text-primary); margin-bottom: 0.5rem; font-weight: 700;} |
| .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;} |
| .project-description { font-size: 0.95rem; margin-bottom: 1.25rem; color: var(--color-text-secondary); } |
| .project-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; } |
| .project-tags code { font-size: 0.85rem; padding: 0.3em 0.7em; } |
| |
| .skills-list ul { display: flex; flex-wrap: wrap; gap: 1rem; } |
| .skills-list li { |
| background-color: var(--color-bg-surface); |
| color: var(--color-text-secondary); |
| padding: 0.6rem 1.2rem; |
| border-radius: var(--border-radius-md); |
| border: 1px solid var(--color-glass-border); |
| font-family: var(--font-mono); font-size: 0.95rem; |
| transition: background-color var(--transition-swift), color var(--transition-swift), transform var(--transition-swift), box-shadow var(--transition-swift); |
| margin: 0; padding-left: 1.2rem; cursor: default; |
| } |
| .skills-list li::before { top: 0.25em; } |
| .skills-list li:hover { |
| background-color: var(--color-accent-neon-green); |
| color: var(--color-bg-deep); |
| transform: translateY(-3px) scale(1.03); |
| box-shadow: 0 0 15px var(--color-glow); |
| text-shadow: none; |
| } |
| |
| .contact-links { list-style: none; padding: 0; margin-top: 1.5rem;} |
| .contact-links li { padding-left: 0; margin-bottom: 1.25rem; display: flex; align-items: center; } |
| .contact-links li::before { display: none; } |
| .contact-links .contact-label { display: inline-block; min-width: 100px; color: var(--color-text-primary); font-family: var(--font-mono); font-size: 0.9rem; } |
| .contact-links a { font-size: 1rem; } |
| |
| .site-footer { |
| text-align: center; padding: 4rem 0 2.5rem; |
| font-family: var(--font-mono); font-size: 0.9rem; |
| color: var(--color-text-muted); |
| border-top: 1px solid var(--color-glass-border); |
| margin-top: 5rem; position: relative; |
| } |
| .site-footer p { margin-bottom: 0.5rem; } |
| .site-footer a { color: var(--color-text-muted); } |
| .site-footer a:hover { color: var(--color-accent-neon-green); } |
| |
| #scrollToTopBtn { |
| position: fixed; bottom: 2.5rem; right: 2.5rem; |
| background-color: var(--color-accent-neon-green); |
| color: var(--color-bg-deep); |
| border: none; border-radius: 50%; |
| width: 50px; height: 50px; |
| font-size: 1.5rem; font-weight: bold; |
| cursor: pointer; display: none; align-items: center; justify-content: center; |
| box-shadow: var(--shadow-hard-glow); |
| transition: background-color var(--transition-swift), transform var(--transition-swift), opacity var(--transition-swift), box-shadow var(--transition-swift); |
| opacity: 0.8; z-index: 999; |
| } |
| #scrollToTopBtn:hover { |
| background-color: var(--color-accent-white); |
| color: var(--color-accent-neon-green); |
| transform: scale(1.15) translateY(-4px) rotate(360deg); opacity: 1; |
| box-shadow: 0 0 25px var(--color-accent-neon-green); |
| } |
| |
| @media (max-width: 992px) { |
| .project-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } |
| } |
| @media (max-width: 768px) { |
| .container { padding: 0 1rem; } |
| .navbar-container { padding: 0 1rem; } |
| .nav-menu { |
| display: none; position: fixed; top: 0; bottom: 0; right: 0; |
| width: min(85vw, 320px); |
| background: color-mix(in srgb, var(--color-bg-main) 90%, transparent); |
| backdrop-filter: blur(20px); |
| flex-direction: column; justify-content: center; align-items: center; |
| padding: 2rem; |
| box-shadow: -8px 0 30px color-mix(in srgb, var(--color-accent-neon-green) 15%, transparent); |
| transform: translateX(110%); |
| transition: transform var(--transition-elastic); |
| z-index: 998; |
| } |
| .nav-menu.active { transform: translateX(0); } |
| .nav-menu li { margin: 1.25rem 0; width: 100%; text-align: center; } |
| .nav-link { font-size: 1.1rem; display: block; width: 100%; } |
| .hamburger { |
| display: flex; align-items: center; justify-content: center; |
| width: 40px; height: 40px; |
| border: 1px solid var(--color-glass-border); border-radius: 50%; |
| color: var(--color-text-secondary); z-index: 1001; |
| padding: 0; |
| transition: color var(--transition-swift), border-color var(--transition-swift), box-shadow var(--transition-swift); |
| } |
| .hamburger:hover { color: var(--color-accent-neon-green); border-color: var(--color-accent-neon-green); } |
| .hamburger.active { color: var(--color-accent-neon-green); border-color: var(--color-accent-neon-green); box-shadow: 0 0 10px var(--color-glow); } |
| .hero-section { text-align: center; padding-top: 100px; padding-bottom: 4rem;} |
| .hero-content, .hero-description { margin-left: auto; margin-right: auto; } |
| .glass-card { padding: 2rem 1.5rem; } |
| h2 { margin-top: 4rem; margin-bottom: 2rem; } |
| .cta-button { padding: 0.9rem 1.75rem; font-size: 1rem; } |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="noise-overlay"></div> |
| <div class="animated-bg-lines"><div></div><div></div><div></div><div></div><div></div></div> |
|
|
| <nav class="navbar" id="main-navbar"> |
| <div class="container navbar-container"> |
| <a href="#hero" class="nav-logo">J<span>R</span></a> |
| <div class="nav-controls"> |
| <ul class="nav-menu" id="main-nav-menu"> |
| <li><a href="#profile" class="nav-link">Профиль</a></li> |
| <li><a href="#experience" class="nav-link">Опыт</a></li> |
| <li><a href="#skills" class="nav-link">Компетенции</a></li> |
| <li><a href="#contact" class="nav-link">Связь</a></li> |
| </ul> |
| <button id="theme-toggle" class="theme-toggle-btn" aria-label="Переключить тему"> |
| <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> |
| <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> |
| </button> |
| <button class="hamburger" id="hamburger-menu" aria-label="Открыть меню" aria-expanded="false"> |
| <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> |
| <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> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="container"> |
| <section id="hero" class="hero-section section-wrapper"> |
| <div class="hero-content"> |
| <p class="hero-greeting">ONLINE-SYSTEM /// JOHNNY RASPBERRY</p> |
| <h1 class="hero-name">Архитектор Цифровых Систем.</h1> |
| <h1 class="hero-tagline">Инноватор. Проблем Солвер. Кодер.</h1> |
| <p class="hero-description">Моя специализация – это воплощение амбициозных идей в высокотехнологичный код. Я создаю нестандартные решения для FoundryVTT, интегрирую передовые AI и решаю задачи, от которых другие предпочитают отказаться. Превращаю сложность в элегантность, а вызовы – в прорывные продукты.</p> |
| <a href="#contact" class="cta-button">ЗАПРОСИТЬ КОНСУЛЬТАЦИЮ</a> |
| </div> |
| </section> |
|
|
| <section id="profile" class="section-wrapper"> |
| <div class="glass-card"> |
| <h2><span class="section-prefix">// DATA STREAM</span>Профессиональный Профиль</h2> |
| <p>Я – Full-Stack разработчик высшей квалификации с обширным и подтвержденным опытом в создании, адаптации и полной кастомизации сложных программных экосистем. Моя ключевая экспертиза лежит в глубокой работе с платформой FoundryVTT и виртуозной интеграции передовых технологий искусственного интеллекта. Обладаю не только глубокими техническими знаниями, но и стратегическим видением, позволяющим доводить проекты от первоначальной концепции до безупречной реализации, с неизменным фокусом на высочайшее качество кода, продуманную архитектуру и скрупулезную проработку каждого аспекта функционала.</p> |
| <p>Мой подход к работе характеризуется проактивностью, неустанным поиском наиболее эффективных и элегантных решений, а также готовностью смело браться за нетривиальные, комплексные задачи, требующие инновационного мышления и глубокого погружения в специфику предметной области. Демонстрирую пиковую производительность и непоколебимую целеустремленность, особенно в проектах, представляющих собой значительный технологический вызов или обладающих высоким инновационным потенциалом.</p> |
| </div> |
| </section> |
|
|
| <section id="experience" class="section-wrapper"> |
| <div class="glass-card"> |
| <h2><span class="section-prefix">// CORE MODULES</span>Опыт и Ключевые Проекты</h2> |
| <div class="project-grid"> |
| <article class="project-item"> |
| <div class="icon-placeholder">FVT</div> |
| <h3 class="project-title">FoundryVTT Экосистема</h3> |
| <p class="project-meta">2+ Года Интенсивной Разработки / JavaScript / TypeScript</p> |
| <p class="project-description">Полный цикл разработки и кастомизации для FoundryVTT: создание универсальной экономической модели, системы глубокой Discord-интеграции, разработка уникальных UI-компонентов (динамические календари, системы достижений, генераторы процедурного контента), а также реинжиниринг и оптимизация существующих игровых систем (<code>dnd5e</code>, <code>pf2e</code>, <code>cyberpunk-red-core</code>) и популярных модулей.</p> |
| <div class="project-tags"> |
| <code>FoundryVTT API</code><code>Node.js (серверные части)</code> |
| </div> |
| </article> |
| <article class="project-item"> |
| <div class="icon-placeholder">AIR</div> |
| <h3 class="project-title">AI RPG Telegram Bot (@ChatGPT_RPG)</h3> |
| <p class="project-meta">2.5 Года Разработки / Python / AI-Интеграции</p> |
| <p class="project-description">Разработка и развитие комплексной RPG-системы в Telegram, построенной на синергии ChatGPT и широкого спектра AI-моделей от HuggingFace. Проектирование уникального пользовательского интерфейса для создания и кастомизации персонажей с использованием анимации, звуковых эффектов и продвинутой Markdown-разметки. Успешный опыт управления командой разработчиков и маркетологов.</p> |
| <div class="project-tags"> |
| <code>Python (Asyncio)</code><code>Telegram Bot API</code><code>OpenAI GPT-4</code> |
| </div> |
| </article> |
| <article class="project-item"> |
| <div class="icon-placeholder">MAI</div> |
| <h3 class="project-title">Медицинский AI Анализатор (Прототип)</h3> |
| <p class="project-meta">Исследовательский Проект / Python / Computer Vision</p> |
| <p class="project-description">Создание прототипа интеллектуальной системы для анализа медицинских изображений, специализирующейся на офтальмологических патологиях и ранней диагностике опухолей. Использование библиотек OpenCV, PyTorch и передовых моделей с HuggingFace для обработки изображений и автоматизированного формирования предварительных диагностических заключений.</p> |
| <div class="project-tags"> |
| <code>PyTorch/TensorFlow</code><code>OpenCV</code> |
| </div> |
| </article> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="skills" class="section-wrapper"> |
| <div class="glass-card"> |
| <h2><span class="section-prefix">// TECH MATRIX</span>Технические Компетенции</h2> |
| <h3 style="margin-bottom:1.5rem;">Ключевые Языки и Технологии:</h3> |
| <div class="skills-list"> |
| <ul> |
| <li>Python (Expert)</li><li>JavaScript</li><li>TypeScript</li><li>HTML5</li><li>CSS3</li> |
| <li>Node.js</li><li>FoundryVTT API</li><li>OpenAI API (GPT-3.5/4)</li><li>HuggingFace Transformers</li> |
| <li>Telegram Bot API</li><li>Discord API</li><li>Git</li><li>Docker</li> |
| <li>MongoDB</li><li>PyTorch/TensorFlow (для AI)</li> |
| </ul> |
| </div> |
| <h3 style="margin-top: 2.5rem; margin-bottom:1.5rem;">Области Экспертизы:</h3> |
| <div class="skills-list"> |
| <ul> |
| <li>Full-Stack Architecture</li><li>Distributed Systems Design</li><li>Microservices (Концепции)</li> |
| <li>Advanced AI Integration</li><li>Natural Language Processing (NLP)</li><li>Computer Vision (CV)</li> |
| <li>Game Mechanics Design & Implementation</li><li>Real-time Systems</li><li>Data Engineering (Основы)</li> |
| <li>Technical Leadership</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
| |
| <section id="philosophy" class="section-wrapper"> |
| <div class="glass-card"> |
| <h2><span class="section-prefix">// OPERATING SYSTEM</span>Образование и Философия</h2> |
| <h3>Высшее юридическое образование</h3> |
| <p>Специализация: Глубинный анализ прецедентного права, разработка многоуровневых правовых стратегий и разрешение комплексных юридических коллизий. Юридическая практика отшлифовала системное и критическое мышление, сверхвысокое внимание к деталям и умение находить элегантные, нешаблонные решения в условиях информационной неопределенности и жестких ограничений – компетенции, которые я успешно трансформировал и активно применяю в сфере информационных технологий и программной инженерии.</p> |
| <h3 style="margin-top: 2.5rem;">Моя Философия Разработки:</h3> |
| <p>Я функционирую на пике когнитивной производительности, когда передо мной стоит задача, бросающая вызов моему интеллекту, или идея, способная "перезагрузить" существующие парадигмы. Готов к полной самоотдаче, глубокому погружению в новые технологические стеки и созданию прорывных решений, которые другие могут счесть нереализуемыми. Мои фундаментальные принципы: итеративная эволюция продукта (от MVP к совершенству), проактивный инжиниринг и абсолютная сфокусированность на достижении измеримого, превосходящего ожидания результата.</p> |
| </div> |
| </section> |
|
|
| <section id="contact" class="section-wrapper"> |
| <div class="glass-card" style="text-align: center;"> |
| <h2><span class="section-prefix">// COMMLINK</span>Связь и Потенциал Сотрудничества</h2> |
| <p style="max-width: 700px; margin-left: auto; margin-right:auto;">Я максимально эффективен, когда задача требует серьезного умственного напряжения или когда появляется идея, меняющая парадигму. Полностью отдаюсь изучению новых технологий и создаю прорывные решения, даже для 'нереализуемых' проблем. В основе моей работы: постоянное развитие продукта – начинаю с простого рабочего минимума (MVP), а потом улучшаю до совершенства – проактивность в разработке и абсолютная нацеленность на выдающийся, измеримый результат.</p> |
| <ul class="contact-links" style="text-align:left; max-width:450px; margin: 2.5rem auto 0 auto;"> |
| <li><span class="contact-label">TELEGRAM:</span> <a href="https://t.me/Enter_yes" target="_blank" rel="noopener noreferrer">@Enter_yes (Primary)</a></li> |
| <li><span class="contact-label">EMAIL:</span> <a href="mailto:altarofadventures@gmail.com">altarofadventures@gmail.com</a></li> |
| <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> |
| <li><span class="contact-label">PROJECTS:</span> <a href="https://boosty.to/alofa" target="_blank" rel="noopener noreferrer">boosty.to/alofa Portfolio</a></li> |
| </ul> |
| <a href="mailto:altarofadventures@gmail.com?subject=Запрос на сотрудничество от Johnny Raspberry" class="cta-button" style="margin-top:3rem;">ОТПРАВИТЬ ЗАПРОС</a> |
| </div> |
| </section> |
| </div> |
|
|
| <footer class="site-footer"> |
| <p>JOHNNY RASPBERRY /// SYSTEM ONLINE /// <span id="currentYear"></span></p> |
| <p>Проектирование и Реализация: JR /// <a href="https://github.com/McMrool" target="_blank" rel="noopener noreferrer" aria-label="GitHub">GitHub</a></p> |
| </footer> |
|
|
| <button id="scrollToTopBtn" title="Наверх" aria-label="Прокрутить наверх">▲</button> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| const mainNavbar = document.getElementById('main-navbar'); |
| const hamburgerMenuBtn = document.getElementById('hamburger-menu'); |
| const mainNavMenu = document.getElementById('main-nav-menu'); |
| const navLinks = mainNavMenu.querySelectorAll('.nav-link'); |
| const themeToggleBtn = document.getElementById('theme-toggle'); |
| const scrollToTopBtn = document.getElementById('scrollToTopBtn'); |
| const animatedSections = document.querySelectorAll('.section-wrapper, .hero-content > *'); |
| const projectItems = document.querySelectorAll('.project-item'); |
| const themeIconSun = themeToggleBtn.querySelector('.theme-icon-sun'); |
| const themeIconMoon = themeToggleBtn.querySelector('.theme-icon-moon'); |
| |
| let lastScrollTop = 0; |
| const scrollHandler = () => { |
| let scrollTop = window.pageYOffset || document.documentElement.scrollTop; |
| if (scrollTop > 50) mainNavbar.classList.add('scrolled'); |
| else mainNavbar.classList.remove('scrolled'); |
| |
| if (scrollTop > lastScrollTop && scrollTop > mainNavbar.offsetHeight && !mainNavMenu.classList.contains('active')) { |
| mainNavbar.classList.add('nav-hidden'); |
| } else { |
| mainNavbar.classList.remove('nav-hidden'); |
| } |
| lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; |
| |
| if (window.pageYOffset > 300) scrollToTopBtn.style.display = 'flex'; |
| else scrollToTopBtn.style.display = 'none'; |
| }; |
| window.addEventListener('scroll', scrollHandler, { passive: true }); |
| |
| const updateThemeIcons = (theme) => { |
| if (theme === 'dark') { |
| themeIconSun.style.display = 'block'; |
| themeIconMoon.style.display = 'none'; |
| } else { |
| themeIconSun.style.display = 'none'; |
| themeIconMoon.style.display = 'block'; |
| } |
| }; |
| |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); |
| let currentTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light'); |
| document.documentElement.setAttribute('data-theme', currentTheme); |
| updateThemeIcons(currentTheme); |
| |
| themeToggleBtn.addEventListener('click', () => { |
| currentTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; |
| document.documentElement.setAttribute('data-theme', currentTheme); |
| localStorage.setItem('theme', currentTheme); |
| updateThemeIcons(currentTheme); |
| }); |
| |
| prefersDarkScheme.addEventListener('change', (e) => { |
| if (localStorage.getItem('theme') === null) { |
| currentTheme = e.matches ? 'dark' : 'light'; |
| document.documentElement.setAttribute('data-theme', currentTheme); |
| updateThemeIcons(currentTheme); |
| } |
| }); |
| |
| hamburgerMenuBtn.addEventListener('click', () => { |
| const isActive = mainNavMenu.classList.toggle('active'); |
| hamburgerMenuBtn.classList.toggle('active'); |
| hamburgerMenuBtn.setAttribute('aria-expanded', isActive.toString()); |
| hamburgerMenuBtn.querySelector('.open-icon').style.display = isActive ? 'none' : 'block'; |
| hamburgerMenuBtn.querySelector('.close-icon').style.display = isActive ? 'block' : 'none'; |
| document.body.style.overflow = isActive ? 'hidden' : ''; |
| mainNavbar.style.transform = isActive ? 'translateY(0)' : ''; |
| if (isActive) mainNavbar.classList.add('scrolled'); |
| }); |
| |
| navLinks.forEach(link => { |
| link.addEventListener('click', () => { |
| if (mainNavMenu.classList.contains('active')) { |
| mainNavMenu.classList.remove('active'); |
| hamburgerMenuBtn.classList.remove('active'); |
| hamburgerMenuBtn.setAttribute('aria-expanded', 'false'); |
| hamburgerMenuBtn.querySelector('.open-icon').style.display = 'block'; |
| hamburgerMenuBtn.querySelector('.close-icon').style.display = 'none'; |
| document.body.style.overflow = ''; |
| scrollHandler(); |
| } |
| }); |
| }); |
| |
| const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 }; |
| let delayCounter = 0; |
| const elementObserver = new IntersectionObserver((entries, observer) => { |
| entries.forEach((entry) => { |
| if (entry.isIntersecting) { |
| entry.target.style.transitionDelay = `${delayCounter * 100}ms`; |
| entry.target.classList.add('visible'); |
| delayCounter++; |
| observer.unobserve(entry.target); |
| } |
| }); |
| if (entries.some(entry => !entry.isIntersecting)) delayCounter = 0; |
| }, observerOptions); |
| animatedSections.forEach(el => elementObserver.observe(el)); |
| |
| function updateActiveNavLinkOnScroll() { |
| let currentSectionId = ''; |
| const sections = document.querySelectorAll('section[id]'); |
| const scrollY = window.pageYOffset; |
| const navHeight = mainNavbar.offsetHeight; |
| |
| sections.forEach(section => { |
| const sectionTop = section.offsetTop - navHeight - window.innerHeight * 0.3; |
| if (scrollY >= sectionTop) currentSectionId = section.getAttribute('id'); |
| }); |
| |
| const heroSection = document.getElementById('hero'); |
| if (heroSection && scrollY < (heroSection.offsetTop + heroSection.offsetHeight * 0.5 - navHeight) ) { |
| currentSectionId = "hero"; |
| } |
| |
| navLinks.forEach(link => { |
| link.classList.remove('active'); |
| const hrefTarget = link.getAttribute('href').substring(1); |
| if (hrefTarget === currentSectionId) link.classList.add('active'); |
| }); |
| } |
| window.addEventListener('scroll', updateActiveNavLinkOnScroll, { passive: true }); |
| |
| scrollToTopBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })); |
| document.getElementById('currentYear').textContent = new Date().getFullYear(); |
| updateActiveNavLinkOnScroll(); |
| |
| projectItems.forEach(item => { |
| item.addEventListener('mousemove', (e) => { |
| const rect = item.getBoundingClientRect(); |
| item.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`); |
| item.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`); |
| }); |
| }); |
| |
| setTimeout(() => { |
| document.querySelectorAll('.hero-content > *').forEach((el, index) => { |
| 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`; |
| el.style.opacity = '1'; |
| el.style.transform = 'translateY(0)'; |
| }); |
| }, 100); |
| document.querySelectorAll('.hero-content > *').forEach((el) => { |
| el.style.opacity = '0'; |
| el.style.transform = 'translateY(20px)'; |
| }); |
| |
| }); |
| </script> |
| </body> |
| </html> |
