f4ff971c85
Remove size variants from Container component and set a default max-width Update all instances where Container was used with size prop to use default
107 lines
5.3 KiB
Plaintext
107 lines
5.3 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 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 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> |