一个Gemini写的个人页

/ 邓工 / 40阅读 / 0评论 / 分类: 网络

这是一个为您精细打磨的版本。

本次更新：

  1. 新增图标：在“岗位”、“邮箱”、“网站”、“城市”的标签前增加了对应的 Font Awesome 小图标。

  2. 视觉微调：调整了图标与文字的间距，使其在手机和电脑上都保持整洁对齐。

  3. 保留所有功能：包含右上角翻页、6行时间线动态、Kiwi 防拦截和夜间模式修复。

请复制完整代码覆盖：

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Engr. Deng | HZPM</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,600;1,600&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <style>
        /* --- 基础重置 --- */
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { margin: 0; padding: 0; min-height: 100vh; font-family: 'Inter', sans-serif; background-color: #f3f4f6; color: #333; display: flex; justify-content: center; align-items: center; }

        /* PC端动态背景 */
        @media (min-width: 769px) {
            body {
                background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
                background-size: 200% 200%;
                animation: gradient-move 15s ease infinite;
            }
        }
        @keyframes gradient-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

        /* --- PC端 卡片样式 --- */
        .glass-card {
            display: flex; width: 100%; max-width: 850px; height: 500px;
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25);
            border-radius: 24px; overflow: hidden; position: relative;
        }
        .left-col { flex: 1.3; position: relative; background: #000; overflow: hidden; }
        .bg-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; opacity: 0.9; }
        .glass-card:hover .bg-img { transform: scale(1.05); }
        .txt-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 30px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); color: white; z-index: 2; }

        /* 右侧布局 */
        .right-col { 
            flex: 1.7; 
            padding: 30px 50px 20px 50px; 
            display: flex; flex-direction: column; overflow-y: auto; 
            position: relative;
        }

        /* === 翻页/折角效果 CSS === */
        .corner-fold {
            position: absolute; top: 0; right: 0; width: 70px; height: 70px;
            background: linear-gradient(225deg, #2563eb 50%, transparent 50%);
            z-index: 100; cursor: pointer; box-shadow: -3px 3px 5px rgba(0,0,0,0.15);
            transition: all 0.3s ease; text-decoration: none;
        }
        .corner-fold:hover { width: 80px; height: 80px; background: linear-gradient(225deg, #1d4ed8 50%, transparent 50%); }
        .corner-icon { position: absolute; top: 14px; right: 14px; color: white; font-size: 16px; }

        /* 间距调整 */
        .tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: #64748b; background: #f1f5f9; padding: 8px 14px; border-radius: 4px; text-transform: uppercase; margin-bottom: 20px; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; } 
        .sep { width: 100%; height: 1px; background: #e2e8f0; margin: 5px 0 15px 0; }
        .head { font-family: 'Playfair Display', serif; font-size: 20px; color: #0f172a; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }

        /* 字体样式 */
        .en-font { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 600; font-style: italic; line-height: 1.1; margin-bottom: 5px; }
        .cn-font { font-size: 14px; font-weight: 300; opacity: 0.85; letter-spacing: 2px; text-transform: uppercase; }
        .link { text-decoration: none; color: #1e293b; display: flex; flex-direction: column; gap: 4px; }

        /* 标签样式调整：支持图标 */
        .lbl { font-size: 10px; color: #94a3b8; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
        .lbl i { font-size: 11px; /* 图标稍微大一点点 */ }

        .val { font-size: 13px; font-weight: 400; }

        /* ============================================================
           【Kiwi / 移动端 强制覆盖层】
        ============================================================ */
        @media (max-width: 768px) {
            body { display: block !important; padding: 15px !important; background: #f3f4f6 !important; height: auto !important; }

            .glass-card {
                display: block !important; height: auto !important; max-height: none !important;
                background: #ffffff !important; 
                border-radius: 16px; margin-bottom: 50px;
                box-shadow: 0 5px 20px rgba(0,0,0,0.05);
                position: relative !important;
            }

            .left-col { height: 260px !important; width: 100% !important; }
            .right-col { padding: 30px 20px !important; height: auto !important; width: 100% !important; display: block !important; }

            .grid { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 25px !important; }
            .en-font { font-size: 32px !important; } 

            .tag { background: #eee !important; color: #333 !important; }
            .link, .val { color: #111 !important; }
        }
    </style>
</head>
<body>

    <div class="glass-card">
        <a href="https://www.hzpm.com" target="_blank" class="corner-fold" title="Visit HZPM Website">
            <i class="fas fa-external-link-alt corner-icon"></i>
        </a>

        <div class="left-col">
            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Profile" class="bg-img">
            <div class="txt-overlay">
                <div class="en-font">Engr. Deng</div>
                <div class="cn-font">PM Expert @ HZPM</div>
            </div>
        </div>

        <div class="right-col">
            <div class="tag">HZPM / Portfolio</div>

            <div class="grid">
                <a href="#" class="link" style="pointer-events: none;">
                    <span class="lbl"><i class="fas fa-briefcase"></i> Position</span>
                    <span class="val">Supervisor</span>
                </a>

                <a href="mailto:hi@hzpm.com" class="link">
                    <span class="lbl"><i class="fas fa-envelope"></i> Email</span>
                    <span class="val">hi@hzpm.com</span>
                </a>

                <a href="https://www.hzpm.com" target="_blank" class="link">
                    <span class="lbl"><i class="fas fa-globe"></i> Website</span>
                    <span class="val">hzpm.com</span>
                </a>

                <a href="#" class="link" style="pointer-events: none;">
                    <span class="lbl"><i class="fas fa-location-dot"></i> City</span>
                    <span class="val">Shenzhen</span>
                </a>
            </div>

            <div class="sep"></div>

            <div class="head">
                <span style="color:#000;">Latest Updates</span>
                <a href="https://www.hzpm.com" style="font-size:11px; color:#999; text-decoration:none;">View All</a>
            </div>

            <div id="mobile-safe-box" style="display: block; width: 100%;">

                <div style="display:flex; position:relative; padding-bottom: 20px;">
                    <div style="position:absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: #e2e8f0;"></div>
                    <div style="width: 9px; height: 9px; background: #2563eb; border-radius: 50%; z-index: 1; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #eff6ff;"></div>
                    <div style="padding-left: 15px;">
                        <a href="https://www.hzpm.com/news/1.html" target="_blank" style="text-decoration: none; display: block;">
                            <div style="font-size: 13px; color: #333; line-height: 1.4; font-weight: 500;">Project Risk Management & Agile Practices Guide</div>
                        </a>
                    </div>
                </div>

                <div style="display:flex; position:relative; padding-bottom: 20px;">
                    <div style="position:absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: #e2e8f0;"></div>
                    <div style="width: 9px; height: 9px; background: #2563eb; border-radius: 50%; z-index: 1; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #eff6ff;"></div>
                    <div style="padding-left: 15px;">
                        <a href="https://www.hzpm.com/news/2.html" target="_blank" style="text-decoration: none; display: block;">
                            <div style="font-size: 13px; color: #333; line-height: 1.4; font-weight: 500;">Digital Transformation: Building Efficient Workflows</div>
                        </a>
                    </div>
                </div>

                <div style="display:flex; position:relative; padding-bottom: 20px;">
                    <div style="position:absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: #e2e8f0;"></div>
                    <div style="width: 9px; height: 9px; background: #2563eb; border-radius: 50%; z-index: 1; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #eff6ff;"></div>
                    <div style="padding-left: 15px;">
                        <a href="https://www.hzpm.com/news/3.html" target="_blank" style="text-decoration: none; display: block;">
                            <div style="font-size: 13px; color: #333; line-height: 1.4; font-weight: 500;">HZPM System Core Features Deep Dive</div>
                        </a>
                    </div>
                </div>

                <div style="display:flex; position:relative; padding-bottom: 20px;">
                    <div style="position:absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: #e2e8f0;"></div>
                    <div style="width: 9px; height: 9px; background: #2563eb; border-radius: 50%; z-index: 1; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #eff6ff;"></div>
                    <div style="padding-left: 15px;">
                        <a href="https://www.hzpm.com/news/4.html" target="_blank" style="text-decoration: none; display: block;">
                            <div style="font-size: 13px; color: #333; line-height: 1.4; font-weight: 500;">Strategic Project Portfolio Management</div>
                        </a>
                    </div>
                </div>

                <div style="display:flex; position:relative; padding-bottom: 20px;">
                    <div style="position:absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: #e2e8f0;"></div>
                    <div style="width: 9px; height: 9px; background: #2563eb; border-radius: 50%; z-index: 1; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #eff6ff;"></div>
                    <div style="padding-left: 15px;">
                        <a href="https://www.hzpm.com/news/5.html" target="_blank" style="text-decoration: none; display: block;">
                            <div style="font-size: 13px; color: #333; line-height: 1.4; font-weight: 500;">Cross-functional Team Leadership</div>
                        </a>
                    </div>
                </div>

                <div style="display:flex; position:relative;">
                    <div style="width: 9px; height: 9px; background: #2563eb; border-radius: 50%; z-index: 1; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #eff6ff;"></div>
                    <div style="padding-left: 15px;">
                        <a href="https://www.hzpm.com/news/6.html" target="_blank" style="text-decoration: none; display: block;">
                            <div style="font-size: 13px; color: #333; line-height: 1.4; font-weight: 500;">Enterprise Resource Planning Optimization</div>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        const blogDomain = 'https://www.hzpm.com'; 
        const rssPath = '/rss.php'; 
        const fullRssUrl = `${blogDomain}${rssPath}?t=${new Date().getTime()}`; 
        const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(fullRssUrl)}`;
        const container = document.getElementById('mobile-safe-box');

        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'ok' && data.items.length > 0) {
                    let html = '';
                    const items = data.items.slice(0, 6); 

                    items.forEach((item, index) => {
                        const cleanTitle = item.title.replace(/<[^>]+>/g, '');
                        const isLast = index === items.length - 1;

                        const lineHtml = isLast ? '' : '<div style="position:absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: #e2e8f0;"></div>';
                        const paddingHtml = isLast ? '' : 'padding-bottom: 20px;';

                        html += `
                        <div style="display:flex; position:relative; ${paddingHtml}">
                            ${lineHtml}
                            <div style="width: 9px; height: 9px; background: #2563eb; border-radius: 50%; z-index: 1; flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px #eff6ff;"></div>
                            <div style="padding-left: 15px;">
                                <a href="${item.link}" target="_blank" style="text-decoration: none; display: block;">
                                    <div style="font-size: 13px; color: #333; line-height: 1.4; font-weight: 500;">${cleanTitle}</div>
                                </a>
                            </div>
                        </div>
                        `;
                    });
                    container.innerHTML = html;
                }
            })
            .catch(e => console.log("Keeping static HTML"));
    </script>
</body>
</html>
扫描二维码，在手机上阅读
猜你喜欢
绿云软银1010 WAWO HkBgp-Kvm-B組-停售 - Hk-One-1G-27-F 网络质量体检报告 用Gemini写了一个单页 TVL.COM.CN 一个Gemini写的个人页 个人主页V3.0
发表评论