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