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>
|
||||
);
|
||||
}
|
||||
382
src/i18n/ui.ts
382
src/i18n/ui.ts
@@ -9,370 +9,28 @@ export const defaultLang = 'en';
|
||||
export const ui = {
|
||||
en: {
|
||||
'nav.home': 'Home',
|
||||
'nav.about': 'About Me',
|
||||
'nav.about': 'About',
|
||||
'nav.projects': 'Projects',
|
||||
'footer.rights': 'All rights reserved.',
|
||||
'site.title': 'My Portfolio',
|
||||
'page.home.title': 'Home',
|
||||
|
||||
// Personal Info
|
||||
'personal.name': 'Joy Zhao',
|
||||
'personal.title': 'Full Stack Engineer 👨💻',
|
||||
'personal.location': 'China',
|
||||
'personal.email': 'rkesh2003@gmail.com',
|
||||
|
||||
// Hero Section
|
||||
'hero.githubLink': 'GitHub',
|
||||
'hero.linkedinLink': 'LinkedIn',
|
||||
'hero.description': '🚀 Passionate software engineer with a versatile skill set spanning multiple domains. I thrive on solving complex challenges across different platforms and environments, adapting quickly to new technologies and methodologies. My holistic approach combines technical expertise with creative problem-solving, allowing me to develop solutions that are both innovative and practical. I\'m driven by continuous learning and a commitment to excellence, whether working independently or collaborating with diverse teams to create impactful, scalable solutions.',
|
||||
|
||||
// Experience Section
|
||||
'experience.title': 'Work Experience',
|
||||
'experience.keyAchievements': 'Key Achievements',
|
||||
|
||||
// Education Section
|
||||
'education.title': 'Education',
|
||||
'education.achievementsAndActivities': 'Achievements & Activities',
|
||||
|
||||
// Skills Section
|
||||
'skills.title': 'Skills',
|
||||
|
||||
// About Section
|
||||
'about.title': 'About Me',
|
||||
'about.description.paragraph1': 'I\'m a passionate developer with 5+ years of experience building web applications and contributing to open source projects. I specialize in creating clean, efficient, and maintainable code.',
|
||||
'about.description.paragraph2': 'When I\'m not coding, you can find me exploring new technologies, writing tech articles, or enjoying a fresh cup of coffee while debugging complex problems.',
|
||||
'about.description.paragraph3': 'I believe in continuous learning and staying up-to-date with the latest industry trends and best practices.',
|
||||
'about.stats.repositories': 'Repositories',
|
||||
'about.stats.commits': 'Commits',
|
||||
'about.stats.prsmerged': 'PRs Merged',
|
||||
'about.toolbox.title': 'My Toolbox',
|
||||
'about.toolbox.frontend': 'Frontend',
|
||||
'about.toolbox.backend': 'Backend',
|
||||
'about.toolbox.devops': 'DevOps',
|
||||
'about.toolbox.mobile': 'Mobile',
|
||||
|
||||
// Projects Section
|
||||
'projects.title': 'Latest Projects',
|
||||
'projects.viewOnGithub': 'View on GitHub',
|
||||
|
||||
// Services Section
|
||||
'services.title': 'Services I Offer',
|
||||
'services.outsourcing.title': 'Outsourcing Projects',
|
||||
'services.outsourcing.item1': 'Provide outsourcing project services for overseas clients',
|
||||
'services.outsourcing.item2': 'Project packaging, can provide services in different packages',
|
||||
'services.outsourcing.item3': 'Use popular technologies: React, nest.js, next.js, etc.',
|
||||
'services.outsourcing.item4': 'Project delivery, provide three months of free maintenance',
|
||||
'services.outsourcing.item5': 'Regardless of project size, can provide services',
|
||||
'services.bugfix.title': 'Bug Fixes',
|
||||
'services.bugfix.item1': 'Quickly locate and fix website issues, able to quickly locate and solve problems',
|
||||
'services.bugfix.item2': 'Help you solve any problems encountered in the project, Bug, functional optimization issues',
|
||||
'services.bugfix.item3': 'Application of Vue, React, Node and other technologies',
|
||||
'services.bugfix.item4': 'Frontend automation, deployment, monitoring, automation, etc.',
|
||||
'services.bugfix.item5': 'Only limited to Node.js projects',
|
||||
|
||||
// Awards Section
|
||||
'awards.title': 'Awards',
|
||||
|
||||
// Work Experience
|
||||
'work.chatbyte.company': 'Chatbyte GmbH',
|
||||
'work.chatbyte.location': 'Remote',
|
||||
'work.chatbyte.position': 'Software Engineer',
|
||||
'work.chatbyte.period': 'Mar 2024 - Present',
|
||||
'work.chatbyte.achievement1': 'Designed and implemented business logic for AWS Lambdas using the Serverless Framework, forming the backbone of the application\'s functionality and ensuring seamless backend operations.',
|
||||
'work.chatbyte.achievement2': 'Built a comprehensive admin panel for managing content, user data, and analytics.',
|
||||
'work.chatbyte.achievement3': 'Contributed to the development and integration of a scalable CMS for managing blog content and other platform data.',
|
||||
'work.chatbyte.achievement4': 'Reduced database costs by introducing materialized views, optimizing query performance and resource usage.',
|
||||
'work.chatbyte.achievement5': 'Drove the integration of a custom affiliate marketing system, enabling seamless tracking and reporting of referrals and user activities.',
|
||||
'work.chatbyte.achievement6': 'Integrated Text-to-Speech (TTS) services for enhanced user experiences, optimizing both frontend and backend systems.',
|
||||
'work.chatbyte.achievement7': 'Collaborated with cross-functional teams to deliver high-quality features, actively reviewing pull requests to ensure code quality, adherence to standards, and efficient implementation.',
|
||||
|
||||
'work.devcrew.company': 'DevCrew',
|
||||
'work.devcrew.location': 'Coimbatore, India',
|
||||
'work.devcrew.position': 'Software Engineer',
|
||||
'work.devcrew.period': 'Mar 2023 - Mar 2024',
|
||||
'work.devcrew.achievement1': 'Developed responsive frontend components using React.js, enhancing user experience and app performance.',
|
||||
'work.devcrew.achievement2': 'Optimized JavaScript solutions to improve load times and data-fetching efficiency.',
|
||||
|
||||
'work.phoenitags.company': 'Phoenitags',
|
||||
'work.phoenitags.location': 'Coimbatore, India',
|
||||
'work.phoenitags.position': 'Software Engineering Intern',
|
||||
'work.phoenitags.period': 'Jan 2023 - Mar 2023',
|
||||
'work.phoenitags.achievement1': 'Built interactive UIs with React.js, focusing on reusable components and performance optimization.',
|
||||
'work.phoenitags.achievement2': 'Implemented JavaScript-based features like user authentication and real-time updates.',
|
||||
|
||||
// Education
|
||||
'education.skcet.institution': 'Sri Krishna College of Engineering and Technology',
|
||||
'education.skcet.location': 'Coimbatore, India',
|
||||
'education.skcet.degree': 'B Tech Information Technology',
|
||||
'education.skcet.period': 'Jun 2021 - Jun 2025',
|
||||
'education.skcet.achievement1': 'President of the Department of Information Technology',
|
||||
'education.skcet.achievement2': 'G20 student delegate',
|
||||
'education.skcet.achievement3': 'Organized multiple technical workshops and events',
|
||||
'education.skcet.achievement4': 'Represented my college in multiple national and international hackathons and won.',
|
||||
|
||||
// Skills
|
||||
'skills.programmingLanguages': 'Programming Languages',
|
||||
'skills.frontendDevelopment': 'Frontend Development',
|
||||
'skills.backendDevelopment': 'Backend Development',
|
||||
'skills.databaseAndStorage': 'Database & Storage',
|
||||
'skills.cloudAndDevOps': 'Cloud & DevOps',
|
||||
'skills.toolsAndServices': 'Tools & Services',
|
||||
|
||||
// Projects
|
||||
'projects.taskify.title': 'Taskify App',
|
||||
'projects.taskify.description.0': 'A task management app with real-time collaboration, built using React, Node.js, and MongoDB.',
|
||||
'projects.taskify.description.1': 'Real-time collaboration features with WebSocket integration for instant updates.',
|
||||
'projects.taskify.description.2': 'Advanced task filtering, sorting, and project management capabilities.',
|
||||
'projects.taskify.description.3': 'User authentication and role-based access control system.',
|
||||
'projects.taskify.description.4': 'Responsive design optimized for both desktop and mobile devices.',
|
||||
|
||||
'projects.eshop.title': 'E-Shop Platform',
|
||||
'projects.eshop.description.0': 'A scalable e-commerce platform with Next.js, Stripe payments, and TailwindCSS.',
|
||||
'projects.eshop.description.1': 'Integrated Stripe payment processing for secure transactions.',
|
||||
'projects.eshop.description.2': 'Advanced product catalog with search, filtering, and recommendation features.',
|
||||
'projects.eshop.description.3': 'Admin dashboard for inventory management and order tracking.',
|
||||
'projects.eshop.description.4': 'SEO-optimized with server-side rendering and dynamic routing.',
|
||||
|
||||
'projects.portfolio.title': 'Portfolio Site',
|
||||
'projects.portfolio.description.0': 'My personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js.',
|
||||
'projects.portfolio.description.1': 'Modern glassmorphism design with smooth animations and transitions.',
|
||||
'projects.portfolio.description.2': 'Fully responsive layout optimized for all device sizes.',
|
||||
'projects.portfolio.description.3': 'Interactive components with Alpine.js for enhanced user experience.',
|
||||
'projects.portfolio.description.4': 'Performance-optimized with lazy loading and efficient asset management.',
|
||||
'projects.netzero.description5': 'Reward Integration: Built QR-based green points system to incentivize eco-friendly actions.',
|
||||
|
||||
'projects.mentalaarog.title': 'Mental Aarog',
|
||||
'projects.mentalaarog.description1': 'A holistic mental health app leveraging AI and blockchain for early detection and personalized solutions for depression.',
|
||||
'projects.mentalaarog.description2': 'Features include social media analysis (ML-based sentiment tracking), PHQ-9 assessments, smartwatch integration for sleep and activity data, guided meditation, and smart suggestions for food, travel, music, and movies.',
|
||||
'projects.mentalaarog.description3': 'Developed a rewards system using MAG crypto token on Ethereum, enabling user engagement through in-app incentives.',
|
||||
'projects.mentalaarog.description4': 'Secure storage implemented via web3.storage, IPFS, and FileCoin.',
|
||||
'projects.mentalaarog.description5': 'Built with React, Supabase, Node.js, Flask, and Solidity, showcasing seamless integration of health tech and blockchain.',
|
||||
|
||||
// Awards
|
||||
'awards.ieee.name': 'IEEE YESIST12 Hackathon',
|
||||
'awards.ieee.issuer': 'IEEE',
|
||||
'awards.ieee.date': 'Sep 2022',
|
||||
'awards.ieee.type': 'International',
|
||||
'awards.ieee.position': 'Second Place',
|
||||
|
||||
'awards.prodigi.name': 'Prodigi Cognizant Hackathon',
|
||||
'awards.prodigi.issuer': 'Cognizant',
|
||||
'awards.prodigi.date': 'Feb 2023',
|
||||
'awards.prodigi.type': 'National',
|
||||
'awards.prodigi.position': 'Second Runner-up',
|
||||
|
||||
'awards.cisco.name': 'Cisco Thingqbator Hackathon',
|
||||
'awards.cisco.issuer': 'Cisco',
|
||||
'awards.cisco.date': 'Jan 2023',
|
||||
'awards.cisco.type': 'National',
|
||||
'awards.cisco.position': 'First Runner-up',
|
||||
|
||||
'awards.innovators.name': 'Innovators Day',
|
||||
'awards.innovators.issuer': 'Sri Manakula Vinayagar Engineering College, Pondicherry',
|
||||
'awards.innovators.date': 'Sep 2022',
|
||||
'awards.innovators.type': 'National',
|
||||
'awards.innovators.position': 'First Prize',
|
||||
|
||||
'awards.kghackfest.name': 'KG Hackfest\'22',
|
||||
'awards.kghackfest.issuer': 'KGiSL Institute of Technology, Coimbatore',
|
||||
'awards.kghackfest.date': 'Sep 2022',
|
||||
'awards.kghackfest.type': 'National',
|
||||
'awards.kghackfest.position': 'Second Prize',
|
||||
|
||||
'awards.innohacks.name': 'Innohacks\'22',
|
||||
'awards.innohacks.issuer': 'Innogeeks, KIET Group of Institutions, New Delhi',
|
||||
'awards.innohacks.date': 'May 2022',
|
||||
'awards.innohacks.type': 'National',
|
||||
'awards.innohacks.position': 'Second Runner-up',
|
||||
|
||||
'awards.hackskcet.name': 'Hack @ SKCET',
|
||||
'awards.hackskcet.issuer': 'Hackclub SKCET, SKCET, Coimbatore',
|
||||
'awards.hackskcet.date': 'Feb 2022',
|
||||
'awards.hackskcet.type': 'National',
|
||||
'awards.hackskcet.position': 'Most Impactful Hack',
|
||||
'nav.contact': 'Contact',
|
||||
'site.title': 'Joy Zhao - Full Stack Developer',
|
||||
'site.description': 'Full Stack Developer specializing in React, Node.js, and modern web technologies',
|
||||
'hero.githubLink': 'GitHub Profile',
|
||||
'hero.linkedinLink': 'LinkedIn Profile',
|
||||
'footer.rights': 'All rights reserved'
|
||||
// Projects and services content has been inlined into respective page files
|
||||
// to reduce reliance on the translation system and improve maintainability
|
||||
},
|
||||
zh: {
|
||||
'nav.home': '首页',
|
||||
'nav.projects': '项目经历',
|
||||
'nav.about': '关于我',
|
||||
'footer.rights': '版权所有。',
|
||||
'site.title': '我的作品集',
|
||||
'page.home.title': '首页',
|
||||
|
||||
// Personal Info
|
||||
'personal.name': 'Joy Zhao',
|
||||
'personal.title': '全栈工程师 👨💻',
|
||||
'personal.location': '中国',
|
||||
'personal.email': 'rkesh2003@gmail.com',
|
||||
|
||||
// Hero Section
|
||||
'hero.githubLink': 'GitHub',
|
||||
'hero.linkedinLink': '领英',
|
||||
'hero.description': '🚀 我是一名充满热情的软件工程师，拥有跨越多个领域的多才多艺的技能。我乐于在不同平台和环境中解决复杂挑战，能够快速适应新技术和方法论。我的整体方法将技术专长与创造性问题解决相结合，使我能够开发出既创新又实用的解决方案。无论是独立工作还是与多元化团队合作创建有影响力、可扩展的解决方案，我都以持续学习和追求卓越为动力。',
|
||||
|
||||
// Experience Section
|
||||
'experience.title': '工作经历',
|
||||
'experience.keyAchievements': '主要成就',
|
||||
|
||||
// Education Section
|
||||
'education.title': '教育背景',
|
||||
'education.achievementsAndActivities': '成就与活动',
|
||||
|
||||
// Skills Section
|
||||
'skills.title': '专业技能',
|
||||
|
||||
// About Section
|
||||
'about.title': '关于我',
|
||||
'about.description.paragraph1': '我是一名充满热情的开发者，拥有5年以上构建Web应用程序和参与开源项目的经验。我专注于创建简洁、高效且易于维护的代码。',
|
||||
'about.description.paragraph2': '当我不在编程时，你可以发现我在探索新技术、撰写技术文章，或者在调试复杂问题时享受一杯新鲜的咖啡。',
|
||||
'about.description.paragraph3': '我相信持续学习，并与最新的行业趋势和最佳实践保持同步。',
|
||||
'about.stats.repositories': '代码仓库',
|
||||
'about.stats.commits': '提交次数',
|
||||
'about.stats.prsmerged': '合并请求',
|
||||
'about.toolbox.title': '我的工具箱',
|
||||
'about.toolbox.frontend': '前端',
|
||||
'about.toolbox.backend': '后端',
|
||||
'about.toolbox.devops': 'DevOps',
|
||||
'about.toolbox.mobile': '移动端',
|
||||
|
||||
// Projects Section
|
||||
'projects.title': '最新项目',
|
||||
'projects.viewOnGithub': '在 GitHub 上查看',
|
||||
|
||||
// Services Section
|
||||
'services.title': '我提供的服务',
|
||||
'services.outsourcing.title': '外包项目',
|
||||
'services.outsourcing.item1': '面向海外客户，提供外包项目服务',
|
||||
'services.outsourcing.item2': '项目整包，分包均可提供服务',
|
||||
'services.outsourcing.item3': '使用热门流行的技术栈：React、nest.js、next.js等',
|
||||
'services.outsourcing.item4': '项目交付后，提供三个月免费的维护',
|
||||
'services.outsourcing.item5': '不论项目大小，均可提供服务',
|
||||
'services.bugfix.title': 'Bug修复',
|
||||
'services.bugfix.item1': '拥有丰富的错误问题经验，能够快速定位并解决问题',
|
||||
'services.bugfix.item2': '帮助你解决项目中遇到的任何问题、Bug、功能优化等问题',
|
||||
'services.bugfix.item3': 'Vue、React、Node等技术栈的应用',
|
||||
'services.bugfix.item4': '前端自动化、部署、监控、自动化等',
|
||||
'services.bugfix.item5': '仅限前端、Node.js项目',
|
||||
|
||||
// Awards Section
|
||||
'awards.title': '获奖经历',
|
||||
|
||||
// Work Experience
|
||||
'work.chatbyte.company': 'Chatbyte GmbH',
|
||||
'work.chatbyte.location': '远程',
|
||||
'work.chatbyte.position': '软件工程师',
|
||||
'work.chatbyte.period': '2024年3月 - 至今',
|
||||
'work.chatbyte.achievement1': '使用无服务器框架设计并实现了 AWS Lambda 的业务逻辑，构成了应用程序功能的支柱，并确保了无缝的后端操作。',
|
||||
'work.chatbyte.achievement2': '构建了一个全面的管理面板，用于管理内容、用户数据和分析。',
|
||||
'work.chatbyte.achievement3': '参与了可扩展 CMS 的开发和集成，用于管理博客内容和其他平台数据。',
|
||||
'work.chatbyte.achievement4': '通过引入物化视图降低了数据库成本，优化了查询性能和资源使用。',
|
||||
'work.chatbyte.achievement5': '推动了自定义联盟营销系统的集成，实现了对推荐和用户活动的无缝跟踪和报告。',
|
||||
'work.chatbyte.achievement6': '集成了文本转语音 (TTS) 服务以增强用户体验，优化了前端和后端系统。',
|
||||
'work.chatbyte.achievement7': '与跨职能团队合作交付高质量功能，积极审查拉取请求以确保代码质量、遵守标准和高效实施。',
|
||||
|
||||
'work.devcrew.company': 'DevCrew',
|
||||
'work.devcrew.location': '哥印拜陀，印度',
|
||||
'work.devcrew.position': '软件工程师',
|
||||
'work.devcrew.period': '2023年3月 - 2024年3月',
|
||||
'work.devcrew.achievement1': '使用 React.js 开发了响应式前端组件，增强了用户体验和应用程序性能。',
|
||||
'work.devcrew.achievement2': '优化了 JavaScript 解决方案，以提高加载时间和数据获取效率。',
|
||||
|
||||
'work.phoenitags.company': 'Phoenitags',
|
||||
'work.phoenitags.location': '哥印拜陀，印度',
|
||||
'work.phoenitags.position': '软件工程实习生',
|
||||
'work.phoenitags.period': '2023年1月 - 2023年3月',
|
||||
'work.phoenitags.achievement1': '使用 React.js 构建了交互式 UI，专注于可重用组件和性能优化。',
|
||||
'work.phoenitags.achievement2': '实现了基于 JavaScript 的功能，如用户身份验证和实时更新。',
|
||||
|
||||
// Education
|
||||
'education.skcet.institution': 'Sri Krishna 工程技术学院',
|
||||
'education.skcet.location': '哥印拜陀，印度',
|
||||
'education.skcet.degree': '信息技术学士',
|
||||
'education.skcet.period': '2021年6月 - 2025年6月',
|
||||
'education.skcet.achievement1': '信息技术系主席',
|
||||
'education.skcet.achievement2': 'G20 学生代表',
|
||||
'education.skcet.achievement3': '组织了多次技术研讨会和活动',
|
||||
'education.skcet.achievement4': '代表学院参加了多次国家级和国际级黑客马拉松并获奖。',
|
||||
|
||||
// Skills
|
||||
'skills.programmingLanguages': '编程语言',
|
||||
'skills.frontendDevelopment': '前端开发',
|
||||
'skills.backendDevelopment': '后端开发',
|
||||
'skills.databaseAndStorage': '数据库与存储',
|
||||
'skills.cloudAndDevOps': '云计算与 DevOps',
|
||||
'skills.toolsAndServices': '工具与服务',
|
||||
|
||||
// Projects
|
||||
'projects.taskify.title': 'Taskify 应用',
|
||||
'projects.taskify.description.0': '使用 React、Node.js 和 MongoDB 构建的实时协作任务管理应用。',
|
||||
'projects.taskify.description.1': '通过 WebSocket 集成实现实时协作功能，提供即时更新。',
|
||||
'projects.taskify.description.2': '高级任务过滤、排序和项目管理功能。',
|
||||
'projects.taskify.description.3': '用户认证和基于角色的访问控制系统。',
|
||||
'projects.taskify.description.4': '针对桌面和移动设备优化的响应式设计。',
|
||||
|
||||
'projects.eshop.title': '电商平台',
|
||||
'projects.eshop.description.0': '使用 Next.js、Stripe 支付和 TailwindCSS 构建的可扩展电商平台。',
|
||||
'projects.eshop.description.1': '集成 Stripe 支付处理，确保交易安全。',
|
||||
'projects.eshop.description.2': '高级产品目录，具备搜索、过滤和推荐功能。',
|
||||
'projects.eshop.description.3': '管理员仪表板，用于库存管理和订单跟踪。',
|
||||
'projects.eshop.description.4': '通过服务端渲染和动态路由进行 SEO 优化。',
|
||||
|
||||
'projects.portfolio.title': '个人作品集',
|
||||
'projects.portfolio.description.0': '使用 HTML、TailwindCSS 和 Alpine.js 构建的个人作品集网站。',
|
||||
'projects.portfolio.description.1': '现代玻璃拟态设计，具有流畅的动画和过渡效果。',
|
||||
'projects.portfolio.description.2': '针对所有设备尺寸优化的完全响应式布局。',
|
||||
'projects.portfolio.description.3': '使用 Alpine.js 的交互式组件，增强用户体验。',
|
||||
'projects.portfolio.description.4': '通过懒加载和高效资源管理进行性能优化。',
|
||||
'projects.netzero.description5': '奖励整合：构建了基于二维码的绿色积分系统以激励环保行为。',
|
||||
|
||||
'projects.mentalaarog.title': 'Mental Aarog',
|
||||
'projects.mentalaarog.description1': '一个利用人工智能和区块链进行早期检测和个性化抑郁症解决方案的整体心理健康应用程序。',
|
||||
'projects.mentalaarog.description2': '功能包括社交媒体分析（基于机器学习的情感跟踪）、PHQ-9 评估、智能手表集成用于睡眠和活动数据、引导冥想以及食物、旅行、音乐和电影的智能建议。',
|
||||
'projects.mentalaarog.description3': '使用以太坊上的 MAG 加密代币开发了奖励系统，通过应用内激励实现用户参与。',
|
||||
'projects.mentalaarog.description4': '通过 web3.storage、IPFS 和 FileCoin 实现安全存储。',
|
||||
'projects.mentalaarog.description5': '使用 React、Supabase、Node.js、Flask 和 Solidity 构建，展示了健康技术和区块链的无缝集成。',
|
||||
|
||||
// Awards
|
||||
'awards.ieee.name': 'IEEE YESIST12 黑客马拉松',
|
||||
'awards.ieee.issuer': 'IEEE',
|
||||
'awards.ieee.date': '2022年9月',
|
||||
'awards.ieee.type': '国际',
|
||||
'awards.ieee.position': '第二名',
|
||||
|
||||
'awards.prodigi.name': 'Prodigi Cognizant 黑客马拉松',
|
||||
'awards.prodigi.issuer': 'Cognizant',
|
||||
'awards.prodigi.date': '2023年2月',
|
||||
'awards.prodigi.type': '国家级',
|
||||
'awards.prodigi.position': '季军',
|
||||
|
||||
'awards.cisco.name': 'Cisco Thingqbator 黑客马拉松',
|
||||
'awards.cisco.issuer': 'Cisco',
|
||||
'awards.cisco.date': '2023年1月',
|
||||
'awards.cisco.type': '国家级',
|
||||
'awards.cisco.position': '亚军',
|
||||
|
||||
'awards.innovators.name': '创新者日',
|
||||
'awards.innovators.issuer': 'Sri Manakula Vinayagar 工程学院，本地治里',
|
||||
'awards.innovators.date': '2022年9月',
|
||||
'awards.innovators.type': '国家级',
|
||||
'awards.innovators.position': '一等奖',
|
||||
|
||||
'awards.kghackfest.name': 'KG Hackfest\'22',
|
||||
'awards.kghackfest.issuer': 'KGiSL 理工学院，哥印拜陀',
|
||||
'awards.kghackfest.date': '2022年9月',
|
||||
'awards.kghackfest.type': '国家级',
|
||||
'awards.kghackfest.position': '二等奖',
|
||||
|
||||
'awards.innohacks.name': 'Innohacks\'22',
|
||||
'awards.innohacks.issuer': 'Innogeeks, KIET 集团机构，新德里',
|
||||
'awards.innohacks.date': '2022年5月',
|
||||
'awards.innohacks.type': '国家级',
|
||||
'awards.innohacks.position': '季军',
|
||||
|
||||
'awards.hackskcet.name': 'Hack @ SKCET',
|
||||
'awards.hackskcet.issuer': 'Hackclub SKCET, SKCET，哥印拜陀',
|
||||
'awards.hackskcet.date': '2022年2月',
|
||||
'awards.hackskcet.type': '国家级',
|
||||
'awards.hackskcet.position': '最具影响力黑客奖',
|
||||
},
|
||||
'nav.about': '关于',
|
||||
'nav.projects': '项目',
|
||||
'nav.contact': '联系',
|
||||
'site.title': 'Joy Zhao - 全栈开发者',
|
||||
'site.description': '专注于 React、Node.js 和现代 Web 技术的全栈开发者',
|
||||
'hero.githubLink': 'GitHub 主页',
|
||||
'hero.linkedinLink': 'LinkedIn 主页',
|
||||
'footer.rights': '版权所有'
|
||||
// Projects and services content has been inlined into respective page files
|
||||
// to reduce reliance on the translation system and improve maintainability
|
||||
}
|
||||
} as const;
|
||||
@@ -1,43 +1,7 @@
|
||||
export const personalInfo = {
|
||||
name: "personal.name",
|
||||
location: "personal.location",
|
||||
email: "rkesh2003@gmail.com", // Email might not be a translated key, but a value
|
||||
github: "https://github.com/rishikesh2003",
|
||||
linkedin: "https://www.linkedin.com/in/rishikeshs/",
|
||||
name: "Joy Zhao",
|
||||
location: "Shanghai, China",
|
||||
email: "zhaoguiyang@example.com",
|
||||
github: "https://github.com/zhaoguiyang",
|
||||
linkedin: "https://linkedin.com/in/zhaoguiyang"
|
||||
};
|
||||
|
||||
export const projects = [
|
||||
{
|
||||
title: "projects.taskify.title",
|
||||
github: "https://github.com/joyzhao/taskify-app",
|
||||
description: [
|
||||
"projects.taskify.description.0",
|
||||
"projects.taskify.description.1",
|
||||
"projects.taskify.description.2",
|
||||
"projects.taskify.description.3",
|
||||
"projects.taskify.description.4",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "projects.eshop.title",
|
||||
github: "https://github.com/joyzhao/e-commerce-platform",
|
||||
description: [
|
||||
"projects.eshop.description.0",
|
||||
"projects.eshop.description.1",
|
||||
"projects.eshop.description.2",
|
||||
"projects.eshop.description.3",
|
||||
"projects.eshop.description.4",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "projects.portfolio.title",
|
||||
github: "https://github.com/joyzhao/portfolio-site",
|
||||
description: [
|
||||
"projects.portfolio.description.0",
|
||||
"projects.portfolio.description.1",
|
||||
"projects.portfolio.description.2",
|
||||
"projects.portfolio.description.3",
|
||||
"projects.portfolio.description.4",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,30 +1,176 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import GlassHeader from "@/components/GlassHeader";
|
||||
import HeroSection from "@/components/HeroSection";
|
||||
import AboutSection from "@/components/AboutSection";
|
||||
import SkillsMarquee from "@/components/SkillsMarquee";
|
||||
import ProjectsSection from "@/components/ProjectsSection";
|
||||
import Footer from "@/components/Footer";
|
||||
import { useTranslations, type Lang } from "@/i18n/utils";
|
||||
import { defaultLang } from "@/i18n/ui";
|
||||
import { personalInfo } from "@/lib/data";
|
||||
|
||||
const lang: Lang = defaultLang;
|
||||
const t = useTranslations(lang);
|
||||
const pageTitle = t('page.home.title');
|
||||
const pageTitle = t('site.title');
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:only="react" />
|
||||
<main class="min-h-screen">
|
||||
<HeroSection lang={lang} client:only="react" />
|
||||
<!-- Hero Section - Inlined Content -->
|
||||
<section class="py-32 relative overflow-hidden min-h-screen flex items-center">
|
||||
<!-- Background gradient -->
|
||||
<div class="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 class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<!-- Greeting -->
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<svg class="h-6 w-6 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
<span class="text-purple-500 font-mono text-lg">
|
||||
Hello World! I'm
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Main title -->
|
||||
<h1 class="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">
|
||||
Joy Zhao
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light">
|
||||
Full Stack Engineer 👨💻
|
||||
</p>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
|
||||
Crafting elegant solutions to complex problems with clean code and innovative thinking. Welcome to my personal dev workspace where ideas come to life.
|
||||
</p>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
|
||||
<a
|
||||
href="#about"
|
||||
class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
View Projects
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="mailto:rkesh2003@gmail.com"
|
||||
class="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"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Contact Me
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contact info -->
|
||||
<div class="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
|
||||
<div class="flex items-center gap-2 hover:text-foreground transition-colors">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
China
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={personalInfo.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={personalInfo.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal mockup -->
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-gray-900/90 backdrop-blur-sm rounded-lg border border-gray-700/50 shadow-2xl overflow-hidden">
|
||||
<!-- Terminal header -->
|
||||
<div class="flex items-center justify-between px-4 py-3 bg-gray-800/50 border-b border-gray-700/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-gray-400 text-sm font-mono">
|
||||
john@dev-workspace
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<div class="p-6 font-mono text-sm">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white">whoami</span>
|
||||
</div>
|
||||
<div class="text-purple-300 ml-4">Joy Zhao</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white">cat about.txt</span>
|
||||
</div>
|
||||
<div class="text-gray-300 ml-4 leading-relaxed">
|
||||
OS: DevOS v4.2.0<br/>
|
||||
Host: ThinkPad X1 Carbon<br/>
|
||||
Kernel: 5.15.0-dev<br/>
|
||||
Uptime: 45 days, 17 hours<br/>
|
||||
Languages: JavaScript, Python, Go<br/>
|
||||
Editor: VSCode / Neovim<br/>
|
||||
Frameworks: React, Next.js, Node.js
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white">ls projects/</span>
|
||||
</div>
|
||||
<div class="text-purple-200 ml-4">
|
||||
taskify-app/ e-commerce-platform/ portfolio-site/
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white animate-pulse">_</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<SkillsMarquee lang={lang} client:only="react" />
|
||||
|
||||
<!-- Services Section -->
|
||||
<!-- Services Section - Inlined Content -->
|
||||
<section class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
{t('services.title')}
|
||||
Services I Offer
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
@@ -36,28 +182,28 @@ const pageTitle = t('page.home.title');
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">{t('services.outsourcing.title')}</h3>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">Outsourcing Projects</h3>
|
||||
</div>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">1.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item1')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Provide outsourcing project services for overseas clients</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">2.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item2')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Project packaging, can provide services in different packages</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">3.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item3')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Use popular technologies: React, nest.js, next.js, etc.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">4.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item4')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Project delivery, provide three months of free maintenance</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">5.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item5')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Regardless of project size, can provide services</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -71,28 +217,28 @@ const pageTitle = t('page.home.title');
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">{t('services.bugfix.title')}</h3>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">Bug Fixes</h3>
|
||||
</div>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">1.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item1')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Quickly locate and fix website issues, able to quickly locate and solve problems</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">2.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item2')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Help you solve any problems encountered in the project, Bug, functional optimization issues</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">3.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item3')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Application of Vue, React, Node and other technologies</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">4.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item4')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Frontend automation, deployment, monitoring, automation, etc.</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">5.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item5')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Only limited to Node.js projects</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -100,8 +246,358 @@ const pageTitle = t('page.home.title');
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<AboutSection lang={lang} client:only="react" />
|
||||
<ProjectsSection lang={lang} client:only="react" />
|
||||
<!-- About Section - Inlined Content -->
|
||||
<section id="about" class="py-24 relative overflow-hidden">
|
||||
<!-- Background gradient -->
|
||||
<div class="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 class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<!-- Section Title -->
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
About Me
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- About Content -->
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-stretch">
|
||||
<!-- Left side - Description and Stats -->
|
||||
<div class="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">
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
|
||||
<span class="mr-2">👋</span>
|
||||
About Me
|
||||
</h3>
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
I'm a passionate developer with 5+ years of experience building web applications and contributing to open source projects. I specialize in creating clean, efficient, and maintainable code.
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
When I'm not coding, you can find me exploring new technologies, writing tech articles, or enjoying a fresh cup of coffee while debugging complex problems.
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
I believe in continuous learning and staying up-to-date with the latest industry trends and best practices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="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">
|
||||
<svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
<div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
152
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">
|
||||
Repositories
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="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">
|
||||
<svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2.25"></path>
|
||||
</svg>
|
||||
<div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
42K
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">
|
||||
Commits
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="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">
|
||||
<svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
||||
</svg>
|
||||
<div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
87
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">
|
||||
PRs Merged
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Skills Toolbox -->
|
||||
<div class="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">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
|
||||
<span class="mr-2">💻</span>
|
||||
My Toolbox
|
||||
</h3>
|
||||
|
||||
<div class="space-y-6 flex-1">
|
||||
<!-- Skills Progress -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Frontend</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full" style="width: 90%"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Backend</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-green-500 to-teal-500 h-2 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">DevOps</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 75%"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">Mobile</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="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 class="flex flex-wrap gap-2">
|
||||
{['JavaScript', 'React', 'Node.js', 'TypeScript', 'TailwindCSS', 'Python', 'Docker', 'Git'].map((tech) => (
|
||||
<span
|
||||
class="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section - Inlined Content -->
|
||||
<section id="projects" class="py-20 relative">
|
||||
<!-- Background gradient -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
|
||||
|
||||
<div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
|
||||
Latest Projects
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
A collection of my recent work, showcasing innovative solutions and clean code. Click to explore details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Taskify App Project -->
|
||||
<div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl">
|
||||
<!-- Project image placeholder -->
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
|
||||
<div class="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 class="absolute bottom-4 left-4 right-4">
|
||||
<div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
|
||||
Taskify App
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
|
||||
<span class="text-purple-500">📱</span>
|
||||
Taskify App
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>A task management app with real-time collaboration, built using React, Node.js, and MongoDB.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>Real-time collaboration features with WebSocket integration for instant updates.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>Advanced task filtering, sorting, and project management capabilities.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators -->
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">React</span>
|
||||
<span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Node.js</span>
|
||||
<span class="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-full">MongoDB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-4 border-t border-border/30">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<a
|
||||
href="https://github.com/joyzhao/taskify-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
|
||||
>
|
||||
<svg class="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
View on GitHub
|
||||
</a>
|
||||
|
||||
<button class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
||||
<span>🔗</span>
|
||||
Live Demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- E-Shop Platform Project -->
|
||||
<div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl">
|
||||
<!-- Project image placeholder -->
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
|
||||
<div class="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 class="absolute bottom-4 left-4 right-4">
|
||||
<div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
|
||||
E-Shop Platform
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
|
||||
<span class="text-purple-500">📱</span>
|
||||
E-Shop Platform
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>A scalable e-commerce platform with Next.js, Stripe payments, and TailwindCSS.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>Integrated Stripe payment processing for secure transactions.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>Advanced product catalog with search, filtering, and recommendation features.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators -->
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">Next.js</span>
|
||||
<span class="px-2 py-1 bg-yellow-500/20 text-yellow-400 text-xs rounded-full">Stripe</span>
|
||||
<span class="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-4 border-t border-border/30">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<a
|
||||
href="https://github.com/joyzhao/e-commerce-platform"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
|
||||
>
|
||||
<svg class="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
View on GitHub
|
||||
</a>
|
||||
|
||||
<button class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
||||
<span>🔗</span>
|
||||
Live Demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Site Project -->
|
||||
<div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl">
|
||||
<!-- Project image placeholder -->
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
|
||||
<div class="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 class="absolute bottom-4 left-4 right-4">
|
||||
<div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
|
||||
Portfolio Site
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
|
||||
<span class="text-purple-500">📱</span>
|
||||
Portfolio Site
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>My personal portfolio showcasing my work, built with HTML, TailwindCSS, and Alpine.js.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>Modern glassmorphism design with smooth animations and transitions.</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>Fully responsive layout optimized for all device sizes.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators -->
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-full">HTML</span>
|
||||
<span class="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
|
||||
<span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Alpine.js</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-4 border-t border-border/30">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<a
|
||||
href="https://github.com/joyzhao/portfolio-site"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
|
||||
>
|
||||
<svg class="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
View on GitHub
|
||||
</a>
|
||||
|
||||
<button class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
||||
<span>🔗</span>
|
||||
Live Demo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:only="react" />
|
||||
</Layout>
|
||||
|
||||
@@ -1,29 +1,175 @@
|
||||
---
|
||||
import Layout from "@/layouts/Layout.astro";
|
||||
import GlassHeader from "@/components/GlassHeader.tsx";
|
||||
import HeroSection from "@/components/HeroSection.tsx";
|
||||
import AboutSection from "@/components/AboutSection.tsx";
|
||||
import SkillsMarquee from "@/components/SkillsMarquee.tsx";
|
||||
import ProjectsSection from "@/components/ProjectsSection.tsx";
|
||||
import Footer from "@/components/Footer.tsx";
|
||||
import { useTranslations } from "@/i18n/utils";
|
||||
import { personalInfo } from "@/lib/data";
|
||||
|
||||
const lang: "en" | "zh" = 'zh';
|
||||
const t = useTranslations(lang);
|
||||
const pageTitle = t('page.home.title');
|
||||
const pageTitle = t('site.title');
|
||||
---
|
||||
|
||||
<Layout title={pageTitle}>
|
||||
<GlassHeader lang={lang} client:only="react" />
|
||||
<main class="min-h-screen">
|
||||
<HeroSection lang={lang} client:only="react" />
|
||||
<!-- Hero Section - Inlined Content -->
|
||||
<section class="py-32 relative overflow-hidden min-h-screen flex items-center">
|
||||
<!-- Background gradient -->
|
||||
<div class="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 class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<!-- Greeting -->
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<svg class="h-6 w-6 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
<span class="text-purple-500 font-mono text-lg">
|
||||
你好世界！我是
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Main title -->
|
||||
<h1 class="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">
|
||||
Joy Zhao
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light">
|
||||
全栈工程师 👨💻
|
||||
</p>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
|
||||
用优雅的代码和创新的思维，为复杂问题打造精致的解决方案。欢迎来到我的个人开发工作空间，这里是想法变为现实的地方。
|
||||
</p>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
|
||||
<a
|
||||
href="#about"
|
||||
class="bg-purple-500 hover:bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
查看项目
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="mailto:rkesh2003@gmail.com"
|
||||
class="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"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
联系我
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Contact info -->
|
||||
<div class="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
|
||||
<div class="flex items-center gap-2 hover:text-foreground transition-colors">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
中国
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={personalInfo.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={personalInfo.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 hover:text-foreground transition-colors"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
领英
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal mockup -->
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-gray-900/90 backdrop-blur-sm rounded-lg border border-gray-700/50 shadow-2xl overflow-hidden">
|
||||
<!-- Terminal header -->
|
||||
<div class="flex items-center justify-between px-4 py-3 bg-gray-800/50 border-b border-gray-700/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-gray-400 text-sm font-mono">
|
||||
john@dev-workspace
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<div class="p-6 font-mono text-sm">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white">whoami</span>
|
||||
</div>
|
||||
<div class="text-purple-300 ml-4">Joy Zhao</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white">cat about.txt</span>
|
||||
</div>
|
||||
<div class="text-gray-300 ml-4 leading-relaxed">
|
||||
OS: DevOS v4.2.0<br/>
|
||||
Host: ThinkPad X1 Carbon<br/>
|
||||
Kernel: 5.15.0-dev<br/>
|
||||
Uptime: 45 days, 17 hours<br/>
|
||||
Languages: JavaScript, Python, Go<br/>
|
||||
Editor: VSCode / Neovim<br/>
|
||||
Frameworks: React, Next.js, Node.js
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white">ls projects/</span>
|
||||
</div>
|
||||
<div class="text-purple-200 ml-4">
|
||||
taskify-app/ e-commerce-platform/ portfolio-site/
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4">
|
||||
<span class="text-purple-400 mr-2">$</span>
|
||||
<span class="text-white animate-pulse">_</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<SkillsMarquee lang={lang} client:only="react" />
|
||||
|
||||
<!-- Services Section -->
|
||||
<!-- Services Section - Inlined Content -->
|
||||
<section class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
{t('services.title')}
|
||||
我提供的服务
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
@@ -35,28 +181,28 @@ const pageTitle = t('page.home.title');
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">{t('services.outsourcing.title')}</h3>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">外包项目</h3>
|
||||
</div>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">1.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item1')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">为海外客户提供外包项目服务</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">2.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item2')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">项目打包，可以提供不同套餐的服务</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">3.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item3')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">使用流行技术：React、nest.js、next.js 等</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">4.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item4')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">项目交付，提供三个月免费维护</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-3 mt-1">5.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.outsourcing.item5')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">不论项目大小，都可以提供服务</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -70,28 +216,28 @@ const pageTitle = t('page.home.title');
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">{t('services.bugfix.title')}</h3>
|
||||
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">Bug 修复</h3>
|
||||
</div>
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">1.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item1')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">快速定位和修复网站问题，能够快速定位和解决问题</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">2.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item2')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">帮助您解决项目中遇到的任何问题，Bug、功能优化问题</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">3.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item3')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">Vue、React、Node 等技术的应用</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">4.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item4')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">前端自动化、部署、监控、自动化等</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-red-500 mr-3 mt-1">5.</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">{t('services.bugfix.item5')}</span>
|
||||
<span class="text-slate-600 dark:text-slate-300">仅限于 Node.js 项目</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -99,8 +245,358 @@ const pageTitle = t('page.home.title');
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<AboutSection lang={lang} client:only="react" />
|
||||
<ProjectsSection lang={lang} client:only="react" />
|
||||
<!-- About Section - Inlined Content -->
|
||||
<section id="about" class="py-24 relative overflow-hidden">
|
||||
<!-- Background gradient -->
|
||||
<div class="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 class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<!-- Section Title -->
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||
关于我
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- About Content -->
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-stretch">
|
||||
<!-- Left side - Description and Stats -->
|
||||
<div class="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">
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
|
||||
<span class="mr-2">👋</span>
|
||||
关于我
|
||||
</h3>
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
我是一名充满激情的全栈开发者，专注于构建现代化的Web应用程序。我热爱学习新技术，并将它们应用到实际项目中。
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
在前端开发方面，我精通React、Vue.js和现代JavaScript框架。在后端，我有丰富的Node.js、Python和Go语言开发经验。
|
||||
</p>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
我相信代码的力量可以改变世界，致力于编写干净、高效且可维护的代码。我也热衷于开源项目，喜欢与开发者社区分享知识和经验。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="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">
|
||||
<svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
<div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
152
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">
|
||||
仓库数量
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="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">
|
||||
<svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2.25"></path>
|
||||
</svg>
|
||||
<div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
42K
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">
|
||||
提交次数
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="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">
|
||||
<svg class="h-8 w-8 mx-auto mb-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
||||
</svg>
|
||||
<div class="text-2xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
87
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 dark:text-gray-400">
|
||||
PR合并数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Skills Toolbox -->
|
||||
<div class="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">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 flex items-center">
|
||||
<span class="mr-2">💻</span>
|
||||
我的工具箱
|
||||
</h3>
|
||||
|
||||
<div class="space-y-6 flex-1">
|
||||
<!-- Skills Progress -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">前端开发</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full" style="width: 90%"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">后端开发</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-green-500 to-teal-500 h-2 rounded-full" style="width: 85%"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">DevOps</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full" style="width: 75%"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm text-gray-700 dark:text-gray-300">移动开发</span>
|
||||
<span class="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 class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||
<div class="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 class="flex flex-wrap gap-2">
|
||||
{['JavaScript', 'React', 'Node.js', 'TypeScript', 'TailwindCSS', 'Python', 'Docker', 'Git'].map((tech) => (
|
||||
<span
|
||||
class="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section - Inlined Content -->
|
||||
<section id="projects" class="py-20 relative">
|
||||
<!-- Background gradient -->
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
|
||||
|
||||
<div class="container max-w-6xl mx-auto px-6 md:px-4 relative z-10">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
|
||||
我的项目
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
我最近工作的精选集合，展示创新解决方案和简洁代码。点击探索详情。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Taskify App -->
|
||||
<div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl">
|
||||
<!-- Project image placeholder -->
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
|
||||
<div class="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 class="absolute bottom-4 left-4 right-4">
|
||||
<div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
|
||||
Taskify App
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
|
||||
<span class="text-purple-500">📱</span>
|
||||
Taskify 应用
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>一个功能齐全的任务管理应用程序</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>使用 React、TypeScript 和 Tailwind CSS 构建</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>具有拖放功能和实时更新</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators -->
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">React</span>
|
||||
<span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Node.js</span>
|
||||
<span class="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-full">MongoDB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-4 border-t border-border/30">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<a
|
||||
href="https://github.com/zhaoguiyang/taskify-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
|
||||
>
|
||||
<svg class="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
在 GitHub 上查看
|
||||
</a>
|
||||
|
||||
<button class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
||||
<span>🔗</span>
|
||||
在线演示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- E-Shop Platform -->
|
||||
<div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl">
|
||||
<!-- Project image placeholder -->
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
|
||||
<div class="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 class="absolute bottom-4 left-4 right-4">
|
||||
<div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
|
||||
E-Shop Platform
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
|
||||
<span class="text-purple-500">📱</span>
|
||||
电商平台
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>现代化的电子商务解决方案</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>使用 Next.js、Prisma 和 Stripe 构建</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>具有购物车、支付和管理面板功能</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators -->
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-full">Next.js</span>
|
||||
<span class="px-2 py-1 bg-yellow-500/20 text-yellow-400 text-xs rounded-full">Stripe</span>
|
||||
<span class="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-4 border-t border-border/30">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<a
|
||||
href="https://github.com/zhaoguiyang/e-shop-platform"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
|
||||
>
|
||||
<svg class="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
在 GitHub 上查看
|
||||
</a>
|
||||
|
||||
<button class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
||||
<span>🔗</span>
|
||||
在线演示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Site -->
|
||||
<div class="group overflow-hidden border border-purple-500/20 hover:border-purple-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl">
|
||||
<!-- Project image placeholder -->
|
||||
<div class="h-48 bg-gradient-to-br from-purple-500/20 to-purple-600/20 relative overflow-hidden">
|
||||
<div class="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 class="absolute bottom-4 left-4 right-4">
|
||||
<div class="bg-black/50 backdrop-blur-sm rounded px-3 py-1 text-xs font-mono text-purple-400">
|
||||
Portfolio Site
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pb-4">
|
||||
<h3 class="text-xl group-hover:text-purple-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4">
|
||||
<span class="text-purple-500">📱</span>
|
||||
个人作品集
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="px-6 flex-grow">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>响应式个人作品集网站</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>使用 Astro、React 和 Tailwind CSS 构建</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
||||
<span class="text-purple-500 mt-1">•</span>
|
||||
<span>具有深色模式和平滑动画效果</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tech stack indicators -->
|
||||
<div class="mt-6 flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-full">HTML</span>
|
||||
<span class="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded-full">TailwindCSS</span>
|
||||
<span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">Alpine.js</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 pt-4 border-t border-border/30">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<a
|
||||
href="https://github.com/zhaoguiyang/portfolio-site"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 text-sm text-muted-foreground hover:text-purple-400 transition-colors group/link"
|
||||
>
|
||||
<svg class="h-4 w-4 group-hover/link:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
在 GitHub 上查看
|
||||
</a>
|
||||
|
||||
<button class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors">
|
||||
<span>🔗</span>
|
||||
在线演示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer lang={lang} client:load />
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user