zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify personal info and remove unused components

Browse Source 
- 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
2025-06-16 18:32:43 +08:00
parent 1354ffab58
commit 1ace97c5e1
8 changed files with 1062 additions and 978 deletions
Download Patch File Download Diff File Expand all files Collapse all files

538
src/pages/index.astro
View File

@@ -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>