index.html

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Rasyid Rayhan Novandy - IT Student at UGM, Cybersecurity Enthusiast, and Hackathon Organizer." />
    <title>Rasyid Rayhan Novandy // Portfolio</title>

    <!-- Google Fonts -->
    <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=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />

    <!-- Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        void: '#050A30', surface: '#0D1547', card: '#0A1628',
                        pulse: '#00FFFF', glow: '#00D4FF', signal: '#E2E8F0',
                        muted: '#8892B0', wire: '#1A2F5C',
                    },
                    fontFamily: {
                        mono: ['"Fira Code"', 'Courier New', 'monospace'],
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        };
    </script>

    <!-- Custom Styles (Disempurnakan) -->
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { background-color: #050A30; color: #E2E8F0; font-family: 'Inter', sans-serif; overflow-x: hidden; }
        
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: #050A30; }
        ::-webkit-scrollbar-thumb { background: #1A2F5C; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,255,0.35); }

        #net-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.35; }
        .scan-line { position: fixed; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, #00FFFF 50%, transparent 100%); animation: scan 10s linear infinite; z-index: 1; pointer-events: none; opacity: 0.15; }
        @keyframes scan { 0% { top: -1px; } 100% { top: 100vh; } }

        .text-cyber { color: #00FFFF; text-shadow: 0 0 10px rgba(0,255,255,0.55); }
        .text-glow { color: #00D4FF; text-shadow: 0 0 8px rgba(0,212,255,0.45); }

        .cursor { display: inline-block; width: 2px; height: 1.1em; background: #00FFFF; vertical-align: middle; margin-left: 3px; animation: blink 1s step-end infinite; }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

        .cyber-card { background: #0D1547; border: 1px solid #1A2F5C; border-radius: 3px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
        .cyber-card:hover { border-color: rgba(0,255,255,0.4); box-shadow: 0 0 18px rgba(0,255,255,0.1); }
        
        .profile-img-container { position: relative; border: 2px solid #1A2F5C; overflow: hidden; border-radius: 4px; }
        .profile-img-container::after { content: ''; position: absolute; inset: 0; background: rgba(0, 255, 255, 0.1); mix-blend-mode: overlay; transition: background 0.3s ease; }
        .profile-img-container:hover::after { background: transparent; }
        .profile-img-container:hover { border-color: #00FFFF; box-shadow: 0 0 15px rgba(0,255,255,0.3); }

        .sec-title { font-family: 'Fira Code', monospace; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: #E2E8F0; }
        .sec-rule { width: 52px; height: 2px; background: linear-gradient(90deg, #00FFFF, transparent); margin-top: 0.65rem; }
        
        .stag { display: inline-block; font-family: 'Fira Code', monospace; font-size: 0.7rem; padding: 0.28rem 0.65rem; border: 1px solid #1A2F5C; border-radius: 2px; color: #8892B0; background: #0A1628; transition: all 0.2s; }
        .stag:hover { border-color: rgba(0,255,255,0.5); color: #00FFFF; background: rgba(0,255,255,0.06); }

        .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
        .reveal.visible { opacity: 1; transform: translateY(0); }
    </style>
</head>
<body class="bg-void text-signal min-h-screen">
    <canvas id="net-canvas" aria-hidden="true"></canvas>
    <div class="scan-line" aria-hidden="true"></div>

    <!-- HERO SECTION -->
    <section id="hero" class="relative min-h-screen flex items-center justify-center px-6 pt-24 pb-16">
        <div class="relative z-10 max-w-4xl mx-auto w-full">
            <p class="font-mono text-xs text-wire mb-7">// initializing profile <span class="text-pulse">CONNECTED</span></p>
            <h1 class="font-mono font-bold leading-tight mb-3" style="font-size: clamp(2.2rem, 6vw, 4.5rem);">
                <span id="typed-name"></span><span class="cursor" id="cursor-a"></span>
            </h1>
            <p class="font-mono text-xl md:text-2xl mb-7 text-cyber min-h-[2rem]">
                <span id="typed-role"></span><span class="cursor hidden" id="cursor-b"></span>
            </p>
            <p class="text-muted text-base md:text-lg max-w-2xl leading-relaxed mb-10 opacity-0 transition-opacity duration-700" id="hero-body">
                Information Technology Student at Universitas Gadjah Mada with a deep focus on <span class="text-glow">network protection</span> and <span class="text-glow">API security</span>. I build systems from the ground up and dissect them to understand their vulnerabilities.
            </p>
            <div class="flex gap-5 font-mono text-xs text-muted opacity-0 transition-opacity duration-700" id="hero-status">
                <span><span class="text-pulse">●</span> Ponorogo - Yogyakarta</span>
                <span><span class="text-green-400">●</span> System Online</span>
            </div>
        </div>
    </section>

    <!-- ABOUT SECTION -->
    <section id="about" class="relative z-10 py-24 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="reveal mb-12">
                <p class="font-mono text-xs text-pulse uppercase mb-1">/about_me</p>
                <h2 class="sec-title">About & Education</h2>
                <div class="sec-rule"></div>
            </div>
            <div class="grid md:grid-cols-12 gap-10 items-start">
                <div class="md:col-span-4 space-y-6 reveal">
                    <div class="profile-img-container aspect-square bg-card flex items-center justify-center">
                        <img src="IMG_20240910_151356.jpg" alt="Foto Rasyid" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500">
                    </div>
                    <div class="cyber-card p-4">
                        <p class="font-mono text-xs text-pulse mb-2">Current Operation(s)</p>
                        <ul class="font-mono text-xs text-muted space-y-2">
                            <li>> Building ML logic (KNN) 100% from scratch via Python & NumPy</li>
                            <li>> Developing Reog Rover Quest</li>
                        </ul>
                    </div>
                </div>
                
                <div class="md:col-span-8 space-y-6">
                    <div class="cyber-card p-6 reveal">
                        <p class="text-muted leading-relaxed mb-3">
                            Analytical problem solver who operates with a <span class="text-pulse">security-first mindset</span>. Whether I am leading the technical division for UGM's national-level Hackathon or diving deep into network protocols, my goal is to understand the core of tech infrastructure.
                        </p>
                        <p class="text-muted leading-relaxed mb-3">
                            Beyond event management, my true passion lies in the technical trenches. I am currently applying to join the <span class="text-glow">Night Login Cyber Security Community (NCSC)</span> to push my skills in offensive and defensive cybersecurity to the next level.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SKILLS SECTION -->
    <section id="skills" class="relative z-10 py-24 px-6 bg-[#070e3b]">
        <div class="max-w-6xl mx-auto">
            <div class="reveal mb-12">
                <p class="font-mono text-xs text-pulse uppercase mb-1">/skills</p>
                <h2 class="sec-title">Tech Stack & Capabilities</h2>
                <div class="sec-rule"></div>
            </div>
            <div class="cyber-card p-6 reveal">
                <div class="space-y-5">
                    <div>
                        <p class="font-mono text-xs text-glow uppercase tracking-wider mb-2">Cybersecurity & Network</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="stag">Network Protection</span>
                            <span class="stag">API Security</span>
                            <span class="stag">Web Exploitation</span>
                            <span class="stag">Wireshark</span>
                        </div>
                    </div>
                    <div>
                        <p class="font-mono text-xs text-glow uppercase tracking-wider mb-2">Software & Environments</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="stag">Python</span>
                            <span class="stag">NumPy</span>
                            <span class="stag">Machine Learning</span>
                            <span class="stag">Linux Mint</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Particle Background Logic
        (function () {
            const canvas = document.getElementById('net-canvas');
            const ctx = canvas.getContext('2d');
            let width, height; const nodes = [];
            function resize() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; }
            window.addEventListener('resize', resize); resize();
            for(let i=0; i<40; i++) nodes.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5 });
            function draw() {
                ctx.clearRect(0, 0, width, height); ctx.fillStyle = '#00D4FF';
                for(let i=0; i<nodes.length; i++) {
                    let p1 = nodes[i]; p1.x += p1.vx; p1.y += p1.vy;
                    if(p1.x < 0 || p1.x > width) p1.vx *= -1; if(p1.y < 0 || p1.y > height) p1.vy *= -1;
                    ctx.beginPath(); ctx.arc(p1.x, p1.y, 1.5, 0, Math.PI * 2); ctx.fill();
                    for(let j=i+1; j<nodes.length; j++) {
                        let p2 = nodes[j]; let dist = Math.hypot(p1.x - p2.x, p1.y - p2.y);
                        if(dist < 120) { ctx.beginPath(); ctx.strokeStyle = `rgba(0, 212, 255, ${1-dist/120})`; ctx.lineWidth = 0.5; ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); }
                    }
                } requestAnimationFrame(draw);
            } draw();
        })();

        // Typewriter Effect
        window.addEventListener('load', () => {
            const elName = document.getElementById('typed-name'); const elRole = document.getElementById('typed-role');
            const curA = document.getElementById('cursor-a'); const curB = document.getElementById('cursor-b');
            function typeText(el, text, speed, cb) {
                let i = 0; let int = setInterval(() => { el.textContent += text.charAt(i); i++; if (i === text.length) { clearInterval(int); if (cb) cb(); } }, speed);
            }
            setTimeout(() => {
                typeText(elName, 'Rasyid Rayhan Novandy', 60, () => {
                    curA.classList.add('hidden'); curB.classList.remove('hidden');
                    setTimeout(() => {
                        typeText(elRole, '[ Cybersecurity Enthusiast ]', 45, () => {
                            curB.classList.add('hidden');
                            document.getElementById('hero-body').style.opacity = '1';
                            document.getElementById('hero-status').style.opacity = '1';
                        });
                    }, 300);
                });
            }, 500);
        });

        // Scroll Reveal
        const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); }); }, {threshold: 0.1 });
        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
    </script>
</body>
</html>