Spaces:

api-ix
/

Portfolio

Running

App Files Files Community

api-ix commited on Dec 16, 2025

Commit

3e6f127

verified ·

1 Parent(s): 74de54d

Update index.html

Browse files

Files changed (1) hide show

index.html +397 -389

index.html CHANGED Viewed

@@ -3,496 +3,504 @@
 <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>
-        /* --- RESET & VARS --- */
         :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; }
-        html {
-            /* 1. ENABLE SMOOTH SCROLLING GLOBALLY */
-            scroll-behavior: smooth;
-        }
         body {
-            background-color: var(--bg-color);
-            color: var(--text-main);
-            font-family: var(--font-code);
             overflow-x: hidden;
-            line-height: 1.6;
-        }
-        /* --- ANIMATIONS --- */
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        @keyframes glitch {
-            0% { transform: translate(0); }
-            20% { transform: translate(-2px, 2px); }
-            40% { transform: translate(-2px, -2px); }
-            60% { transform: translate(2px, 2px); }
-            80% { transform: translate(2px, -2px); }
-            100% { transform: translate(0); }
-        }
-        /* --- UTILITIES --- */
-        .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;
         }
-        /* --- BACKGROUND GRID --- */
-        .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 --- */
-        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;
-            transition: 0.3s;
         }
-        .logo:hover { background: var(--text-main); color: var(--bg-color); }
-        .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 SECTION --- */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            padding-top: var(--nav-height);
         }
-        .hero-content {
-            display: grid;
-            grid-template-columns: auto 300px 1fr;
-            gap: 3rem;
-            align-items: center;
-            width: 100%;
         }
-        .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;
-        }
-        .glitch-effect:hover {
-            animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
-            color: var(--accent-red);
         }
-        /* --- PROFILE IMAGE --- */
-        .hero-img-container {
             width: 100%;
-            height: 400px;
             position: relative;
-            border: 1px solid #333;
-            overflow: hidden;
-            background: #111;
-            display: flex;
-            justify-content: center;
-            align-items: center;
         }
-        .img-loader {
-            width: 50px;
-            height: 50px;
-            border: 2px solid transparent;
-            border-top: 2px solid var(--accent-red);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            position: absolute;
-            z-index: 1;
         }
-        .hero-img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            filter: grayscale(100%) contrast(120%);
-            transition: filter 0.5s ease, transform 0.5s ease;
-            opacity: 0;
-            position: relative;
-            z-index: 2;
         }
-        .hero-img.loaded { opacity: 1; }
-        .hero-img-container:hover .hero-img {
-            filter: grayscale(0%) contrast(100%);
-            transform: scale(1.05);
         }
-        .hero-img-container::after {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; width: 100%; height: 100%;
-            border: 1px solid transparent;
-            background:
-                linear-gradient(to right, var(--accent-red) 2px, transparent 2px) 0 0,
-                linear-gradient(to bottom, var(--accent-red) 2px, transparent 2px) 0 0,
-                linear-gradient(to left, var(--accent-red) 2px, transparent 2px) 100% 100%,
-                linear-gradient(to top, var(--accent-red) 2px, transparent 2px) 100% 100%;
-            background-repeat: no-repeat;
-            background-size: 20px 20px;
-            pointer-events: none;
-            z-index: 3;
         }
-        .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);
-            box-shadow: 0 0 15px var(--accent-red);
         }
-        /* --- SECTIONS --- */
-        section, footer {
-            padding: 5rem 0;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            /* 2. FIX SCROLL POSITION BEHIND HEADER */
-            scroll-margin-top: 80px;
         }
-        .section-title {
-            font-size: 2rem;
-            margin-bottom: 3rem;
-            font-weight: 100;
         }
-        /* --- SKILLS & PROJECTS --- */
-        .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:hover {
-            border-color: var(--accent-red);
-            transform: translateY(-5px);
         }
-        .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;
-            transition: 0.3s;
         }
-        .project-diagram:hover { border-color: var(--accent-red); }
-        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;
-            cursor: pointer;
-            transition: 0.3s;
         }
