|
|
<!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:[email protected]">[email protected]</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:[email protected]?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> |
