a
This commit is contained in:
@@ -0,0 +1,273 @@
|
||||
'use client';
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import Header from "@/components/shared/header";
|
||||
import Footer from "@/components/shared/footer";
|
||||
import {
|
||||
ExternalLink,
|
||||
GitBranch,
|
||||
CheckCircle2,
|
||||
Workflow,
|
||||
ShieldCheck,
|
||||
Database,
|
||||
Terminal
|
||||
} from "lucide-react";
|
||||
|
||||
interface ProjectItem {
|
||||
id: number;
|
||||
title: string;
|
||||
category: string;
|
||||
description: string;
|
||||
highlights: string[];
|
||||
techStack: string[];
|
||||
status: string;
|
||||
}
|
||||
|
||||
const projectsData: ProjectItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "سامانه یکپارچه پرتال و اینترانت بانکی",
|
||||
category: "سیستم‌های سازمانی و اینترانت",
|
||||
description: "طراحی و توسعه معماری متمرکز جهت مدیریت احراز هویت، کارتابل سازمانی، ماژول‌های آماری و دسترسی‌پذیری بالا برای پرسنل شعب.",
|
||||
highlights: [
|
||||
"مدیریت سطوح دسترسی پیچیده (RBAC) و احراز هویت متمرکز",
|
||||
"معماری ماژولار کارتابل با پشتیبانی از صف‌های پردازشی سنگین",
|
||||
"یکپارچه‌سازی با هسته سامانه‌های بانکی (Core Banking)"
|
||||
],
|
||||
techStack: ["Laravel 11", "PostgreSQL", "Redis", "Filament", "Docker"],
|
||||
status: "Production / Enterprise"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "سامانه هوشمند مدیریت شیفت و پرسنل بانکی",
|
||||
category: "پلتفرم عملیاتی و لجستیک",
|
||||
description: "پیاده‌سازی موتور تخصیص خودکار شیفت‌ها، مدیریت جایگزینی و اعلان‌های آنی جهت بهینه‌سازی توزیع نیروی انسانی در شبکه شعب.",
|
||||
highlights: [
|
||||
"الگوریتم زمان‌بندی پویا جهت پیشگیری از تداخل کاری",
|
||||
"سیستم اعلان‌های بلادرنگ (Real-time WebSockets)",
|
||||
"گزارش‌گیری تحلیلی با بازدهی بالا و کشینگ چندلایه‌ای"
|
||||
],
|
||||
techStack: ["FastAPI", "Python", "PostgreSQL", "Redis", "React"],
|
||||
status: "Deployed"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "پایپ‌لاین رویدادمحور و موتور پردازش داده (TMS & Store)",
|
||||
category: "معماری توزیع‌شده و میکروسرویس",
|
||||
description: "طراحی زیرساخت پردازش غیرهمگام رویدادها جهت مدیریت دوره‌های آموزشی سازمانی و ثبت سفارشات درون‌سازمانی با تضمین تحویل پیام.",
|
||||
highlights: [
|
||||
"به‌کارگیری Kafka و RabbitMQ برای انتشار و مصرف پیام‌ها",
|
||||
"طراحی الگوهای Idempotency و Circuit Breaker در ارتباطات",
|
||||
"کاهش لیتنسی پردازش داده‌های حجیم به زیر ۵۰ میلی‌ثانیه"
|
||||
],
|
||||
techStack: ["Laravel", "Kafka", "RabbitMQ", "Docker", "CI/CD"],
|
||||
status: "Microservices"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "موتور جستجوی معنایی و پایگاه دانش برداری (RAG)",
|
||||
category: "سیستم‌های مبتنی بر هوش مصنوعی",
|
||||
description: "طراحی و استقرار پایپ‌لاین تولید و نمایه‌سازی بردارهای متنی مستندات بانکی جهت پرسش‌وپاسخ هوشمند و بازیابی دقیق اسناد سازمانی.",
|
||||
highlights: [
|
||||
"ذخیره‌سازی و کوئری‌گیری پرسرعت با Qdrant Vector Database",
|
||||
"استراتژی Chunking بهینه‌شده برای اسناد فارسی و اصطلاحات تخصصی",
|
||||
"اتصال امن به مدل‌های زبانی محلی بدون خروج داده‌های محرمانه"
|
||||
],
|
||||
techStack: ["Python", "FastAPI", "Qdrant", "PostgreSQL", "Docker"],
|
||||
status: "R&D / Production"
|
||||
}
|
||||
];
|
||||
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<div dir="rtl" className="flex min-h-screen flex-col bg-gray-950 text-gray-200 font-sans selection:bg-indigo-500/30 selection:text-indigo-200">
|
||||
<Header />
|
||||
|
||||
<main className="flex-1 overflow-hidden relative">
|
||||
{/* پترن گرید ۲۴ پیکسلی */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1f29371f_1px,transparent_1px),linear-gradient(to_bottom,#1f29371f_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
|
||||
|
||||
{/* بخش هدر صفحه */}
|
||||
<section className="relative px-6 pt-32 pb-16 text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mx-auto max-w-3xl"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 mb-4 rounded-full bg-indigo-950/40 border border-indigo-500/30 text-indigo-400 text-xs font-mono">
|
||||
<GitBranch className="w-3.5 h-3.5" />
|
||||
<span>پروژه‌ها و سیستم‌های مقیاس‌پذیر</span>
|
||||
</div>
|
||||
|
||||
<h1 className="mb-5 text-3xl font-extrabold tracking-tight text-white md:text-5xl">
|
||||
معماری نرم‌افزار، <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-cyan-400 to-emerald-400">سامانه‌های سازمانی</span> و بک‌اند
|
||||
</h1>
|
||||
<p className="text-sm md:text-base text-gray-400 leading-relaxed max-w-2xl mx-auto">
|
||||
نمونه‌ای از سیستم‌های تحت وب، میکروسرویس‌ها و پایپ‌لاین‌های مقیاس‌پذیر که با تمرکز بر امنیت، کارایی بالا و پایداری شبکه توسعه یافته‌اند.
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* تایم‌لاین پروژه‌ها */}
|
||||
<section className="relative mx-auto max-w-7xl px-6 py-10 mb-20">
|
||||
<div className="absolute left-1/2 top-0 hidden h-full w-[1px] -translate-x-1/2 bg-gradient-to-b from-transparent via-gray-800 to-transparent lg:block" />
|
||||
|
||||
<div className="flex flex-col gap-20 lg:gap-28">
|
||||
{projectsData.map((project, index) => {
|
||||
const isEven = index % 2 === 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={project.id}
|
||||
className={`relative flex flex-col items-center gap-10 lg:flex-row lg:justify-between ${
|
||||
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||||
}`}
|
||||
>
|
||||
{/* نشانگر تایم‌لاین وسط صفحه */}
|
||||
<div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:flex">
|
||||
<div className="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-700 bg-gray-900 shadow-xl shadow-black/80">
|
||||
<span className="text-xs font-mono font-bold text-indigo-300">0{project.id}</span>
|
||||
<div className="absolute inset-0 -z-10 animate-ping rounded-full bg-indigo-500/20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ستون متن و توضیحات */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: isEven ? 40 : -40 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="w-full lg:w-[46%]"
|
||||
>
|
||||
<div className="space-y-4 text-right">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-mono font-medium text-indigo-400 bg-indigo-950/60 border border-indigo-800/40 px-2.5 py-0.5 rounded-md">
|
||||
{project.category}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-gray-500">
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-gray-100 md:text-3xl">
|
||||
{project.title}
|
||||
</h2>
|
||||
|
||||
<p className="text-sm leading-relaxed text-gray-400">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 pt-2">
|
||||
{project.highlights.map((highlight, idx) => (
|
||||
<div key={idx} className="flex items-start gap-2 text-xs text-gray-300">
|
||||
<CheckCircle2 className="w-4 h-4 text-indigo-400 shrink-0 mt-0.5" />
|
||||
<span>{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 pt-3">
|
||||
{project.techStack.map((tech, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="text-[11px] font-mono px-2.5 py-1 rounded bg-gray-900/90 border border-gray-800 text-gray-300 hover:border-gray-700 transition-colors"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* ستون کارت سیستم */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: isEven ? -40 : 40 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="w-full lg:w-[46%]"
|
||||
>
|
||||
<div className="relative rounded-2xl border border-gray-800 bg-gray-900/50 p-6 backdrop-blur-md shadow-2xl hover:border-gray-700 transition-colors">
|
||||
<div className="flex items-center justify-between border-b border-gray-800/80 pb-3 mb-4">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-rose-500/80" />
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-amber-500/80" />
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-emerald-500/80" />
|
||||
</div>
|
||||
<div className="text-[11px] font-mono text-gray-500 flex items-center gap-1">
|
||||
<Terminal className="w-3.5 h-3.5 text-indigo-400" />
|
||||
<span>system://node.svc_0{project.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 font-mono text-xs">
|
||||
<div className="p-3 rounded-lg bg-gray-950/70 border border-gray-800/60">
|
||||
<div className="text-gray-500 text-[10px] mb-1">سطح دسترس‌پذیری و امنیت:</div>
|
||||
<div className="text-emerald-400 flex items-center gap-1.5 font-sans">
|
||||
<ShieldCheck className="w-3.5 h-3.5" />
|
||||
<span>High Availability • Multi-layer Auth</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="p-2.5 rounded-lg bg-gray-950/70 border border-gray-800/60">
|
||||
<div className="text-gray-500 text-[10px] flex items-center gap-1 mb-1">
|
||||
<Database className="w-3 h-3 text-indigo-400" />
|
||||
<span>دیتابیس / کش</span>
|
||||
</div>
|
||||
<div className="text-gray-300 font-semibold text-[11px]">PostgreSQL + Redis</div>
|
||||
</div>
|
||||
<div className="p-2.5 rounded-lg bg-gray-950/70 border border-gray-800/60">
|
||||
<div className="text-gray-500 text-[10px] flex items-center gap-1 mb-1">
|
||||
<Workflow className="w-3 h-3 text-cyan-400" />
|
||||
<span>جریان پیام‌ها</span>
|
||||
</div>
|
||||
<div className="text-indigo-300 font-semibold text-[11px]">Async Queues</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 rounded-lg bg-gray-950/70 border border-gray-800/60 text-gray-400 text-[11px] leading-relaxed" dir="ltr">
|
||||
<span className="text-indigo-400">$</span> runtime.optimize(--workers=8 --cache=redis)
|
||||
<br />
|
||||
<span className="text-emerald-500 font-bold">✓</span> status: operational [200 OK]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* بنر فراخوان نهایی */}
|
||||
<section className="relative px-6 pb-20">
|
||||
<div className="mx-auto max-w-5xl rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto space-y-4">
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white">
|
||||
آماده پیاده‌سازی و توسعه سیستم‌های پیچیده
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-gray-400 leading-relaxed">
|
||||
اگر نیاز به مشاوره معماری نرم‌افزار، مقیاس‌پذیری سرویس‌ها یا پیاده‌سازی ماژول‌های اینترانت و سازمانی دارید، در ارتباط باشید.
|
||||
</p>
|
||||
<div className="pt-2">
|
||||
<a
|
||||
href="mailto:contact@example.com"
|
||||
className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold shadow-lg shadow-indigo-600/30 transition-all hover:scale-105"
|
||||
>
|
||||
<span>شروع همکاری فنی</span>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user