refactor: add contact and blog entry to navbar

Author: J1mL1

src/components/Nav.astro

@@ -15,21 +15,31 @@ const navItems: NavItem[] = [
 		label: 'Home',
 		icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
 	},
-	{
-		href: '/plog',
-		label: 'Photography',
-		icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2.5 2.5 0 00-2.5-2.5H15',
-	},
 	{
 		href: '/projects',
 		label: 'Projects',
 		icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
 	},
+	{
+		href: '/blog',
+		label: 'Blog',
+		icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a2 2 0 011.414.586l3.414 3.414A2 2 0 0118 7.414V19a2 2 0 01-2 2z',
+	},
+	{
+		href: '/contact',
+		label: 'Contact',
+		icon: 'M21 8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V8zM5 8l7 4 7-4',
+	},
+	{
+		href: '/plog',
+		label: 'Photography',
+		icon: 'M3 7h2l1.5-2h11L19 7h2a1 1 0 011 1v9a2 2 0 01-2 2H4a2 2 0 01-2-2V8a1 1 0 011-1zm9 10a4 4 0 100-8 4 4 0 000 8zm0-2.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3z',
+	},
 	{
 		href: '/about',
 		label: 'About',
 		icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
-	},
+	}
 ];
 ---
 <header class="site-header">

src/pages/about.astro

@@ -91,19 +91,16 @@ const heroImage = avatarImage;
                         <span class="hero-badge">LLM reasoning</span>
                     </div>
                     <div class="hero-meta">
-                        <div class="hero-meta-item">
-                            <span class="meta-label">Location</span>
-                            <span class="meta-value">Shenzhen, China</span>
-                        </div>
-                        <div class="hero-meta-item">
-                            <span class="meta-label">Email</span>
-                            <a
-                                class="meta-value link"
-                                href="mailto:zirui_li_0806@outlook.com"
-                            >
-                                zirui_li_0806@outlook.com
-                            </a>
-                        </div>
+                        <div class="hero-meta-item hero-meta-item--location">
+                            <span class="meta-label">Location</span>
+                            <span class="meta-value">Shenzhen, China</span>
+                        </div>
+                        <div class="hero-meta-item hero-meta-item--email">
+                            <span class="meta-label">Email</span>
+                            <span class="meta-value">
+                                zirui[dot]li[at]stu[dot]hit[dot]edu[dot]cn
+                            </span>
+                        </div>
                     </div>
                 </div>
                 <div class="hero-pane">

src/styles/pages/about.css

@@ -50,19 +50,19 @@
   color: rgba(var(--accent), 0.9);
 }
 
-.hero-name {
-  font-size: clamp(2.8rem, 6vw, 3.75rem);
-  font-weight: 800;
-  margin: 0;
-  letter-spacing: 0.08em;
-  color: var(--body-color);
-  text-shadow:
-    -2px -2px 2px rgba(255, 255, 255, 0.85),
-    2px 2px 3px rgba(15, 23, 42, 0.25),
-    0 1px 0 rgba(255, 255, 255, 0.55),
-    0 -1px 0 rgba(15, 23, 42, 0.18),
-    4px 4px 8px rgba(15, 23, 42, 0.12);
-}
+.hero-name {
+  font-size: clamp(2.8rem, 6vw, 3.75rem);
+  font-weight: 800;
+  margin: 0;
+  letter-spacing: 0.08em;
+  color: var(--body-color);
+  text-shadow:
+    -2px -2px 2px rgba(255, 255, 255, 0.85),
+    2px 2px 3px rgba(15, 23, 42, 0.25),
+    0 1px 0 rgba(255, 255, 255, 0.55),
+    0 -1px 0 rgba(15, 23, 42, 0.18),
+    4px 4px 8px rgba(15, 23, 42, 0.12);
+}
 
 .hero-role {
   font-size: 1.1rem;
@@ -90,20 +90,26 @@
   color: var(--body-color);
 }
 
-.hero-meta {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 1rem;
-}
-
-.hero-meta-item {
-  padding: 1rem;
-  border-radius: 1rem;
-  background: var(--neu-base);
-  box-shadow:
-    inset 6px 6px 12px var(--neu-shadow-inset-dark),
-    inset -6px -6px 12px var(--neu-shadow-inset-light);
-}
+.hero-meta {
+  display: inline-flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.hero-meta-item {
+  display: inline-flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  padding: 1rem;
+  border-radius: 1rem;
+  background: var(--neu-base);
+  box-shadow:
+    inset 6px 6px 12px var(--neu-shadow-inset-dark),
+    inset -6px -6px 12px var(--neu-shadow-inset-light);
+  width: fit-content;
+  max-width: 100%;
+}
 
 .meta-label {
   display: block;
@@ -130,15 +136,15 @@
   border-bottom-color: rgba(var(--accent), 0.7);
 }
 
-.dark .hero-name {
-  color: rgba(235, 235, 246, 0.95);
-  text-shadow:
-    -2px -2px 2px rgba(255, 255, 255, 0.2),
-    2px 2px 3px rgba(0, 0, 0, 0.45),
-    0 1px 0 rgba(0, 0, 0, 0.35),
-    0 -1px 0 rgba(255, 255, 255, 0.18),
-    4px 4px 8px rgba(0, 0, 0, 0.32);
-}
+.dark .hero-name {
+  color: rgba(235, 235, 246, 0.95);
+  text-shadow:
+    -2px -2px 2px rgba(255, 255, 255, 0.2),
+    2px 2px 3px rgba(0, 0, 0, 0.45),
+    0 1px 0 rgba(0, 0, 0, 0.35),
+    0 -1px 0 rgba(255, 255, 255, 0.18),
+    4px 4px 8px rgba(0, 0, 0, 0.32);
+}
 
 .hero-actions {
   display: flex;
@@ -432,15 +438,15 @@
     flex-direction: column;
   }
 
-  .hero-link-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .item-heading {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
+  .hero-link-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .item-heading {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 
 @media (max-width: 480px) {
   .hero-name {

src/styles/pages/projects.css

@@ -304,10 +304,12 @@
   background: rgba(255, 255, 255, 0.85);
 }
 
-.project-date {
-  font-size: 0.85rem;
-  color: var(--subheading-color);
-}
+.project-date {
+  font-size: 0.85rem;
+  color: var(--subheading-color);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
 
 /* 项目详情页面样式 */
 .project-detail-container {