62df420d80
Move all personal information to a centralized data module and update components to use this source. This improves maintainability by having a single source of truth for profile data and makes it easier to update information across the application.
555 lines
31 KiB
Plaintext
555 lines
31 KiB
Plaintext
---
|
|
import Layout from "@/layouts/Layout.astro";
|
|
import GlassHeader from "@/components/GlassHeader";
|
|
import SkillsMarquee from "@/components/SkillsMarquee";
|
|
import Footer from "@/components/Footer";
|
|
import { useTranslations, type Lang } from "@/i18n/utils";
|
|
import { defaultLang } from "@/i18n/ui";
|
|
import { personalInfo, services } from "@/lib/data";
|
|
|
|
// 使用Astro.currentLocale获取当前语言环境
|
|
const lang = Astro.currentLocale as Lang || defaultLang;
|
|
const t = useTranslations(lang);
|
|
const pageTitle = t('site.title');
|
|
---
|
|
|
|
<Layout title={pageTitle}>
|
|
<GlassHeader client:only="react" />
|
|
<main class="min-h-screen">
|
|
<!-- 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">
|
|
{personalInfo.name}
|
|
</h1>
|
|
|
|
<!-- Subtitle -->
|
|
<p class="text-2xl md:text-3xl text-muted-foreground mb-8 font-light">
|
|
{personalInfo.position.en} 👨💻
|
|
</p>
|
|
|
|
<!-- Description -->
|
|
<p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
|
|
{personalInfo.description.en}
|
|
</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:${personalInfo.email}`}
|
|
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">
|
|
{personalInfo.terminal.username}
|
|
</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 - Inlined Content -->
|
|
<section id="services" 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">
|
|
Services I Offer
|
|
</h2>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
{services.en.map((service) => (
|
|
<div class="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl p-8 border border-white/20 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105">
|
|
<div class="flex items-center mb-6">
|
|
<div class={`w-12 h-12 bg-gradient-to-r ${service.icon.gradient} rounded-lg flex items-center justify-center mr-4`}>
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<Fragment set:html={service.icon.svg} />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">{service.title}</h3>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
{service.items.map((item, index) => (
|
|
<li class="flex items-start">
|
|
<span class={`text-${service.color}-500 mr-3 mt-1`}>{index + 1}.</span>
|
|
<span class="text-slate-600 dark:text-slate-300">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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">
|
|
{personalInfo.about.en.map((paragraph) => (
|
|
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
|
|
{paragraph}
|
|
</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">
|
|
{personalInfo.stats.repositories}
|
|
</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">
|
|
{personalInfo.stats.commits}
|
|
</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">
|
|
{personalInfo.stats.contributions}
|
|
</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 items-stretch">
|
|
<!-- 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 relative">
|
|
<!-- Project tag - positioned at top right -->
|
|
<div class="absolute top-4 right-4 z-10">
|
|
<span class="px-3 py-1 bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 text-xs rounded-full font-medium border border-blue-200 dark:border-blue-700">{t('project.tag.business')}</span>
|
|
</div>
|
|
|
|
<!-- 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 comprehensive task management application with drag-and-drop functionality.</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>Built with React, TypeScript, and Tailwind CSS for modern development.</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 with unified gray styling -->
|
|
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">React</span>
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Node.js</span>
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">MongoDB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 pt-4 border-t border-border/30">
|
|
<div class="flex justify-center">
|
|
<a
|
|
href="https://github.com/zhaoguiyang/taskify-app"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="flex items-center gap-2 text-sm text-purple-400 hover:text-purple-300 transition-colors group/link"
|
|
>
|
|
<span>🔗</span>
|
|
{t('project.visit')}
|
|
</a>
|
|
</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 relative">
|
|
<!-- Project tag - positioned at top right -->
|
|
<div class="absolute top-4 right-4 z-10">
|
|
<span class="px-3 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full font-medium border border-green-200 dark:border-green-700">{t('project.tag.opensource')}</span>
|
|
</div>
|
|
|
|
<!-- 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>Modern e-commerce solution with comprehensive features for online retail.</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>Built with Next.js, Prisma, and Stripe for seamless payment processing.</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>Features shopping cart, payment integration, and admin dashboard.</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>Responsive design with optimized performance and SEO capabilities.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tech stack indicators with unified gray styling -->
|
|
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Next.js</span>
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Stripe</span>
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 pt-4 border-t border-border/30">
|
|
<div class="flex justify-center">
|
|
<a
|
|
href="https://github.com/zhaoguiyang/e-shop-platform"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="flex items-center gap-2 text-sm text-green-400 hover:text-green-300 transition-colors group/link"
|
|
>
|
|
<span>🔗</span>
|
|
{t('project.visit')}
|
|
</a>
|
|
</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 relative">
|
|
<!-- Project tag - positioned at top right -->
|
|
<div class="absolute top-4 right-4 z-10">
|
|
<span class="px-3 py-1 bg-amber-100 dark:bg-amber-800 text-amber-800 dark:text-amber-200 text-xs rounded-full font-medium border border-amber-200 dark:border-amber-700">{t('project.tag.personal')}</span>
|
|
</div>
|
|
|
|
<!-- 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>Responsive personal portfolio website showcasing creative work and projects.</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>Built with Astro, React, and Tailwind CSS for optimal performance.</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>Features dark mode support and smooth animations for enhanced UX.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tech stack indicators with unified gray styling -->
|
|
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">HTML</span>
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">TailwindCSS</span>
|
|
<span class="px-2 py-1 bg-gray-500/10 dark:bg-gray-400/20 text-gray-600 dark:text-gray-300 text-xs rounded-md border border-gray-500/20 dark:border-gray-400/30">Animate</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 pt-4 border-t border-border/30">
|
|
<div class="flex justify-center">
|
|
<a
|
|
href="https://zhaoguiyang.site"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="flex items-center gap-2 text-sm text-amber-400 hover:text-amber-300 transition-colors group/link"
|
|
>
|
|
<span>🔗</span>
|
|
{t('project.visit')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer lang={lang} client:only="react" />
|
|
</Layout>
|