Fix bugs, improve UX and SEO

- Fix undefined CSS variable var(--text) → var(--text-primary) in about section
- Add rel="noopener noreferrer" to all external LinkedIn links
- Add Certs nav link pointing to existing certifications section
- Add hamburger menu open/close X animation on mobile
- Add Open Graph and Twitter Card meta tags for social sharing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: isparkyou-github

app.js

@@ -139,7 +139,8 @@
   const links = document.querySelector('.nav-links');
   if (toggle) {
     toggle.addEventListener('click', () => {
-      const isOpen = links.style.display === 'flex';
+      const isOpen = toggle.classList.contains('open');
+      toggle.classList.toggle('open', !isOpen);
       links.style.cssText = isOpen
         ? ''
         : 'display:flex;flex-direction:column;position:absolute;top:70px;left:0;right:0;background:rgba(5,13,26,0.98);padding:1.5rem;gap:1.5rem;border-bottom:1px solid rgba(60,139,255,0.2)';
@@ -149,7 +150,10 @@
   // Close mobile menu on link click
   document.querySelectorAll('.nav-links a').forEach(link => {
     link.addEventListener('click', () => {
-      if (links.style.display === 'flex') links.style.cssText = '';
+      if (toggle.classList.contains('open')) {
+        toggle.classList.remove('open');
+        links.style.cssText = '';
+      }
     });
   });
 })();

index.html

@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Senye Zhang | Electrical Engineer</title>
   <meta name="description" content="Senye Zhang — Electrical Engineer with 15+ years specializing in high-voltage distribution systems, substation commissioning, and customer-side power access." />
+  <meta property="og:title" content="Senye Zhang | Electrical Engineer" />
+  <meta property="og:description" content="15+ years · 1,500+ HV Projects · Substation Commissioning · PV & New Energy · Now in Canada" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://isparkyou-github.github.io" />
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:title" content="Senye Zhang | Electrical Engineer" />
+  <meta name="twitter:description" content="15+ years · 1,500+ HV Projects · Substation Commissioning · PV & New Energy · Now in Canada" />
   <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=Outfit:wght@300;400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
@@ -33,6 +40,7 @@
     <li><a href="#education">Education</a></li>
     <li><a href="#skills">Skills</a></li>
     <li><a href="#hobbies">Hobbies</a></li>
+    <li><a href="#certs">Certs</a></li>
     <li><a href="#contact">Contact</a></li>
     <li><a href="index-zh.html" class="lang-btn">🇨🇳 中文</a></li>
   </ul>
@@ -154,7 +162,7 @@ <h2 class="section-title">Connecting Power, <span class="highlight">Energizing I
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.16 6.16l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
             (672) 866-1836
           </a>
-          <a href="https://www.linkedin.com/in/zhangsenye" class="about-link" id="linkedinLink" target="_blank">
+          <a href="https://www.linkedin.com/in/zhangsenye" class="about-link" id="linkedinLink" target="_blank" rel="noopener noreferrer">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
             linkedin.com/in/zhangsenye
           </a>
@@ -764,7 +772,7 @@ <h2 class="section-title">Let's <span class="highlight">Connect</span></h2>
         <div class="contact-label">Phone</div>
         <div class="contact-value">(672) 866-1836</div>
       </a>
-      <a href="https://www.linkedin.com/in/zhangsenye" class="contact-card" id="contactLinkedIn" target="_blank">
+      <a href="https://www.linkedin.com/in/zhangsenye" class="contact-card" id="contactLinkedIn" target="_blank" rel="noopener noreferrer">
         <div class="contact-icon">
           <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
         </div>

style.css

@@ -130,6 +130,17 @@ body {
   transition: all 0.3s ease;
 }
 
+.nav-toggle.open span:nth-child(1) {
+  transform: translateY(7px) rotate(45deg);
+}
+.nav-toggle.open span:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0);
+}
+.nav-toggle.open span:nth-child(3) {
+  transform: translateY(-7px) rotate(-45deg);
+}
+
 /* ===== HERO SECTION ===== */
 .lang-btn {
   display: inline-flex;
@@ -528,7 +539,7 @@ section {
 .about-intro {
   font-size: 1.15rem;
   line-height: 1.6;
-  color: var(--text);
+  color: var(--text-primary);
   margin-bottom: 1.5rem;
 }