-        .stamp:hover { background: var(--accent-red); color: #000; }
-        /* --- MOBILE MEDIA QUERIES --- */
         @media (max-width: 900px) {
-            .hero-content {
-                grid-template-columns: 1fr;
-                text-align: center;
-                gap: 2rem;
-            }
-            .hero-img-container {
-                width: 200px; height: 200px;
-                margin: 0 auto;
-                border-radius: 50%;
-            }
-            .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%;
-            }
-            .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; }
-            .project-item { grid-template-columns: 1fr; }
         }
     </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 glitch-effect">アーケイン</h1>
-            <div class="hero-img-container">
-                <div class="img-loader" id="imgLoader"></div>
-                <img src="./profile.jpg" alt="Arcane Profile" class="hero-img" onload="imageLoaded()">
             </div>
-            <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, Node.js scalability, 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>Node.js (Express/NestJS)</li>
-                    <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>
-                    <li>MongoDB Aggregation</li>
                 </ul>
             </div>
-            <div class="skill-card">
-                <h3>Infrastructure</h3>
                 <ul>
-                    <li>Docker & Kubernetes</li>
-                    <li>AWS (EC2, Lambda)</li>
-                    <li>Terraform / Ansible</li>
-                    <li>Nginx Reverse Proxy</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() {
-            document.getElementById('navLinks').classList.toggle('active');
         }
-        function imageLoaded() {
-            const img = document.querySelector('.hero-img');
-            const loader = document.getElementById('imgLoader');
-            img.classList.add('loaded');
-            loader.style.display = 'none';
-        }
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.style.opacity = 1;
-                    entry.target.style.transform = 'translateY(0)';
                 }
             });
-        }, { threshold: 0.1 });
-        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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SYSTEM::ARCANE // ROOT_ACCESS</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;800&family=Rajdhani:wght@300;500;700&display=swap" rel="stylesheet">
     <style>
         :root {
+            --bg: #050505;
+            --grid: #1a1a1a;
+            --primary: #ff003c; /* Cyberpunk Red */
+            --primary-dim: rgba(255, 0, 60, 0.2);
+            --text: #e0e0e0;
+            --text-dim: #666;
+            --font-main: 'Rajdhani', sans-serif;
             --font-code: 'JetBrains Mono', monospace;
         }
+        * { margin: 0; padding: 0; box-sizing: border-box; cursor: crosshair; }
         body {
+            background-color: var(--bg);
+            color: var(--text);
+            font-family: var(--font-main);
             overflow-x: hidden;
+            height: 100vh;
+            width: 100vw;
         }
+        /* --- CRT OVERLAY EFFECT --- */
+        .scanlines {
             position: fixed;
             top: 0; left: 0; width: 100%; height: 100%;
+            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
+            background-size: 100% 4px;
+            z-index: 999;
             pointer-events: none;
+            opacity: 0.6;
         }
+        /* --- CANVAS BACKGROUND --- */
+        #network-canvas {
             position: fixed;
+            top: 0; left: 0;
+            z-index: 0;
+            opacity: 0.4;
         }
+        /* --- UI CONTAINER --- */
+        .ui-layer {
+            position: relative;
+            z-index: 10;
+            padding: 2rem;
+            height: 100%;
+            overflow-y: auto;
+            scrollbar-width: none; /* Firefox */
         }
+        .ui-layer::-webkit-scrollbar { display: none; }
+        /* --- HEADER / HUD --- */
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            border-bottom: 1px solid var(--primary);
+            padding-bottom: 1rem;
+            margin-bottom: 4rem;
+            position: relative;
         }
+        header::after {
+            content: 'SYS.VER.4.0 // ONLINE';
+            position: absolute;
+            bottom: -20px; right: 0;
+            font-family: var(--font-code);
+            font-size: 0.7rem;
+            color: var(--primary);
+            background: var(--bg);
+            padding-left: 10px;
         }
+        .brand {
+            font-family: var(--font-code);
+            font-weight: 800;
+            font-size: 2.5rem;
+            letter-spacing: -2px;
+            color: var(--text);
+            text-transform: uppercase;
         }
