| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ARCANE | Backend Architect</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;700&family=Noto+Serif+JP:wght@200;600;900&display=swap" rel="stylesheet"> |
| |
| <style> |
| |
| :root { |
| --bg-color: #0a0a0a; |
| --text-main: #e0e0e0; |
| --text-muted: #888; |
| --accent-red: #cf0000; |
| --font-code: 'JetBrains Mono', monospace; |
| --font-serif: 'Noto Serif JP', serif; |
| --nav-height: 70px; |
| } |
| |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| background-color: var(--bg-color); |
| color: var(--text-main); |
| font-family: var(--font-code); |
| overflow-x: hidden; |
| line-height: 1.6; |
| } |
| |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 1.5rem; |
| } |
| |
| .japanese-label { |
| font-family: var(--font-serif); |
| color: var(--accent-red); |
| font-size: 0.8rem; |
| letter-spacing: 0.1rem; |
| margin-bottom: 0.5rem; |
| display: block; |
| text-transform: uppercase; |
| } |
| |
| |
| .grid-bg { |
| position: fixed; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); |
| background-size: 40px 40px; |
| z-index: -1; |
| pointer-events: none; |
| } |
| |
| |
| nav { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| height: var(--nav-height); |
| padding: 0 1.5rem; |
| position: fixed; |
| width: 100%; |
| top: 0; |
| z-index: 100; |
| background: rgba(10, 10, 10, 0.95); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid rgba(255,255,255,0.05); |
| } |
| |
| .logo { |
| font-weight: 700; |
| font-size: 1.2rem; |
| border: 1px solid var(--text-main); |
| padding: 4px 10px; |
| z-index: 101; |
| } |
| |
| |
| .nav-links { display: flex; gap: 2rem; } |
| .nav-links a { |
| color: var(--text-muted); |
| text-decoration: none; |
| font-size: 0.85rem; |
| transition: color 0.3s; |
| } |
| .nav-links a:hover { color: var(--accent-red); } |
| |
| |
| .menu-toggle { |
| display: none; |
| cursor: pointer; |
| z-index: 101; |
| font-size: 1.5rem; |
| color: var(--text-main); |
| } |
| |
| |
| .hero { |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| padding-top: var(--nav-height); |
| } |
| |
| .hero-content { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 4rem; |
| align-items: center; |
| } |
| |
| .name-vertical { |
| font-family: var(--font-serif); |
| font-size: 5rem; |
| line-height: 1; |
| writing-mode: vertical-rl; |
| text-orientation: upright; |
| color: var(--text-main); |
| border-right: 1px solid var(--accent-red); |
| padding-right: 2rem; |
| letter-spacing: 0.5rem; |
| white-space: nowrap; |
| } |
| |
| .hero-text h2 { |
| font-size: 2.5rem; |
| font-weight: 100; |
| margin-bottom: 1rem; |
| line-height: 1.2; |
| } |
| |
| .hero-text p { |
| color: var(--text-muted); |
| max-width: 500px; |
| margin-bottom: 2rem; |
| font-size: 1rem; |
| } |
| |
| .btn { |
| background: transparent; |
| border: 1px solid var(--accent-red); |
| color: var(--accent-red); |
| padding: 12px 35px; |
| cursor: pointer; |
| font-family: var(--font-code); |
| transition: 0.3s; |
| text-decoration: none; |
| display: inline-block; |
| font-size: 0.9rem; |
| } |
| |
| .btn:hover { |
| background: var(--accent-red); |
| color: var(--bg-color); |
| } |
| |
| |
| section { |
| padding: 5rem 0; |
| border-bottom: 1px solid rgba(255,255,255,0.05); |
| } |
| |
| .section-title { |
| font-size: 2rem; |
| margin-bottom: 3rem; |
| font-weight: 100; |
| } |
| |
| |
| .skills-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .skill-card { |
| background: rgba(255,255,255,0.02); |
| border: 1px solid rgba(255,255,255,0.1); |
| padding: 1.5rem; |
| transition: 0.3s; |
| } |
| |
| .skill-card h3 { margin-bottom: 1rem; font-size: 1.1rem; color: #fff; } |
| .skill-card li { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-muted); } |
| .skill-card li::before { content: ':: '; color: var(--accent-red); } |
| |
| |
| .project-item { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 3rem; |
| margin-bottom: 5rem; |
| align-items: center; |
| } |
| |
| .project-diagram { |
| background: #0f0f0f; |
| border: 1px solid #222; |
| height: 250px; |
| position: relative; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| |
| footer { |
| padding: 4rem 0 6rem 0; |
| text-align: center; |
| border-top: 1px solid var(--accent-red); |
| margin-top: 2rem; |
| } |
| |
| .stamp { |
| width: 50px; |
| height: 50px; |
| border: 2px solid var(--accent-red); |
| border-radius: 50%; |
| color: var(--accent-red); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| margin: 0 auto 1.5rem auto; |
| font-family: var(--font-serif); |
| font-weight: 900; |
| } |
| |
| |
| @media (max-width: 768px) { |
| |
| |
| .menu-toggle { display: block; } |
| |
| .nav-links { |
| position: fixed; |
| top: 0; right: -100%; |
| width: 70%; |
| height: 100vh; |
| background: #111; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| gap: 3rem; |
| transition: 0.4s ease; |
| border-left: 1px solid var(--accent-red); |
| } |
| |
| .nav-links.active { right: 0; } |
| .nav-links a { font-size: 1.2rem; } |
| |
| |
| .hero-content { |
| grid-template-columns: 1fr; |
| text-align: center; |
| gap: 2rem; |
| } |
| |
| .name-vertical { |
| writing-mode: horizontal-tb; |
| border-right: none; |
| border-bottom: 1px solid var(--accent-red); |
| padding-bottom: 1rem; |
| padding-right: 0; |
| font-size: 3rem; |
| width: 100%; |
| } |
| |
| .hero-text h2 { font-size: 1.8rem; } |
| |
| |
| .project-item { |
| grid-template-columns: 1fr; |
| gap: 2rem; |
| margin-bottom: 4rem; |
| } |
| |
| |
| |
| .container { padding: 0 1.2rem; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="grid-bg"></div> |
|
|
| <nav> |
| <div class="logo">ARCANE</div> |
| <div class="menu-toggle" onclick="toggleMenu()">☰</div> |
| <div class="nav-links" id="navLinks"> |
| <a href="#about" onclick="toggleMenu()">01. LOGIC</a> |
| <a href="#skills" onclick="toggleMenu()">02. SYSTEM</a> |
| <a href="#projects" onclick="toggleMenu()">03. ARCHITECTURE</a> |
| <a href="#contact" onclick="toggleMenu()">04. CONTACT</a> |
| </div> |
| </nav> |
|
|
| <header class="hero container"> |
| <div class="hero-content"> |
| <h1 class="name-vertical">アーケイン</h1> |
| <div class="hero-text"> |
| <span class="japanese-label">BACKEND ARCHITECT</span> |
| <h2>Logic in the<br>Shadows.</h2> |
| <p>Specialized in high-load server environments, distributed database management, and algorithmic efficiency.</p> |
| <a href="#contact" class="btn">INITIATE_CONTACT()</a> |
| </div> |
| </div> |
| </header> |
|
|
| <section id="skills" class="container"> |
| <span class="japanese-label">ARSENAL</span> |
| <h2 class="section-title">Tech Stack</h2> |
| <div class="skills-grid"> |
| <div class="skill-card"> |
| <h3>Core Languages</h3> |
| <ul> |
| <li>Python (FastAPI)</li> |
| <li>Go (Golang)</li> |
| <li>Rust (Systems)</li> |
| </ul> |
| </div> |
| <div class="skill-card"> |
| <h3>Data & Storage</h3> |
| <ul> |
| <li>PostgreSQL (Tuning)</li> |
| <li>Redis Cluster</li> |
| <li>Kafka / RabbitMQ</li> |
| </ul> |
| </div> |
| <div class="skill-card"> |
| <h3>Infrastructure</h3> |
| <ul> |
| <li>Docker & K8s</li> |
| <li>AWS (EC2, Lambda)</li> |
| <li>Terraform</li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="projects" class="container"> |
| <span class="japanese-label">CASE STUDIES</span> |
| <h2 class="section-title">Selected Works</h2> |
|
|
| <div class="project-item"> |
| <div class="project-info"> |
| <h3>KITSUNE | Trading Bot</h3> |
| <p style="color:var(--text-muted); font-size: 0.95rem; margin-top: 1rem;"> |
| A high-frequency trading algorithm handling 500 req/s. |
| <br><br> |
| <span style="color:var(--accent-red)">> Strategy:</span> Database sharding & in-memory caching reduced latency by 90%. |
| </p> |
| </div> |
| <div class="project-diagram"> |
| <div style="width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; left: 20%;"></div> |
| <div style="width: 60%; height: 1px; background: #333; position: absolute;"></div> |
| <div style="width: 10px; height: 10px; background: var(--accent-red); border-radius: 50%; position: absolute; right: 20%;"></div> |
| <div style="position:absolute; bottom:10px; right:10px; font-size:0.7rem; color:#555;">FIG 1.0</div> |
| </div> |
| </div> |
|
|
| <div class="project-item"> |
| <div class="project-info"> |
| <h3>RONIN | Payment Gateway</h3> |
| <p style="color:var(--text-muted); font-size: 0.95rem; margin-top: 1rem;"> |
| Fault-tolerant microservices architecture. |
| <br><br> |
| <span style="color:var(--accent-red)">> Strategy:</span> Implemented idempotency keys and eventual consistency models. |
| </p> |
| </div> |
| <div class="project-diagram"> |
| <div style="border: 1px dashed #444; width: 40%; height: 60%; position: absolute;"></div> |
| <div style="width: 10px; height: 10px; background: var(--accent-red); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div> |
| <div style="position:absolute; bottom:10px; right:10px; font-size:0.7rem; color:#555;">FIG 1.1</div> |
| </div> |
| </div> |
| </section> |
|
|
| <footer id="contact"> |
| <div class="stamp">秘</div> |
| <h3>TRANSMISSION LINK</h3> |
| <p style="color: var(--text-muted); margin: 1rem 0;">arcane@dev.system</p> |
| </footer> |
|
|
| <script> |
| |
| function toggleMenu() { |
| const nav = document.getElementById('navLinks'); |
| nav.classList.toggle('active'); |
| } |
| |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = 1; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }); |
| |
| document.querySelectorAll('.skill-card, .project-item').forEach((el) => { |
| el.style.opacity = 0; |
| el.style.transform = 'translateY(30px)'; |
| el.style.transition = 'all 0.6s ease-out'; |
| observer.observe(el); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
