5fcf7a9d33
Implement a reusable Container component with size variants (sm, md, lg, xl, full) to standardize content width across the application. Replace all manual container divs with the new component for consistent styling and maintainability.
107 lines
5.4 KiB
Plaintext
107 lines
5.4 KiB
Plaintext
---
|
|
import Layout from "@/layouts/Layout.astro";
|
|
import GlassHeader from "@/components/GlassHeader";
|
|
import Footer from "@/components/Footer";
|
|
import Container from "@/components/ui/Container";
|
|
import { useTranslations, type Lang } from "@/i18n/utils";
|
|
import { defaultLang } from "@/i18n/ui";
|
|
import { projects } from "@/lib/data";
|
|
|
|
// 使用Astro.currentLocale获取当前语言环境
|
|
const lang = Astro.currentLocale as Lang || defaultLang;
|
|
const t = useTranslations(lang);
|
|
const pageTitle = t('projects.title');
|
|
|
|
// 根据当前语言获取项目数据
|
|
const currentProjects = projects[lang as keyof typeof projects] || projects.en;
|
|
---
|
|
|
|
<Layout title={pageTitle}>
|
|
<GlassHeader lang={lang} client:only="react" />
|
|
<main class="min-h-screen">
|
|
<!-- Projects Hero Section -->
|
|
<section class="py-24 relative overflow-hidden">
|
|
<!-- 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>
|
|
|
|
<Container client:load size="md" className="relative z-10">
|
|
<div class="text-center mb-16">
|
|
<!-- Main title -->
|
|
<h1 class="text-5xl md:text-6xl 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">
|
|
{t('projects.title')}
|
|
</h1>
|
|
|
|
<!-- Description -->
|
|
<p class="text-lg text-muted-foreground max-w-3xl mx-auto mb-12 leading-relaxed">
|
|
{t('projects.description')}
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<!-- Projects Grid Section -->
|
|
<section class="py-12 relative">
|
|
<!-- Background gradient -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
|
|
|
|
<Container client:load size="md" className="relative z-10">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
|
|
{currentProjects.map((project) => (
|
|
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-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-${project.color}-100 dark:bg-${project.color}-800 text-${project.color}-800 dark:text-${project.color}-200 text-xs rounded-full font-medium border border-${project.color}-200 dark:border-${project.color}-700`}>{t(`project.tag.${project.tag}`)}</span>
|
|
</div>
|
|
|
|
<!-- Project image placeholder -->
|
|
<div class={`h-48 bg-gradient-to-br ${project.image.bg} relative overflow-hidden`}>
|
|
<div class={`absolute inset-0 bg-gradient-to-br ${project.image.bg} group-hover:${project.image.hover} 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 ${project.image.text}`}>
|
|
{project.title}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 pb-4">
|
|
<h3 class={`text-xl group-hover:text-${project.color}-400 transition-colors duration-300 flex items-center gap-2 font-bold mb-4`}>
|
|
<span class={`text-${project.color}-500`}>{project.icon}</span>
|
|
{project.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="px-6 flex-grow">
|
|
<div class="space-y-3">
|
|
{project.description.map((desc) => (
|
|
<div class="flex items-start gap-2 text-sm text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
|
<span class={`text-${project.color}-500 mt-1`}>•</span>
|
|
<span>{desc}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<!-- Tech stack indicators with unified gray styling -->
|
|
<div class="mt-6 mb-4 flex flex-wrap gap-2">
|
|
{project.tech.map((tech) => (
|
|
<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">{tech}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visit project link -->
|
|
<div class="p-6 pt-2">
|
|
<a href={project.link} class={`inline-flex items-center text-sm font-medium text-${project.color}-500 hover:text-${project.color}-600 dark:hover:text-${project.color}-400 transition-colors duration-300`}>
|
|
{t('project.visit')}
|
|
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer lang={lang} client:load />
|
|
</Layout> |