<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <style>
        :root {
            --bg-dark: #06040d;
            --card-bg: #110d21;
            --text-main: #e0dced;
            --neon-cyan: #05d9e8;
            --neon-pink: #ff2a6d;
            --neon-purple: #b026ff;
        }

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            background: radial-gradient(circle at top right, #1a0b2e, var(--bg-dark));
            min-height: 100vh;
            overflow-x: hidden;
        }

        header {
            padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 4vw, 2rem);
            text-align: center;
            animation: fadeIn 1.5s ease-out;
        }

        h1 {
            font-size: clamp(2.2rem, 5vw + 1rem, 4rem);
            text-transform: uppercase;
            color: #fff;
            text-shadow: 0 0 20px var(--neon-cyan);
            margin-bottom: 0.5rem;
            line-height: 1.2;
        }

        .student-name {
            color: var(--neon-pink);
            font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
            font-weight: 300;
            letter-spacing: clamp(1px, 1vw, 3px);
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
        }

        .grid-projects {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
            gap: clamp(1.5rem, 4vw, 2.5rem);
        }

        .project-card {
            background: var(--card-bg);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 15px;
            padding: clamp(1.5rem, 4vw, 2.5rem);
            text-align: center;
            text-decoration: none;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .project-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple));
            opacity: 0;
            transition: opacity 0.4s;
            z-index: 0;
        }

        @media (hover: hover) {
            .project-card:hover {
                transform: translateY(-10px);
                border-color: var(--neon-cyan);
                box-shadow: 0 0 30px rgba(5, 217, 232, 0.2);
            }
            .project-card:hover::before { opacity: 0.05; }
            .project-card:hover .btn-view {
                background: var(--neon-cyan);
                color: #000;
            }
        }

        .project-icon {
            font-size: clamp(2.5rem, 6vw, 3.5rem);
            margin-bottom: clamp(0.5rem, 2vw, 1rem);
            z-index: 1;
        }

        .project-title {
            color: #fff;
            font-size: clamp(1.1rem, 2vw + 0.5rem, 1.3rem);
            font-weight: 500;
            z-index: 1;
            text-transform: capitalize;
            word-break: break-word;
        }

        .btn-view {
            margin-top: clamp(1rem, 3vw, 1.5rem);
            padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(1.2rem, 3vw, 1.8rem);
            border: 1px solid var(--neon-cyan);
            color: var(--neon-cyan);
            border-radius: 30px;
            font-size: clamp(0.8rem, 1.5vw + 0.2rem, 0.9rem);
            font-weight: 500;
            z-index: 1;
            transition: 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        footer { 
            text-align: center; 
            padding: clamp(2rem, 5vw, 4rem); 
            opacity: 0.5; 
            font-size: clamp(0.75rem, 1.5vw, 0.9rem); 
        }
    </style>
</head>
<body>

    <header>
        <p class="student-name">Portafolio Estudiantil</p>
        <h1>ZAPATA BRANDON</h1>
    </header>

    <div class="container">
        <div class="grid-projects">
            <?php
            $dir = ".";
            $files = scandir($dir);
            $allowed_ext = array('html', 'php', 'htm');

            foreach ($files as $file) {
                if ($file == '.' || $file == '..' || $file == 'index.php' || $file == 'cgi-bin' || $file == '.well-known') continue;

                $path = $dir . '/' . $file;
                $is_dir = is_dir($path);
                $ext = pathinfo($file, PATHINFO_EXTENSION);

                if ($is_dir || (isset($ext) && in_array($ext, $allowed_ext))) {
                    $display_name = $is_dir ? $file : pathinfo($file, PATHINFO_FILENAME);
                    $icon = $is_dir ? "📁" : "📄";
                    
                    echo "
                    <a href='$file' class='project-card'>
                        <div class='project-icon'>$icon</div>
                        <div class='project-title'>$display_name</div>
                        <div class='btn-view'>Abrir Recurso</div>
                    </a>";
                }
            }
            ?>
        </div>
    </div>

    <footer>
        Diseño de Recursos Multimedia
    </footer>

</body>
</html>