index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>90s Dev Portfolio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes scanline {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }
        @keyframes flicker {
            0% { opacity: 0.9; }
            80% { opacity: 0.9; }
            82% { opacity: 0.7; }
            83% { opacity: 0.9; }
            85% { opacity: 0.8; }
            100% { opacity: 0.9; }
        }
        .crt-effect {
            background-image: 
                linear-gradient(to bottom, rgba(0,255,255,0.03) 1px, transparent 1px),
                linear-gradient(to right, rgba(255,0,255,0.03) 1px, transparent 1px);
            background-size: 100% 3px, 4px 100%;
            position: relative;
            overflow: hidden;
        }
        .crt-effect::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                rgba(18, 16, 16, 0) 50%, 
                rgba(0, 0, 0, 0.25) 50%
            );
            background-size: 100% 4px;
            z-index: 2;
            pointer-events: none;
        }
        .crt-effect::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.05);
            opacity: 0;
            z-index: 2;
            pointer-events: none;
            animation: flicker 0.15s infinite;
        }
        .scanline {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0),
                rgba(255, 255, 255, 0.05),
                rgba(255, 255, 255, 0)
            );
            z-index: 3;
            animation: scanline 6s linear infinite;
            pointer-events: none;
        }
        .neon-text {
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
        }
        .neon-pink {
            text-shadow: 0 0 10px #fff, 0 0 20px #ff69b4, 0 0 30px #ff69b4;
        }
        .neon-blue {
            text-shadow: 0 0 10px #fff, 0 0 20px #00ffff, 0 0 30px #00ffff;
        }
        .neon-purple {
            text-shadow: 0 0 10px #fff, 0 0 20px #9370db, 0 0 30px #9370db;
        }
        .bg-grid {
            background-image: 
                linear-gradient(to right, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
        }
    </style>
</head>
<body class="bg-black text-green-400 font-mono crt-effect bg-grid" style="background-color: #0f0f1a;">
    <div class="scanline"></div>
    
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- Title/Header -->
        <header class="mb-12 text-center">
            <div class="inline-block transform -rotate-3 border-4 border-pink-500 p-4 mb-4">
                <h1 class="text-6xl font-bold neon-text text-pink-500">DEV_P0RTF0L1O.EXE</h1>
            </div>
            <div class="flex justify-center space-x-8 mt-6">
                <div class="w-16 h-16 rounded-full bg-purple-500 animate-pulse"></div>
                <div class="w-16 h-16 rounded-full bg-blue-500 animate-pulse" style="animation-delay: 0.2s"></div>
                <div class="w-16 h-16 rounded-full bg-pink-500 animate-pulse" style="animation-delay: 0.4s"></div>
            </div>
        </header>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- About Section -->
            <div class="md:col-span-2 border-4 border-blue-400 p-6 bg-black bg-opacity-80 transform rotate-1">
                <h2 class="text-3xl font-bold mb-4 neon-blue underline">/usr/bin/about_me</h2>
                <div class="space-y-4 text-lg">
                    <p>> HELLO_WORLD! I'm <span class="text-pink-500 font-bold">CYBER_DEV</span>, a 90s-inspired full-stack developer.</p>
                    <p>> Specializing in <span class="neon-purple">retro-futuristic web experiences</span> and <span class="neon-blue">hacking the mainframe</span>.</p>
                    <p>> Current tech stack includes:</p>
                    <ul class="list-disc pl-8 space-y-2">
                        <li>HTML 3.2 - CSS 1.0 - JavaScript ES1</li>
                        <li>Perl - PHP 3.0 - SQL 92</li>
                        <li>Web 1.0 Principles</li>
                    </ul>
                    <div class="mt-6 p-4 border-2 border-dashed border-yellow-400">
                        <p class="text-yellow-400 blinking">> SYSTEM_ALERT: NEW_PROJECT_AVAILABLE</p>
                        <button class="mt-2 px-4 py-2 bg-pink-600 hover:bg-pink-700 text-white font-bold transform hover:scale-105 transition-all duration-200">
                            VIEW_PROJECTS [ALT+P]
                        </button>
                    </div>
                </div>
            </div>

            <!-- Pixel Avatar -->
            <div class="border-4 border-green-400 p-2 bg-black transform -rotate-1 flex items-center justify-center">
                <div class="p-4" style="background-color: #000">
                    <div class="grid grid-cols-8 gap-1">
                        <!-- Pixel art face - 8x8 grid -->
                        <div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-black"></div>
                        <div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-black"></div>
                        <div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-purple-700"></div>
                        <div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-purple-700"></div>
                        <div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-purple-700"></div>
                        <div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-white"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-pink-400"></div><div class="w-6 h-6 bg-purple-700"></div>
                        <div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-purple-700"></div><div class="w-6 h-6 bg-black"></div>
                        <div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-blue-400"></div><div class="w-6 h-6 bg-black"></div><div class="w-6 h-6 bg-black"></div>
                    </div>
                </div>
            </div>

            <!-- Skills Section -->
            <div class="border-4 border-purple-500 p-6 bg-black bg-opacity-80 transform -rotate-2">
                <h2 class="text-3xl font-bold mb-4 neon-purple underline">/sys/skills.log</h2>
                <div class="mb-4">
                    <h3 class="text-xl text-pink-500 mb-2">> FRONTEND_SKILLS</h3>
                    <div class="grid grid-cols-2 gap-2 mb-4">
                        <div class="flex items-center">
                            <i class="fas fa-square mr-2 text-blue-400"></i>
                            <span>HTML 3.2</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-square mr-2 text-blue-400"></i>
                            <span>CSS 1.0</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-square mr-2 text-blue-400"></i>
                            <span>JavaScript 1.0</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-square mr-2 text-blue-400"></i>
                            <span>Marquee Tag</span>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl text-pink-500 mb-2">> BACKEND_SKILLS</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div class="flex items-center">
                            <i class="fas fa-circle mr-2 text-green-400"></i>
                            <span>Perl CGI</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-circle mr-2 text-green-400"></i>
                            <span>MySQL</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-circle mr-2 text-green-400"></i>
                            <span>PHP 3.0</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-circle mr-2 text-green-400"></i>
                            <span>Apache</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Projects Section -->
            <div class="md:col-span-2 border-4 border-yellow-400 p-6 bg-black bg-opacity-80 transform rotate-1">
                <h2 class="text-3xl font-bold mb-4 neon-text text-yellow-400 underline">/var/www/projects</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Project 1 -->
                    <div class="border-2 border-cyan-400 p-4 hover:border-pink-500 transition-all duration-300">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold text-cyan-400">> AOL_PROFILE_BUILDER</h3>
                            <span class="text-xs bg-yellow-500 text-black px-2 py-1">1997</span>
                        </div>
                        <p class="mb-2">Custom AOL profile pages with MIDI background music and visitor counters.</p>
                        <div class="flex space-x-2">
                            <span class="text-xs bg-purple-500 px-2 py-1">HTML 3.2</span>
                            <span class="text-xs bg-blue-500 px-2 py-1">JavaScript</span>
                        </div>
                    </div>
                    
                    <!-- Project 2 -->
                    <div class="border-2 border-pink-400 p-4 hover:border-cyan-500 transition-all duration-300">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold text-pink-400">> UNDER_CONSTRUCTION</h3>
                            <span class="text-xs bg-yellow-500 text-black px-2 py-1">1998</span>
                        </div>
                        <p class="mb-2">The most advanced "Under Construction" gif generator on the web.</p>
                        <div class="flex space-x-2">
                            <span class="text-xs bg-green-500 px-2 py-1">GIF89a</span>
                            <span class="text-xs bg-red-500 px-2 py-1">Animated</span>
                        </div>
                    </div>
                    
                    <!-- Project 3 -->
                    <div class="border-2 border-green-400 p-4 hover:border-purple-500 transition-all duration-300">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold text-green-400">> WEBRING_MANAGER</h3>
                            <span class="text-xs bg-yellow-500 text-black px-2 py-1">1999</span>
                        </div>
                        <p class="mb-2">Automated webring navigation system with Next/Previous buttons.</p>
                        <div class="flex space-x-2">
                            <span class="text-xs bg-cyan-500 px-2 py-1">Perl</span>
                            <span class="text-xs bg-yellow-500 px-2 py-1">SSI</span>
                        </div>
                    </div>
                    
                    <!-- Project 4 -->
                    <div class="border-2 border-purple-400 p-4 hover:border-yellow-500 transition-all duration-300">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold text-purple-400">> GUESTBOOK_PRO</h3>
                            <span class="text-xs bg-yellow-500 text-black px-2 py-1">2000</span>
                        </div>
                        <p class="mb-2">Advanced guestbook with ASCII art signatures and GeoCities integration.</p>
                        <div class="flex space-x-2">
                            <span class="text-xs bg-blue-500 px-2 py-1">PHP</span>
                            <span class="text-xs bg-pink-500 px-2 py-1">MySQL</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Section -->
            <div class="border-4 border-red-500 p-6 bg-black bg-opacity-80 transform rotate-2">
                <h2 class="text-3xl font-bold mb-4 neon-text text-red-500 underline">/contacts.txt</h2>
                <p class="mb-6">> AVAILABLE_FOR_HIRING: TRUE</p>
                
                <div class="space-y-4">
                    <a href="#" class="block p-3 border-2 border-pink-500 hover:bg-pink-900 hover:border-pink-300 transition-all">
                        <i class="fas fa-envelope mr-2 text-pink-300"></i>
                        <span>cyber_dev@aol.com</span>
                    </a>
                    
                    <a href="#" class="block p-3 border-2 border-blue-500 hover:bg-blue-900 hover:border-blue-300 transition-all">
                        <i class="fab fa-geocities mr-2 text-blue-300"></i>
                        <span>geocities.com/cyber_dev_zone</span>
                    </a>
                    
                    <a href="#" class="block p-3 border-2 border-green-500 hover:bg-green-900 hover:border-green-300 transition-all">
                        <i class="fas fa-phone mr-2 text-green-300"></i>
                        <span>555-0100 (ICQ: 1234567)</span>
                    </a>
                </div>
                
                <div class="mt-8 p-4 bg-gray-900 border-2 border-dashed border-yellow-400">
                    <p class="text-center mb-2">_</p>
                    <p class="text-center">COPYRIGHT © 1999 CYBER_DEV CORP</p>
                    <p class="text-center text-sm text-gray-500 mt-2">BEST VIEWED WITH NETSCAPE NAVIGATOR</p>
                    <p class="text-center text-xs text-gray-600 mt-1">PAGE LOADED IN 15 SECONDS</p>
                </div>
            </div>
        </div>

        <!-- Marquee Footer -->
        <div class="mt-12 overflow-hidden">
            <div class="marquee py-2 bg-gradient-to-r from-pink-600 via-purple-600 to-blue-600 inline-block whitespace-nowrap">
                <span class="text-white mx-4">• UNDER CONSTRUCTION •</span>
                <span class="text-white mx-4">• THIS SITE WORKS BEST IN 640x480 •</span>
                <span class="text-white mx-4">• VISITOR NUMBER: <span id="counter">000001</span> •</span>
                <span class="text-white mx-4">• LAST UPDATED: AUGUST 1998 •</span>
            </div>
        </div>
    </div>

    <script>
        // Make hit counter increase when page loads
        document.addEventListener('DOMContentLoaded', function() {
            const counter = document.getElementById('counter');
            let count = parseInt(counter.textContent);
            
            // Animate counter
            const interval = setInterval(() => {
                count++;
                counter.textContent = count.toString().padStart(6, '0');
                if (count >= 102910) clearInterval(interval); // Stop at 102910 like old counters
            }, 100);
            
            // Make some text blink
            const elements = document.querySelectorAll('.blinking');
            elements.forEach(el => {
                setInterval(() => {
                    el.style.visibility = (el.style.visibility == 'hidden' ? '' : 'hidden');
                }, 700);
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
</html>