合并中低优先级优化 + 功能增强：8项改进

Spectual · claude · Spectual · commit cff5aa314dc2 · 2026-03-24T21:18:18.000-07:00
Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Yifei Bao — AI/ML Engineer at Boston University. Chat with an AI assistant to learn about my background, projects, and experience." />
     <meta name="author" content="Yifei Bao" />
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,15 @@
-import { Component, type ReactNode } from "react";
+import { Component, lazy, Suspense, type ReactNode } from "react";
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { HashRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
-import Resume from "./pages/Resume";
-import Projects from "./pages/Projects";
 import NotFound from "./pages/NotFound";
 
+const Resume = lazy(() => import("./pages/Resume"));
+const Projects = lazy(() => import("./pages/Projects"));
+
 class ErrorBoundary extends Component<
   { children: ReactNode },
   { hasError: boolean; error: Error | null }
@@ -59,12 +60,14 @@ const App = () => (
         <Toaster />
         <Sonner />
         <HashRouter>
-          <Routes>
-            <Route path="/" element={<Index />} />
-            <Route path="/resume" element={<Resume />} />
-            <Route path="/projects" element={<Projects />} />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
+          <Suspense fallback={null}>
+            <Routes>
+              <Route path="/" element={<Index />} />
+              <Route path="/resume" element={<Resume />} />
+              <Route path="/projects" element={<Projects />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Suspense>
         </HashRouter>
       </TooltipProvider>
     </QueryClientProvider>
diff --git a/src/components/BootSequence.tsx b/src/components/BootSequence.tsx
@@ -25,7 +25,7 @@ const BootSequence = ({ onComplete }: BootSequenceProps) => {
     completedRef.current = true;
     timersRef.current.forEach(clearTimeout);
     setFading(true);
-    setTimeout(onComplete, 450);
+    setTimeout(onComplete, 380);
   }, [onComplete]);
 
   useEffect(() => {
diff --git a/src/components/ChatSection.tsx b/src/components/ChatSection.tsx
@@ -70,6 +70,9 @@ const ChatSection = () => {
   const isInitialLoad = useRef(true);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const historyRef = useRef<string[]>([]);
+  const historyIndexRef = useRef(-1);
+  const pendingInputRef = useRef("");
 
   const isNearBottom = (): boolean => {
     const el = scrollContainerRef.current;
@@ -113,8 +116,12 @@ const ChatSection = () => {
     // Finish any ongoing typewriter immediately
     setTypingMessageId(null);
 
+    historyRef.current = [messageText, ...historyRef.current];
+    historyIndexRef.current = -1;
+    pendingInputRef.current = "";
+
     const userMessage: Message = {
-      id: Date.now().toString(),
+      id: crypto.randomUUID(),
       text: messageText,
       isUser: true,
       timestamp: new Date(),
@@ -127,7 +134,7 @@ const ChatSection = () => {
 
     try {
       const response = await sendMessage(messageText);
-      const aiId = (Date.now() + 1).toString();
+      const aiId = crypto.randomUUID();
       const aiMessage: Message = {
         id: aiId,
         text: response.success
@@ -145,7 +152,7 @@ const ChatSection = () => {
       setMessages((prev) => [
         ...prev,
         {
-          id: (Date.now() + 1).toString(),
+          id: crypto.randomUUID(),
           text: "Sorry, I'm having trouble connecting right now. Please try again later.",
           isUser: false,
           timestamp: new Date(),
@@ -161,6 +168,26 @@ const ChatSection = () => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSendMessage(inputValue);
+      return;
+    }
+    const history = historyRef.current;
+    if (e.key === "ArrowUp" && history.length > 0) {
+      e.preventDefault();
+      if (historyIndexRef.current === -1) {
+        pendingInputRef.current = inputValue;
+      }
+      const next = Math.min(historyIndexRef.current + 1, history.length - 1);
+      historyIndexRef.current = next;
+      setInputValue(history[next]);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (historyIndexRef.current <= 0) {
+        historyIndexRef.current = -1;
+        setInputValue(pendingInputRef.current);
+      } else {
+        historyIndexRef.current--;
+        setInputValue(history[historyIndexRef.current]);
+      }
     }
   };
 
diff --git a/src/components/ProfileSection.tsx b/src/components/ProfileSection.tsx
@@ -13,39 +13,28 @@ const SKILL_LEVELS = [
 
 const BAR_TOTAL = 20;
 
-const SkillBar = ({ name, level, delay }: { name: string; level: number; delay: number }) => {
+const SkillBar = ({ name, level, delay, started }: { name: string; level: number; delay: number; started: boolean }) => {
   const [filled, setFilled] = useState(0);
-  const ref = useRef<HTMLDivElement>(null);
   const target = Math.round((level / 100) * BAR_TOTAL);
 
   useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (!entry.isIntersecting) return;
-        observer.disconnect();
-        let current = 0;
-        const step = () => {
-          if (current >= target) return;
-          current++;
-          setFilled(current);
-          setTimeout(step, 45);
-        };
-        setTimeout(step, delay);
-      },
-      { threshold: 0.5 }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [target, delay]);
+    if (!started) return;
+    let current = 0;
+    let timer: ReturnType<typeof setTimeout>;
+    const step = () => {
+      if (current >= target) return;
+      current++;
+      setFilled(current);
+      timer = setTimeout(step, 45);
+    };
+    timer = setTimeout(step, delay);
+    return () => clearTimeout(timer);
+  }, [started, target, delay]);
 
   const empty = BAR_TOTAL - filled;
 
   return (
     <div
-      ref={ref}
       style={{
         display: "flex",
         alignItems: "center",
@@ -158,6 +147,25 @@ const AutoTypeCLI = () => {
 const ProfileSection = () => {
   const skills = personalInfo.skills;
 
+  // Single IntersectionObserver for all skill bars
+  const [skillsStarted, setSkillsStarted] = useState(false);
+  const skillsContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = skillsContainerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        observer.disconnect();
+        setSkillsStarted(true);
+      },
+      { threshold: 0.3 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   // Chained typewriter: name first, then role after name finishes
   const [nameTyped, setNameTyped] = useState(false);
   const { displayed: displayedName } = useTypewriter(personalInfo.name, {
@@ -391,12 +399,12 @@ const ProfileSection = () => {
                 </div>
 
                 {/* Skills progress bars */}
-                <div style={{ marginBottom: "12px" }}>
+                <div ref={skillsContainerRef} style={{ marginBottom: "12px" }}>
                   <div style={{ fontSize: "11px", color: "var(--term-dim)", marginBottom: "8px" }}>
                     # proficiency
                   </div>
                   {SKILL_LEVELS.map((s, i) => (
-                    <SkillBar key={s.name} name={s.name} level={s.level} delay={i * 120} />
+                    <SkillBar key={s.name} name={s.name} level={s.level} delay={i * 120} started={skillsStarted} />
                   ))}
                 </div>
 
diff --git a/src/hooks/useTypewriter.ts b/src/hooks/useTypewriter.ts
@@ -24,24 +24,26 @@ export const useTypewriter = (text: string, options?: TypewriterOptions) => {
     setDisplayed("");
     setDone(false);
     let i = 0;
+    let cancelled = false;
     let delayTimer: ReturnType<typeof setTimeout>;
-    let intervalTimer: ReturnType<typeof setInterval>;
-
-    delayTimer = setTimeout(() => {
-      intervalTimer = setInterval(() => {
-        i++;
-        setDisplayed(text.slice(0, i));
-        if (i >= text.length) {
-          clearInterval(intervalTimer);
-          setDone(true);
-          onCompleteRef.current?.();
-        }
-      }, speed);
-    }, startDelay);
+
+    const step = () => {
+      if (cancelled) return;
+      i++;
+      setDisplayed(text.slice(0, i));
+      if (i >= text.length) {
+        setDone(true);
+        onCompleteRef.current?.();
+      } else {
+        delayTimer = setTimeout(step, speed);
+      }
+    };
+
+    delayTimer = setTimeout(step, startDelay);
 
     return () => {
+      cancelled = true;
       clearTimeout(delayTimer);
-      clearInterval(intervalTimer);
     };
   }, [text, speed, startDelay]);
 
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
@@ -41,7 +41,7 @@ const Index = () => {
       {/* Main content */}
       <div
         className="page-enter"
-        style={{ position: "relative", zIndex: 1, opacity: booting ? 0 : 1, transition: "opacity 0.3s" }}
+        style={{ position: "relative", zIndex: 1, opacity: booting ? 0 : 1, transition: booting ? "none" : "opacity 0.45s ease-in" }}
       >
         <TerminalHeader />
 
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
@@ -58,7 +58,7 @@ const Projects = () => {
 
                     return (
                       <div
-                        key={index}
+                        key={project.name}
                         className="project-card"
                         style={{
                           border: "1px solid var(--term-border)",
@@ -152,9 +152,9 @@ const Projects = () => {
 
                         {/* Tech tags */}
                         <div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
-                          {project.technologies.map((tech, techIndex) => (
+                          {project.technologies.map((tech) => (
                             <span
-                              key={techIndex}
+                              key={tech}
                               style={{
                                 border: "1px solid var(--term-border)",
                                 color: "var(--term-dim)",

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ const Index = () => {`
`41`	`41`	`{/* Main content */}`
`42`	`42`	`<div`
`43`	`43`	`className="page-enter"`
`44`		`- style={{ position: "relative", zIndex: 1, opacity: booting ? 0 : 1, transition: "opacity 0.3s" }}`
	`44`	`+ style={{ position: "relative", zIndex: 1, opacity: booting ? 0 : 1, transition: booting ? "none" : "opacity 0.45s ease-in" }}`
`45`	`45`	`>`
`46`	`46`	`<TerminalHeader />`
`47`	`47`