index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邓一纯 | 语码Cace</title>
    <style>
        :root {
            --primary: #39D5B0;
            --bg-dark: #0a0e17;
            --card-bg: rgba(20, 28, 40, 0.85);
            --accent: #2dd4bf;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background-color: var(--bg-dark);
            color: #f1f5f9;
            font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
            overflow-x: hidden;
            image-rendering: pixelated;
        }

        /* CRT 扫描线效果 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.1) 0px,
                rgba(0, 0, 0, 0.1) 1px,
                transparent 1px,
                transparent 3px
            );
            pointer-events: none;
            z-index: 9999;
        }

        /* 像素网格背景 */
        #matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.15;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }

        /* --- Hero Section --- */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .avatar-box {
            width: 200px;
            height: 200px;
            margin-bottom: 30px;
            cursor: pointer;
            filter: drop-shadow(4px 4px 0 var(--primary));
            transition: transform 0.1s steps(2);
            image-rendering: pixelated;
        }

        .avatar-box:hover {
            transform: scale(1.05) translate(-2px, -2px);
            filter: drop-shadow(6px 6px 0 var(--primary));
        }

        .avatar-box:active {
            transform: scale(0.95) translate(2px, 2px);
            filter: drop-shadow(2px 2px 0 var(--primary));
        }

        h1 {
            font-size: 3.5rem;
            font-weight: 900;
            letter-spacing: 8px;
            margin-bottom: 20px;
            background: linear-gradient(180deg, #fff 0%, var(--primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow:
                4px 4px 0 rgba(57, 213, 176, 0.4),
                8px 8px 0 rgba(0, 0, 0, 0.3);
            animation: float 3s ease-in-out infinite, titleGlow 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        @keyframes titleGlow {
            0%, 100% {
                text-shadow:
                    4px 4px 0 rgba(57, 213, 176, 0.4),
                    8px 8px 0 rgba(0, 0, 0, 0.3);
            }
            50% {
                text-shadow:
                    4px 4px 0 rgba(57, 213, 176, 0.6),
                    8px 8px 0 rgba(0, 0, 0, 0.3);
            }
        }

        .subtitle {
            font-size: 1rem;
            color: var(--accent);
            font-family: 'Courier New', monospace;
            margin-bottom: 30px;
            letter-spacing: 3px;
            animation: glitch 2s infinite;
        }

        @keyframes glitch {
            0%, 90%, 100% { opacity: 1; }
            92% { opacity: 0.8; transform: translateX(-2px); }
            94% { opacity: 1; transform: translateX(2px); }
            96% { opacity: 0.9; transform: translateX(0); }
        }

        /* --- 通用卡片样式 --- */
        section {
            margin-bottom: 40px;
            opacity: 0;
            transform: translateY(15px) scale(0.98);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        section.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .card {
            background: var(--card-bg);
            border: 3px solid rgba(57, 213, 176, 0.4);
            padding: 20px;
            position: relative;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
            animation: cardAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
        }

        @keyframes cardAppear {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
        }

        h2 {
            color: var(--primary);
            margin-bottom: 20px;
            border-left: 6px solid var(--primary);
            padding-left: 15px;
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
            position: relative;
            font-family: 'Courier New', 'Consolas', monospace;
        }

        h2::after {
            content: '█';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            animation: blink 1s infinite;
            font-size: 0.8rem;
        }

        @keyframes blink {
            50% { opacity: 0; }
        }

        /* --- 技能标签 --- */
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .tag {
            background: rgba(57, 213, 176, 0.15);
            border: 2px solid var(--primary);
            color: var(--primary);
            padding: 8px 16px;
            font-size: 0.85rem;
            font-family: 'Courier New', monospace;
            cursor: pointer;
            position: relative;
            transition: all 0.15s steps(3);
            box-shadow: 3px 3px 0 rgba(57, 213, 176, 0.3);
        }

        .tag::before {
            content: '>';
            margin-right: 8px;
            opacity: 0;
            transition: opacity 0.15s;
        }

        .tag:hover {
            background: var(--primary);
            color: #0a0e17;
            transform: translate(-3px, -3px);
            box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
        }

        .tag:hover::before {
            opacity: 1;
        }

        .tag:active {
            transform: translate(0, 0);
            box-shadow: 0 0 0 transparent;
        }

        /* --- 历程时间轴 --- */
        .timeline {
            border-left: 3px solid rgba(57, 213, 176, 0.3);
            margin-left: 10px;
            padding-left: 30px;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 20px;
            padding: 10px;
            border: 2px solid transparent;
            transition: all 0.2s;
        }

        .timeline-item:hover {
            border-color: rgba(57, 213, 176, 0.3);
            background: rgba(57, 213, 176, 0.05);
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -43px;
            top: 18px;
            width: 18px;
            height: 18px;
            background: var(--primary);
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .time {
            font-weight: bold;
            color: var(--primary);
            display: block;
            margin-bottom: 8px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        h3 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #fff;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
            font-family: 'Courier New', 'Consolas', monospace;
        }

        /* --- 列表样式 --- */
        ul {
            list-style: none;
            padding: 0;
        }

        li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 8px;
            line-height: 1.6;
            color: #cbd5e1;
            font-size: 0.9rem;
            font-family: 'Courier New', 'Consolas', monospace;
            transition: all 0.2s;
        }

        li:hover {
            color: #fff;
            transform: translateX(4px);
        }

        li::before {
            content: '▸';
            position: absolute;
            left: 0;
            color: var(--primary);
            font-size: 0.8rem;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
        }

        li:hover::before {
            animation: arrowBounce 0.3s ease;
        }

        @keyframes arrowBounce {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(-4px); }
        }

        /* --- 联系方式 --- */
        .contact-grid {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .contact-link {
            text-decoration: none;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(57, 213, 176, 0.4);
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            transition: all 0.15s steps(3);
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
        }

        .contact-link:hover {
            background: rgba(57, 213, 176, 0.2);
            border-color: var(--primary);
            transform: translate(-3px, -3px);
            box-shadow: 6px 6px 0 rgba(57, 213, 176, 0.3);
        }

        .contact-link:active {
            transform: translate(0, 0);
            box-shadow: 0 0 0 transparent;
        }

        a.tag {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
        }

        a.tag:hover {
            color: #0a0e17;
        }
    </style>
</head>
<body>

<canvas id="matrix-bg"></canvas>

<div class="container">
    <section class="hero visible">
        <div class="avatar-box" id="q-girl">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="100" cy="190" rx="40" ry="10" fill="rgba(0,0,0,0.3)" />
                <path d="M60,60 Q10,60 5,130 Q30,150 50,110 Z" fill="#39D5B0">
                    <animateTransform attributeName="transform" type="rotate" values="-5 60 60; 5 60 60; -5 60 60" dur="2s" repeatCount="indefinite" />
                </path>
                <path d="M140,60 Q190,60 195,130 Q170,150 150,110 Z" fill="#39D5B0">
                    <animateTransform attributeName="transform" type="rotate" values="5 140 60; -5 140 60; 5 140 60" dur="2s" repeatCount="indefinite" />
                </path>
                <circle cx="100" cy="95" r="50" fill="#FFF5EE" />
                <path d="M50,95 Q50,45 100,45 Q150,45 150,95 L155,80 Q100,25 45,80 Z" fill="#39D5B0" />
                <circle cx="80" cy="100" r="6" fill="#1e293b" id="eye-l" />
                <circle cx="120" cy="100" r="6" fill="#1e293b" id="eye-r" />
                <path d="M95,120 Q100,125 105,120" fill="none" stroke="#FF8080" stroke-width="2" stroke-linecap="round" />
                <path d="M75,145 L125,145 L135,185 L65,185 Z" fill="#334155" />
                <path d="M100,145 L100,185" stroke="#39D5B0" stroke-width="2" />
            </svg>
        </div>
        <h1>邓一纯 | 语码 Cace</h1>
        <p class="subtitle"></p>
        <div class="contact-grid" style="justify-content: center; margin-bottom: 20px;">
            <a href="mailto:cacinie@163.com,cacinie@gmail.com" class="contact-link" style="justify-content: center;">📧 cacinie@163.com <br>📧 cacinie@gmail.com</a>
        </div>
        <div class="tags">
            <span class="tag">会计学背景的斜杠青年</span>
            <span class="tag">Vibe Coder</span>
            <span class="tag">外语发烧友</span>
        </div>
    </section>

    <section class="card">
        <h2>作品 Demo</h2>
        <div class="tags">
            <a href="https://www.xiaohongshu.com/explore/69663eb7000000001a031fb7?xsec_token=YBYdBqHDH2XPvpYjsuUwuwB3APW6kQXIuhhiI8lZ9-Ep8%3D&xsec_source=pc_creatormng" target="_blank" class="tag" style="text-decoration:none;">（点我查看）小红书 · 回转寿司 TimeMaster</a>
            <a href="http://xhslink.com/o/6mulOUW1M0g" target="_blank" class="tag" style="text-decoration:none;">（点我查看）小红书 · TeXWizard 数学公式编辑器</a>
            <a href="http://xhslink.com/o/9qnaBmuvbs6" target="_blank" class="tag" style="text-decoration:none;">（点我查看）小红书 · 数学连连看</a>
            <a href="http://xhslink.com/o/A5Z9Vabab03" target="_blank" class="tag" style="text-decoration:none;">（点我查看）小红书 · ALL-IN-ONE 编辑器</a>
        </div>
    </section>

    <section class="card">
        <h2>跨领域综合素质</h2>
        <ul>
            <li>会计学思维底座 + 高阶译审能力（人事部二笔证书，企业级译员）</li>
            <li>深耕大语言模型（LLM）等前沿技术领域，2024 年于公众号发表语言学 VS GenAI 系列文章</li>
            <li>兼具技术洞察力与文宣转化力，擅长将复杂技术转化为易传播内容（小红书 7 天涨粉 110）</li>
        </ul>
    </section>

    <section class="card">
        <h2>深度音乐创作基因</h2>
        <ul>
            <li>资深 VOCALOID 爱好者和欧美日本独立音乐爱好者，初中 2012 年入坑</li>
            <li>2016 年即实现仅凭简谱独立完成校歌干声制作（洛天依 V4）</li>
            <li>对 PinocchioP、Sasakure.UK 的实验性风格及 Yunosuke、奶油糖星人的电音审美有深度研究</li>
            <li>具备从硬核调校到音乐风格把控的全方位能力</li>
        </ul>
    </section>

    <section class="card">
        <h2>深耕音乐与文创社群</h2>
        <ul>
            <li>深度参与 DizzyLab 电则集市、Phono 等核心同人音乐活动</li>
            <li>与国内 Producer 群体建立了深厚的互信关系</li>
            <li>熟悉独立音乐人的创作诉求与社群生态，擅长驱动创作者生态</li>
        </ul>
    </section>

    <section class="card">
        <h2>文宣与本地化策展</h2>
        <ul>
            <li>具备资深企业宣传片文案策划经验</li>
            <li>能够主导从剧本本地化到视觉呈现的全流程</li>
            <li>擅长通过文字赋予音乐和技术以故事感，提升品牌在多元文化背景下的传播力</li>
        </ul>
    </section>

    <section class="card">
        <h2>核心经历</h2>
        <div class="timeline">
            <div class="timeline-item">
                <span class="time">2019.10 - 至今</span>
                <h3>云译客 (传神语联) / 安徽译创</h3>
                <ul>
                    <li>中英日兼职翻译 & T5 级译审</li>
                    <li>负责大语言模型信息提取评测、能源化工招标书翻译及网剧剧本本地化</li>
                </ul>
            </div>
            <div class="timeline-item">
                <span class="time">2021 - 2022</span>
                <h3>企业宣传片作品</h3>
                <ul>
                    <li>独立完成《安徽外文学会 15 周年宣传片》及《双钱轮胎集团宣传片》的文案与翻译工作（于官方视频号发布）</li>
                </ul>
            </div>
            <div class="timeline-item">
                <span class="time">2018.05 - 2018.11</span>
                <h3>面包英语 (言行科技) · 在校实习</h3>
                <ul>
                    <li>口语讲师。通过一对一语音授课，帮助零基础学员快速掌握英语交流技能</li>
                </ul>
            </div>
        </div>
    </section>

    <section class="card">
        <h2>技能矩阵</h2>
        <div class="tags">
            <span class="tag">中英日翻译 · 六级 614 / 人事部二级笔译 / 日语熟练</span>
            <span class="tag">LLM 测评 · 长文本论文生成测评 (2501)</span>
            <a href="https://www.zhihu.com/column/c_1903543292865525507?share_code=oMK0SOPIZqz0&utm_psn=2001150850941333662" target="_blank" class="tag" style="text-decoration:none;">（点我查看）语言学与深度学习基础 · 知乎专刊</a>
            <span class="tag">VOCALOID 制作</span>
            <span class="tag">企业宣传片文案策划</span>
        </div>
    </section>

    <section class="card">
        <h2>证书荣誉</h2>
        <div class="tags">
            <span class="tag">六级 614</span>
            <span class="tag">人事部 CATTI 英语二级笔译</span>
            <span class="tag">雅思口语 7</span>
            <span class="tag">国才石油石化证书</span>
            <span class="tag">中国移动 AI 应用大赛心理 Agent 华东赛区三等奖（队长）</span>
            <span class="tag">首届文物外交翻译大赛公共组一等奖</span>
            <span class="tag">百度文心开源创新大赛 / 星河 Hackthon 应用复赛入围</span>
            <span class="tag">2025 全国翻译技术大赛智能体赛道优秀奖</span>
            <span class="tag">第五届 MTPE 大赛三等奖（总排名 8/9000）</span>
        </div>
    </section>


</div>

<script>
    // 1. Matrix 数字雨背景
    const canvas = document.getElementById('matrix-bg');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const characters = '01DENGYICHUNABCXYZ';
    const fontSize = 14;
    const columns = canvas.width / fontSize;
    const drops = Array(Math.floor(columns)).fill(1);

    function drawMatrix() {
        ctx.fillStyle = 'rgba(15, 23, 42, 0.05)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#39D5B0';
        ctx.font = fontSize + 'px monospace';

        for (let i = 0; i < drops.length; i++) {
            const text = characters.charAt(Math.floor(Math.random() * characters.length));
            ctx.fillText(text, i * fontSize, drops[i] * fontSize);
            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
            drops[i]++;
        }
    }
    setInterval(drawMatrix, 50);

    // 2. 滚动显示动画
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) entry.target.classList.add('visible');
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('section').forEach(section => observer.observe(section));

    // 3. 眼睛跟随鼠标
    document.addEventListener('mousemove', (e) => {
        const girl = document.getElementById('q-girl');
        const rect = girl.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        
        const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX);
        const distance = 3;
        
        const moveX = Math.cos(angle) * distance;
        const moveY = Math.sin(angle) * distance;

        document.getElementById('eye-l').setAttribute('transform', `translate(${moveX}, ${moveY})`);
        document.getElementById('eye-r').setAttribute('transform', `translate(${moveX}, ${moveY})`);
    });
</script>

</body>
</html>