refactor: simplify personal info and remove unused components
- Replace translation-based personal info with direct values - Remove unused HeroSection, AboutSection, and ProjectsSection components - Clean up i18n translations to only keep essential navigation items
This commit is contained in:
joyzhao
@@ -1,194 +0,0 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import MotionWrapper from "./MotionWrapper";
|
||||
import { User, Code, Coffee, Heart } from "lucide-react";
|
||||
|
||||
/**
|
||||
* About section component that displays personal introduction
|
||||
*/
|
||||
export default function AboutSection({ lang }: { lang: "en" | "zh" }) {
|
||||
const t = useTranslations(lang);
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
delayChildren: 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const stats = [
|
||||
{
|
||||
number: "152",
|
||||
label: t('about.stats.repositories'),
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
number: "42K",
|
||||
label: t('about.stats.commits'),
|
||||
icon: Coffee,
|
||||
},
|
||||
{
|
||||
number: "87",
|
||||
label: t('about.stats.prsmerged'),
|
||||
icon: Heart,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="about" className="py-24 relative overflow-hidden">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
|
||||
|
||||
<div className="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<MotionWrapper>
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
>
|
||||
{/* Section Title */}
|
||||
<motion.div
|
||||
className="flex items-center justify-center mb-6"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
{t('about.title')}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
{/* About Content */}
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-stretch">
|
||||
{/* Left side - Description and Stats */}
|
||||
<motion.div
|
||||
className="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm border border-white/30 dark:border-gray-700/40 rounded-xl p-6 space-y-8"
|
||||
variants={itemVariants}
|
||||
>
|
||||
{/* Description */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
|
||||
<span className="mr-2">👋</span>
|
||||
关于我
|
||||
</h3>
|
||||
<div className="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
{t('about.description.paragraph1')}
|
||||
</p>
|
||||
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
{t('about.description.paragraph2')}
|
||||
</p>
|
||||
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
{t('about.description.paragraph3')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{stats.map((stat, index) => {
|
||||
const IconComponent = stat.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="text-center p-4 rounded-xl bg-white/30 dark:bg-gray-700/60 backdrop-blur-sm border border-white/40 dark:border-gray-600/50 hover:bg-white/40 dark:hover:bg-gray-700/80 transition-all duration-300"
|
||||
variants={itemVariants}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<IconComponent className="h-8 w-8 mx-auto mb-2 text-blue-500" />
|
||||
<div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400">
|
||||
{stat.label}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right side - Skills Toolbox */}
|
||||
<motion.div
|
||||
className="bg-white/20 dark:bg-gray-800/50 backdrop-blur-sm border border-white/30 dark:border-gray-700/40 rounded-xl p-6 flex flex-col"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
|
||||
<span className="mr-2">💻</span>
|
||||
{t('about.toolbox.title')}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6 flex-1">
|
||||
{/* Skills Progress */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">{t('about.toolbox.frontend')}</span>
|
||||
<span className="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 rounded">90%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div className="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full" style={{ width: '90%' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">{t('about.toolbox.backend')}</span>
|
||||
<span className="px-2 py-1 text-xs bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded">85%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div className="bg-gradient-to-r from-green-500 to-teal-500 h-2 rounded-full" style={{ width: '85%' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">{t('about.toolbox.devops')}</span>
|
||||
<span className="px-2 py-1 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 rounded">75%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style={{ width: '75%' }}></div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-700 dark:text-gray-300">{t('about.toolbox.mobile')}</span>
|
||||
<span className="px-2 py-1 text-xs bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 rounded">65%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div className="bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full" style={{ width: '65%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tech Stack Tags */}
|
||||
<div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['JavaScript', 'React', 'Node.js', 'TypeScript', 'TailwindCSS', 'Python', 'Docker', 'Git'].map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</MotionWrapper>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useTranslations, type Lang } from "@/i18n/utils";
|
||||
import { personalInfo } from "@/lib/data";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface FooterProps {
|
||||
@@ -21,7 +22,7 @@ export default function Footer({ lang }: FooterProps) {
|
||||
className="text-sm text-muted-foreground text-center md:text-left"
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
© {new Date().getFullYear()} {t('personal.name')}. {t('footer.rights')} ✨
|
||||
© {new Date().getFullYear()} { personalInfo.name }. {t('footer.rights')} ✨
|
||||
</motion.p>
|
||||
<motion.p
|
||||
className="text-sm text-muted-foreground mt-2 md:mt-0 text-center md:text-left"
|
||||
|
||||
@@ -1,204 +0,0 @@
|
||||
import { Mail, Github, MapPin, Linkedin, Code } from "lucide-react";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import { motion } from "framer-motion";
|
||||
import MotionWrapper from "./MotionWrapper";
|
||||
import { personalInfo } from "@/lib/data";
|
||||
|
||||
export default function HeroSection({ lang }: { lang: "en" | "zh" }) {
|
||||
const t = useTranslations(lang);
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.2,
|
||||
delayChildren: 0.3,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const childVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-32 relative overflow-hidden min-h-screen flex items-center">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
|
||||
|
||||
<div className="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Greeting */}
|
||||
<motion.div
|
||||
className="flex items-center justify-center mb-6"
|
||||
variants={childVariants}
|
||||
>
|
||||
<Code className="h-6 w-6 mr-2 text-purple-500" />
|
||||
<span className="text-purple-500 font-mono text-lg">
|
||||
{lang === 'zh' ? 'Hello World! 我是' : 'Hello World! I\'m'}
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Main title */}
|
||||
<motion.h1
|
||||
className="text-6xl md:text-8xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent"
|
||||
variants={childVariants}
|
||||
>
|
||||
{t('personal.name')}
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
className="text-2xl md:text-3xl text-muted-foreground mb-8 font-light"
|
||||
variants={childVariants}
|
||||
>
|
||||
{t('personal.title')}
|
||||
</motion.p>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
className="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed"
|
||||
variants={childVariants}
|
||||
>
|
||||
{lang === 'zh'
|
||||
? '致力于用简洁的代码和创新思维解决复杂问题。欢迎来到我的个人开发工作空间，这里是想法变为现实的地方。'
|
||||
: 'Crafting elegant solutions to complex problems with clean code and innovative thinking. Welcome to my personal dev workspace where ideas come to life.'
|
||||
}
|
||||
</motion.p>
|
||||
|
||||
{/* Action buttons */}
|
||||
<motion.div
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16"
|
||||
variants={childVariants}
|
||||
>
|
||||
<motion.a
|
||||
href="#about"
|
||||
className="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Code className="h-5 w-5" />
|
||||
{lang === 'zh' ? '查看项目' : 'View Projects'}
|
||||
</motion.a>
|
||||
|
||||
<motion.a
|
||||
href={`mailto:${t('personal.email')}`}
|
||||
className="border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Mail className="h-5 w-5" />
|
||||
{lang === 'zh' ? '联系我' : 'Contact Me'}
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact info */}
|
||||
<motion.div
|
||||
className="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground"
|
||||
variants={containerVariants}
|
||||
>
|
||||
<motion.div
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
variants={childVariants}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<MapPin className="h-4 w-4" />
|
||||
{t('personal.location')}
|
||||
</motion.div>
|
||||
|
||||
<motion.a
|
||||
href={personalInfo.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
variants={childVariants}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
{t('hero.githubLink')}
|
||||
</motion.a>
|
||||
|
||||
<motion.a
|
||||
href={personalInfo.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
variants={childVariants}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<Linkedin className="h-4 w-4" />
|
||||
{t('hero.linkedinLink')}
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Terminal mockup */}
|
||||
<MotionWrapper>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gray-900/90 backdrop-blur-sm rounded-lg border border-gray-700/50 shadow-2xl overflow-hidden">
|
||||
{/* Terminal header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-gray-800/50 border-b border-gray-700/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm font-mono">
|
||||
{lang === 'zh' ? 'john@dev-workspace' : 'john@dev-workspace'}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
{/* Terminal content */}
|
||||
<div className="p-6 font-mono text-sm">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center">
|
||||
<span className="text-purple-400 mr-2">$</span>
|
||||
<span className="text-white">whoami</span>
|
||||
</div>
|
||||
<div className="text-purple-300 ml-4">{t('personal.name')}</div>
|
||||
|
||||
<div className="flex items-center mt-4">
|
||||
<span className="text-purple-400 mr-2">$</span>
|
||||
<span className="text-white">cat about.txt</span>
|
||||
</div>
|
||||
<div className="text-gray-300 ml-4 leading-relaxed">
|
||||
{lang === 'zh'
|
||||
? 'OS: DevOS v4.2.0\nHost: ThinkPad X1 Carbon\nKernel: 5.15.0-dev\nUptime: 45 days, 17 hours\nLanguages: JavaScript, Python, Go\nEditor: VSCode / Neovim\nFrameworks: React, Next.js, Node.js'
|
||||
: 'OS: DevOS v4.2.0\nHost: ThinkPad X1 Carbon\nKernel: 5.15.0-dev\nUptime: 45 days, 17 hours\nLanguages: JavaScript, Python, Go\nEditor: VSCode / Neovim\nFrameworks: React, Next.js, Node.js'
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-4">
|
||||
<span className="text-purple-400 mr-2">$</span>
|
||||
<span className="text-white">ls projects/</span>
|
||||
</div>
|
||||
<div className="text-purple-200 ml-4">
|
||||
taskify-app/ e-commerce-platform/ portfolio-site/
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mt-4">
|
||||
<span className="text-purple-400 mr-2">$</span>
|
||||
<span className="text-white animate-pulse">_</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MotionWrapper>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
import React from "react";
|
||||
import { projects } from "@/lib/data";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import {
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "./ui/card";
|
||||
import { Github } from "lucide-react";
|
||||
import { GlassCard } from "./ui/glass-card";
|
||||
import MotionWrapper from "./MotionWrapper";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function ProjectsSection({ lang }: { lang: "en" | "zh" }) {
|
||||
const t = useTranslations(lang);
|
||||
return (
|
||||
<section id="projects" className="py-20 relative">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
|
||||
|
||||
<div className="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<MotionWrapper>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
|
||||
{t('projects.title')}
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
{lang === 'zh'
|
||||
? '我最新工作的集合，展示创新解决方案和简洁代码。点击探索详情。'
|
||||
: 'A collection of my recent work, showcasing innovative solutions and clean code. Click to explore details.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</MotionWrapper>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{projects.map((project, index) => (
|
||||
<MotionWrapper key={project.title} delay={index * 0.2}>
|
||||
<GlassCard className="group overflow-hidden border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105">
|
||||
{/* Project image placeholder */}
|
||||
<div className="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-purple-600/10 group-hover:from-purple-500/20 group-hover:to-purple-600/20 transition-all duration-500"></div>
|
||||
<div className="absolute bottom-4 left-4 right-4">
|
||||
<div className="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
|
||||
{index === 0 ? 'Taskify App' : index === 1 ? 'E-Shop Platform' : 'Portfolio Site'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardHeader className="pb-4">
|
||||
<CardTitle className="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2">
|
||||
<span className="text-purple-500">📱</span>
|
||||
{t(project.title as any)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex-grow">
|
||||
<div className="space-y-3">
|
||||
{project.description.slice(0, 3).map((desc, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<span className="text-purple-500 mt-1">•</span>
|
||||
<span>{t(desc as any)}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tech stack indicators */}
|
||||
<div className="mt-6 flex flex-wrap gap-2">
|
||||
{index === 0 && (
|
||||
<>
|
||||
<span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">React</span>
|
||||
<span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Node.js</span>
|
||||
<span className="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-full">MongoDB</span>
|
||||
</>
|
||||
)}
|
||||
{index === 1 && (
|
||||
<>
|
||||
<span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">Next.js</span>
|
||||
<span className="px-2 py-1 bg-yellow-500/20 text-yellow-400 text-xs rounded-full">Stripe</span>
|
||||
<span className="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
|
||||
</>
|
||||
)}
|
||||
{index === 2 && (
|
||||
<>
|
||||
<span className="px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-full">HTML</span>
|
||||
<span className="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
|
||||
<span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Alpine.js</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CardFooter className="pt-4 border-t border-border/30">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<motion.a
|
||||
href={project.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<Github className="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" />
|
||||
{t('projects.viewOnGithub')}
|
||||
</motion.a>
|
||||
|
||||
<motion.button
|
||||
className="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<span>🔗</span>
|
||||
{lang === 'zh' ? '查看详情' : 'Live Demo'}
|
||||
</motion.button>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</GlassCard>
|
||||
</MotionWrapper>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user