feat(i18n): convert portfolio lists to bilingual schemas and resolve localized values

2026-06-27 14:42:48 +03:00
parent 0d112c6568
commit ac20bd697c
13 changed files with 745 additions and 386 deletions
@@ -1,7 +1,7 @@
 "use client";

 import Image from "next/image";
-import Link from "next/link";
+import { Link } from "@/i18n/routing";
 import { Badge, Card, Typography } from "poyraz-ui/atoms";
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
 import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper";
@@ -9,19 +9,19 @@ import { BOOKMARKS } from "@/data/bookmarks";
 import { certificates } from "@/data/certificates";
 import { EDUCATION } from "@/data/education";
 import { EXPERIENCE } from "@/data/experience";
-
-const ABOUT_TEXT =
-  "Ortaokulda yazılımla tanıştığımdan beri sürekli öğrenmeye ve kendimi geliştirmeye çalışıyorum. Lise yıllarında öğrenme hevesim daha da arttı ve web geliştirme tarafında farklı teknolojileri keşfetme fırsatı buldum. Lisenin sonlarına doğru mobil dünyasına da adım attım. Şu an aktif olarak üretiyor, geliştiriyor ve en önemlisi hâlâ öğrenmeye devam ediyorum.";
-
-const CERTIFICATE_PREVIEW = certificates.slice(0, 4);
+import { useTranslations, useLocale } from "next-intl";
+import { getLocalizedValue } from "@/lib/locale";

 export function AboutContent() {
+  const t = useTranslations("About");
+  const locale = useLocale();
+
  return (
    <section className="flex h-full flex-col gap-3 overflow-hidden">
      <div className="grid gap-3 md:grid-cols-2">
        <Card className="rounded-sm border-border p-4">
          <Typography variant="p" className="text-sm leading-relaxed text-muted-foreground">
-            {ABOUT_TEXT}
+            {t("aboutText")}
          </Typography>
        </Card>

@@ -31,13 +31,13 @@ export function AboutContent() {
              <StaggerItem key={item.id}>
                <Card className="rounded-sm border-border p-3">
                  <Typography variant="large" className="text-base leading-tight">
-                    {item.title}
+                    {getLocalizedValue(item.title, locale)}
                  </Typography>
                  <Typography variant="small" className="mt-0.5 text-muted-foreground">
                    {item.institution}
                  </Typography>
                  <Typography variant="small" className="mt-1 text-red-600">
-                    {item.period}
+                    {getLocalizedValue(item.period, locale)}
                  </Typography>
                </Card>
              </StaggerItem>
@@ -56,14 +56,14 @@ export function AboutContent() {
            >
              <Card className="rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
                <div className="grid grid-cols-2 gap-2">
-                  {CERTIFICATE_PREVIEW.map((item) => (
+                  {certificates.slice(0, 4).map((item) => (
                    <div
-                      key={item.name}
+                      key={getLocalizedValue(item.name, locale)}
                      className="relative aspect-4/3 overflow-hidden rounded-sm border border-border"
                    >
                      <Image
                        src={item.image}
-                        alt={item.name}
+                        alt={getLocalizedValue(item.name, locale)}
                        fill
                        sizes="(max-width: 768px) 45vw, 22vw"
                        className="object-cover"
@@ -76,15 +76,15 @@ export function AboutContent() {
          </SheetTrigger>

          <SheetContent side="right" className="w-full max-w-xl p-4">
-            <SheetTitle>Tüm Sertifikalar</SheetTitle>
+            <SheetTitle>{t("allCertificates")}</SheetTitle>
            <div className="mt-4 grid max-h-[90dvh] gap-3 overflow-y-auto pr-1">
              {certificates.map((item) => (
-                <Card key={`${item.name}-${item.date}`} className="rounded-sm border-border p-3">
+                <Card key={`${getLocalizedValue(item.name, locale)}-${getLocalizedValue(item.date, locale)}`} className="rounded-sm border-border p-3">
                  <div className="flex gap-3">
                    <div className="relative h-20 w-28 shrink-0 overflow-hidden rounded-sm border border-border">
                      <Image
                        src={item.image}
-                        alt={item.name}
+                        alt={getLocalizedValue(item.name, locale)}
                        fill
                        sizes="112px"
                        className="object-cover"
@@ -92,13 +92,13 @@ export function AboutContent() {
                    </div>
                    <div className="min-w-0">
                      <Typography variant="large" className="leading-tight">
-                        {item.name}
+                        {getLocalizedValue(item.name, locale)}
                      </Typography>
                      <Typography variant="small" className="text-muted-foreground">
                        {item.organization}
                      </Typography>
                      <Typography variant="small" className="text-red-600">
-                        {item.date}
+                        {getLocalizedValue(item.date, locale)}
                      </Typography>
                    </div>
                  </div>
@@ -114,13 +114,13 @@ export function AboutContent() {
              <StaggerItem key={item.id}>
                <Card className="rounded-sm border-border p-3">
                  <Typography variant="large" className="text-base leading-tight">
-                    {item.role}
+                    {getLocalizedValue(item.role, locale)}
                  </Typography>
                  <Typography variant="small" className="mt-0.5 text-muted-foreground">
                    {item.company}
                  </Typography>
                  <Typography variant="small" className="mt-1 text-red-600">
-                    {item.period}
+                    {getLocalizedValue(item.period, locale)}
                  </Typography>
                </Card>
              </StaggerItem>
@@ -133,10 +133,10 @@ export function AboutContent() {
        <Link href="/about/references" className="block">
          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
            <Typography variant="large" className="text-base leading-tight">
-              Referanslar
+              {t("referencesTitle")}
            </Typography>
            <Typography variant="small" className="mt-1 text-muted-foreground">
-              Tüm referansları ayrı bir detay sayfasında görüntüle.
+              {t("referencesDesc")}
            </Typography>
          </Card>
        </Link>
@@ -144,10 +144,10 @@ export function AboutContent() {
        <Link href="/about/volunteer-community" className="block">
          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
            <Typography variant="large" className="text-base leading-tight">
-              Gönüllülük ve Topluluk
+              {t("volunteerTitle")}
            </Typography>
            <Typography variant="small" className="mt-1 text-muted-foreground">
-              Zaman çizelgesi ve katkı detaylarını ayrı bir detay sayfasında incele.
+              {t("volunteerDesc")}
            </Typography>
          </Card>
        </Link>
@@ -161,17 +161,17 @@ export function AboutContent() {
            >
              <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
                <Typography variant="large" className="text-base leading-tight">
-                  Yer İmleri
+                  {t("bookmarksTitle")}
                </Typography>
                <Typography variant="small" className="mt-1 text-muted-foreground">
-                  Hızlı erişim bağlantılarını bir sheet içinde görüntüle.
+                  {t("bookmarksDesc")}
                </Typography>
              </Card>
            </button>
          </SheetTrigger>

          <SheetContent side="right" className="w-full max-w-xl p-4">
-            <SheetTitle>Yer İmleri</SheetTitle>
+            <SheetTitle>{t("bookmarksTitle")}</SheetTitle>
            <div className="mt-4 grid max-h-[90dvh] gap-3 overflow-y-auto pr-1">
              {BOOKMARKS.map((item) => (
                <Card key={item.id} className="rounded-sm border-border p-3">
@@ -184,7 +184,7 @@ export function AboutContent() {
                    </Badge>
                  </div>
                  <Typography variant="small" className="mt-1 text-muted-foreground">
-                    {item.description}
+                    {getLocalizedValue(item.description, locale)}
                  </Typography>
                  <Link
                    href={item.href}
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Link from "next/link";
+import { Link } from "@/i18n/routing";
 import { Icon } from "@iconify/react";
 import { Badge, Card, Typography } from "poyraz-ui/atoms";
 import { ImageCard } from "poyraz-ui/molecules";
@@ -12,6 +12,8 @@ import {
  type ProjectItem,
 } from "@/data/projects";
 import { getGithubRepos, getNpmPackages } from "@/lib/project-feeds";
+import { getTranslations, getLocale } from "next-intl/server";
+import { getLocalizedValue } from "@/lib/locale";

 function getLanguageMeta(language: string) {
  const key = language.toLowerCase();
@@ -50,12 +52,21 @@ function getLanguageMeta(language: string) {
  return { icon: "mdi:code-tags", color: "text-zinc-500" };
 }

+type LocalizedProjectItem = {
+  id: string;
+  title: string;
+  description: string;
+  image: string;
+  badge?: string;
+  href?: string;
+};
+
 function ProjectSection({
  title,
  items,
 }: {
  title: string;
-  items: ProjectItem[];
+  items: LocalizedProjectItem[];
 }) {
  return (
    <section className="space-y-2">
@@ -81,11 +92,22 @@ function ProjectSection({
 }

 export async function ProjectsContent() {
+  const t = await getTranslations("Projects");
+  const locale = await getLocale();
+
  const [repos, npmPackages] = await Promise.all([
    getGithubRepos(),
    getNpmPackages(),
  ]);

+  const localizeItems = (items: ProjectItem[]): LocalizedProjectItem[] => {
+    return items.map((item) => ({
+      ...item,
+      description: getLocalizedValue(item.description, locale),
+      badge: item.badge ? getLocalizedValue(item.badge, locale) : undefined,
+    }));
+  };
+
  return (
    <section className="flex h-full flex-col gap-3 overflow-y-auto">
      <Card className="rounded-sm border-border bg-background p-2">
@@ -101,20 +123,20 @@ export async function ProjectsContent() {
        </div>
      </Card>

-      <ProjectSection title="Mobil Uygulamalar" items={MOBILE_APPS} />
-      <ProjectSection title="Web Uygulamaları" items={WEB_APPS} />
-      <ProjectSection title="Extension'lar" items={EXTENSIONS} />
-      <ProjectSection title="Figma Tasarımları" items={FIGMA_TEMPLATES} />
+      <ProjectSection title={t("sections.mobileApps")} items={localizeItems(MOBILE_APPS)} />
+      <ProjectSection title={t("sections.webApps")} items={localizeItems(WEB_APPS)} />
+      <ProjectSection title={t("sections.extensions")} items={localizeItems(EXTENSIONS)} />
+      <ProjectSection title={t("sections.figmaTemplates")} items={localizeItems(FIGMA_TEMPLATES)} />

      <section className="space-y-2">
        <Typography variant="large" className="text-base">
-          npm Paketleri (@poyrazavsever)
+          {t("sections.npmPackages")}
        </Typography>
        <div className="grid gap-2 md:grid-cols-2">
          {npmPackages.length === 0 ? (
            <Card className="rounded-sm border-border p-3 md:col-span-2">
              <Typography variant="small" className="text-muted-foreground">
-                npm API yanıtı şu anda boş.
+                {t("emptyNpm")}
              </Typography>
            </Card>
          ) : (
@@ -151,13 +173,13 @@ export async function ProjectsContent() {

      <section className="space-y-2">
        <Typography variant="large" className="text-base">
-          GitHub Repoları (@poyrazavsever)
+          {t("sections.githubRepos")}
        </Typography>
        <div className="grid gap-2 md:grid-cols-2">
          {repos.length === 0 ? (
            <Card className="rounded-sm border-border p-3 md:col-span-2">
              <Typography variant="small" className="text-muted-foreground">
-                GitHub API yanıtı şu anda boş.
+                {t("emptyGithub")}
              </Typography>
            </Card>
          ) : (
@@ -1,6 +1,8 @@
-import Link from "next/link";
+import { Link } from "@/i18n/routing";
 import { TestimonialCard } from "poyraz-ui/molecules";
 import { REFERENCES } from "@/data/references";
+import { useLocale } from "next-intl";
+import { getLocalizedValue } from "@/lib/locale";

 type ReferenceCardsProps = {
  className?: string;
@@ -8,14 +10,16 @@ type ReferenceCardsProps = {
 };

 export function ReferenceCards({ className, cardClassName }: ReferenceCardsProps) {
+  const locale = useLocale();
+
  return (
    <div className={className}>
      {REFERENCES.map((item) => {
        const card = (
          <TestimonialCard
-            quote={item.quote}
+            quote={getLocalizedValue(item.quote, locale)}
            author={item.author}
-            role={item.role}
+            role={getLocalizedValue(item.role, locale)}
            avatar={item.avatar}
            rating={item.rating}
            className={`h-full rounded-sm ${cardClassName || "w-70 shrink-0"}`}
@@ -1,14 +1,17 @@
-import Link from "next/link";
+import { Link } from "@/i18n/routing";
 import { ReferenceCards } from "@/components/reference-cards";
+import { useTranslations } from "next-intl";

 export function ReferencesDetailContent() {
+  const t = useTranslations("About");
+
  return (
    <section className="flex h-full flex-col gap-4 overflow-y-auto">
      <Link
        href="/about"
        className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
      >
-        {"<- Hakkımda'ya dön"}
+        {t("backToAbout")}
      </Link>

      <ReferenceCards
@@ -1,15 +1,20 @@
-import Link from "next/link";
+import { Link } from "@/i18n/routing";
 import { Card, Typography } from "poyraz-ui/atoms";
 import { VOLUNTEER_COMMUNITY_ITEMS } from "@/data/volunteer-community";
+import { useTranslations, useLocale } from "next-intl";
+import { getLocalizedValue } from "@/lib/locale";

 export function VolunteerCommunityContent() {
+  const t = useTranslations("About");
+  const locale = useLocale();
+
  return (
    <section className="flex h-full flex-col gap-4 overflow-y-auto">
      <Link
        href="/about"
        className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
      >
-        {"<- Hakkımda'ya dön"}
+        {t("backToAbout")}
      </Link>

      <div className="grid gap-3">
@@ -20,12 +25,12 @@ export function VolunteerCommunityContent() {
            </Typography>

            <Typography variant="small" className="mt-2 text-muted-foreground">
-              <span className="font-semibold text-foreground">Zaman Çizelgesi:</span> {item.timeline}
+              <span className="font-semibold text-foreground">{t("timelineLabel")}</span> {getLocalizedValue(item.timeline, locale)}
            </Typography>

            {item.link ? (
              <Typography variant="small" className="mt-1 text-muted-foreground">
-                <span className="font-semibold text-foreground">Bağlantı:</span>{" "}
+                <span className="font-semibold text-foreground">{t("linkLabel")}</span>{" "}
                <Link
                  href={item.link}
                  target="_blank"
@@ -38,7 +43,7 @@ export function VolunteerCommunityContent() {
            ) : null}

            <Typography variant="small" className="mt-1 text-muted-foreground">
-              <span className="font-semibold text-foreground">Odak:</span> {item.focus}
+              <span className="font-semibold text-foreground">{t("focusLabel")}</span> {getLocalizedValue(item.focus, locale)}
            </Typography>
          </Card>
        ))}