<title>Emo的个人世界</title>

Emo的个人世界

• 首页
• 关于我
• 文章
• 能力专案清单

<main>
    <section id="home" class="blog-posts">
        <article>
            <h2>我的第一篇文章</h2>
            <div class="poetic-text">
                <p>我是逻辑迷宫里的感性守夜人，左手握着理性罗盘校准星轨，右手捧着感性星图解码潮汐。</p>
                <p>INTP的思维触角永远在进行拓扑学漫游——把世界拆解成流动的概念矩阵，在认知荒原上搭建可拆卸的思维脚手架，却在巨蟹的月亮引力下，总在解构的废墟里播种共情的菌丝。</p>
                <p>我的大脑是座24小时运转的隐喻熔炉，用Ti功能将现实蒸馏成精密的认知晶体，又让巨蟹的怀表把每个结论浸入情感显影液重新显像。</p>
                <p>当别人在辩论中寻找胜利时，我却在观点碰撞里收集认知棱镜折射出的光谱样本。这种永恒的自我对话，就像在意识深海中同时点亮灯塔与萤火虫——既要为思想导航，又想为情绪造境。</p>
                <p>日常状态如同量子态的观测者，既渴望用Ne功能在可能性云团中捕获灵感跃迁，又被巨蟹的硬壳周期性地拉回情感稳态。</p>
                <p>那些深夜的哲学漫游常止步于突然涌现的怀旧潮汐，就像在编写认知程序时突然插入一段抒情诗代码。</p>
                <p>这种矛盾张力最终结晶成独特的创造模式：用逻辑框架搭建叙事迷宫，又在转角处放置装满记忆碎片的月光宝盒。</p>
                <p>社交光谱中，我既是思想实验的策展人，又是情感暗流的测绘师。</p>
                <p>INTP的抽离视角能将被解构的概念悬浮在认知真空，而巨蟹的情绪传感器却时刻监测着每个思维粒子携带的情感荷电量。</p>
                <p>这种双重感知编织成的存在主义滤镜，让世界永远呈现为精密机械与抒情诗交织的赛博格形态。</p>
            </div>
            <a href="#" class="read-more">阅读更多</a>
        </article>
        <!-- 添加新文章 -->
        <article>
            <h2>我的第二篇文章</h2>
            <p>这是我想分享的关于编程的体验...</p>
            <a href="#" class="read-more">阅读更多</a>
        </article>
        <article>
            <h2>我的旅行日记</h2>
            <p>分享我最近去云南旅行的经历...</p>
            <a href="#" class="read-more">阅读更多</a>
        </article>
    </section>

    <section id="about" class="about-me" style="display: none;">
        <h2>关于我</h2>
        <div class="profile">
            <img src="profile.jpg" alt="我的照片" class="profile-image">
            <div class="profile-info">
                <p><strong>姓名：</strong>Emo</p>
                <p><strong>职业：</strong>程序员 & 作家</p>
                <p><strong>兴趣：</strong>编程、写作、旅行</p>
                <p><strong>简介：</strong>我是逻辑迷宫里的感性守夜人，左手握着理性罗盘校准星轨，右手捧着感性星图解码潮汐。</p>
            </div>
        </div>
        <a href="#" id="back-to-home" class="back-to-top">返回首页</a>
    </section>

    <section id="articles" class="articles-section" style="display: none;">
        <h2>我的文章</h2>
        <div class="articles-list">
            <article>
                <h3>我的第一篇文章</h3>
                <p>这是第一篇文章的简介...</p>
                <a href="#" class="read-more">阅读全文</a>
            </article>
            <article>
                <h3>我的第二篇文章</h3>
                <p>这是第二篇文章的简介...</p>
                <a href="#" class="read-more">阅读全文</a>
            </article>
        </div>
        <a href="#" class="back-to-top">返回首页</a>
    </section>

    <section id="skills" class="skills-section" style="display: none;">
        <h2>能力专案清单</h2>
        <div class="skills-grid">
            <div class="skill-card">
                <h3>网页开发</h3>
                <p>精通HTML、CSS、JavaScript，能够开发响应式网页和单页应用。</p>
            </div>
            <div class="skill-card">
                <h3>PPT制作</h3>
                <p>擅长制作专业、美观的演示文稿，能够将复杂概念可视化。</p>
            </div>
            <div class="skill-card">
                <h3>内容创作</h3>
                <p>具备优秀的写作能力，能够创作技术文档、博客文章和创意文案。</p>
            </div>
            <div class="skill-card">
                <h3>Agent开发</h3>
                <p>熟悉AI Agent开发，能够构建智能对话系统和自动化流程。</p>
            </div>
        </div>
        <a href="#" class="back-to-top">返回首页</a>
    </section>
</main>

<footer>
    <p>2025 Emo的世界</p>
</footer>

<script src="script.js"></script>
<script>
    // 获取元素
    const sections = {
        home: document.getElementById('home'),
        about: document.getElementById('about'),
        articles: document.getElementById('articles'),
        skills: document.getElementById('skills')
    };

    const links = {
        home: document.getElementById('home-link'),
        about: document.getElementById('about-link'),
        articles: document.getElementById('articles-link'),
        skills: document.getElementById('skills-link')
    };

    // 显示指定板块
    function showSection(sectionId) {
        Object.values(sections).forEach(section => {
            section.style.display = 'none';
        });
        sections[sectionId].style.display = 'block';
    }

    // 绑定事件
    Object.entries(links).forEach(([sectionId, link]) => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            showSection(sectionId);
        });
    });

    // 返回首页按钮
    document.querySelectorAll('.back-to-top').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            showSection('home');
        });
    });
</script>