<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESO 极限光束流构建 - Progression Build</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- React & ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Babel for JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Framer Motion -->
<script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
background-color: #050505;
color: #ffffff;
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
margin: 0;
padding: 0;
}
/* 苹果风格极简滚动条 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }
/* Bento 卡片毛玻璃基础层 */
.bento-inner {
background: rgba(20, 20, 20, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* 选中高亮 */
::selection { background: rgba(6, 182, 212, 0.3); }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { motion, useScroll, useTransform } = window.Motion;
const App = () => (
<div className="min-h-screen pb-24 relative">
<div className="fixed inset-0 bg-[#050505] pointer-events-none z-[-1]"></div>
<Hero />
<Grid />
</div>
);
const Hero = () => {
const { scrollYProgress } = useScroll();
const y = useTransform(scrollYProgress, [0, 1], [0, 250]);
const opacity = useTransform(scrollYProgress, [0, 0.3], [1, 0]);
return (
<motion.div style={{ y, opacity }} className="pt-32 pb-20 px-6 md:px-12 lg:px-24 flex flex-col items-center text-center relative z-0 min-h-[60vh] justify-center">
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 1, ease: "easeOut" }}
className="w-24 h-24 rounded-full border border-white/10 flex items-center justify-center mb-8 bg-white/5 backdrop-blur-md"
>
<i className="fa-solid fa-crosshairs text-4xl text-white/80"></i>
</motion.div>
<motion.p
initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }}
className="text-cyan-400 text-sm md:text-base font-mono tracking-[0.3em] mb-4 uppercase"
>
ESO Meta Breakdown
</motion.p>
<motion.h1
initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.4 }}
className="text-6xl md:text-[6rem] lg:text-[7rem] font-black tracking-tighter leading-[1.1] mb-6"
>
拼好职激光流<br/>
<span className="text-transparent bg-clip-text bg-gradient-to-b from-white to-white/30">
终极轮椅构建
</span>
</motion.h1>
<motion.p
initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.6 }}
className="text-gray-400 max-w-2xl text-lg md:text-xl font-light mb-16 leading-relaxed"
>
U49龙骑/夜刃/奥术，新手副手不要用大剑，旋涡火杖会降低暴毙。
</motion.p>
<motion.div
animate={{ y: [0, 15, 0], opacity: [0.3, 1, 0.3] }}
transition={{ repeat: Infinity, duration: 2.5, ease: "easeInOut" }}
className="w-px h-32 bg-gradient-to-b from-white/50 to-transparent"
></motion.div>
</motion.div>
);
};
const Card = ({ children, className, gradientClass, delay = 0 }) => {
return (
<motion.div
initial={{ opacity: 0, y: 60, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.8, delay, ease: [0.22, 1, 0.36, 1] }}
className={`relative rounded-[2rem] overflow-hidden bento-inner flex flex-col group transition-all duration-500 hover:border-white/20 ${className}`}
>
{/* 运用高亮色自身透明度渐变制造科技感 */}
<div className={`absolute inset-0 bg-gradient-to-br ${gradientClass} opacity-30 pointer-events-none transition-opacity duration-700 group-hover:opacity-60`} />
<div className="relative z-10 p-8 md:p-10 h-full flex flex-col">
{children}
</div>
</motion.div>
);
};
const Grid = () => {
return (
<div className="px-4 md:px-8 lg:px-12 max-w-[1800px] mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 relative z-10">
{/* 1. 核心属性与种族 */}
<Card gradientClass="from-cyan-500/40 to-cyan-500/0" className="md:col-span-1 lg:row-span-2" delay={0}>
<h2 className="text-[14rem] leading-none font-black text-cyan-500/10 absolute -right-12 top-10 select-none">64</h2>
<h3 className="text-4xl font-black mb-1 text-white">属性与种族</h3>
<p className="text-xs tracking-[0.2em] text-cyan-400 font-mono mb-10 uppercase">Attributes & Race</p>
<div className="space-y-8 flex-1">
<div>
<div className="flex items-center gap-2 text-cyan-400 text-sm font-mono mb-2">
<i className="fa-solid fa-bolt"></i> ATTRIBUTES
</div>
<div className="text-2xl font-bold">全耐力加点 <span className="block text-gray-400 text-sm font-normal mt-1 tracking-widest uppercase">All Stamina</span></div>
</div>
<div>
<div className="flex items-center gap-2 text-cyan-400 text-sm font-mono mb-2">
<i className="fa-solid fa-dna"></i> RACE
</div>
<div className="text-2xl font-bold">暗精灵 <span className="text-gray-400 text-base font-normal ml-2">最优解</span></div>
<div className="text-xs text-gray-400 mt-2 font-mono uppercase tracking-widest">Alt: 高精灵 (High Elf) / 虎人 (Khajiit)</div>
</div>
<div>
<div className="flex items-center gap-2 text-cyan-400 text-sm font-mono mb-2">
<i className="fa-solid fa-gem"></i> MUNDUS
</div>
<div className="text-2xl font-bold">盗贼 <span className="text-gray-400 text-base font-normal ml-2">主加暴击率</span></div>
</div>
<div className="pt-6 border-t border-white/10">
<div className="flex items-center gap-2 text-cyan-400 text-sm font-mono mb-4">
<i className="fa-solid fa-flask"></i> CONSUMABLES
</div>
<div className="flex flex-col gap-3">
<div className="bg-black/30 p-3 rounded-lg border border-white/5">
<div className="font-bold text-white">双加食物 (蓝) <span className="text-gray-500 text-xs ml-1">生命+耐力</span></div>
<div className="text-xs text-gray-400 mt-1">开荒生存首选，仅比极限绿食少1k耐力</div>
</div>
<div className="bg-black/30 p-3 rounded-lg border border-white/5">
<div className="font-bold text-white">英雄药水 <span className="text-gray-500 text-xs ml-1">Heroism</span></div>
<div className="text-xs text-gray-400 mt-1">最强增伤选项。预算不足可替换三属性药水</div>
</div>
</div>
</div>
</div>
</Card>
{/* 2. 核心装备组合 */}
<Card gradientClass="from-purple-500/40 to-purple-500/0" className="md:col-span-2 lg:col-span-2" delay={0.1}>
<i className="fa-solid fa-shield-halved text-[12rem] text-purple-500/10 absolute right-4 bottom-4 z-0"></i>
<h3 className="text-4xl font-black mb-1 relative z-10 text-white">终极装备搭配</h3>
<p className="text-xs tracking-[0.2em] text-purple-400 font-mono mb-8 uppercase relative z-10">Optimal Gear Setup</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 relative z-10">
<div className="bg-black/40 rounded-2xl p-5 border border-purple-500/20 hover:border-purple-400/50 transition-colors backdrop-blur-sm">
<div className="text-purple-400 text-[10px] tracking-widest font-mono mb-2">BODY SET</div>
<div className="font-bold text-xl text-white mb-1">完美的安苏尔之痛</div>
<div className="text-xs text-gray-400 uppercase tracking-wider">Perfected Ansuul's Torment</div>
</div>
<div className="bg-black/40 rounded-2xl p-5 border border-purple-500/20 hover:border-purple-400/50 transition-colors backdrop-blur-sm">
<div className="text-purple-400 text-[10px] tracking-widest font-mono mb-2">WEAPON SET</div>
<div className="font-bold text-xl text-white mb-1">逐潮破浪者</div>
<div className="text-xs text-gray-400 uppercase tracking-wider">Tideborn Windstalker</div>
</div>
<div className="bg-black/40 rounded-2xl p-5 border border-purple-500/20 hover:border-purple-400/50 transition-colors backdrop-blur-sm">
<div className="text-purple-400 text-[10px] tracking-widest font-mono mb-2">MYTHIC ITEM</div>
<div className="font-bold text-xl text-white mb-1">维洛希的乌尔法师护符</div>
<div className="text-xs text-gray-400 uppercase tracking-wider">Velothi Ur-Mage's Amulet</div>
</div>
<div className="bg-black/40 rounded-2xl p-5 border border-purple-500/20 hover:border-purple-400/50 transition-colors backdrop-blur-sm">
<div className="text-purple-400 text-[10px] tracking-widest font-mono mb-2">BACK BAR & MONSTER</div>
<div className="font-bold text-lg text-white">完美大漩涡巨剑</div>
<div className="text-[10px] text-gray-400 uppercase tracking-wider mb-2">Perf. Maelstrom Greatsword</div>
<div className="font-bold text-lg text-white">1件 黏液怪</div>
<div className="text-[10px] text-gray-400 uppercase tracking-wider">1pc Slimecraw</div>
</div>
</div>
</Card>
{/* 3. 勇士点数 */}
<Card gradientClass="from-orange-500/40 to-orange-500/0" className="md:col-span-1 lg:col-span-1" delay={0.2}>
<h3 className="text-3xl font-black mb-1 text-white">勇士点数</h3>
<p className="text-xs tracking-[0.2em] text-orange-400 font-mono mb-8 uppercase">Champion Points</p>
<div className="space-y-6 flex-1 flex flex-col justify-center">
<div className="bg-blue-900/10 border border-blue-500/20 rounded-2xl p-5 relative overflow-hidden">
<div className="absolute top-0 right-0 w-16 h-16 bg-blue-500/10 rounded-bl-full"></div>
<div className="font-black text-xl text-blue-400 mb-3 border-b border-blue-500/20 pb-2">WARFARE (蓝树)</div>
<ul className="text-sm text-gray-300 space-y-2 font-medium">
<li>武器专家 <span className="text-gray-500 text-xs ml-1 font-mono">Master at Arms</span></li>
<li>噬人光环 <span className="text-gray-500 text-xs ml-1 font-mono">Biting Aura</span></li>
<li>愤怒打击 <span className="text-gray-500 text-xs ml-1 font-mono">Wrathful Strikes</span></li>
<li>剥削者 <span className="text-gray-500 text-xs ml-1 font-mono">Exploiter</span></li>
</ul>
</div>
<div className="bg-red-900/10 border border-red-500/20 rounded-2xl p-5 relative overflow-hidden">
<div className="absolute top-0 right-0 w-16 h-16 bg-red-500/10 rounded-bl-full"></div>
<div className="font-black text-xl text-red-400 mb-3 border-b border-red-500/20 pb-2">FITNESS (红树)</div>
<ul className="text-sm text-gray-300 space-y-2 font-medium">
<li>无尽活力 <span className="text-gray-500 text-xs ml-1 font-mono">Boundless Vitality</span></li>
<li>专家躲避 <span className="text-gray-500 text-xs ml-1 font-mono">Expert Evasion</span></li>
<li>迅捷 <span className="text-gray-500 text-xs ml-1 font-mono">Celerity</span></li>
<li>活力复苏 <span className="text-gray-500 text-xs ml-1 font-mono">Rejuvenation</span></li>
</ul>
</div>
</div>
</Card>
{/* 4. 核心机制/底层逻辑 */}
<Card gradientClass="from-orange-500/40 to-orange-500/0" className="md:col-span-2 lg:col-span-2" delay={0.3}>
<h3 className="text-4xl font-black mb-1 text-white">核心机制</h3>
<p className="text-xs tracking-[0.2em] text-orange-400 font-mono mb-8 uppercase">Under the Hood Logic</p>
<div className="flex flex-col md:flex-row gap-8 items-center h-full">
<div className="flex-1 space-y-8">
<div>
<div className="text-6xl md:text-7xl font-black text-orange-400 mb-2 leading-none">3 <span className="text-3xl">CRUX</span></div>
<p className="text-sm text-gray-300 leading-relaxed border-l-2 border-orange-500/50 pl-4">
<strong className="text-white">命运核心</strong>。光束释放前必须满3层以最大化伤害与护盾。通过释放两次触手(Flail)和学者(Scholarship)被动自动补满。
</p>
</div>
<div>
<div className="text-6xl md:text-7xl font-black text-orange-400 mb-2 leading-none">15<span className="text-3xl">%</span></div>
<p className="text-sm text-gray-300 leading-relaxed border-l-2 border-orange-500/50 pl-4">
<strong className="text-white">沸腾之怒 (Seething Fury)</strong>。对怪物提供最高15%巨额增伤，持续10秒。依靠 Claw 或 Incinerate 精准维持不断档。
</p>
</div>
</div>
{/* 数据可视化 - 简易描边几何图形 */}
<div className="w-full md:w-1/2 flex justify-center items-center relative">
<div className="absolute inset-0 bg-orange-500/5 blur-[80px] rounded-full"></div>
<svg width="240" height="240" viewBox="0 0 240 240" className="relative z-10">
<motion.circle cx="120" cy="120" r="100" stroke="rgba(249,115,22,0.2)" strokeWidth="1" fill="none" strokeDasharray="5,5" />
<motion.path d="M 120 20 L 206 170 L 34 170 Z" stroke="rgba(249,115,22,0.4)" strokeWidth="2" fill="none" />
{/* 3 Crux Points */}
<motion.rect x="110" y="10" width="20" height="20" fill="#050505" stroke="#f97316" strokeWidth="2" transform="rotate(45 120 20)" initial={{ scale: 0 }} whileInView={{ scale: 1 }} transition={{ delay: 0.5 }} />
<motion.rect x="196" y="160" width="20" height="20" fill="#050505" stroke="#f97316" strokeWidth="2" transform="rotate(45 206 170)" initial={{ scale: 0 }} whileInView={{ scale: 1 }} transition={{ delay: 0.7 }} />
<motion.rect x="24" y="160" width="20" height="20" fill="#050505" stroke="#f97316" strokeWidth="2" transform="rotate(45 34 170)" initial={{ scale: 0 }} whileInView={{ scale: 1 }} transition={{ delay: 0.9 }} />
{/* Center Core */}
<motion.circle cx="120" cy="120" r="25" fill="rgba(249,115,22,0.2)" stroke="#f97316" strokeWidth="1" animate={{ scale: [1, 1.2, 1] }} transition={{ repeat: Infinity, duration: 2 }} />
<i className="fa-solid fa-bolt text-orange-400 text-xl absolute" style={{ top: '108px', left: '112px' }}></i>
</svg>
</div>
</div>
</Card>
{/* 5. 备选技能调整 */}
<Card gradientClass="from-purple-500/40 to-purple-500/0" className="md:col-span-1 lg:col-span-1" delay={0.4}>
<h3 className="text-3xl font-black mb-1 text-white">进阶调整</h3>
<p className="text-xs tracking-[0.2em] text-purple-400 font-mono mb-6 uppercase">Alternatives</p>
<div className="space-y-4">
<div className="bg-black/30 p-4 rounded-xl border-l-4 border-purple-500">
<div className="font-bold text-white mb-1">杀手之刃 <span className="text-xs font-mono text-gray-500 ml-1">Killer's Blade</span></div>
<div className="text-xs text-gray-400 leading-relaxed">目标血量低于18%时替换光束，专用于硬核单体斩杀，提升极限DPS。</div>
</div>
<div className="bg-black/30 p-4 rounded-xl border-l-4 border-purple-500">
<div className="font-bold text-white mb-1">回音/结实活力 <span className="text-xs font-mono text-gray-500 ml-1">Vigor</span></div>
<div className="text-xs text-gray-400 leading-relaxed">队伍治疗压力大时替换猎手技能，提供巨额应急生存恢复。</div>
</div>
<div className="bg-black/30 p-4 rounded-xl border-l-4 border-purple-500">
<div className="font-bold text-white mb-1">引爆符文 <span className="text-xs font-mono text-gray-500 ml-1">Fulminating Rune</span></div>
<div className="text-xs text-gray-400 leading-relaxed">若奶妈能稳定提供次级狂暴，替换猎手增加长线DOT伤害。</div>
</div>
</div>
</Card>
{/* 6. 前排技能栏 */}
<Card gradientClass="from-green-500/40 to-green-500/0" className="md:col-span-3 lg:col-span-2" delay={0.5}>
<div className="flex justify-between items-start mb-8">
<div>
<h3 className="text-3xl font-black mb-1 text-white">前排核心输出</h3>
<p className="text-xs tracking-[0.2em] text-green-400 font-mono uppercase">Front Bar • Dual Wield</p>
</div>
<i className="fa-solid fa-khanda text-4xl text-green-500/20"></i>
</div>
<div className="flex flex-col gap-3">
<SkillRow icon="fa-wind" name="迅捷披风 Quickcloak" desc="高频触发主手附魔，提供范围AOE减伤保护" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-meteor" name="实用命运雕刻师 Pragmatic Fate Carver" desc="核心爆发！六目标穿透，引导期间赋予自身高额护盾" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-hand-sparkles" name="塞利亚赫的触手 Cealiarch's Flail" desc="造星神技，附带5%易伤debuff，斩杀期增加伤害" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-dharmachakra" name="倒刺陷阱 Barbed Trap" desc="最强单体DOT之一，槽位被动提供3%武器伤害加成" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-eye" name="伪装猎手 Camo Hunter" desc="提供次级狂暴(侧袭触发)与暴击增益，稳固输出下限" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-skull" name="瘫痪打击 Incapacitating Strike [ULT]" desc="被动提升暴击率；若目标进入斩杀阶段直接丢此大招" iconClass="border-2 border-green-500/50 text-green-400" />
</div>
</Card>
{/* 7. 后排技能栏 */}
<Card gradientClass="from-green-500/40 to-green-500/0" className="md:col-span-3 lg:col-span-2" delay={0.6}>
<div className="flex justify-between items-start mb-8">
<div>
<h3 className="text-3xl font-black mb-1 text-white">后排增益维持</h3>
<p className="text-xs tracking-[0.2em] text-green-400 font-mono uppercase">Back Bar • Greatsword</p>
</div>
<i className="fa-solid fa-gavel text-4xl text-green-500/20"></i>
</div>
<div className="flex flex-col gap-3">
<SkillRow icon="fa-fire-flame-curved" name="灼热之爪 Searing Claw" desc="核心长线DOT，用于无缝维持15%沸腾之怒增伤被动" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-person-running" name="顺劈斩 Stampede" desc="进场位移神技，完美触发大漩涡巨剑 12% 直接伤害加成" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-book-journal-whills" name="启发学者 Inspired Scholarship" desc="光束引导时自动补充1层Crux，大幅压缩触手施法频率" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-fire" name="焚化 Incinerate" desc="第二层增伤保障，槽位自带主要暴击增益，双栏覆盖" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-whip" name="熔火长鞭 Molten Whip" desc="纯被动挂件，仅放置在技能栏即可积攒沸腾之怒层数" iconClass="bg-green-500/20 text-green-400" />
<SkillRow icon="fa-eye-slash" name="衰弱之眼 Languid Eye [ULT]" desc="非斩杀阶段的核心倾泻大招，CD好且满增益直接释放" iconClass="border-2 border-green-500/50 text-green-400" />
</div>
</Card>
{/* 8. 核心输出轴可视化 */}
<Card gradientClass="from-cyan-500/40 to-cyan-500/0" className="md:col-span-3 lg:col-span-4" delay={0.7}>
<h3 className="text-4xl md:text-5xl font-black mb-2 text-white">动态输出轴</h3>
<p className="text-sm tracking-[0.3em] text-cyan-400 font-mono mb-12 uppercase">Rotation Flowchart</p>
<div className="flex flex-col xl:flex-row items-center justify-between w-full gap-12">
<div className="w-full xl:w-2/3 flex flex-col md:flex-row items-center justify-between relative py-4">
{/* 能量流动线 */}
<div className="hidden md:block absolute top-1/2 left-[10%] right-[15%] h-[2px] bg-cyan-900/50 -translate-y-1/2 z-0 overflow-hidden">
<motion.div
className="h-full bg-cyan-400 w-1/3 shadow-[0_0_10px_#22d3ee]"
animate={{ x: ["-100%", "300%"] }}
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
/>
</div>
<RotationNode icon="fa-hand-sparkles" title="触手" subtitle="FLAIL" />
<i className="fa-solid fa-chevron-down text-cyan-500 md:hidden my-6 text-2xl"></i>
<RotationNode icon="fa-hand-sparkles" title="触手" subtitle="FLAIL" />
<i className="fa-solid fa-chevron-down text-cyan-500 md:hidden my-6 text-2xl"></i>
<RotationNode icon="fa-fire" title="增益 / DOT" subtitle="BUFF OR DOT" />
<i className="fa-solid fa-chevron-down text-cyan-500 md:hidden my-6 text-2xl"></i>
{/* 爆发核心节点 */}
<div className="flex flex-col items-center relative z-10 bg-[#050505] p-4 rounded-full">
<div className="w-32 h-32 rounded-full border border-cyan-400 flex items-center justify-center bg-cyan-500/10 shadow-[0_0_40px_rgba(6,182,212,0.3)] relative">
<div className="absolute inset-0 rounded-full border-t-2 border-cyan-300 animate-spin" style={{ animationDuration: '3s' }}></div>
<i className="fa-solid fa-bolt text-cyan-300 text-5xl"></i>
</div>
<span className="mt-6 font-black text-3xl text-white">命运雕刻师</span>
<span className="text-sm text-cyan-400 font-mono tracking-widest mt-1">FATE CARVER</span>
</div>
</div>
<div className="w-full xl:w-1/3 bg-[#050505]/50 border border-cyan-500/30 rounded-3xl p-8 backdrop-blur-md">
<h4 className="text-3xl font-black text-cyan-400 mb-4 tracking-wide">最高准则</h4>
<p className="text-base text-gray-300 leading-loose">
光束占据了绝大部分伤害比例。<strong className="text-white text-lg border-b border-cyan-500/50 pb-1">宁可让 DOT 短暂断档，也绝不要提前刷新 DOT 从而打断或延后光束的引导时间！</strong>
<br/><br/>
<span className="text-sm text-gray-400">
只有三种情况例外（必须在光束前补齐）：<br/>
1. 凑齐 3层 Crux<br/>
2. 大剑顺劈斩 12% 直伤Buff快结束<br/>
3. 15% 沸腾之怒增伤Buff快结束
</span>
</p>
</div>
</div>
</Card>
</div>
);
};
const SkillRow = ({ icon, name, desc, iconClass }) => {
return (
<div className="flex items-center gap-5 bg-[#050505]/60 p-4 rounded-2xl border border-white/5 hover:border-white/10 hover:bg-white/[0.02] transition-all">
<div className={`w-12 h-12 shrink-0 rounded-xl flex items-center justify-center text-xl ${iconClass}`}>
<i className={`fa-solid ${icon}`}></i>
</div>
<div>
<div className="font-bold text-white text-base md:text-lg tracking-wide">{name}</div>
<div className="text-sm text-gray-400 mt-1 line-clamp-2 leading-relaxed">{desc}</div>
</div>
</div>
);
};
const RotationNode = ({ icon, title, subtitle }) => (
<div className="flex flex-col items-center relative z-10 bg-[#050505] p-3 rounded-full">
<div className="w-20 h-20 rounded-full border border-cyan-500/50 flex items-center justify-center bg-cyan-900/30">
<i className={`fa-solid ${icon} text-cyan-400 text-3xl`}></i>
</div>
<span className="mt-5 font-bold text-xl text-white">{title}</span>
<span className="text-xs text-cyan-400 font-mono tracking-widest mt-1">{subtitle}</span>
</div>
);
// Mount React App
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>
index.html
style.css
index.js
md
README.md
index.html