diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 37df07a..dc64aed 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,176 +1,8 @@ -import { useRef, useState, useCallback, useEffect } from "react"; import { Link } from "react-router"; import { motion } from "framer-motion"; -import { ArrowUpRight, FileText } from "lucide-react"; +import { FileText } from "lucide-react"; import Navbar from "@/components/Navbar"; -const projects = [ - { - id: 1, - title: "ServerQA 自动化测试平台", - desc: "服务器领域的自动化测试框架,支持接口与性能测试", - tags: ["Python", "Pytest", "Locust"], - image: "/images/project-1.jpg", - }, - { - id: 2, - title: "PerfMon 性能监控中心", - desc: "服务器性能实时监控与历史趋势分析仪表盘", - tags: ["Grafana", "Prometheus", "Go"], - image: "/images/project-2.jpg", - }, - { - id: 3, - title: "VibeCI 测试流水线", - desc: "基于 Vibe Coding 理念的测试持续集成工具", - tags: ["Node.js", "Docker", "GitHub Actions"], - image: "/images/project-3.jpg", - }, - { - id: 4, - title: "FaultSim 故障模拟器", - desc: "分布式系统的混沌工程测试与故障注入工具", - tags: ["Python", "Kubernetes", "gRPC"], - image: "/images/project-4.jpg", - }, - { - id: 5, - title: "LogLens 日志分析工具", - desc: "大规模日志的智能聚合、搜索与异常检测平台", - tags: ["ELK", "React", "ClickHouse"], - image: "/images/project-5.jpg", - }, - { - id: 6, - title: "TestHub 用例管理平台", - desc: "测试用例的编写、评审、执行与覆盖率追踪系统", - tags: ["Next.js", "PostgreSQL", "tRPC"], - image: "/images/project-6.jpg", - }, -]; - -function WorkGrid() { - const containerRef = useRef(null); - const itemRefs = useRef<(HTMLLIElement | null)[]>([]); - const [mouseX, setMouseX] = useState(0); - const [mouseY, setMouseY] = useState(0); - const [containerX, setContainerX] = useState(200); - const [containerY, setContainerY] = useState(200); - const [isHovering, setIsHovering] = useState(false); - const rafRef = useRef(null); - - const calculateDistance = useCallback( - (node: HTMLLIElement) => { - if (!containerX || !containerY) return 0; - const rect = node.getBoundingClientRect(); - const distance = Math.sqrt( - Math.pow(rect.left + rect.width / 2 - containerX, 2) + - Math.pow(rect.top + rect.height / 2 - containerY, 2) - ); - return Math.round(distance * 100) / 100; - }, - [containerX, containerY] - ); - - const handleMouseMove = useCallback( - (e: React.MouseEvent) => { - if (!containerRef.current) return; - const rect = containerRef.current.getBoundingClientRect(); - setMouseX(e.clientX - rect.left); - setMouseY(e.clientY - rect.top); - - if (rafRef.current) cancelAnimationFrame(rafRef.current); - rafRef.current = requestAnimationFrame(() => { - itemRefs.current.forEach((node) => { - if (node) { - const dist = calculateDistance(node); - node.style.setProperty("--box-distance", `${dist}px`); - } - }); - }); - }, - [calculateDistance] - ); - - const handleMouseEnter = useCallback(() => { - if (!containerRef.current) return; - const rect = containerRef.current.getBoundingClientRect(); - setContainerX(rect.width / 2); - setContainerY(rect.height / 2); - setIsHovering(true); - }, []); - - const handleMouseLeave = useCallback(() => { - setIsHovering(false); - }, []); - - useEffect(() => { - return () => { - if (rafRef.current) cancelAnimationFrame(rafRef.current); - }; - }, []); - - return ( - - ); -} - export default function Home() { return (
@@ -224,14 +56,6 @@ export default function Home() { transition={{ duration: 0.8, delay: 0.3, ease: [0.19, 1, 0.22, 1] }} className="flex flex-wrap gap-4" > - - 查看作品 - - {/* Bilibili */} CSDN - {/* GitHub */} - - - - - GitHub - - {/* Juejin 掘金 */} - - - - - 稀土掘金 - - {/* Zhihu 知乎 */} - - - - - 知乎 -
- {/* Works Section */} -
-
- -

- 精选作品 -

-

- 过去几年里,我参与和主导的一些代表性项目。 -

-
- - -
-
- {/* Footer */}
@@ -375,12 +132,6 @@ export default function Home() {
- ); }