Initial commit: 重新出發

2026-03-11 01:18:53 +08:00
commit 6bf34c143f
4 changed files with 454 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>nudoragon | 個人連結</title>
+    <meta name="description" content="nudoragon 的個人品牌與社交連結入口。包含部落格、專案與聯絡資訊。">
+    <link rel="stylesheet" href="style.css">
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Outfit:wght@400;600;800&display=swap"
+        rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+
+<body>
+    <div class="background-blobs">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+    </div>
+
+    <main class="container">
+        <header class="profile animate-fade-in" id="profile-header">
+            <!-- Dynamically populated -->
+        </header>
+
+        <section class="links-container" id="links-container">
+            <!-- Dynamically populated -->
+        </section>
+
+        <footer class="footer animate-fade-in" id="footer-section">
+            <div class="social-icons" id="social-icons">
+                <!-- Dynamically populated -->
+            </div>
+            <p class="copyright" id="copyright-text"></p>
+        </footer>
+    </main>
+
+    <script src="config.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Render Profile
+            const header = document.getElementById('profile-header');
+            header.innerHTML = `
+                <div class="avatar-container">
+                    <img src="${CONFIG.profile.avatar}" alt="${CONFIG.profile.name} Avatar" class="avatar">
+                    <div class="avatar-ring"></div>
+                </div>
+                <h1 class="name">${CONFIG.profile.name}</h1>
+                <p class="bio">${CONFIG.profile.bio}</p>
+            `;
+
+            // Render Links - 支援可見性和排序
+            const linksContainer = document.getElementById('links-container');
+            const visibleLinks = CONFIG.links
+                .filter(link => link.visible !== false)
+                .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+            linksContainer.innerHTML = visibleLinks.map(link => `
+                <a href="${link.url}" class="link-card animate-slide-up" style="animation-delay: ${link.delay};" target="_blank" rel="noopener noreferrer">
+                    <div class="link-icon"><i class="${link.icon}"></i></div>
+                    <div class="link-content">
+                        <span class="link-title">${link.title}</span>
+                        <span class="link-desc">${link.desc}</span>
+                    </div>
+                    <div class="link-arrow"><i class="fas fa-chevron-right"></i></div>
+                </a>
+            `).join('');
+
+            // Render Socials - 支援可見性和排序
+            const socialIcons = document.getElementById('social-icons');
+            const visibleSocials = CONFIG.socials
+                .filter(social => social.visible !== false)
+                .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+            socialIcons.innerHTML = visibleSocials.map(social => `
+                <a href="${social.url}" title="${social.name}${social.note ? ' - ' + social.note : ''}" target="_blank" rel="noopener noreferrer"><i class="${social.icon}"></i></a>
+            `).join('');
+
+            // Render Copyright
+            document.getElementById('copyright-text').innerHTML = `&copy; ${CONFIG.profile.copyrightYear} ${CONFIG.profile.name}. All rights reserved.`;
+        });
+    </script>
+</body>
+
+</html>