+        .brand span { color: var(--primary); }
+        .status-block {
+            text-align: right;
+            font-family: var(--font-code);
+            font-size: 0.7rem;
+            color: var(--primary);
         }
+        /* --- HERO SECTION --- */
+        .hero-section {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 4rem;
+            align-items: start;
+            margin-bottom: 8rem;
         }
+        /* Profile Image: HUD Style */
+        .profile-frame {
             width: 100%;
+            height: 350px;
+            border: 1px solid var(--primary);
             position: relative;
+            padding: 5px;
+            background: rgba(255, 0, 60, 0.05);
         }
+        .profile-frame::before {
+            content: ''; position: absolute; top: -1px; left: -1px;
+            width: 20px; height: 20px;
+            border-top: 3px solid var(--primary);
+            border-left: 3px solid var(--primary);
         }
+        .profile-frame::after {
+            content: ''; position: absolute; bottom: -1px; right: -1px;
+            width: 20px; height: 20px;
+            border-bottom: 3px solid var(--primary);
+            border-right: 3px solid var(--primary);
         }
+        .profile-img {
+            width: 100%; height: 100%;
+            object-fit: cover;
+            filter: grayscale(100%) contrast(1.2) brightness(0.8);
+            transition: 0.3s;
         }
+        .profile-frame:hover .profile-img {
+            filter: grayscale(0%) sepia(50%) hue-rotate(-50deg) saturate(3);
         }
+        .hero-data h1 {
+            font-size: 5rem;
+            line-height: 0.9;
+            text-transform: uppercase;
             margin-bottom: 1rem;
+            position: relative;
         }
+        .hero-data h1::before {
+            content: 'TARGET_ID:';
+            font-family: var(--font-code);
             font-size: 1rem;
+            color: var(--primary);
+            display: block;
+            margin-bottom: 0.5rem;
+            letter-spacing: 2px;
         }
+        .bio-text {
             font-family: var(--font-code);
+            color: var(--text-dim);
+            max-width: 600px;
+            margin-bottom: 2rem;
+            border-left: 2px solid var(--primary);
+            padding-left: 1rem;
         }
+        /* --- SKILL MATRIX --- */
+        .section-header {
+            font-family: var(--font-code);
+            color: var(--primary);
+            font-size: 1.2rem;
+            margin-bottom: 2rem;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
         }
+        .section-header::after {
+            content: ''; flex: 1; height: 1px; background: var(--primary-dim);
         }
+        .grid-container {
             display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1rem;
+            margin-bottom: 6rem;
         }
+        .data-card {
+            background: rgba(20,20,20,0.8);
+            border: 1px solid #333;
             padding: 1.5rem;
+            transition: 0.2s;
+            position: relative;
+            overflow: hidden;
         }
+        .data-card:hover {
+            border-color: var(--primary);
+            box-shadow: 0 0 15px var(--primary-dim);
         }
+        .data-card h3 {
+            font-family: var(--font-code);
+            font-size: 0.9rem;
+            color: var(--primary);
+            margin-bottom: 1rem;
+            text-transform: uppercase;
+        }
+        .data-card ul {
+            list-style: none;
+            font-family: var(--font-code);
+            font-size: 0.85rem;
+            color: var(--text-dim);
         }
+        .data-card li { margin-bottom: 5px; }
+        .data-card li::before { content: '> '; color: var(--primary); }
+        /* --- GLITCH BUTTON --- */
+        .cy-btn {
+            display: inline-block;
+            padding: 15px 40px;
+            background: var(--primary);
+            color: #000;
+            font-family: var(--font-code);
+            font-weight: 700;
+            text-decoration: none;
+            text-transform: uppercase;
+            letter-spacing: 2px;
             position: relative;
+            clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
+            transition: 0.2s;
+        }
+        .cy-btn:hover {
+            background: #fff;
+            color: var(--primary);
+            transform: translateX(5px);
+        }
+        /* --- BOOT ANIMATION OVERLAY --- */
+        #boot-screen {
+            position: fixed;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: #000;
+            z-index: 9999;
             display: flex;
             justify-content: center;
             align-items: center;
+            flex-direction: column;
+            font-family: var(--font-code);
+            color: var(--primary);
         }
