Import source: src/components/Projects
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,222 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { ExternalLink } from 'lucide-react';
|
||||
|
||||
type Project = {
|
||||
id: string;
|
||||
category: 'ai' | 'web';
|
||||
titleKey: string;
|
||||
descKey: string;
|
||||
tags: string[];
|
||||
link: string;
|
||||
};
|
||||
|
||||
export default function Projects() {
|
||||
const t = useTranslations('Projects');
|
||||
const [filter, setFilter] = useState<'all' | 'ai' | 'web'>('all');
|
||||
|
||||
const projectsList: Project[] = [
|
||||
{
|
||||
id: 'ai1',
|
||||
category: 'ai',
|
||||
titleKey: 'list.ai1.title',
|
||||
descKey: 'list.ai1.description',
|
||||
tags: ['LLM Ops', 'Evaluation', 'Python', 'HuggingFace'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'ai2',
|
||||
category: 'ai',
|
||||
titleKey: 'list.ai2.title',
|
||||
descKey: 'list.ai2.description',
|
||||
tags: ['Inference', 'vLLM', 'Quantization', 'Docker'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'ai3',
|
||||
category: 'ai',
|
||||
titleKey: 'list.ai3.title',
|
||||
descKey: 'list.ai3.description',
|
||||
tags: ['RAG', 'Agents', 'LangChain', 'VectorDB'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'ai4',
|
||||
category: 'ai',
|
||||
titleKey: 'list.ai4.title',
|
||||
descKey: 'list.ai4.description',
|
||||
tags: ['Data Engineering', 'Ray', 'NLP', 'FastAPI'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'ai5',
|
||||
category: 'ai',
|
||||
titleKey: 'list.ai5.title',
|
||||
descKey: 'list.ai5.description',
|
||||
tags: ['Speech', 'Whisper', 'PyTorch', 'Gradio'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'web1',
|
||||
category: 'web',
|
||||
titleKey: 'list.web1.title',
|
||||
descKey: 'list.web1.description',
|
||||
tags: ['UI/UX', 'Next.js', 'Tailwind CSS', 'Framer Motion'],
|
||||
link: 'https://teknav.ir',
|
||||
},
|
||||
{
|
||||
id: 'web2',
|
||||
category: 'web',
|
||||
titleKey: 'list.web2.title',
|
||||
descKey: 'list.web2.description',
|
||||
tags: ['Branding', 'React', 'Chart.js', 'Figma'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'web3',
|
||||
category: 'web',
|
||||
titleKey: 'list.web3.title',
|
||||
descKey: 'list.web3.description',
|
||||
tags: ['Open Source', 'MDX', 'Tailwind CSS', 'SEO'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'web4',
|
||||
category: 'web',
|
||||
titleKey: 'list.web4.title',
|
||||
descKey: 'list.web4.description',
|
||||
tags: ['Frontend', 'Next.js', 'WebGL', 'Framer Motion'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
{
|
||||
id: 'web5',
|
||||
category: 'web',
|
||||
titleKey: 'list.web5.title',
|
||||
descKey: 'list.web5.description',
|
||||
tags: ['Branding', 'CSS Grid', 'Interactivity', 'Vite'],
|
||||
link: 'https://github.com/Coaxys',
|
||||
},
|
||||
];
|
||||
|
||||
const filteredProjects = projectsList.filter(
|
||||
(p) => filter === 'all' || p.category === filter
|
||||
);
|
||||
|
||||
return (
|
||||
<section id="projects" className="py-24 bg-warm-white dark:bg-near-black border-t border-sand/20 dark:border-charcoal/50 transition-colors duration-300">
|
||||
<div className="max-w-[1200px] mx-auto px-6">
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center max-w-2xl mx-auto mb-12">
|
||||
<h2 className="text-xs font-semibold tracking-widest text-terracotta uppercase mb-2">
|
||||
{t('title')}
|
||||
</h2>
|
||||
<h3 className="text-3xl font-extrabold tracking-tight text-charcoal dark:text-warm-white">
|
||||
{t('subtitle')}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Tab Filters */}
|
||||
<div className="flex justify-center mb-12">
|
||||
<div className="inline-flex rounded-full border border-sand dark:border-charcoal p-1 bg-warm-white/50 dark:bg-charcoal/20 backdrop-blur-sm">
|
||||
{(['all', 'ai', 'web'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setFilter(tab)}
|
||||
className={`relative px-4 py-2 text-xs md:text-sm font-semibold rounded-full transition-colors cursor-pointer ${
|
||||
filter === tab
|
||||
? 'text-warm-white'
|
||||
: 'text-charcoal/70 dark:text-warm-white/60 hover:text-teal-brand dark:hover:text-teal-brand'
|
||||
}`}
|
||||
>
|
||||
{filter === tab && (
|
||||
<motion.div
|
||||
layoutId="activeTab"
|
||||
className="absolute inset-0 bg-teal-brand rounded-full -z-10"
|
||||
transition={{ type: 'spring', stiffness: 380, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
{t(`tab${tab.charAt(0).toUpperCase() + tab.slice(1)}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<motion.div
|
||||
layout
|
||||
className="grid grid-cols-1 md:grid-cols-2 gap-6"
|
||||
>
|
||||
<AnimatePresence mode="popLayout">
|
||||
{filteredProjects.map((p) => (
|
||||
<motion.div
|
||||
layout
|
||||
key={p.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="group relative rounded-2xl border border-sand dark:border-charcoal bg-warm-white dark:bg-charcoal/10 overflow-hidden hover:shadow-md hover:border-teal-brand/30 dark:hover:border-teal-brand/30 transition-all duration-300 flex flex-col justify-between"
|
||||
>
|
||||
<div className="p-6">
|
||||
{/* Category Pill */}
|
||||
<span className={`inline-block px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider mb-4 ${
|
||||
p.category === 'ai'
|
||||
? 'bg-teal-brand/10 text-teal-brand'
|
||||
: 'bg-terracotta/10 text-terracotta'
|
||||
}`}>
|
||||
{p.category === 'ai' ? t('aiLabel') : t('webLabel')}
|
||||
</span>
|
||||
|
||||
{/* Title */}
|
||||
<h4 className="text-xl font-bold text-charcoal dark:text-warm-white mb-2 group-hover:text-teal-brand dark:group-hover:text-teal-brand transition-colors">
|
||||
{t(p.titleKey)}
|
||||
</h4>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-charcoal/70 dark:text-warm-white/60 leading-relaxed line-clamp-3 mb-6">
|
||||
{t(p.descKey)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="px-6 pb-6 pt-0">
|
||||
{/* Tech Tags */}
|
||||
<div className="flex flex-wrap gap-1.5 mb-6">
|
||||
{p.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-0.5 text-[10px] font-semibold rounded bg-sand/30 dark:bg-charcoal/40 text-charcoal/60 dark:text-warm-white/50 border border-sand/10"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Card Actions / Hover overlay equivalent */}
|
||||
<div className="flex items-center justify-between border-t border-sand/20 dark:border-charcoal/20 pt-4">
|
||||
<a
|
||||
href={p.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-xs font-bold text-teal-brand hover:text-teal-brand/80 dark:hover:text-teal-brand/80 transition-colors"
|
||||
>
|
||||
<span>{t('viewProject')}</span>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subtle Hover Action Overlay (as per spec: "Hover reveals a subtle overlay with a 'View' button") */}
|
||||
<div className="absolute inset-0 bg-warm-white/5 dark:bg-near-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none border border-teal-brand dark:border-teal-brand rounded-2xl" />
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user