feat: build resume website with MagicUI components
- 6 sections: Hero, About, Experience, Skills, Projects, Contact - MagicUI: Globe, Particles, Meteors, AnimatedList, IconCloud, BentoGrid - Dark mode support, scroll-triggered animations - Static export ready for deployment
This commit is contained in:
209
components/sections/projects.tsx
Normal file
209
components/sections/projects.tsx
Normal file
@@ -0,0 +1,209 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
DatabaseIcon,
|
||||
CodeIcon,
|
||||
RepeatIcon,
|
||||
AiVideoIcon,
|
||||
Chatting01Icon,
|
||||
FolderOpenIcon,
|
||||
TranslateIcon,
|
||||
BarChartIcon,
|
||||
BotIcon,
|
||||
CloudUploadIcon,
|
||||
FileAttachmentIcon,
|
||||
} from "@hugeicons/core-free-icons"
|
||||
import { HugeiconsIcon } from "@hugeicons/react"
|
||||
|
||||
import { BentoCard, BentoGrid } from "@/components/ui/bento-grid"
|
||||
import { SectionWrapper } from "@/components/section-wrapper"
|
||||
|
||||
const GITHUB_BASE = "https://github.com/LiukerSun"
|
||||
|
||||
const projects = [
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={DatabaseIcon} {...props} />
|
||||
),
|
||||
name: "ERP 管理系统",
|
||||
description:
|
||||
"管理超过 1200 件商品 SKU，覆盖库存、供应链、图片和出入库流程。Go 后端 + TypeScript 前端，整体效率提升 3-4 倍。",
|
||||
href: `${GITHUB_BASE}/erp_backend`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-transparent to-purple-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-2",
|
||||
},
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={RepeatIcon} {...props} />
|
||||
),
|
||||
name: "自动化交易系统",
|
||||
description:
|
||||
"基于 MetaTrader 5 的量化交易自动化系统，支持策略回测与实时监控。",
|
||||
href: `${GITHUB_BASE}/metatrader5-quant-server-python`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-orange-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-1",
|
||||
},
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={Chatting01Icon} {...props} />
|
||||
),
|
||||
name: "Telegram AI 翻译机器人",
|
||||
description:
|
||||
"集成 OpenAI 的 Telegram 机器人，支持自定义预设、多轮对话上下文管理和用户权限系统。",
|
||||
href: `${GITHUB_BASE}/tg_ai_translate_bot_go`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-green-500/10 via-transparent to-teal-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-1",
|
||||
},
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={AiVideoIcon} {...props} />
|
||||
),
|
||||
name: "Agent Dispatcher",
|
||||
description:
|
||||
"AI Agent 调度系统，智能分配任务与资源管理。",
|
||||
href: `${GITHUB_BASE}/agentdispatcher`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-pink-500/10 via-transparent to-rose-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-1",
|
||||
},
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={BarChartIcon} {...props} />
|
||||
),
|
||||
name: "直播数据分析",
|
||||
description:
|
||||
"实时直播数据抓取与分析工具。",
|
||||
href: `${GITHUB_BASE}/liveDataAnalysis`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 via-transparent to-blue-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-1",
|
||||
},
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={CodeIcon} {...props} />
|
||||
),
|
||||
name: "cc-cli 命令行工具",
|
||||
description:
|
||||
"通用命令行工具集，提升开发效率。",
|
||||
href: `${GITHUB_BASE}/cc-cli`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-violet-500/10 via-transparent to-indigo-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-1",
|
||||
},
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={FileAttachmentIcon} {...props} />
|
||||
),
|
||||
name: "Excel JSON 转换工具",
|
||||
description:
|
||||
"Excel 表格转 JSON 格式的 Python 工具，支持自定义模板。",
|
||||
href: `${GITHUB_BASE}/excel-json-tool`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-green-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-1",
|
||||
},
|
||||
{
|
||||
Icon: (props: { className?: string }) => (
|
||||
<HugeiconsIcon icon={CloudUploadIcon} {...props} />
|
||||
),
|
||||
name: "DevTools 开发网关",
|
||||
description:
|
||||
"基于 Docker + Traefik + Cloudflare DNS 验证的本地开发网关系统。",
|
||||
href: `${GITHUB_BASE}/DevTools`,
|
||||
cta: "查看源码",
|
||||
background: (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-sky-500/10 via-transparent to-blue-500/10" />
|
||||
),
|
||||
className: "col-span-1 lg:col-span-1",
|
||||
},
|
||||
]
|
||||
|
||||
const otherProjects = [
|
||||
{
|
||||
name: "OpenManage",
|
||||
href: `${GITHUB_BASE}/openmanage`,
|
||||
icon: <HugeiconsIcon icon={FolderOpenIcon} className="size-5" />,
|
||||
},
|
||||
{
|
||||
name: "抖音弹幕录制",
|
||||
href: `${GITHUB_BASE}/DouyinDanmu`,
|
||||
icon: <HugeiconsIcon icon={BotIcon} className="size-5" />,
|
||||
},
|
||||
{
|
||||
name: "微信机器人",
|
||||
href: `${GITHUB_BASE}/weixinbot`,
|
||||
icon: <HugeiconsIcon icon={Chatting01Icon} className="size-5" />,
|
||||
},
|
||||
{
|
||||
name: "Excel 转 MySQL",
|
||||
href: `${GITHUB_BASE}/excel2mysql`,
|
||||
icon: <HugeiconsIcon icon={TranslateIcon} className="size-5" />,
|
||||
},
|
||||
{
|
||||
name: "抖店 Excel",
|
||||
href: `${GITHUB_BASE}/doudian_excel`,
|
||||
icon: <HugeiconsIcon icon={FileAttachmentIcon} className="size-5" />,
|
||||
},
|
||||
{
|
||||
name: "Flip Game",
|
||||
href: `${GITHUB_BASE}/flipgame`,
|
||||
icon: <HugeiconsIcon icon={RepeatIcon} className="size-5" />,
|
||||
},
|
||||
]
|
||||
|
||||
export function Projects() {
|
||||
return (
|
||||
<SectionWrapper id="projects" className="py-24">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<h2 className="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
|
||||
项目作品
|
||||
</h2>
|
||||
<BentoGrid>
|
||||
{projects.map((project) => (
|
||||
<BentoCard key={project.name} {...project} />
|
||||
))}
|
||||
</BentoGrid>
|
||||
|
||||
{/* 其他开源项目 */}
|
||||
<h3 className="mt-16 mb-6 text-center text-xl font-semibold">
|
||||
更多开源项目
|
||||
</h3>
|
||||
<div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-6">
|
||||
{otherProjects.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 text-center transition-colors hover:bg-accent/50"
|
||||
>
|
||||
<div className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-muted-foreground">
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground underline">
|
||||
{item.name}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</SectionWrapper>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user