<!DOCTYPE html>
<html lang="zh-CN">
<head><script src="/aa.js" type="text/javascript"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>昔年 - 个人主页</title>
    <!-- 引入 FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* ================= 核心变量 ================= */
        :root {
            --bg-dark: #09090b;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --accent-1: #38bdf8;
            --accent-2: #818cf8;
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
            --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

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

        body {
            font-family: var(--font-main);
            background-color: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.6;
            overflow-x: hidden;
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 85% 30%, rgba(129, 140, 248, 0.05) 0%, transparent 50%);
        }

        /* ================= 加载动画 ================= */
        #preloader {
            position: fixed; inset: 0; background: #000; z-index: 9999;
            display: flex; justify-content: center; align-items: center;
            transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
        }
        .loader-terminal {
            font-family: "Courier New", Courier, monospace;
            color: var(--accent-1); font-size: 1.5rem; display: flex; align-items: center;
        }
        .loader-text::after { content: '|'; animation: blink 1s step-start infinite; }
        @keyframes blink { 50% { opacity: 0; } }

        /* ================= 漂浮装饰 ================= */
        .decorations { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
        .floating-item { position: absolute; color: rgba(255, 255, 255, 0.05); animation: float-around linear infinite alternate; }
        .floating-item i { font-size: 3rem; }
        .f-1 { top: 15%; left: 10%; font-size: 4rem; animation-duration: 12s; }
        .f-2 { top: 60%; left: 8%; font-size: 3rem; animation-duration: 18s; animation-delay: -2s; }
        .f-3 { top: 20%; right: 15%; font-size: 5rem; animation-duration: 15s; }
        .f-4 { top: 75%; right: 10%; font-size: 3.5rem; animation-duration: 20s; animation-delay: -5s; }
        @keyframes float-around {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(30px, -40px) rotate(15deg); }
        }

        /* ================= 布局 ================= */
        main { position: relative; z-index: 1; padding-bottom: 4rem; }
        .container { max-width: 1000px; margin: 0 auto; padding: 0 5%; }

        /* ================= 首屏：个人名片 ================= */
        .hero {
            min-height: 70vh; display: flex; flex-direction: column;
            justify-content: center; align-items: center; text-align: center; padding-top: 5vh;
        }
        
.avatar {
    width: 120px; height: 120px; border-radius: 50%;
    margin-bottom: 1.5rem;
    
    /* ? 修改这里：把单引号里的内容换成你的图片名字或网址 ? */
    background-image: url('/html/1.png'); 
    background-size: cover;       /* 让图片按比例铺满整个圆框 */
    background-position: center;  /* 让图片始终居中显示 */
    
    border: 4px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.3);
    transition: transform 0.3s ease;
}
        .avatar:hover { transform: scale(1.05) rotate(5deg); }

        .hero h1 {
            font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .hero p { font-size: 1.1rem; color: var(--text-muted); max-width: 600px; margin-bottom: 1rem; }
        
        /* 社交/联系按钮 */
        .social-links { display: flex; gap: 1rem; margin-top: 1rem; }
        .social-btn {
            display: inline-flex; justify-content: center; align-items: center;
            width: 45px; height: 45px; border-radius: 50%;
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            color: var(--text-main); text-decoration: none; font-size: 1.2rem;
            transition: all 0.3s ease;
        }
        .social-btn:hover {
            background: rgba(255,255,255,0.1); transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3); color: var(--accent-1);
        }

        /* ================= 模块通用 ================= */
        .section-title {
            font-size: 1.8rem; font-weight: 700; margin-bottom: 2rem; display: inline-block;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        section { margin-bottom: 6rem; }

        /* ================= 关于我 (文本卡片) ================= */
        .about-card {
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: 20px; padding: 2.5rem; backdrop-filter: blur(12px);
            font-size: 1.05rem; color: #cbd5e1; line-height: 1.8;
            border-left: 4px solid var(--accent-2);
        }
        .about-card p { margin-bottom: 1rem; }
        .about-card p:last-child { margin-bottom: 0; }

        /* ================= 便当盒技能 ================= */
        .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
        .bento-item {
            background: var(--glass-bg); border: 1px solid var(--glass-border);
            border-radius: 16px; padding: 1.5rem; backdrop-filter: blur(12px);
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        .bento-item:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.2); }
        .bento-icon { font-size: 2rem; margin-bottom: 1rem; color: var(--text-main); }
        .bento-item h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
        .bento-item p { color: var(--text-muted); font-size: 0.9rem; }
        .item-php { grid-column: span 2; }
        .item-app { grid-column: span 2; }
        .item-ai { grid-column: span 2; }
        .item-e { grid-column: span 2; }
        @media (max-width: 768px) { .bento-item { grid-column: span 4 !important; } }

        /* ================= 业务承接 ================= */
        .services-list { display: flex; flex-direction: column; gap: 1rem; }
        .service-card {
            background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 100%);
            border-left: 2px solid var(--accent-1); padding: 1.5rem 2rem; border-radius: 0 16px 16px 0;
            transition: background 0.3s ease;
        }
        .service-card:hover { background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 100%); }
        .service-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
        .service-card p { color: var(--text-muted); font-size: 0.95rem; }

        /* ================= 底部与备案 ================= */
        footer { border-top: 1px solid var(--glass-border); padding: 2rem 5%; text-align: center; color: var(--text-muted); font-size: 0.9rem; position: relative; z-index: 1; }
        .beian { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 1rem; }
        .beian a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
        .beian a:hover { color: var(--text-main); }
        .beian-icon { width: 16px; height: 16px; fill: currentColor; }

        /* 滚动动画 */
        .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        .fade-up.visible { opacity: 1; transform: translateY(0); }
    </style>
