diff --git a/index.html b/index.html
index 9322817..8952d40 100644
--- a/index.html
+++ b/index.html
@@ -15,14 +15,14 @@
 </script>
     <meta name="google-site-verification" content="qvHXsPnnrnN-WlMw9OfyKMKA3Suaienirv0uMajvHck" />
     <meta name="description" content="QQ (施清荃) — 12-year-old developer building web tools, desktop apps, and hardware projects with JavaScript, C++, Rust, Python, and ESP32.">
-    <meta property="og:title" content="QQ — Developer Tools">
+    <meta property="og:title" content="QQ (施清荃) — 12 y/o Developer | Web, Hardware & AI Tools">
     <meta property="og:description" content="12-year-old developer building web tools, desktop apps, and hardware projects.">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://qqshi13.github.io/">
     <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="QQ — Developer Tools">
+    <meta name="twitter:title" content="QQ (施清荃) — 12 y/o Developer | Web, Hardware & AI Tools">
     <meta name="twitter:description" content="12-year-old developer building web tools, desktop apps, and hardware projects.">
-    <title>QQ — Developer Tools</title>
+    <title>QQ (施清荃) — 12 y/o Developer | Web, Hardware & AI Tools</title>
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%2358a6ff'/%3E%3C/svg%3E">
     <link rel="manifest" href="manifest.json">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
@@ -137,7 +137,7 @@
             font-size: clamp(48px, 10vw, 72px);
             font-weight: 800;
             letter-spacing: -0.03em;
-            margin-bottom: 16px;
+            margin-bottom: 12px;
             background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -145,6 +145,37 @@
             animation: fadeInUp 0.8s ease-out 0.1s both;
         }
         
