diff --git a/components/home-projects-section.tsx b/components/home-projects-section.tsx index dd4b29f..32a0e1b 100644 --- a/components/home-projects-section.tsx +++ b/components/home-projects-section.tsx @@ -3,13 +3,14 @@ import { Icon } from "@iconify/react"; import { useLocale, useTranslations } from "next-intl"; import { Button, ButtonIcon, ButtonLabel, Typography } from "poyraz-ui/atoms"; -import { ImageCard } from "poyraz-ui/molecules"; import { useRouter } from "@/i18n/routing"; import { WEB_APPS } from "@/data/projects"; import { getLocalizedValue } from "@/lib/locale"; +import { ProjectCardWithPopover } from "@/components/project-card-with-popover"; export function HomeProjectsSection() { const t = useTranslations("Home"); + const tProjects = useTranslations("Projects"); const locale = useLocale(); const router = useRouter(); const projects = WEB_APPS.slice(0, 5); @@ -43,7 +44,7 @@ export function HomeProjectsSection() {
{projects.map((project) => ( - ))} diff --git a/components/project-card-with-popover.tsx b/components/project-card-with-popover.tsx new file mode 100644 index 0000000..f8b86a4 --- /dev/null +++ b/components/project-card-with-popover.tsx @@ -0,0 +1,149 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { Badge, Typography } from "poyraz-ui/atoms"; +import { + ImageCard, + Popover, + PopoverContent, + PopoverTrigger, +} from "poyraz-ui/molecules"; + +type ProjectCardWithPopoverProps = { + title: string; + description: string; + image: string; + badge?: string; + href?: string; + technologies: string[]; + architecture: string; + technologiesLabel: string; + architectureLabel: string; + className?: string; +}; + +export function ProjectCardWithPopover({ + title, + description, + image, + badge, + href, + technologies, + architecture, + technologiesLabel, + architectureLabel, + className, +}: ProjectCardWithPopoverProps) { + const [open, setOpen] = useState(false); + const closeTimer = useRef | null>(null); + + const cancelClose = () => { + if (closeTimer.current) { + clearTimeout(closeTimer.current); + closeTimer.current = null; + } + }; + + const showPopover = () => { + cancelClose(); + setOpen(true); + }; + + const scheduleClose = () => { + cancelClose(); + closeTimer.current = setTimeout(() => setOpen(false), 120); + }; + + useEffect(() => { + return () => { + if (closeTimer.current) clearTimeout(closeTimer.current); + }; + }, []); + + const card = ( + + ); + + return ( + + + {href ? ( + + {card} + + ) : ( + + )} + + + event.preventDefault()} + onCloseAutoFocus={(event) => event.preventDefault()} + > +
+ + {title} + + +
+ + {technologiesLabel} + +
+ {technologies.map((technology) => ( + + {technology} + + ))} +
+
+ +
+ + {architectureLabel} + + + {architecture} + +
+
+ + + ); +} diff --git a/components/projects-content.tsx b/components/projects-content.tsx index 27259fd..e44e8a6 100644 --- a/components/projects-content.tsx +++ b/components/projects-content.tsx @@ -9,8 +9,8 @@ import { Card, Typography, } from "poyraz-ui/atoms"; -import { ImageCard } from "poyraz-ui/molecules"; import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper"; +import { ProjectCardWithPopover } from "@/components/project-card-with-popover"; import { EXTENSIONS, FIGMA_TEMPLATES, @@ -64,6 +64,8 @@ type LocalizedProjectItem = { title: string; description: string; image: string; + technologies: string[]; + architecture: string; badge?: string; href?: string; }; @@ -71,9 +73,13 @@ type LocalizedProjectItem = { function ProjectSection({ title, items, + technologiesLabel, + architectureLabel, }: { title: string; items: LocalizedProjectItem[]; + technologiesLabel: string; + architectureLabel: string; }) { return (
@@ -83,12 +89,16 @@ function ProjectSection({ {items.map((item) => ( - @@ -111,6 +121,7 @@ export async function ProjectsContent() { return items.map((item) => ({ ...item, description: getLocalizedValue(item.description, locale), + architecture: getLocalizedValue(item.architecture, locale), badge: item.badge ? getLocalizedValue(item.badge, locale) : undefined, })); }; @@ -130,10 +141,30 @@ export async function ProjectsContent() {
- - - - + + + +
diff --git a/data/projects.ts b/data/projects.ts index d02a64f..46ce903 100644 --- a/data/projects.ts +++ b/data/projects.ts @@ -6,6 +6,11 @@ export type ProjectItem = { en: string; }; image: string; + technologies: string[]; + architecture: { + tr: string; + en: string; + }; badge?: { tr: string; en: string; @@ -19,6 +24,11 @@ export const MOBILE_APPS: ProjectItem[] = [ title: "Targiz App", badge: "Agritech", image: "/projects/targiz.png", + technologies: ["Next.js", "Supabase"], + architecture: { + tr: "Atomic Design yaklaşımıyla oluşturulmuş, Supabase tabanlı modüler uygulama mimarisi.", + en: "A modular, Supabase-backed application architecture built with the Atomic Design approach.", + }, href: "https://targiz.com", description: { tr: "Ottoqua ekibiyle birlikte geliştirdiğimiz, küçük ölçekli üreticilere sahada destek veren yapay zeka destekli tarım uygulaması.", @@ -27,7 +37,70 @@ export const MOBILE_APPS: ProjectItem[] = [ }, ]; +const OSTIM_TECHNOLOGIES = [ + ".NET 10", + "Angular", + "Astro", + "Own UI Kit", + "OMD UI Kit", + "Tailwind CSS", +]; + export const WEB_APPS: ProjectItem[] = [ + { + id: "ostim-web-portal", + title: "OSTİM Web Portalı", + badge: { + tr: "Kurumsal Portal", + en: "Corporate Portal", + }, + image: "/projects/ostim.png", + technologies: OSTIM_TECHNOLOGIES, + architecture: { + tr: "OSTİM Organize Sanayi Bölgesi ve yedi kümeye ait kurumsal içerikleri, firma ve ürün aramasını, çevrim içi işlemleri ve iletişim akışlarını tek portalda birleştiren çok bölümlü yapı.", + en: "A multi-section architecture combining corporate content for OSTİM Organized Industrial Zone and its seven clusters with company and product search, online services, and communication flows in one portal.", + }, + description: { + tr: "OSTİM Organize Sanayi Bölgesi ve yedi kümesi için geliştirdiğimiz kapsamlı kurumsal web portalı.", + en: "A comprehensive corporate web portal we developed for OSTİM Organized Industrial Zone and its seven clusters.", + }, + }, + { + id: "ostim-employment", + title: "OSTİM İstihdam", + badge: { + tr: "İstihdam Portalı", + en: "Employment Portal", + }, + image: "/projects/ostim-istihdam.png", + technologies: OSTIM_TECHNOLOGIES, + architecture: { + tr: "İŞKUR senkronizasyonu üzerine kurulu; aday, işveren, iş ve staj ilanı akışlarını yapay zekâ destekli eşleştirme katmanıyla buluşturan rol tabanlı portal mimarisi.", + en: "A role-based portal architecture built around İŞKUR synchronization, connecting candidate, employer, job, and internship workflows through an AI-assisted matching layer.", + }, + description: { + tr: "İŞKUR ile senkron çalışan, adayları iş ve staj fırsatlarıyla buluşturan istihdam portalı.", + en: "An employment portal synchronized with İŞKUR that connects candidates with job and internship opportunities.", + }, + }, + { + id: "ostim-foreign-trade", + title: "OSTİM Dış Ticaret", + badge: { + tr: "Dış Ticaret Portalı", + en: "Foreign Trade Portal", + }, + image: "/projects/ostim-dis-ticaret.png", + technologies: OSTIM_TECHNOLOGIES, + architecture: { + tr: "Dış ticaret firmaları, ilanlar ve yabancı dil bilen öğrenciler için ayrı kayıt ve başvuru akışlarını ortak bir eşleştirme ve ilan havuzunda birleştiren çok taraflı portal mimarisi.", + en: "A multi-sided portal architecture that brings registration and application flows for foreign-trade companies, listings, and multilingual students into a shared matching and opportunity pool.", + }, + description: { + tr: "Dış ticaret yapan firmaları yabancı dil bilen öğrencilerle buluşturmaya odaklanan portal.", + en: "A portal focused on matching foreign-trade companies with students who speak foreign languages.", + }, + }, { id: "arc-foreign-trade", title: "ARC Foreign Trade", @@ -36,6 +109,11 @@ export const WEB_APPS: ProjectItem[] = [ en: "Freelance", }, image: "/projects/arc.png", + technologies: ["Wix"], + architecture: { + tr: "Wix üzerinde yönetilebilir içerik ve kurumsal tanıtım sayfalarından oluşan, ihracat odaklı web sitesi yapısı.", + en: "An export-focused website architecture built on Wix with manageable content and corporate presentation pages.", + }, href: "https://arcforeigntrade.com", description: { tr: "Ankara merkezli ihracat odaklı bir üretici firma için kurumsal web sitesi yenileme projesi.", @@ -50,6 +128,11 @@ export const WEB_APPS: ProjectItem[] = [ en: "Open Source", }, image: "/projects/ataturk.png", + technologies: ["React"], + architecture: { + tr: "React ile geliştirilen, kronoloji verisini etkileşimli bir zaman çizelgesi arayüzünde sunan istemci taraflı uygulama.", + en: "A client-side React application presenting chronology data through an interactive timeline interface.", + }, href: "https://ataturk-kronolojisi.org", description: { tr: "Atatürk’ün hayatındaki önemli olayları, konuşmaları ve reformları etkileşimli bir zaman çizelgesiyle sunan web deneyimi.", @@ -64,6 +147,11 @@ export const WEB_APPS: ProjectItem[] = [ en: "Open Source", }, image: "/projects/mockup.png", + technologies: ["Next.js"], + architecture: { + tr: "Next.js tabanlı, görsel işleme akışını tamamen tarayıcıda çalıştıran istemci öncelikli araç mimarisi.", + en: "A client-first Next.js tool architecture that runs its image-processing workflow entirely in the browser.", + }, href: "https://mockup-factory-mu.vercel.app/", description: { tr: "Görsellerin cihaz mockup’larına saniyeler içinde dönüştürüldüğü, tamamen tarayıcı üzerinde çalışan açık kaynak araç.", @@ -78,6 +166,11 @@ export const WEB_APPS: ProjectItem[] = [ en: "Open Source", }, image: "/projects/ohhike.png", + technologies: ["React", "Express.js", "Better Auth", "better-sqlite3"], + architecture: { + tr: "Landing page, uygulama ve API katmanlarını aynı çalışma alanında yöneten; React arayüzü ve Express API'sinden oluşan monorepo.", + en: "A monorepo managing the landing page, application, and API in one workspace, with a React interface and Express API.", + }, href: "https://www.ohhike.com", description: { tr: "Spor takımları için açık kaynaklı, yapay zekâ destekli antrenörlük zekâ platformu. OhHike CoachOS; sporcu check-in'lerini, antrenman notlarını, akıllı saat verilerini ve antrenman geçmişini aksiyona geçirilebilir bir takım hafızasına dönüştürür.", @@ -92,6 +185,11 @@ export const WEB_APPS: ProjectItem[] = [ en: "Open Source", }, image: "/projects/neta.png", + technologies: ["Next.js", "Express.js"], + architecture: { + tr: "Landing page, uygulama ve API paketlerini birlikte yöneten Next.js ve Express.js tabanlı monorepo mimarisi.", + en: "A Next.js and Express.js monorepo architecture managing landing page, application, and API packages together.", + }, href: "https://www.takeneta.com", description: { tr: "Dijital ikinci beyniniz. Bilinçli üretkenlik ve yaşam takibi için hepsi bir arada kişisel işletim sistemi. Yerel öncelikli, yapay zekâ entegrasyonlu ve açık kaynaklı.", @@ -109,6 +207,11 @@ export const EXTENSIONS: ProjectItem[] = [ en: "Cross-Browser", }, image: "/projects/quick-fill.png", + technologies: ["JavaScript"], + architecture: { + tr: "Tarayıcı eklentisi API'leriyle çalışan, kısayol tanımlarını form alanlarına bağlayan çapraz tarayıcı JavaScript yapısı.", + en: "A cross-browser JavaScript extension architecture that connects shortcut definitions to form fields through browser extension APIs.", + }, href: "https://github.com/poyrazavsever/shortcut-injector", description: { tr: "Özel klavye kısayollarını kullanarak önceden tanımlanmış kişisel verileri ve bağlantıları web formlarına hızlıca enjekte etmek için geliştirilmiş bir tarayıcı eklentisi.", @@ -123,6 +226,11 @@ export const EXTENSIONS: ProjectItem[] = [ en: "Cross-Browser", }, image: "/projects/sound_sync.png", + technologies: ["JavaScript"], + architecture: { + tr: "Sekmelerin medya durumlarını izleyip oynatma komutlarını ileten olay tabanlı, çapraz tarayıcı eklenti mimarisi.", + en: "An event-driven, cross-browser extension architecture that observes media state across tabs and relays playback commands.", + }, href: "https://github.com/poyrazavsever/tab-audio-relay", description: { tr: "Sekmeler arasındaki ses çalma işlemlerini senkronize eden bir tarayıcı eklentisi. Eğitim videonuz durduğunda müziğinizi otomatik olarak oynatır, eğitime devam ettiğinizde ise müziği duraklatır.", @@ -137,6 +245,11 @@ export const FIGMA_TEMPLATES: ProjectItem[] = [ title: "HSD Community Web Site", badge: "Figma", image: "/projects/hsd.png", + technologies: ["Figma"], + architecture: { + tr: "Bileşenler, kontrol paneli, açılış sayfası ve profil ekranlarını doğrudan Figma içinde düzenleyen bileşen tabanlı tasarım dosyası.", + en: "A component-based design file organized directly in Figma across components, dashboard, landing page, and profile screens.", + }, href: "https://www.figma.com/community/file/1613511833232376739", description: { tr: "HSD Community için Web Site tasarımı. Bileşenler, kontrol paneli, açılış sayfası, profil sayfaları.", @@ -148,6 +261,11 @@ export const FIGMA_TEMPLATES: ProjectItem[] = [ title: "Restaurant Menu UI Design", badge: "Figma", image: "/projects/menu.png", + technologies: ["Figma"], + architecture: { + tr: "Tekrar kullanılabilir arayüz parçaları ve menü varyasyonlarından oluşan, doğrudan Figma üzerinde hazırlanan tasarım şablonu.", + en: "A design template created directly in Figma with reusable interface elements and menu variants.", + }, href: "https://www.figma.com/community/file/1613577450975840169/restaurant-menu-ui-design", description: { tr: "Topluluk için Restaurant Menü Arayüz Tasarımı şablonu.", diff --git a/messages/en.json b/messages/en.json index f8cca25..1399a8f 100644 --- a/messages/en.json +++ b/messages/en.json @@ -64,6 +64,8 @@ }, "viewNpmPackages": "View my NPM packages", "visitGithub": "Visit my GitHub profile", + "technologies": "Technologies", + "architecture": "Architecture", "emptyNpm": "npm API response is currently empty.", "emptyGithub": "GitHub API response is currently empty." }, diff --git a/messages/tr.json b/messages/tr.json index 6e66524..2954ecf 100644 --- a/messages/tr.json +++ b/messages/tr.json @@ -64,6 +64,8 @@ }, "viewNpmPackages": "NPM paketlerimi gör", "visitGithub": "GitHub hesabına git", + "technologies": "Teknolojiler", + "architecture": "Mimari", "emptyNpm": "npm API yanıtı şu anda boş.", "emptyGithub": "GitHub API yanıtı şu anda boş." }, diff --git a/public/projects/ostim-dis-ticaret.png b/public/projects/ostim-dis-ticaret.png new file mode 100644 index 0000000..14df88e Binary files /dev/null and b/public/projects/ostim-dis-ticaret.png differ diff --git a/public/projects/ostim-istihdam.png b/public/projects/ostim-istihdam.png new file mode 100644 index 0000000..6bd1cb4 Binary files /dev/null and b/public/projects/ostim-istihdam.png differ diff --git a/public/projects/ostim.png b/public/projects/ostim.png new file mode 100644 index 0000000..bb66afb Binary files /dev/null and b/public/projects/ostim.png differ