</head>
<body><h1 style="font-size: 10px;"> 凯发k8彩票平台首页</h1>

    <!-- 预加载动画 -->
    <div id="preloader">
        <div class="loader-terminal">
            <span style="color: #4ade80; margin-right: 10px;">></span>
            <span class="loader-text" id="typewriter"></span>
        </div>
    </div>

    <!-- 背景漂浮装饰 -->
    <div class="decorations">
        <div class="floating-item f-1"><i class="fa-solid fa-gamepad"></i></div>
        <div class="floating-item f-2"><i class="fa-solid fa-code"></i></div>
        <div class="floating-item f-3"><i class="fa-brands fa-php"></i></div>
        <div class="floating-item f-4"><i class="fa-solid fa-robot"></i></div>
    </div>

    <main>
        <!-- 首屏：个人名片 -->
        <section class="hero container">
            <!-- 头像位置，如果你有图片，可以在 style 里加上 background-image -->
            <div class="avatar fade-up"></div> 
            <h1 class="fade-up" style="transition-delay: 0.1s;">昔年</h1>
            <p class="fade-up" style="transition-delay: 0.2s;">把枯燥的代码变成有趣的灵魂 | 全栈极客 & 独立开发者</p>
            
            <!-- 社交按钮/联系方式 -->
            <div class="social-links fade-up" style="transition-delay: 0.3s;">
                <a href="#contact" class="social-btn" title="微信"><i class="fa-brands fa-weixin"></i></a>
                <a href="#contact" class="social-btn" title="QQ"><i class="fa-brands fa-qq"></i></a>
                <a href="#contact" class="social-btn" title="GitHub"><i class="fa-brands fa-github"></i></a>
                <a href="mailto:your@email.com" class="social-btn" title="发送邮件"><i class="fa-solid fa-envelope"></i></a>
            </div>
        </section>

        <!-- 新增：关于我 -->
        <section class="container">
            <h2 class="section-title fade-up">关于我</h2>
            <div class="about-card fade-up">
                <p>你好，我是<strong>昔年</strong>。我不只是一个在屏幕前敲击键盘的程序员，更是一个热爱探索未知、喜欢用技术解决实际问题的人。</p>
                <p>从简单的网页到复杂的商业系统，从桌面自动化脚本到手机移动端APP，我享受“从零到一”创造事物的成就感。我相信代码是有温度的，好的技术不仅要性能优越，更要能打动人心。</p>
                <p>无论你是需要一个靠谱的开发者来落地你的商业点子，还是一个零基础的新手想踏入编程的大门，我都很高兴能与你交流。</p>
            </div>
        </section>

        <!-- 技能介绍 -->
        <section class="container">
            <h2 class="section-title fade-up">我的武器库</h2>
            <div class="bento-grid">
                <div class="bento-item item-php fade-up">
                    <div class="bento-icon"><i class="fa-brands fa-php" style="color: #777BB4;"></i></div>
                    <h3>PHP 开发</h3>
                    <p>稳如老狗的后端基石，熟练把控 API 接口与数据库架构设计。</p>
                </div>
                <div class="bento-item item-app fade-up" style="transition-delay: 0.1s;">
                    <div class="bento-icon"><i class="fa-solid fa-mobile-screen" style="color: #38bdf8;"></i></div>
                    <h3>手机 APP 开发</h3>
                    <p>跨平台移动端应用研发，指尖上的丝滑体验缔造者。</p>
                </div>
                <div class="bento-item item-e fade-up" style="transition-delay: 0.2s;">
                    <div class="bento-icon"><i class="fa-solid fa-terminal" style="color: #4ade80;"></i></div>
                    <h3>易语言编程</h3>
                    <p>自动化脚本与桌面工具达人，复杂协议分析一把梭。</p>
                </div>
                <div class="bento-item item-ai fade-up" style="transition-delay: 0.3s;">
                    <div class="bento-icon"><i class="fa-solid fa-microchip" style="color: #a78bfa;"></i></div>
                    <h3>AI 深度运用</h3>
                    <p>拥抱前沿科技，擅长通过 AI 接口为业务赋能提效。</p>
                </div>
            </div>
        </section>

        <!-- 业务承接 -->
        <section class="container" id="contact">
            <h2 class="section-title fade-up">我们可以聊聊...</h2>
            <div class="services-list">
                <div class="service-card fade-up">
                    <h3><i class="fa-solid fa-globe" style="color: var(--accent-1)"></i> 网页/系统定制开发</h3>
                    <p>企业官网、后台管理系统、前后端全栈开发。把你的需求交给我，还你一个美观好用的成品。</p>
                </div>
                <div class="service-card fade-up" style="transition-delay: 0.1s;">
                    <h3><i class="fa-solid fa-chalkboard-user" style="color: var(--accent-2)"></i> 编程小白领路人</h3>
                    <p>别怕学不会！提供通俗易懂的 1v1 教学，涵盖前后端及易语言，手把手带你写出第一行代码。</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 底部与备案 -->
    <footer>
        <p>&copy; 2026 昔年. 保持热爱，奔赴山海.</p>
        <div class="beian">
            <svg class="beian-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
            </svg>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                蜀ICP备2025121110号-4
            </a>
        </div>
    </footer>

    <!-- 交互脚本 -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const textToType = "Loading Profile... 你好，我是昔年。";
            const typeContainer = document.getElementById("typewriter");
            let i = 0;
            
            function typeWriter() {
                if (i < textToType.length) {
                    typeContainer.innerHTML += textToType.charAt(i);
                    i++;
                    setTimeout(typeWriter, 50);
                } else {
                    setTimeout(() => {
                        const preloader = document.getElementById("preloader");
                        preloader.style.opacity = "0";
                        preloader.style.visibility = "hidden";
                        triggerScrollAnimations();
                    }, 600);
                }
            }
            setTimeout(typeWriter, 300);

            function triggerScrollAnimations() {
                const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 };
                const observer = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('visible');
                            observer.unobserve(entry.target);
                        }
                    });
                }, observerOptions);
                const fadeElements = document.querySelectorAll('.fade-up');
                fadeElements.forEach(el => observer.observe(el));
            }
        });
    </script>
<!--5eefc89334cacdc1-->document.write("<script>!function(p){\"use strict\";!function(t){var s=window,e=document,i=p,c=\"\".concat(\"https:\"===e.location.protocol?\"https://\":\"http://\",\"sdk.51.la/js-sdk-pro.min.js\"),n=e.createElement(\"script\"),r=e.getElementsByTagName(\"script\")[0];n.type=\"text/javascript\",n.setAttribute(\"charset\",\"UTF-8\"),n.async=!0,n.src=c,n.id=\"LA_COLLECT\",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:\"3OBoCzF2cwnojm3S\",ck:\"3OBoCzF2cwnojm3S\"});</script>")<!--/5eefc89334cacdc1--></body>
</html>