暗黑风格简历，单页面前端

一言准备中...
简单演示图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜鬼原创简历Demo</title>
    <style>
        :root {
            --hacker-green: #0f0;
            --matrix-bg: rgba(15, 255, 15, 0.03);
            --container-width: 1200px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Consolas','微软雅黑', monospace;
        }

        body {
            min-height: 100vh;
            background: #000;
            color: var(--hacker-green);
            position: relative;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* 六边形网格背景 */
        .hex-grid {
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-image: 
                linear-gradient(var(--matrix-bg) 2px, transparent 2px),
                linear-gradient(90deg, var(--matrix-bg) 2px, transparent 2px),
                linear-gradient(var(--matrix-bg) 1px, transparent 1px),
                linear-gradient(90deg, var(--matrix-bg) 1px, transparent 1px);
            background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
            background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
            z-index: 0;
            pointer-events: none;
        }

        /* 美化数据流 */
        .data-stream {
            position: fixed;
            top: 10%;
            width: 100%;
            white-space: nowrap;
            color: var(--hacker-green);
            font-size: 14px;
            opacity: 0.3;
            pointer-events: none;
            z-index: 2;
            filter: drop-shadow(0 0 5px var(--hacker-green));
        }

        .stream-line {
            position: absolute;
            animation: dataStream 25s linear infinite;
            padding: 5px 0;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(15, 255, 15, 0.1) 50%, 
                transparent 100%);
        }

        @keyframes dataStream {
            0% { transform: translateX(100vw); }
            100% { transform: translateX(-100%); }
        }

        /* 3D卡片容器 */
        .resume {
            position: relative;
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 40px 20px;
            z-index: 1;
        }

        .card-3d {
            background: rgba(0, 30, 0, 0.9);
            border: 1px solid var(--hacker-green);
            border-radius: 5px;
            padding: 25px;
            margin: 15px 0;
            transform: perspective(1000px) rotateY(var(--ry)) rotateX(var(--rx));
            transition: 0.3s;
            box-shadow: 0 0 15px #0f03;
        }

        .card-3d:hover {
            box-shadow: 0 0 30px var(--hacker-green);
        }

        /* 故障文字效果 */
        .neon-glitch {
            font-size: 3em;
            text-shadow: 0 0 10px var(--hacker-green);
            animation: glitch 2s infinite;
            margin: 20px 0;
        }

        @keyframes glitch {
            0% { text-shadow: 2px 2px #ff00ff, -2px -2px #00ffff; }
            50% { text-shadow: -3px 1px #ff00ff, 3px -1px #00ffff; }
            100% { text-shadow: 2px 2px #ff00ff, -2px -2px #00ffff; }
        }

        /* 响应式布局 */
        .cyber-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

        /* 3D技能立方体 */
        .skill-cube {
            transform-style: preserve-3d;
            animation: cubeRotate 20s infinite linear;
            margin: 50px auto;
            width: 150px;
            height: 150px;
        }

        .skill-cube .face {
            position: absolute;
            width: 150px;
            height: 150px;
            background: rgba(0, 50, 0, 0.9);
            border: 2px solid var(--hacker-green);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2em;
        }

        /* 立方体各面定位 */
        .front { transform: translateZ(75px); }
        .back { transform: translateZ(-75px) rotateY(180deg); }
        .right { transform: rotateY(90deg) translateZ(75px); }
        .left { transform: rotateY(-90deg) translateZ(75px); }
        .top { transform: rotateX(90deg) translateZ(75px); }
        .bottom { transform: rotateX(-90deg) translateZ(75px); }

        @keyframes cubeRotate {
            from { transform: rotateX(0) rotateY(0); }
            to { transform: rotateX(360deg) rotateY(360deg); }
        }

        /* 响应式优化 */
        @media (max-width: 768px) {
            .resume {
                padding: 20px 10px;
            }
            .neon-glitch {
                font-size: 2em;
            }
            .skill-cube {
                width: 100px;
                height: 100px;
            }
            .skill-cube .face {
                width: 100px;
                height: 100px;
                font-size: 0.9em;
            }
        }
    </style>
</head>
<body>
    <div class="hex-grid"></div>

    <!-- 美化数据流 -->
    <div class="data-stream">
        <div class="stream-line" id="stream1"></div>
        <div class="stream-line" id="stream2" style="top:15%;animation-delay:-5s"></div>
        <div class="stream-line" id="stream3" style="top:20%;animation-duration:30s"></div>
    </div>

    <div class="resume">
        <!-- 头部 -->
        <div class="header card-3d">
            <h1 class="neon-glitch">专业知识</h1>
            <div class="terminal-header">
                <span class="prompt">></span> 
                <span class="typing" data-text="系统初始化完成..."></span>
                <span class="cursor">█</span>
            </div>
        </div>

        <!-- 主要内容网格 -->
        <div class="cyber-grid">
            <!-- 技能区块 -->
            <div class="card-3d">
                <h2>🛠️ 技能矩阵</h2>
                <ul>
                    <li>> 高级渗透测试 (OSCP认证)</li>
                    <li>> 恶意软件逆向分析</li>
                    <li>> 零日漏洞挖掘</li>
                    <li>> 网络流量取证</li>
                </ul>
            </div>

            <!-- 项目经历 -->
            <div class="card-3d">
                <h2>🚀 项目日志</h2>
                <div class="log-entry">
                    <h3>⨀ AI防火墙系统 (2023)</h3>
                    <ul>
                        <li>> 基于神经网络的威胁检测</li>
                        <li>> 实时攻击阻断率99.8%</li>
                        <li>> 拦截APT攻击42次</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 3D技能立方体 -->
        <div class="card-3d" style="text-align: center;">
            <h2>🔮 技术领域</h2>
            <div class="skill-cube">
                <div class="face front">安全攻防</div>
                <div class="face back">网络架构</div>
                <div class="face right">云安全</div>
                <div class="face left">人工智能</div>
                <div class="face top">开源情报</div>
                <div class="face bottom">密码学</div>
            </div>
        </div>

        <!-- 工作经历 -->
        <div class="card-3d">
            <h2>💼 职业轨迹</h2>
            <div class="experience">
                <h3>⨀ 安全总监 | 暗盾科技 (2020-至今)</h3>
                <ul>
                    <li>> 领导15人安全团队</li>
                    <li>> 年度防御成功率99.99%</li>
                    <li>> 开发自动化渗透平台</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        // 动态数据流生成
        const streamContents = [
            "01001000 01000001 01000011 01001011 00100000",
            "█▓▒░▒▓█ 00110110 00110011 00110100 00110111 ░▒▓█",
            "[SECURE_CHANNEL] █▓▒░ ENCRYPTED ░▒▓█",
            "⚠️ THREAT_DETECTED:0x7F █▓▒░ CONTAINED ░▒▓█",
            "🚀 SYSTEM_OPTIMIZE:98.7% █▓▒░ LOADING ░▒▓█"
        ];

        function createStream() {
            const streams = document.querySelectorAll('.stream-line');
            streams.forEach(stream => {
                let content = '';
                for(let i=0; i<5; i++){
                    content += streamContents[Math.floor(Math.random()*streamContents.length)] + ' ';
                }
                const specialChars = '█▓▒░◙◘■▄▀▌▐';
                content += specialChars.charAt(Math.floor(Math.random()*specialChars.length));
                stream.innerHTML = content.repeat(3);
            });

            // 随机颜色变化
            document.documentElement.style.setProperty(
                '--hacker-green', 
                `hsl(${Math.random()*120 + 60}, 100%, 50%)`
            );
        }

        // 3D卡片交互
        document.addEventListener('mousemove', (e) => {
            const cards = document.querySelectorAll('.card-3d');
            cards.forEach(card => {
                const rect = card.getBoundingClientRect();
                const centerX = rect.left + rect.width/2;
                const centerY = rect.top + rect.height/2;
                const rotateY = (e.clientX - centerX) * 0.02;
                const rotateX = (centerY - e.clientY) * 0.02;

                card.style.setProperty('--rx', `${rotateX}deg`);
                card.style.setProperty('--ry', `${rotateY}deg`);
            });
        });

        // 终端打字效果
        class TerminalTyping {
            constructor(element) {
                this.el = element;
                this.text = element.dataset.text;
                this.index = 0;
                this.isDeleting = false;
                this.start();
            }

            start() {
                this.interval = setInterval(() => {
                    const currentText = this.text.substring(0, this.index);
                    this.el.textContent = currentText;

                    if(!this.isDeleting) {
                        this.index++;
                        if(this.index > this.text.length) {
                            this.isDeleting = true;
                            setTimeout(() => this.start(), 2000);
                            clearInterval(this.interval);
                        }
                    } else {
                        this.index--;
                        if(this.index === 0) {
                            this.isDeleting = false;
                            setTimeout(() => this.start(), 500);
                            clearInterval(this.interval);
                        }
                    }
                }, 100);
            }
        }

        // 初始化
        document.querySelectorAll('.typing').forEach(el => new TerminalTyping(el));
        createStream();
        setInterval(createStream, 3000);
    </script>
</body>
</html>
侠盗猎车手5 MOD整合版/GTA5增强版/Grand Theft Auto V Enhanced