index.html

<!DOCTYPE html>
<html lang="en">
<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>