移动端优化 + 视觉增强：响应式布局、Boot跳过、动画升级

移动端优化：
- 导航栏：移动端隐藏红黄绿圆点和 spectual@github.io，Tab 字号/间距响应式缩小
- ProfileSection：neofetch 布局移动端垂直居中，技能文字 flex-wrap 换行显示
- ChatSection：快捷命令移动端改为 2 列 grid，[enter] 按钮移动端隐藏，聊天高度用 dvh 单位
- GetInTouchSection：name/company 输入框移动端单列，外层双栏间距响应式
- 所有页面（Index/Resume/Projects）同步移动端导航改动

视觉增强：
- BootSequence：加入 scanline 扫描线效果，按任意键可跳过（含移动端触摸），"Press any key to skip..." 提示
- MatrixRain：支持 prefers-reduced-motion 媒体查询
- ProfileSection：头像加 ASCII 终端边框（┌────┐），技能进度条改用 IntersectionObserver 触发逐字填充动画
- AutoTypeCLI：打字速度随机化（50-150ms/char），命令完成后显示模拟输出，再删除进入下一条
- ChatSection：新消息出现时 slideUp 动画从下方滑入
- index.css：新增 slideUp、scanline、prefers-reduced-motion 全局样式

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

Author: Spectual

src/components/BootSequence.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 
 const BOOT_LINES = [
   { text: "[  OK  ] Starting neural network...", color: "var(--term-green)" },
@@ -17,21 +17,49 @@ interface BootSequenceProps {
 const BootSequence = ({ onComplete }: BootSequenceProps) => {
   const [visibleLines, setVisibleLines] = useState(0);
   const [fading, setFading] = useState(false);
+  const completedRef = useRef(false);
+  const timersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+
+  const finish = useCallback(() => {
+    if (completedRef.current) return;
+    completedRef.current = true;
+    timersRef.current.forEach(clearTimeout);
+    setFading(true);
+    setTimeout(onComplete, 450);
+  }, [onComplete]);
 
   useEffect(() => {
-    const timers: ReturnType<typeof setTimeout>[] = [];
+    const timers = timersRef.current;
 
     BOOT_LINES.forEach((_, i) => {
-      timers.push(setTimeout(() => setVisibleLines(i + 1), i * 340 + 150));
+      const t = setTimeout(() => setVisibleLines(i + 1), i * 340 + 150);
+      timers.push(t);
     });
 
     const totalTime = BOOT_LINES.length * 340 + 150;
-    timers.push(setTimeout(() => setFading(true), totalTime + 400));
-    timers.push(setTimeout(() => onComplete(), totalTime + 850));
+    const t1 = setTimeout(() => {
+      if (!completedRef.current) setFading(true);
+    }, totalTime + 400);
+    const t2 = setTimeout(() => {
+      if (!completedRef.current) {
+        completedRef.current = true;
+        onComplete();
+      }
+    }, totalTime + 850);
+    timers.push(t1, t2);
 
     return () => timers.forEach(clearTimeout);
   }, [onComplete]);
 
+  useEffect(() => {
+    window.addEventListener("keydown", finish);
+    window.addEventListener("touchstart", finish);
+    return () => {
+      window.removeEventListener("keydown", finish);
+      window.removeEventListener("touchstart", finish);
+    };
+  }, [finish]);
+
   return (
     <div
       style={{
@@ -47,7 +75,10 @@ const BootSequence = ({ onComplete }: BootSequenceProps) => {
         pointerEvents: fading ? "none" : "auto",
       }}
     >
-      <div style={{ fontFamily: "inherit", fontSize: "13px", minWidth: "320px" }}>
+      {/* Scanline overlay */}
+      <div className="boot-scanline-wrap" />
+
+      <div style={{ fontFamily: "inherit", fontSize: "13px", minWidth: "320px", position: "relative", zIndex: 2 }}>
         {BOOT_LINES.slice(0, visibleLines).map((line, i) => (
           <div
             key={i}
@@ -63,6 +94,9 @@ const BootSequence = ({ onComplete }: BootSequenceProps) => {
         {visibleLines > 0 && visibleLines <= BOOT_LINES.length && (
           <span className="cursor-blink" />
         )}
+        <div style={{ color: "var(--term-dim)", fontSize: "11px", marginTop: "24px" }}>
+          Press any key to skip...
+        </div>
       </div>
     </div>
   );

src/components/ChatSection.tsx

@@ -262,20 +262,21 @@ const ChatSection = () => {
             ref={scrollContainerRef}
             className="terminal-scroll"
             style={{
-              height: "384px",
+              height: "min(384px, 50dvh)",
               overflowY: "auto",
               padding: "16px",
               fontFamily: "inherit",
               fontSize: "13px",
             }}
           >
             {messages.map((message) => (
-              <MessageBubble
-                key={message.id}
-                message={message}
-                isTyping={typingMessageId === message.id}
-                onTypingComplete={() => setTypingMessageId(null)}
-              />
+              <div key={message.id} className="msg-slide-up">
+                <MessageBubble
+                  message={message}
+                  isTyping={typingMessageId === message.id}
+                  onTypingComplete={() => setTypingMessageId(null)}
+                />
+              </div>
             ))}
             {isLoading && <ThinkingIndicator />}
             <div ref={messagesEndRef} />
@@ -294,7 +295,7 @@ const ChatSection = () => {
               <div style={{ fontSize: "11px", color: "var(--term-dim)", marginBottom: "6px" }}>
                 # quick commands:
               </div>
-              <div style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}>
+              <div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-1.5">
                 {PREDEFINED_QUESTIONS.map((question, index) => (
                   <button
                     key={index}
@@ -364,6 +365,7 @@ const ChatSection = () => {
               <button
                 onClick={() => handleSendMessage(inputValue)}
                 disabled={isLoading || !inputValue.trim() || !isServerOnline}
+                className="hidden sm:block"
                 style={{
                   background: "transparent",
                   border: "none",

src/components/GetInTouchSection.tsx

@@ -103,12 +103,12 @@ const GetInTouchSection = () => {
 
             {/* Two column layout */}
             <div
-              style={{ display: "grid", gap: "32px" }}
-              className="lg:grid-cols-2"
+              style={{ display: "grid" }}
+              className="gap-6 lg:gap-8 lg:grid-cols-2"
             >
               {/* Form */}
               <form onSubmit={handleSubmit}>
-                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px", marginBottom: "12px" }}>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
                   <div>
                     <label style={labelStyle}>
                       name <span style={{ color: "var(--term-red)" }}>*</span>

src/components/MatrixRain.tsx

@@ -12,6 +12,9 @@ const MatrixRain = () => {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
+    // Respect reduced motion preference
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
     // Lower density on mobile
     const isMobile = window.innerWidth < 768;