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>Chen Yinghua | Re.</title>
    <style>
        /* --- 0. Apple Design System --- */
        :root {
            --bg-page: #ffffff;
            --text-main: #1d1d1f;
            --text-sub: #86868b;
            --accent: #0071e3;
            --font-stack: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

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

        body {
            background-color: var(--bg-page);
            color: var(--text-main);
            font-family: var(--font-stack);
            line-height: 1.4;
            -webkit-font-smoothing: antialiased;
            padding-bottom: 120px;
            overflow-x: hidden;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 24px;
        }

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

        /* 状态标签 */
        .status-huge {
            font-size: clamp(14px, 2vw, 16px);
            font-weight: 700;
            color: var(--accent);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 32px;
            display: inline-block;
            padding: 12px 32px;
            background: rgba(0, 113, 227, 0.06);
            border-radius: 100px;
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

        h1 {
            font-size: clamp(56px, 8vw, 100px);
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.1;
            margin-bottom: 24px;
            color: #000;
            max-width: 900px;
            min-height: 1.1em; /* 防止抖动 */
        }

        .subtitle {
            font-size: clamp(20px, 3vw, 28px);
            font-weight: 400;
            color: var(--text-sub);
            max-width: 700px;
            min-height: 1.5em;
        }

        /* 光标 */
        .typing-cursor::after {
            content: '|';
            color: #000;
            font-weight: 200;
            animation: blink 1s step-start infinite;
            margin-left: 2px;
        }
        @keyframes blink { 50% { opacity: 0; } }

        /* --- 2. Content Animation --- */
        #content-layer {
            opacity: 0;
            transform: translateY(60px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #content-layer.visible { opacity: 1; transform: translateY(0); }

        /* --- 3. Bento Grid --- */
        .grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 24px;
            margin-bottom: 100px;
        }

        .card {
            background: #f5f5f7;
            border-radius: 32px;
            overflow: hidden;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
        }
        .card:hover { transform: scale(1.02); }

        .card-content {
            padding: 40px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 2;
            position: relative;
        }

        /* 图片 */
        .img-bg { position: absolute; inset: 0; z-index: 0; }
        .img-bg img { 
            width: 100%; height: 100%; object-fit: cover; 
            transition: transform 0.6s; 
            object-position: center 30%; /* 调整重心，防止切头 */
        }
        .card:hover .img-bg img { transform: scale(1.05); }
        .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%); z-index: 1; }

        /* 文字系统 */
        .label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #86868b;
            margin-bottom: 12px;
        }
        .card-title { 
            font-size: 32px; 
            font-weight: 700; 
            letter-spacing: -0.01em; 
            margin-bottom: 8px; 
            line-height: 1.1;
        }
        .card-desc { 
            font-size: 18px; 
            color: #6e6e73; 
            font-weight: 500; 
            line-height: 1.4; 
        }

        /* 布局控制 */
        .span-8 { grid-column: span 8; }
        .span-4 { grid-column: span 4; }
        .span-12 { grid-column: span 12; }
        
        .card-life { color: white; min-height: 450px; }
        .card-life .label { color: rgba(255,255,255,0.8); }
        .card-life .card-desc { color: rgba(255,255,255,0.9); }

        /* GitHub Bar */
        .github-bar {
            background: #000; color: #fff; padding: 32px 40px; border-radius: 32px;
            display: flex; justify-content: space-between; align-items: center; text-decoration: none;
        }
        .github-bar:hover { background: #1d1d1f; }

        /* --- 4. Experience Timeline --- */
        .section-header { margin-bottom: 60px; text-align: left; }
        .section-title { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; }

        .timeline { display: flex; flex-direction: column; gap: 40px; }
        .timeline-item { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #f0f0f0; }
        .time-meta { font-size: 16px; font-weight: 600; color: var(--text-sub); padding-top: 6px; }
        .role-title { font-size: 24px; font-weight: 700; color: #000; margin-bottom: 4px; }
        .company-name { font-size: 18px; color: var(--accent); font-weight: 600; margin-bottom: 16px; display: block; }
        .desc-text { font-size: 17px; color: #424245; line-height: 1.6; margin-bottom: 20px; max-width: 800px; }

        .tech-tags { display: flex; gap: 10px; flex-wrap: wrap; }
        .tech-tag { font-size: 14px; font-weight: 500; color: #1d1d1f; background: #f5f5f7; padding: 8px 16px; border-radius: 100px; }

        @media (max-width: 768px) {
            .grid { display: flex; flex-direction: column; }
            .timeline-item { grid-template-columns: 1fr; gap: 12px; }
            h1 { font-size: 48px; }
        }
    </style>
</head>
<body>

<div class="container">
    
    <div class="hero">
        <div class="status-huge">● Seeking Internships</div>
        <h1 id="type-h1" class="typing-cursor"></h1>
        <div id="type-sub" class="subtitle"></div>
    </div>

    <div id="content-layer">
        
        <div class="grid">
            <div class="card span-8">
                <div class="card-content" style="flex-direction: row; align-items: center; gap: 32px;">
                    <img src="./image_0e8263.png" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">
                    <div>
                        <div class="label" style="color: var(--accent);">About Me</div>
                        <div class="card-title">Data-Driven Creator.</div>
                        <div class="card-desc">Based in Xiamen. Merging statistical rigor with viral content creation.</div>
                    </div>
                </div>
            </div>

            <div class="card span-4" style="background: #fff; border: 1px solid #f0f0f0;">
                <div class="card-content" style="justify-content: center; align-items: center; text-align: center;">
                    <div class="label">Total Reach</div>
                    <div style="font-size: 60px; font-weight: 800; letter-spacing: -2px;">100k+</div>
                    <div style="font-size: 14px; color: #86868b; margin-top: 8px; font-weight: 600;">Douyin & XHS</div>
                </div>
            </div>

            <div class="card span-4 card-life">
                <div class="img-bg">
                    <img src="./image_2c929e.png" alt="Seaside">
                </div>
                <div class="overlay"></div>
                <div class="card-content" style="justify-content: flex-end;">
                    <div class="label">Lifestyle</div>
                    <div class="card-title">Re. on Social</div>
                    <div class="card-desc">Sharing "Vibe Coding" workflows, campus life at XMU, and seaside moments.</div>
                </div>
            </div>

            <div class="card span-8">
                <div class="card-content">
                    <div>
                        <div class="label">Engineering</div>
                        <div class="card-title">AI & Data Science.</div>
                        <div class="card-desc" style="margin-bottom: 24px;">
                            Building agents with LLMs and analyzing financial data.
                        </div>
                    </div>
                    <div class="tech-tags">
                        <span class="tech-tag">Python</span>
                        <span class="tech-tag">Pandas</span>
                        <span class="tech-tag">PyTorch</span>
                        <span class="tech-tag" style="background: #e3f2fd; color: #0071e3;">ChatGPT</span>
                        <span class="tech-tag" style="background: #fce4ec; color: #c2185b;">Gemini</span>
                    </div>
                </div>
            </div>

            <a href="https://github.com/emptyteabot" target="_blank" class="card span-12 github-bar">
                <div style="display: flex; align-items: center; gap: 20px;">
                    <svg height="32" viewBox="0 0 16 16" width="32" fill="white"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
                    <span style="font-size: 20px; font-weight: 600;">@emptyteabot</span>
                </div>
                <span style="font-size: 16px; opacity: 0.8;">View Projects ↗</span>
            </a>
        </div>

        <div class="section-header">
            <div class="section-title">Experience</div>
        </div>

        <div class="timeline">
            <div class="timeline-item">
                <span class="time-meta">2025.09 — Present</span>
                <div>
                    <h3 class="role-title">Quant Intern</h3>
                    <span class="company-name">Shanghai Xinbao Info Tech</span>
                    <p class="desc-text">Tracking credit market events and policy changes. Maintaining quantitative codebases and databases.</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Python</span>
                        <span class="tech-tag">Market Monitor</span>
                        <span class="tech-tag">Strategy</span>
                    </div>
                </div>
            </div>
            <div class="timeline-item">
                <span class="time-meta">2025.07 — 2025.09</span>
                <div>
                    <h3 class="role-title">HFT Research Intern</h3>
                    <span class="company-name">Xiamen Zhihuan Century Investment</span>
                    <p class="desc-text">Conducted deep-dive research on HFT strategies from top funds like Two Sigma. Built automated data pipelines for commodity futures.</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Data Pipelines</span>
                        <span class="tech-tag">Alpha Research</span>
                        <span class="tech-tag">Visualization</span>
                    </div>
                </div>
            </div>
            <div class="timeline-item">
                <span class="time-meta">Ongoing</span>
                <div>
                    <h3 class="role-title">Content Creator</h3>
                    <span class="company-name">Personal Brand (Douyin/XHS)</span>
                    <p class="desc-text">Operating a tech & lifestyle account with 100k+ reach. Creating viral content on "AI for Students" and "Vibe Coding".</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Viral Growth</span>
                        <span class="tech-tag">Video Editing</span>
                        <span class="tech-tag">GenAI</span>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top: 120px; color: #86868b; text-align: center; font-size: 13px;">
            © 2025 Chen Yinghua. Built with Code.
        </div>

    </div>
</div>

<script>
    // --- 极速启动逻辑 ---
    const h1Text = "Chen Yinghua";
    const subText = "Sophomore @ XMU. Aspiring Quant & AI Product Engineer.";
    
    const h1El = document.getElementById('type-h1');
    const subEl = document.getElementById('type-sub');
    const contentLayer = document.getElementById('content-layer');

    async function typeWriter(element, text, speed = 40) {
        element.innerHTML = '';
        for (let i = 0; i < text.length; i++) {
            element.innerHTML += text.charAt(i);
            // 稍微加快速度，避免等待感
            await new Promise(r => setTimeout(r, speed));
        }
    }

    // 关键：使用 DOMContentLoaded 而不是 window.onload
    // 这样不用等图片加载完就开始打字，解决“卡顿”问题
    document.addEventListener('DOMContentLoaded', async () => {
        
        // 1. Type Name
        await typeWriter(h1El, h1Text, 60);
        h1El.classList.remove('typing-cursor');
        
        // 2. Type Subtitle
        subEl.classList.add('typing-cursor');
        await typeWriter(subEl, subText, 20);
        
        // 3. Show Content Immediately
        contentLayer.classList.add('visible');
    });

</script>

</body>
</html>