+        .age-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 6px 16px;
+            background: linear-gradient(135deg, rgba(88,166,255,0.15), rgba(139,92,246,0.15));
+            border: 1px solid rgba(88, 166, 255, 0.3);
+            border-radius: 100px;
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--accent);
+            margin-bottom: 12px;
+            animation: fadeInUp 0.8s ease-out 0.15s both;
+            backdrop-filter: blur(10px);
+        }
+
+        .age-badge::before {
+            content: '';
+            width: 8px;
+            height: 8px;
+            background: #3fb950;
+            border-radius: 50%;
+            box-shadow: 0 0 8px #3fb950;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.6; transform: scale(0.9); }
+        }
+        
         .tagline {
             font-size: 20px;
             color: var(--text-secondary);
@@ -169,6 +200,7 @@
             text-decoration: none;
             font-weight: 500;
             transition: opacity 0.2s;
+            cursor: help;
         }
         
         .subtitle a:hover {
@@ -206,6 +238,7 @@
             transition: all 0.2s;
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
+            cursor: default;
         }
 
         .badge:hover {
@@ -322,12 +355,23 @@
         /* Scroll Indicator */
         .scroll-indicator {
             position: absolute;
-            bottom: 20px;
+            bottom: 24px;
             left: 50%;
             transform: translateX(-50%);
             animation: bounce 2s infinite;
             cursor: pointer;
             z-index: 10;
+            padding: 8px;
+            border-radius: 50%;
+            background: rgba(22, 27, 34, 0.4);
+            border: 1px solid rgba(88, 166, 255, 0.2);
+            transition: all 0.3s ease;
+        }
+
+        .scroll-indicator:hover {
+            background: rgba(88, 166, 255, 0.15);
+            border-color: rgba(88, 166, 255, 0.5);
+            box-shadow: 0 0 16px var(--glow-color);
         }
         
         @keyframes bounce {
@@ -337,9 +381,53 @@
         }
         
         .scroll-indicator svg {
-            width: 32px;
-            height: 32px;
-            color: var(--text-secondary);
+            width: 24px;
+            height: 24px;
+            color: var(--accent);
+            filter: drop-shadow(0 0 4px var(--glow-color));
+        }
+        
+        /* Back to Top Button */
+        .back-to-top {
+            position: fixed;
+            bottom: 32px;
+            right: 32px;
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            color: var(--accent);
+            cursor: pointer;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(10px);
+            transition: all 0.3s ease;
+            z-index: 100;
+            box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+        }
+
+        .back-to-top.visible {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+
+        .back-to-top:hover {
+            background: var(--accent);
+            color: white;
+            border-color: var(--accent);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 32px var(--accent-glow);
+        }
+
+        .back-to-top svg {
+            width: 20px;
+            height: 20px;
         }
         
         /* Content Section */
@@ -350,11 +438,11 @@
         }
         
         /* About Me Section */
-        .about-me, .credits, .featured-projects, .learning {
+        .about-me, .credits, .featured-projects, .learning, .contact-section {
             margin-bottom: 80px;
         }
         
-        .featured-projects h2, .learning h2, .about-me h2, .credits h2 {
+        .featured-projects h2, .learning h2, .about-me h2, .credits h2, .contact-section h2 {
             font-size: 32px;
             font-weight: 600;
             margin-bottom: 32px;
@@ -379,10 +467,11 @@
             border: 1px solid var(--glass-border);
             border-radius: 16px;
             padding: 24px;
-            text-decoration: none;
             color: inherit;
             box-shadow: 0 0 0 0 rgba(88,166,255,0), 0 8px 32px rgba(0,0,0,0);
             transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
+            display: flex;
+            flex-direction: column;
         }
 
         .project-card:hover {
@@ -402,18 +491,30 @@
             margin-bottom: 8px;
             color: var(--text);
         }
+
+        .project-card h3 a {
+            color: inherit;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        .project-card h3 a:hover {
+            color: var(--accent);
+        }
         
         .project-card p {
             color: var(--text-secondary);
             font-size: 14px;
             line-height: 1.5;
             margin-bottom: 12px;
+            flex-grow: 1;
         }
         
         .project-tags {
             display: flex;
             gap: 8px;
             flex-wrap: wrap;
+            margin-bottom: 16px;
         }
         
         .project-tags span {
@@ -423,6 +524,54 @@
             font-size: 12px;
             color: var(--accent);
         }
+
+        .project-actions {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+
+        .project-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.2s ease;
+            flex: 1;
+            justify-content: center;
+            min-width: max-content;
+        }
+
+        .project-btn.primary {
+            background: linear-gradient(135deg, var(--accent), #1f6feb);
+            color: white;
+            border: none;
+        }
+
+        .project-btn.primary:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 16px var(--accent-glow);
+        }
+
+        .project-btn.secondary {
+            background: transparent;
+            color: var(--accent);
+            border: 1px solid rgba(88, 166, 255, 0.3);
+        }
+
+        .project-btn.secondary:hover {
+            background: rgba(88, 166, 255, 0.1);
+            border-color: var(--accent);
+        }
+
+        .project-btn svg {
+            width: 14px;
+            height: 14px;
+        }
         
         .view-all {
             display: inline-block;
@@ -495,6 +644,49 @@
             text-decoration: none;
             font-weight: 500;
         }
+
+        /* Contact Section */
+        .contact-section p {
+            color: var(--text-secondary);
+            font-size: 18px;
+            line-height: 1.8;
+            margin-bottom: 16px;
+        }
+
+        .contact-links {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            margin-top: 8px;
+        }
+
+        .contact-links a {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 20px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            color: var(--text);
+            text-decoration: none;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+        }
+
+        .contact-links a:hover {
+            background: var(--accent);
+            color: white;
+            border-color: var(--accent);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px var(--accent-glow);
+        }
+
+        .contact-links a svg {
+            width: 16px;
+            height: 16px;
+        }
         
         /* Credits Section */
         .credits p {
@@ -579,21 +771,26 @@
                 padding: 60px 24px;
             }
             
-            .about-me h2, .credits h2 {
+            .about-me h2, .credits h2, .contact-section h2 {
                 font-size: 24px;
             }
             
             .about-me p {
                 font-size: 16px;
             }
+
+            .back-to-top {
+                bottom: 20px;
+                right: 20px;
+            }
         }
         /* Respect prefers-reduced-motion */
         @media (prefers-reduced-motion: reduce) {
             html { scroll-behavior: auto; }
-            .bg-gradient, .particle, .reveal, .scroll-indicator {
+            .bg-gradient, .particle, .reveal, .scroll-indicator, .age-badge::before {
                 animation: none !important;
             }
-            h1, .tagline, .subtitle {
+            h1, .tagline, .subtitle, .age-badge {
                 animation: none !important;
                 opacity: 1 !important;
                 transform: none !important;
@@ -620,7 +817,8 @@
     <!-- Hero Section (Full Screen) -->
     <section class="hero" id="main-content">
         <h1>QQ</h1>
-        <p class="tagline">Hi! I'm QQ (施清荃), a 12-year-old developer building tools with AI</p>
+        <div class="age-badge">12 y/o Developer</div>
+        <p class="tagline">Hi! I'm QQ (施清荃), a developer building tools with AI</p>
         
         <!-- Tech Stack Badges -->
         <div class="tech-stack">
@@ -632,7 +830,7 @@ <h1>QQ</h1>
             <span class="badge">Web</span>
         </div>
         
-        <p class="subtitle">Assisted by Nova ☄️</p>
+        <p class="subtitle">Assisted by <a href="#about" title="Nova is my AI assistant — we build projects together">Nova ☄️</a></p>
         
         <div class="button-row">
             <a href="projects.html" class="cta-button">
@@ -653,9 +851,12 @@ <h1>QQ</h1>
             <a href="https://www.github.com/QQSHI13" rel="noopener noreferrer" aria-label="GitHub">
                 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
             </a>
+            <a href="mailto:shizheng327@gmail.com" aria-label="Email">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+            </a>
         </div>
         
-        <a href="#about" class="scroll-indicator">
+        <a href="#about" class="scroll-indicator" aria-label="Scroll to content">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <polyline points="6 9 12 15 18 9"></polyline>
             </svg>
@@ -668,55 +869,84 @@ <h1>QQ</h1>
         <section class="featured-projects">
             <h2>Tools & Skills</h2>
             <div class="projects-grid">
-                <a href="https://clawhub.com/skill/wincontrol" class="project-card reveal" target="_blank" rel="noopener noreferrer">
+                <div class="project-card reveal">
                     <div class="project-icon">🖥️</div>
-                    <h3>WinControl</h3>
+                    <h3><a href="https://clawhub.com/skill/wincontrol" target="_blank" rel="noopener noreferrer">WinControl</a></h3>
                     <p>AI remote control for Windows desktop — capture screenshots and control mouse/keyboard via HTTP API</p>
                     <div class="project-tags">
                         <span>Python</span>
                         <span>AI Tool</span>
                         <span>ClawHub</span>
                     </div>
-                </a>
-                <a href="/24.html" class="project-card reveal" rel="noopener noreferrer">
+                    <div class="project-actions">
+                        <a href="https://clawhub.com/skill/wincontrol" class="project-btn primary" target="_blank" rel="noopener noreferrer">Try it →</a>
+                    </div>
+                </div>
+                
+                <div class="project-card reveal">
                     <div class="project-icon">🎯</div>
-                    <h3>24 Point Solver</h3>
+                    <h3><a href="/24.html" rel="noopener noreferrer">24 Point Solver</a></h3>
                     <p>Math puzzle game — make 24 using four numbers and basic operations</p>
                     <div class="project-tags">
                         <span>JavaScript</span>
                         <span>Game</span>
                     </div>
-                </a>
+                    <div class="project-actions">
+                        <a href="/24.html" class="project-btn primary" rel="noopener noreferrer">Play →</a>
+                    </div>
+                </div>
                 
-                <a href="https://qqshi13.github.io/flow/" class="project-card reveal" rel="noopener noreferrer">
+                <div class="project-card reveal">
                     <div class="project-icon">⏱️</div>
-                    <h3>Flow</h3>
+                    <h3><a href="https://qqshi13.github.io/flow/" rel="noopener noreferrer">Flow</a></h3>
                     <p>Pomodoro timer with PWA support, keyboard shortcuts, and customizable settings</p>
                     <div class="project-tags">
                         <span>JavaScript</span>
                         <span>PWA</span>
                     </div>
-                </a>
+                    <div class="project-actions">
+                        <a href="https://qqshi13.github.io/flow/" class="project-btn primary" rel="noopener noreferrer">Try it →</a>
+                    </div>
+                </div>
                 
-                <a href="https://qqshi13.github.io/droptransfer/" class="project-card reveal" rel="noopener noreferrer">
+                <div class="project-card reveal">
                     <div class="project-icon">📦</div>
-                    <h3>DropTransfer</h3>
+                    <h3><a href="https://qqshi13.github.io/droptransfer/" rel="noopener noreferrer">DropTransfer</a></h3>
                     <p>P2P file sharing with WebRTC, no server needed</p>
                     <div class="project-tags">
                         <span>WebRTC</span>
                         <span>P2P</span>
                     </div>
-                </a>
+                    <div class="project-actions">
+                        <a href="https://qqshi13.github.io/droptransfer/" class="project-btn primary" rel="noopener noreferrer">Try it →</a>
+                    </div>
+                </div>
                 
-                <a href="https://github.com/QQSHI13/M5Timer" class="project-card reveal" rel="noopener noreferrer">
+                <div class="project-card reveal">
                     <div class="project-icon">⏲️</div>
-                    <h3>M5Timer</h3>
+                    <h3><a href="https://github.com/QQSHI13/M5Timer" target="_blank" rel="noopener noreferrer">M5Timer</a></h3>
                     <p>Hardware Pomodoro timer for M5Capsule with web sync</p>
                     <div class="project-tags">
                         <span>C++</span>
                         <span>ESP32</span>
                     </div>
-                </a>
+                    <div class="project-actions">
+                        <a href="https://github.com/QQSHI13/M5Timer" class="project-btn primary" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+                    </div>
+                </div>
+
+                <div class="project-card reveal" style="opacity: 0.7;">
+                    <div class="project-icon">🔮</div>
+                    <h3>More Coming Soon</h3>
+                    <p>Always building something new. Check back for updates — or follow on GitHub to see work in progress!</p>
+                    <div class="project-tags">
+                        <span>Open Source</span>
+                        <span>WIP</span>
+                    </div>
+                    <div class="project-actions">
+                        <a href="https://github.com/QQSHI13?tab=repositories" class="project-btn secondary" target="_blank" rel="noopener noreferrer">Follow ↗</a>
+                    </div>
+                </div>
             </div>
             
             <a href="projects.html" class="view-all">View all projects →</a>
@@ -747,9 +977,23 @@ <h3>Embedded</h3>
         <section class="about-me reveal">
             <h2>About Me</h2>
             <p>I create web tools, desktop apps, and hardware projects that solve real problems. From Pomodoro timers to P2P file sharing, I love turning ideas into working products.</p>
-            <p>Hi! I'm QQ (施清荃), a 12-year-old developer building web tools, desktop apps, and hardware projects.</p>
             <p>I use a dual-boot setup with Windows and Ubuntu, and I love exploring new technologies. My goal is to create tools that make people's lives easier.</p>
-            <p>I work with Nova ☄️ (my AI assistant) to build projects faster and learn along the way.</p>
+            <p>I work with <a href="#about" title="Nova is my AI assistant">Nova ☄️</a> (my AI assistant) to build projects faster and learn along the way.</p>
+        </section>
+
+        <section class="contact-section reveal">
+            <h2>Get In Touch</h2>
+            <p>Want to collaborate, have feedback, or just want to say hi? I'm always open to chatting about tech, projects, or ideas.</p>
+            <div class="contact-links">
+                <a href="mailto:shizheng327@gmail.com">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+                    Email Me
+                </a>
+                <a href="https://github.com/QQSHI13" target="_blank" rel="noopener noreferrer">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+                    GitHub
+                </a>
+            </div>
         </section>
         
         <section class="credits">
@@ -759,9 +1003,16 @@ <h2>Credits</h2>
     </section>
     
     <footer>
-        <p>&copy; 2026 QQ. All rights reserved.</p>
+        <p>&copy; 2026 QQ. All rights reserved. · <a href="mailto:shizheng327@gmail.com">shizheng327@gmail.com</a></p>
     </footer>
     
+    <!-- Back to Top Button -->
+    <button class="back-to-top" id="backToTop" aria-label="Back to top">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="18 15 12 9 6 15"></polyline>
+        </svg>
+    </button>
+
     <div id="cursor-glow"></div>
     <script>
     // Floating particles
@@ -795,6 +1046,19 @@ <h2>Credits</h2>
     }, { threshold: 0.1 });
     document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
     
+    // Back to top button
+    const backToTop = document.getElementById('backToTop');
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 500) {
+            backToTop.classList.add('visible');
+        } else {
+            backToTop.classList.remove('visible');
+        }
+    });
+    backToTop.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    
     // Service Worker for PWA
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('/sw.js')