<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel - Portfolio</title>
    <style>
        /* Minimized CSS */
        body{font-family:'Arial',sans-serif;margin:0;padding:0;background:linear-gradient(120deg,#141E30,#243B55);color:#fff;overflow-x:hidden;position:relative;animation:backgroundFade 5s infinite alternate} 
        @keyframes backgroundFade{0%{background:linear-gradient(120deg,#141E30,#243B55)}100%{background:linear-gradient(120deg,#004d7a,#006994)}} 
        body::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,0,150,0.2),rgba(0,255,234,0.2),transparent);animation:backgroundLED 10s infinite linear;z-index:-1} 
        @keyframes backgroundLED{0%{transform:translate(0,0)}50%{transform:translate(50px,50px)}100%{transform:translate(0,0)}} 
        .nav{background:rgba(0,0,0,0.8);padding:15px;position:sticky;top:0;width:100%;z-index:100;box-shadow:0 4px 15px rgba(0,0,0,0.5);border-bottom:3px solid rgba(255,152,0,0.5)} 
        .nav a{color:#00e676;margin:0 15px;text-decoration:none;font-weight:bold;font-size:18px;position:relative;transition:color 0.3s,transform 0.3s,text-shadow 0.3s} 
        .nav a::before{content:'';position:absolute;bottom:-3px;left:50%;width:0;height:3px;background:#ff9800;transition:width 0.3s,left 0.3s} 
        .nav a:hover::before{width:100%;left:0} 
        .nav a:hover{color:#ff9800;transform:scale(1.1);text-shadow:0 0 10px rgba(255,152,0,1)} 
        .btn{display:inline-block;padding:15px 40px;font-size:18px;color:#fff;background:linear-gradient(45deg,#ff9800,#ff5722);border:none;border-radius:50px;cursor:pointer;margin:10px 5px;position:relative;overflow:hidden;box-shadow:0 0 15px rgba(255,152,0,0.6);transition:all 0.3s ease} 
        .btn::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,152,0,0.4),transparent);animation:buttonLED 5s infinite linear;z-index:-1} 
        .btn:hover{transform:translateY(-5px);box-shadow:0 0 25px rgba(255,152,0,1)} 
        .btn:active{transform:scale(0.98);box-shadow:0 0 15px rgba(255,152,0,1)} 
        @keyframes buttonLED{0%{transform:translate(0,0)}50%{transform:translate(50px,50px)}100%{transform:translate(0,0)}} 
        section{margin:100px auto;padding:40px;border-radius:20px;background:rgba(0,0,0,0.7);border:3px solid rgba(255,152,0,0.6);box-shadow:0 0 15px rgba(255,152,0,0.6);max-width:1100px;animation:fadeIn 2s forwards} 
        @keyframes fadeIn{0%{opacity:0;transform:translateY(50px)}100%{opacity:1;transform:translateY(0)}} 
        footer{text-align:center;padding:20px;background:rgba(0,0,0,0.9);color:#ff9800;border-top:3px solid rgba(255,152,0,0.5)}
    </style>
</head>
<body>
    <div class="nav">
        <a href="#about">About Me</a>
        <a href="#skills">Skills</a>
        <a href="#projects">Projects</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
    </div>
    <div class="container">
        <h1>Welcome to My Portfolio</h1>
        <h2>Excel Darizq - IT Enthusiast</h2>
        <section id="about">
            <h2>About Me</h2>
            <div class="card">
                <p>My name is Excel Darizq. I come from Cengkareng, West Jakarta. I am 16 years old and currently in grade 11, studying Computer Network Engineering (TKJ) at SMK Yadika 3 Tegal Alur.</p>
                <p>I am a beginner with a strong interest and determination to excel in the field of IT...</p>
            </div>
        </section>
        <section id="skills">
            <h2>Skills</h2>
            <div class="card">
                <ul>
                    <li>Networking: LAN setup, troubleshooting, server configuration.</li>
                    <li>Programming: HTML, CSS, Python, and basic JavaScript.</li>
                    <li>Excel Mastery: VBA automation and data visualization.</li>
                    <li>Cybersecurity: Basic DDoS prevention and system protection.</li>
                    <li>Web Development: Responsive websites with modern designs.</li>
                </ul>
            </div>
        </section>
        <section id="projects">
            <h2>Projects</h2>
            <div class="card">
                <ul>
                    <li>Automated Attendance System using Excel VBA.</li>
                    <li>School Network Simulation for efficient resource management.</li>
                    <li>Portfolio Website with animations and interactivity.</li>
                    <li>Cybersecurity Case Study: DDoS attack simulations.</li>
                    <li>Games:⬇️swipe down to find the play game feature ⬇️</li>
                </ul>
            </div>
        </section>
        <section id="services">
            <h2>Services</h2>
            <div class="card">
                <p>I offer the following IT services:</p>
                <ul>
                    <li>Web Development and Design.</li>
                    <li>Excel Automation and Custom Macros.</li>
                    <li>Network Configuration and Troubleshooting.</li>
                    <li>Basic IT Support and System Setup.</li>
                </ul>
            </div>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <div class="card">
                <p><strong>Phone:</strong> 0895326218661</p>
                <p><strong>Email:</strong> <a href="mailto:excelrizky8@gmail.com" style="color: #4caf50;">excelrizky8@gmail.com</a></p>
                <a href="https://wa.me/62895326218661?text=Hallo Broo" class="btn">WhatsApp Me</a>
                <a href="mailto:excelrizky8@gmail.com" class="btn">Email Me</a>
            </div>
        </section>
        <div style="text-align: center; margin-top: 100px;">
            <a href="gamef.html" class="btn">Play game</a>
        </div>
    </div>
    <footer>© 2024-2025 Excel Darizq | Beginner Website Project</footer>

    <!-- Script Keamanan -->
    <script>
        document.addEventListener('contextmenu', (e) => e.preventDefault());
        document.addEventListener('keydown', (e) => {
            if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'C'))) {
                e.preventDefault();
                alert('Inspect Element is disabled!');
            }
        });
        document.addEventListener('copy', (e) => e.preventDefault());
        document.addEventListener('cut', (e) => e.preventDefault());
        document.addEventListener('dragstart', (e) => e.preventDefault());
        document.addEventListener('drop', (e) => e.preventDefault());
        const observer = new MutationObserver(() => {
            if (document.body.innerHTML !== originalHTML) {
                document.body.innerHTML = "<h1 style='color:red;'>Tampering Detected!</h1>";
                setTimeout(() => window.close(), 2000);
            }
        });
        const originalHTML = document.body.innerHTML;
        observer.observe(document.body, { childList: true,.  subtree: true });
    </script>
</body>
</html>
