<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>instagram : mmm404z</title>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                fontFamily: {
                    sans: ['Space Grotesk', 'sans-serif'],
                },
                extend: {
                    colors: {
                        github: {
                            dark: '#000000',
                            darker: '#000000',
                            border: '#1a1a1a',
                            muted: '#666666',
                            accent: '#ff4d4d',
                            success: '#1a1a1a'
                        },
                        light: {
                            bg: '#000000',
                            darker: '#0a0a0a',
                            border: '#1a1a1a',
                            muted: '#666666',
                            accent: '#ff4d4d',
                            success: '#1a1a1a'
                        }
                    },
                    animation: {
                        'fade-in': 'fade-in 0.6s ease-out',
                        'slide-up': 'slide-up 0.6s ease-out',
                        'slide-in': 'slide-in 0.6s ease-out',
                        'scale': 'scale 0.3s ease-out',
                        'float': 'float 4s ease-in-out infinite',
                        'pulse': 'pulse 2s ease-in-out infinite',
                        'gradient': 'gradient 4s ease infinite'
                    },
                    keyframes: {
                        'fade-in': {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        'slide-up': {
                            '0%': { transform: 'translateY(10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        },
                        'slide-in': {
                            '0%': { transform: 'translateX(-10px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' }
                        },
                        'scale': {
                            '0%': { transform: 'scale(0.98)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' }
                        },
                        'float': {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-5px)' }
                        },
                        'pulse': {
                            '0%, 100%': { opacity: '1' },
                            '50%': { opacity: '0.7' }
                        },
                        'gradient': {
                            '0%': { backgroundPosition: '0% 50%' },
                            '50%': { backgroundPosition: '100% 50%' },
                            '100%': { backgroundPosition: '0% 50%' }
                        }
                    },
                    backgroundImage: {
                        'gradient-animation': 'linear-gradient(90deg, #ff4d4d, #9c27b0, #2196f3, #00bcd4, #ff4d4d)'
                    },
                    backgroundSize: {
                        '200': '200% 100%'
                    }
                }
            }
        }
    </script>
    <style>
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(5px);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .hover-lift {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .hover-lift:hover {
            transform: translateY(-2px);
        }
        .hover-smooth {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .hover-smooth:hover {
            transform: translateY(-1px);
        }
        * {
            transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .theme-toggle {
            position: relative;
            overflow: hidden;
        }
        
        .theme-toggle i {
            display: inline-block;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes ripple {
            from {
                transform: scale(0);
                opacity: 1;
            }
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
    </style>
</head>
<body class="bg-black text-gray-300 min-h-screen overflow-x-hidden selection:bg-red-500/20 selection:text-red-400">
    <!-- Theme Switch -->
    <button class="fixed top-6 right-6 p-3 bg-[#0a0a0a] rounded-xl border border-[#1a1a1a] hover:border-red-500/30 transition-all duration-300 z-50 group animate-fade-in hover-smooth theme-toggle">
        <i class="fas fa-moon text-gray-600 group-hover:text-red-400/70 transition-colors duration-300"></i>
    </button>

    <div class="container max-w-3xl mx-auto px-4 py-8">
        <!-- Profile Card -->
        <div class="bg-[#0a0a0a] border border-[#1a1a1a] rounded-xl overflow-hidden animate-scale">
            <!-- Header -->
            <div class="relative pt-8 text-center">
                <!-- Avatar -->
                <div class="mx-auto p-1 bg-[#0a0a0a] rounded-full border-4 border-[#1a1a1a] group animate-fade-in hover-smooth inline-block">
                    <div class="relative">
                        <img src="https://www.gulfupp.com/do.php?img=82320" 
                             alt="Profile Picture"
                             class="w-32 h-32 rounded-full border-2 border-[#1a1a1a] group-hover:border-red-500/30 transition-all duration-300"
                             loading="lazy">
                        <!-- Status Indicator -->
                        <div class="absolute bottom-2 right-2">
                            <div class="w-4 h-4 bg-purple-500/70 rounded-full border-2 border-black animate-pulse"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="pt-8 px-8 pb-8">
                <!-- Name & Username -->
                <div class="space-y-1 animate-slide-up text-center">
                    <h1 class="text-2xl font-semibold text-white">Casper</h1>
                    <div class="text-gray-600">💻</div>
                    <div class="mt-4 text-gray-500 typing-text animate-fade-in text-base font-light"></div>
                </div>

                <!-- Stats -->
                <div class="flex flex-wrap gap-6 mt-6 text-sm text-gray-500 animate-slide-up justify-center">
                    <div class="flex items-center gap-2 hover:text-red-400/70 hover-smooth">
                        <i class="far fa-user"></i>
                        <span>Developer</span>
                    </div>
                    <div class="flex items-center gap-2 hover:text-red-400/70 hover-smooth">
                        <i class="far fa-building"></i>
                        <span>Creator</span>
                    </div>
                    <div class="flex items-center gap-2 hover:text-red-400/70 hover-smooth">
                        <i class="fa-solid fa-flag"></i>
                        <span>Saudi Arabia</span>
                    </div>
                </div>

                <!-- Skills -->
                <div class="mt-8 animate-slide-up">
                    <h2 class="text-lg font-semibold mb-4 text-white hover:text-red-400/70 transition-colors duration-300">Skills</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Frontend -->
                        <div class="space-y-3">
                            <h3 class="text-sm font-medium text-gray-500">Frontend</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-html5 mr-1"></i>HTML/CSS
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-js mr-1"></i>JavaScript
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-react mr-1"></i>React
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-vuejs mr-1"></i>Vue.js
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-sass mr-1"></i>Sass
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-bootstrap mr-1"></i>Bootstrap
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-css3 mr-1"></i>Tailwind
                                </span>
                            </div>
                        </div>

                        <!-- Backend -->
                        <div class="space-y-3">
                            <h3 class="text-sm font-medium text-gray-500">Backend</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-node-js mr-1"></i>Node.js
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-microsoft mr-1"></i>C#
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-cuttlefish mr-1"></i>C++
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-cuttlefish mr-1"></i>C
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fas fa-database mr-1"></i>SQL
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-python mr-1"></i>Python
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-php mr-1"></i>PHP
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fas fa-server mr-1"></i>MongoDB
                                </span>
                                <span class="px-3 py-1 text-xs rounded-full bg-[#0a0a0a] border border-[#1a1a1a] text-gray-400 hover:border-red-500/20 hover:text-red-400/70 transition-all duration-300 cursor-default hover-smooth">
                                    <i class="fab fa-java mr-1"></i>Java
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Links -->
                <div class="mt-8 space-y-3 animate-slide-up">
                    <a href="https://github.com/Saufb" 
                       class="group flex items-center gap-3 p-3 rounded-lg bg-[#0a0a0a] border border-[#1a1a1a] hover:border-red-500/20 hover:translate-x-1 transition-all duration-300 hover-smooth"
                       target="_blank" 
                       rel="noopener noreferrer">
                        <i class="fab fa-github text-xl text-gray-500 group-hover:text-red-400/70 transition-colors duration-300"></i>
                        <div class="flex-1">
                            <div class="text-sm font-medium group-hover:text-red-400/70 transition-colors">GitHub</div>
                            <div class="text-xs text-gray-600">@Saufb</div>
                        </div>
                        <i class="fas fa-arrow-right text-gray-600 group-hover:text-red-400/70 transition-all"></i>
                    </a>

                    <a href="https://t.me/Cyber_HACKP" 
                       class="group flex items-center gap-3 p-3 rounded-lg bg-[#0a0a0a] border border-[#1a1a1a] hover:border-red-500/20 hover:translate-x-1 transition-all duration-300 hover-smooth"
                       target="_blank" 
                       rel="noopener noreferrer">
                        <i class="fab fa-telegram text-xl text-gray-500 group-hover:text-red-400/70 transition-colors duration-300"></i>
                        <div class="flex-1">
                            <div class="text-sm font-medium group-hover:text-red-400/70 transition-colors">Telegram</div>
                            <div class="text-xs text-gray-600">@Cyber_HACKP</div>
                        </div>
                        <i class="fas fa-arrow-right text-gray-600 group-hover:text-red-400/70 transition-all"></i>
                    </a>

                    <a href="https://discord.gg/3essExFrbe" 
                       class="group flex items-center gap-3 p-3 rounded-lg bg-[#0a0a0a] border border-[#1a1a1a] hover:border-red-500/20 hover:translate-x-1 transition-all duration-300 hover-smooth"
                       target="_blank" 
                       rel="noopener noreferrer">
                        <i class="fab fa-discord text-xl text-gray-500 group-hover:text-red-400/70 transition-colors duration-300"></i>
                        <div class="flex-1">
                            <div class="text-sm font-medium group-hover:text-red-400/70 transition-colors">Discord</div>
                            <div class="text-xs text-gray-600">Join Community</div>
                        </div>
                        <i class="fas fa-arrow-right text-gray-600 group-hover:text-red-400/70 transition-all"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const themeToggle = document.querySelector('.theme-toggle');
            const themeIcon = themeToggle.querySelector('i');
            const root = document.documentElement;
            let isDark = true;

            // Theme colors
            const themes = {
                dark: {
                    bg: '#000000',
                    cardBg: '#0a0a0a',
                    border: '#1a1a1a',
                    text: '#ffffff',
                    textMuted: '#666666'
                },
                light: {
                    bg: '#ffffff',
                    cardBg: '#f8f8f8',
                    border: '#e0e0e0',
                    text: '#000000',
                    textMuted: '#666666'
                }
            };

            function setTheme(isDark) {
                const theme = isDark ? themes.dark : themes.light;
                
                // Update body classes
                document.body.classList.toggle('bg-black', isDark);
                document.body.classList.toggle('bg-white', !isDark);
                document.body.classList.toggle('text-gray-300', isDark);
                document.body.classList.toggle('text-gray-700', !isDark);

                // Update all card backgrounds
                document.querySelectorAll('[class*="bg-[#0a0a0a]"]').forEach(el => {
                    el.style.backgroundColor = theme.cardBg;
                });

                // Update all borders
                document.querySelectorAll('[class*="border-[#1a1a1a]"]').forEach(el => {
                    el.style.borderColor = theme.border;
                });

                // Update icon
                themeIcon.classList.toggle('fa-moon', isDark);
                themeIcon.classList.toggle('fa-sun', !isDark);

                // Update text colors
                document.querySelectorAll('h1, h2').forEach(el => {
                    el.style.color = theme.text;
                });

                // Update status indicator border
                const statusIndicator = document.querySelector('.animate-pulse');
                if (statusIndicator) {
                    statusIndicator.style.borderColor = theme.bg;
                }
            }

            themeToggle.addEventListener('click', () => {
                isDark = !isDark;
                setTheme(isDark);
            });

            // Set initial theme
            setTheme(isDark);
        });
    </script>

    <script src="script.js"></script>
</body>
</html>