+        .typing-line {
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
+            opacity: 0;
+            animation: fadeIn 0.1s forwards;
         }
+        @keyframes fadeIn { to { opacity: 1; } }
+        /* --- RESPONSIVE --- */
         @media (max-width: 900px) {
+            .hero-section { grid-template-columns: 1fr; }
+            .hero-data h1 { font-size: 3.5rem; }
+            .profile-frame { height: 250px; width: 250px; margin: 0 auto; }
         }
     </style>
 </head>
 <body>
+    <div class="scanlines"></div>
+    <div id="boot-screen">
         </div>
+    <canvas id="network-canvas"></canvas>
+    <div class="ui-layer" style="display: none;" id="main-interface">
+        <header>
+            <div class="brand">ARCANE<span>_SYS</span></div>
+            <div class="status-block">
+                <div>MEM: 64TB // OK</div>
+                <div>NET: SECURE</div>
+                <div>LOC: UNKNOWN</div>
+            </div>
+        </header>
+        <section class="hero-section">
+            <div class="hero-data">
+                <h1>Arcane<br><span style="color:transparent; -webkit-text-stroke: 1px var(--primary);">Developer</span></h1>
+                <div class="bio-text">
+                    <p>> SPECIALIZATION: BACKEND ARCHITECTURE</p>
+                    <p>> STATUS: AVAILABLE FOR DEPLOYMENT</p>
+                    <br>
+                    <p>My code runs where the light doesn't touch. I construct the invisible logic that powers global systems. If the server stays up, I did my job.</p>
+                </div>
+                <a href="mailto:arcane@system.dev" class="cy-btn">Initialize Link</a>
             </div>
+            <div class="profile-frame">
+                <img src="./profile.jpg" alt="User" class="profile-img">
+                <div style="position:absolute; bottom:10px; left:10px; font-size:0.6rem; color:var(--primary); font-family:var(--font-code);">IMG_REF_001</div>
             </div>
+        </section>
+        <h2 class="section-header">01 // SYSTEM MODULES</h2>
+        <div class="grid-container">
+            <div class="data-card">
+                <h3>// CORE_LOGIC</h3>
                 <ul>
+                    <li>Node.js (NestJS)</li>
+                    <li>Rust [System Level]</li>
+                    <li>Python [Algorithmic]</li>
                 </ul>
             </div>
+            <div class="data-card">
+                <h3>// PERSISTENCE</h3>
                 <ul>
+                    <li>PostgreSQL Cluster</li>
+                    <li>Redis In-Memory</li>
+                    <li>Mongo Aggregations</li>
                 </ul>
             </div>
+            <div class="data-card">
+                <h3>// DEPLOYMENT</h3>
                 <ul>
+                    <li>Docker / K8s</li>
+                    <li>AWS Infrastructure</li>
+                    <li>CI/CD Automation</li>
                 </ul>
             </div>
         </div>
+        <h2 class="section-header">02 // ARCHIVE_LOGS (PROJECTS)</h2>
+        <div class="grid-container">
+            <div class="data-card" style="border-left: 3px solid var(--primary);">
+                <h3>PROJECT: KITSUNE</h3>
+                <p style="font-size:0.8rem; color:#888; margin-bottom:1rem;">High-Frequency Trading Algorithm</p>
+                <div style="font-family:var(--font-code); font-size:0.7rem; color:var(--primary);">
+                    > Latency: 4ms<br>
+                    > Throughput: 10k/sec<br>
+                    > Status: DEPLOYED
+                </div>
             </div>
+            <div class="data-card" style="border-left: 3px solid var(--primary);">
+                <h3>PROJECT: RONIN</h3>
+                <p style="font-size:0.8rem; color:#888; margin-bottom:1rem;">Distributed Payment Gateway</p>
+                <div style="font-family:var(--font-code); font-size:0.7rem; color:var(--primary);">
+                    > Uptime: 99.999%<br>
+                    > Architecture: Microservices<br>
+                    > Status: ACTIVE
+                </div>
             </div>
         </div>
+        <footer style="margin-top: 5rem; border-top: 1px solid #333; padding-top: 1rem; font-family: var(--font-code); font-size: 0.7rem; color: #555; display: flex; justify-content: space-between;">
+            <div>SYSTEM ID: ARCANE-2025</div>
+            <div>END OF LINE_</div>
+        </footer>
+    </div>
     <script>
+        /* --- BOOT SEQUENCE SCRIPT --- */
+        const bootScreen = document.getElementById('boot-screen');
+        const mainInterface = document.getElementById('main-interface');
+        const bootLines = [
+            "INITIALIZING KERNEL...",
+            "LOADING MODULES: [NODE, RUST, PYTHON]...",
+            "CHECKING DATABASE INTEGRITY...",
+            "ESTABLISHING SECURE CONNECTION...",
+            "ACCESS GRANTED.",
+            "WELCOME, ARCANE."
+        ];
+        let lineIndex = 0;
+        function typeLine() {
+            if (lineIndex < bootLines.length) {
+                const p = document.createElement('div');
+                p.classList.add('typing-line');
+                p.textContent = "> " + bootLines[lineIndex];
+                bootScreen.appendChild(p);
+                lineIndex++;
+                setTimeout(typeLine, 300); // Speed of typing
+            } else {
+                setTimeout(() => {
+                    bootScreen.style.display = 'none';
+                    mainInterface.style.display = 'block';
+                    initNetworkCanvas(); // Start background after boot
+                }, 800);
+            }
         }
+        // Start Boot
+        window.onload = typeLine;
+        /* --- CANVAS NETWORK ANIMATION (THE BACKEND VISUALIZER) --- */
+        function initNetworkCanvas() {
+            const canvas = document.getElementById('network-canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            let particles = [];
+            const particleCount = 60; // Number of nodes
+            class Particle {
+                constructor() {
+                    this.x = Math.random() * canvas.width;
+                    this.y = Math.random() * canvas.height;
+                    this.vx = (Math.random() - 0.5) * 0.5;
+                    this.vy = (Math.random() - 0.5) * 0.5;
+                    this.size = Math.random() * 2 + 1;
+                }
+                update() {
+                    this.x += this.vx;
+                    this.y += this.vy;
+                    if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
+                    if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
                 }
+                draw() {
+                    ctx.fillStyle = '#ff003c';
+                    ctx.beginPath();
+                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+            // Create Particles
+            for (let i = 0; i < particleCount; i++) {
+                particles.push(new Particle());
+            }
+            // Mouse Interaction
+            let mouse = { x: null, y: null };
+            window.addEventListener('mousemove', (e) => {
+                mouse.x = e.x;
+                mouse.y = e.y;
             });
+            function animate() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                for (let i = 0; i < particles.length; i++) {
+                    particles[i].update();
+                    particles[i].draw();
+                    // Draw connections
+                    for (let j = i; j < particles.length; j++) {
+                        const dx = particles[i].x - particles[j].x;
+                        const dy = particles[i].y - particles[j].y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance < 150) {
+                            ctx.beginPath();
+                            ctx.strokeStyle = `rgba(255, 0, 60, ${1 - distance / 150})`;
+                            ctx.lineWidth = 0.5;
+                            ctx.moveTo(particles[i].x, particles[i].y);
+                            ctx.lineTo(particles[j].x, particles[j].y);
+                            ctx.stroke();
+                        }
+                    }
+                    // Connect to mouse
+                    if (mouse.x != null) {
+                        const dx = particles[i].x - mouse.x;
+                        const dy = particles[i].y - mouse.y;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        if (distance < 200) {
+                             ctx.beginPath();
+                            ctx.strokeStyle = `rgba(255, 0, 60, ${1 - distance / 200})`;
+                            ctx.lineWidth = 0.5;
+                            ctx.moveTo(particles[i].x, particles[i].y);
+                            ctx.lineTo(mouse.x, mouse.y);
+                            ctx.stroke();
+                        }
+                    }
+                }
+                requestAnimationFrame(animate);
+            }
+            animate();
+            // Resize Handler
+            window.addEventListener('resize', () => {
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+            });
+        }
     </script>
 </body>
 </html>