feat: implement education module with CRUD functionality, database schema, and localization support

messages/en.json

@@ -1,6 +1,7 @@
 {
   "Navigation": {
     "experience": "Experience",
+    "education": "Education",
     "techStack": "Tech Stack",
     "projects": "Projects",
     "contact": "Contact"
@@ -59,6 +60,18 @@
       }
     }
   },
+  "Education": {
+    "badge": "Education",
+    "title": "Education History",
+    "subtitle": "The formal academic path that built the technical and professional foundation of my work.",
+    "present": "Present",
+    "gpaLabel": "GPA",
+    "locationLabel": "Location",
+    "finalProjectLabel": "Final Project",
+    "viewFinalProject": "View Final Project",
+    "emptyTitle": "No education history yet",
+    "emptyDescription": "Add your education history through the Admin Dashboard."
+  },
   "TechStack": {
     "badge": "Technologies",
     "title": "Skills & Technologies",

messages/id.json

@@ -1,6 +1,7 @@
 {
   "Navigation": {
     "experience": "Pengalaman",
+    "education": "Pendidikan",
     "techStack": "Tech Stack",
     "projects": "Proyek",
     "contact": "Kontak"
@@ -59,6 +60,18 @@
       }
     }
   },
+  "Education": {
+    "badge": "Pendidikan",
+    "title": "Riwayat Pendidikan",
+    "subtitle": "Perjalanan akademik formal yang membentuk fondasi teknis dan profesional saya.",
+    "present": "Sekarang",
+    "gpaLabel": "GPA",
+    "locationLabel": "Lokasi",
+    "finalProjectLabel": "Tugas Akhir",
+    "viewFinalProject": "Lihat Tugas Akhir",
+    "emptyTitle": "Belum ada riwayat pendidikan",
+    "emptyDescription": "Tambahkan melalui Admin Dashboard."
+  },
   "TechStack": {
     "badge": "Teknologi",
     "title": "Keahlian & Teknologi",

prisma/migrations/20260403193000_add_education_model/migration.sql

@@ -0,0 +1,19 @@
+-- CreateTable
+CREATE TABLE "educations" (
+    "id" UUID NOT NULL,
+    "institution" TEXT NOT NULL,
+    "degree" TEXT NOT NULL,
+    "field_of_study" TEXT NOT NULL,
+    "location" TEXT,
+    "start_year" INTEGER NOT NULL,
+    "end_year" INTEGER,
+    "is_ongoing" BOOLEAN NOT NULL DEFAULT false,
+    "description" TEXT,
+    "gpa" TEXT,
+    "final_project_title" TEXT,
+    "final_project_url" TEXT,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "educations_pkey" PRIMARY KEY ("id")
+);

prisma/schema.prisma

@@ -85,3 +85,22 @@ model Experience {
 
   @@map("experiences")
 }
+
+model Education {
+  id                String   @id @default(uuid()) @db.Uuid
+  institution       String
+  degree            String
+  fieldOfStudy      String   @map("field_of_study")
+  location          String?
+  startYear         Int      @map("start_year")
+  endYear           Int?     @map("end_year")
+  isOngoing         Boolean  @default(false) @map("is_ongoing")
+  description       String?  @db.Text
+  gpa               String?
+  finalProjectTitle String?  @map("final_project_title")
+  finalProjectUrl   String?  @map("final_project_url")
+  order             Int      @default(0)
+  createdAt         DateTime @default(now()) @map("created_at")
+
+  @@map("educations")
+}

src/app/[locale]/admin/dashboard/education/[id]/edit/page.tsx

@@ -0,0 +1,44 @@
+import { prisma } from "@/core/db/prisma";
+import { verifySession } from "@/core/security/session";
+import { redirect } from "@/i18n/routing";
+import { getLocale } from "next-intl/server";
+import { notFound } from "next/navigation";
+import { EducationForm } from "@/features/education/education-form";
+
+export default async function EditEducationPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const session = await verifySession();
+  const locale = await getLocale();
+
+  if (!session) redirect({ href: "/admin/login", locale });
+
+  const { id } = await params;
+  const education = await prisma.education.findUnique({ where: { id } });
+
+  if (!education) notFound();
+
+  return (
+    <div className="min-h-screen bg-muted/10 p-6 lg:p-12">
+      <EducationForm
+        initialData={{
+          institution: education.institution,
+          degree: education.degree,
+          fieldOfStudy: education.fieldOfStudy,
+          location: education.location,
+          startYear: education.startYear,
+          endYear: education.endYear,
+          isOngoing: education.isOngoing,
+          description: education.description,
+          gpa: education.gpa,
+          finalProjectTitle: education.finalProjectTitle,
+          finalProjectUrl: education.finalProjectUrl,
+          order: education.order,
+        }}
+        educationId={education.id}
+      />
+    </div>
+  );
+}

src/app/[locale]/admin/dashboard/education/create/page.tsx

@@ -0,0 +1,17 @@
+import { verifySession } from "@/core/security/session";
+import { redirect } from "@/i18n/routing";
+import { getLocale } from "next-intl/server";
+import { EducationForm } from "@/features/education/education-form";
+
+export default async function CreateEducationPage() {
+  const session = await verifySession();
+  const locale = await getLocale();
+
+  if (!session) redirect({ href: "/admin/login", locale });
+
+  return (
+    <div className="min-h-screen bg-muted/10 p-6 lg:p-12">
+      <EducationForm />
+    </div>
+  );
+}

src/app/[locale]/admin/dashboard/education/page.tsx

@@ -0,0 +1,152 @@
+import { prisma } from "@/core/db/prisma";
+import { verifySession } from "@/core/security/session";
+import { Link, redirect } from "@/i18n/routing";
+import { getLocale } from "next-intl/server";
+import { ArrowLeft, ExternalLink, GraduationCap, MapPin, Pencil, Plus, School } from "lucide-react";
+import { DeleteEducationButton } from "@/features/education/delete-education-button";
+import { formatEducationPeriod } from "@/features/education/education-utils";
+
+export default async function AdminEducationPage() {
+  const session = await verifySession();
+  const locale = await getLocale();
+
+  if (!session) {
+    redirect({ href: "/admin/login", locale });
+  }
+
+  const educationEntries = await prisma.education.findMany({
+    orderBy: { order: "asc" },
+  });
+
+  return (
+    <div className="min-h-screen bg-muted/10 p-6 lg:p-12">
+      <div className="max-w-5xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center gap-4">
+            <Link
+              href="/admin/dashboard"
+              className="p-2 rounded-full hover:bg-muted text-muted-foreground transition-colors"
+            >
+              <ArrowLeft size={20} />
+            </Link>
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight">Education History</h1>
+              <p className="text-sm text-muted-foreground mt-1">
+                Manage your academic timeline and final project links.
+              </p>
+            </div>
+          </div>
+          <Link
+            href="/admin/dashboard/education/create"
+            className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-foreground text-background font-semibold text-sm shadow-md hover:scale-105 transition-all"
+          >
+            <Plus size={16} />
+            Add Education
+          </Link>
+        </div>
+
+        {educationEntries.length === 0 ? (
+          <div className="p-12 text-center flex flex-col items-center bg-card rounded-2xl border border-border/50">
+            <GraduationCap size={48} className="text-muted-foreground/40 mb-4" />
+            <h3 className="text-lg font-bold">No education entries yet</h3>
+            <p className="text-sm text-muted-foreground mb-6">
+              Build your education timeline in the CMS.
+            </p>
+            <Link
+              href="/admin/dashboard/education/create"
+              className="px-6 py-2 rounded-xl border border-border hover:bg-muted/50 transition-colors font-medium text-sm"
+            >
+              Add First Entry
+            </Link>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {educationEntries.map((entry) => (
+              <div
+                key={entry.id}
+                className="group flex items-start justify-between gap-4 p-5 rounded-2xl bg-card border border-border/50 hover:border-sky-500/30 hover:shadow-md transition-all"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-3 mb-1 flex-wrap">
+                    <span className="text-xs font-mono font-bold text-sky-600 dark:text-sky-400 bg-sky-500/10 px-2.5 py-1 rounded-full">
+                      {formatEducationPeriod({
+                        startYear: entry.startYear,
+                        endYear: entry.endYear,
+                        isOngoing: entry.isOngoing,
+                      })}
+                    </span>
+                    <span className="text-xs text-muted-foreground font-mono">
+                      order: {entry.order}
+                    </span>
+                    {entry.finalProjectUrl && (
+                      <span className="text-xs font-mono text-muted-foreground/70">
+                        final project link
+                      </span>
+                    )}
+                  </div>
+
+                  <h3 className="font-bold text-base">
+                    {entry.degree} - {entry.fieldOfStudy}
+                  </h3>
+                  <p className="text-sm text-muted-foreground font-medium flex items-center gap-1.5 mt-0.5">
+                    <School size={12} className="text-sky-500/70" />
+                    {entry.institution}
+                  </p>
+
+                  {(entry.location || entry.gpa) && (
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {entry.location && (
+                        <span className="inline-flex items-center gap-1.5 text-xs rounded-full bg-muted/60 px-2.5 py-1 text-muted-foreground">
+                          <MapPin size={11} />
+                          {entry.location}
+                        </span>
+                      )}
+                      {entry.gpa && (
+                        <span className="inline-flex items-center gap-1.5 text-xs rounded-full bg-sky-500/10 px-2.5 py-1 text-sky-600 dark:text-sky-400">
+                          GPA: {entry.gpa}
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  {entry.description && (
+                    <p className="text-sm text-muted-foreground mt-2 line-clamp-2 leading-relaxed">
+                      {entry.description}
+                    </p>
+                  )}
+
+                  {entry.finalProjectTitle && (
+                    <p className="text-sm text-foreground/80 mt-2">
+                      Final project: {entry.finalProjectTitle}
+                    </p>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+                  {entry.finalProjectUrl && (
+                    <a
+                      href={entry.finalProjectUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-2 text-muted-foreground hover:text-sky-500 hover:bg-sky-500/10 rounded-lg transition-colors"
+                      title="Open final project"
+                    >
+                      <ExternalLink size={16} />
+                    </a>
+                  )}
+                  <Link
+                    href={`/admin/dashboard/education/${entry.id}/edit`}
+                    className="p-2 text-muted-foreground hover:text-sky-500 hover:bg-sky-500/10 rounded-lg transition-colors"
+                  >
+                    <Pencil size={16} />
+                  </Link>
+                  <DeleteEducationButton id={entry.id} />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/[locale]/admin/dashboard/page.tsx

@@ -1,7 +1,7 @@
 import { verifySession, clearSession } from "@/core/security/session";
 import { Link, redirect } from "@/i18n/routing";
 import { getLocale } from "next-intl/server";
-import { LogOut, ArrowRight, Code2, Inbox, Briefcase, FolderKanban } from "lucide-react";
+import { LogOut, ArrowRight, Code2, Inbox, Briefcase, FolderKanban, GraduationCap } from "lucide-react";
 import { prisma } from "@/core/db/prisma";
 
 export default async function DashboardPage() {
@@ -13,12 +13,13 @@ export default async function DashboardPage() {
   }
 
   // Fetch counts in parallel
-  const [projectCount, skillCount, unreadMessageCount, experienceCount] =
+  const [projectCount, skillCount, unreadMessageCount, experienceCount, educationCount] =
     await Promise.all([
       prisma.project.count(),
       prisma.skill.count(),
       prisma.message.count({ where: { isRead: false } }),
       prisma.experience.count(),
+      prisma.education.count(),
     ]);
 
   const cards = [
@@ -59,6 +60,15 @@ export default async function DashboardPage() {
       color: "text-violet-500",
       accentClass: "from-violet-500 to-purple-500",
     },
+    {
+      href: "/admin/dashboard/education",
+      icon: <GraduationCap size={22} />,
+      title: "Education",
+      description: "Manage your academic timeline.",
+      count: educationCount,
+      color: "text-sky-500",
+      accentClass: "from-sky-500 to-indigo-500",
+    },
   ];
 
   return (
@@ -91,7 +101,7 @@ export default async function DashboardPage() {
 
       {/* Main Content */}
       <main className="max-w-7xl mx-auto px-6 py-12">
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
           {cards.map((card) => (
             <Link
               key={card.href}

src/app/[locale]/page.tsx

@@ -3,6 +3,7 @@ import { Footer } from "@/shared/components/footer";
 import { WaveDivider } from "@/shared/components/wave-divider";
 import { HeroSection } from "@/features/hero/hero-section";
 import { ExperienceSection } from "@/features/experience/experience-section";
+import { EducationSection } from "@/features/education/education-section";
 import { TechStackSection } from "@/features/skills/tech-stack-section";
 import { ProjectsSection } from "@/features/projects/projects-section";
 import { ContactSection } from "@/features/messages/contact-section";
@@ -22,6 +23,7 @@ export default async function HomePage() {
 
         {/* Hero → Experience */}
         <ExperienceSection />
+        <EducationSection />
 
         {/* Experience → TechStack (white/dark → muted tint) */}
         <div className="bg-background">

src/features/education/actions.ts

@@ -0,0 +1,156 @@
+"use server";
+
+import { prisma } from "@/core/db/prisma";
+import { verifySession } from "@/core/security/session";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const optionalTextSchema = z.preprocess((value) => {
+  if (typeof value !== "string") return undefined;
+  const trimmed = value.trim();
+  return trimmed === "" ? undefined : trimmed;
+}, z.string().optional());
+
+const optionalUrlSchema = z.preprocess((value) => {
+  if (typeof value !== "string") return undefined;
+  const trimmed = value.trim();
+  return trimmed === "" ? undefined : trimmed;
+}, z.string().url("Final project URL must be a valid URL").optional());
+
+const yearSchema = z
+  .coerce
+  .number()
+  .int("Year must be a whole number")
+  .min(1900, "Year must be 1900 or later")
+  .max(2100, "Year must be 2100 or earlier");
+
+const optionalYearSchema = z.preprocess((value) => {
+  if (value === "" || value === null || value === undefined) return undefined;
+  return value;
+}, yearSchema.optional());
+
+const educationSchema = z
+  .object({
+    institution: z.string().trim().min(1, "Institution is required"),
+    degree: z.string().trim().min(1, "Degree is required"),
+    fieldOfStudy: z.string().trim().min(1, "Field of study is required"),
+    location: optionalTextSchema,
+    startYear: yearSchema,
+    endYear: optionalYearSchema,
+    isOngoing: z.boolean().default(false),
+    description: optionalTextSchema,
+    gpa: optionalTextSchema,
+    finalProjectTitle: optionalTextSchema,
+    finalProjectUrl: optionalUrlSchema,
+    order: z.coerce.number().int().default(0),
+  })
+  .superRefine((data, ctx) => {
+    if (!data.isOngoing && typeof data.endYear !== "number") {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["endYear"],
+        message: "End year is required unless this education is ongoing",
+      });
+    }
+
+    if (
+      typeof data.endYear === "number" &&
+      data.endYear < data.startYear
+    ) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["endYear"],
+        message: "End year must be greater than or equal to start year",
+      });
+    }
+  });
+
+function extractEducationFormData(formData: FormData) {
+  return {
+    institution: formData.get("institution") as string,
+    degree: formData.get("degree") as string,
+    fieldOfStudy: formData.get("fieldOfStudy") as string,
+    location: formData.get("location") as string,
+    startYear: formData.get("startYear") as string,
+    endYear: formData.get("endYear") as string,
+    isOngoing: formData.get("isOngoing") === "on",
+    description: formData.get("description") as string,
+    gpa: formData.get("gpa") as string,
+    finalProjectTitle: formData.get("finalProjectTitle") as string,
+    finalProjectUrl: formData.get("finalProjectUrl") as string,
+    order: formData.get("order") as string,
+  };
+}
+
+export async function createEducationAction(prevState: unknown, formData: FormData) {
+  const session = await verifySession();
+  if (!session) return { success: false, message: "Unauthorized" };
+
+  const validation = educationSchema.safeParse(extractEducationFormData(formData));
+  if (!validation.success) {
+    return { success: false, message: validation.error.issues[0].message };
+  }
+
+  try {
+    await prisma.education.create({
+      data: validation.data,
+    });
+
+    revalidatePath("/admin/dashboard/education");
+    revalidatePath("/admin/dashboard");
+    revalidatePath("/");
+
+    return { success: true };
+  } catch (error) {
+    console.error(error);
+    return { success: false, message: "Failed to create education entry" };
+  }
+}
+
+export async function updateEducationAction(
+  id: string,
+  prevState: unknown,
+  formData: FormData
+) {
+  const session = await verifySession();
+  if (!session) return { success: false, message: "Unauthorized" };
+
+  const validation = educationSchema.safeParse(extractEducationFormData(formData));
+  if (!validation.success) {
+    return { success: false, message: validation.error.issues[0].message };
+  }
+
+  try {
+    await prisma.education.update({
+      where: { id },
+      data: validation.data,
+    });
+
+    revalidatePath("/admin/dashboard/education");
+    revalidatePath("/admin/dashboard");
+    revalidatePath("/");
+
+    return { success: true };
+  } catch (error) {
+    console.error(error);
+    return { success: false, message: "Failed to update education entry" };
+  }
+}
+
+export async function deleteEducationAction(id: string) {
+  const session = await verifySession();
+  if (!session) return { success: false, message: "Unauthorized" };
+
+  try {
+    await prisma.education.delete({ where: { id } });
+
+    revalidatePath("/admin/dashboard/education");
+    revalidatePath("/admin/dashboard");
+    revalidatePath("/");
+
+    return { success: true };
+  } catch (error) {
+    console.error(error);
+    return { success: false, message: "Failed to delete education entry" };
+  }
+}

src/features/education/delete-education-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import { Loader2, Trash2 } from "lucide-react";
+import { deleteEducationAction } from "./actions";
+
+export function DeleteEducationButton({ id }: { id: string }) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleDelete() {
+    if (confirm("Delete this education entry? This cannot be undone.")) {
+      setLoading(true);
+      await deleteEducationAction(id);
+      setLoading(false);
+    }
+  }
+
+  return (
+    <button
+      onClick={handleDelete}
+      disabled={loading}
+      className="p-2 text-muted-foreground hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-colors disabled:opacity-50"
+      title="Delete Education"
+    >
+      {loading ? <Loader2 size={16} className="animate-spin" /> : <Trash2 size={16} />}
+    </button>
+  );
+}

src/features/education/education-form.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowLeft, GraduationCap, Loader2, PlusCircle, Save } from "lucide-react";
+import { createEducationAction, updateEducationAction } from "./actions";
+import { useRouter } from "@/i18n/routing";
+
+type InitialData = {
+  institution?: string;
+  degree?: string;
+  fieldOfStudy?: string;
+  location?: string | null;
+  startYear?: number;
+  endYear?: number | null;
+  isOngoing?: boolean;
+  description?: string | null;
+  gpa?: string | null;
+  finalProjectTitle?: string | null;
+  finalProjectUrl?: string | null;
+  order?: number;
+};
+
+export function EducationForm({
+  initialData,
+  educationId,
+}: {
+  initialData?: InitialData;
+  educationId?: string;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isOngoing, setIsOngoing] = useState(initialData?.isOngoing ?? false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+    let result;
+
+    if (educationId) {
+      result = await updateEducationAction(educationId, null, formData);
+    } else {
+      result = await createEducationAction(null, formData);
+    }
+
+    if (!result.success) {
+      setError(result.message || "An error occurred");
+      setLoading(false);
+      return;
+    }
+
+    router.push("/admin/dashboard/education");
+    router.refresh();
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto p-6 lg:p-10 rounded-3xl bg-card border border-border shadow-sm relative overflow-hidden">
+      <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-sky-500 to-indigo-500" />
+
+      <div className="mb-8 flex items-center gap-4">
+        <button
+          type="button"
+          onClick={() => router.back()}
+          className="p-2 rounded-full hover:bg-muted text-muted-foreground transition-colors"
+        >
+          <ArrowLeft size={20} />
+        </button>
+        <div>
+          <div className="flex items-center gap-3 mb-1">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-500 to-indigo-500 text-white flex items-center justify-center shadow-lg">
+              <GraduationCap size={18} />
+            </div>
+            <h1 className="text-2xl font-bold tracking-tight">
+              {educationId ? "Edit Education" : "Add Education"}
+            </h1>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            {educationId
+              ? "Update your academic timeline entry"
+              : "Add a new entry to your education history"}
+          </p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {error && (
+          <div className="p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-500 text-sm font-medium">
+            {error}
+          </div>
+        )}
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">Institution</label>
+            <input
+              name="institution"
+              required
+              defaultValue={initialData?.institution ?? ""}
+              placeholder="e.g. Universitas Indonesia"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">Location</label>
+            <input
+              name="location"
+              defaultValue={initialData?.location ?? ""}
+              placeholder="e.g. Depok, Indonesia"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">Degree</label>
+            <input
+              name="degree"
+              required
+              defaultValue={initialData?.degree ?? ""}
+              placeholder="e.g. Bachelor of Computer Science"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">Field of Study</label>
+            <input
+              name="fieldOfStudy"
+              required
+              defaultValue={initialData?.fieldOfStudy ?? ""}
+              placeholder="e.g. Information Systems"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">Start Year</label>
+            <input
+              name="startYear"
+              type="number"
+              min="1900"
+              max="2100"
+              required
+              defaultValue={initialData?.startYear ?? ""}
+              placeholder="2019"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm font-mono focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">End Year</label>
+            <input
+              name="endYear"
+              type="number"
+              min="1900"
+              max="2100"
+              disabled={isOngoing}
+              defaultValue={initialData?.endYear ?? ""}
+              placeholder={isOngoing ? "Still ongoing" : "2023"}
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm font-mono focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all disabled:opacity-50"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">Display Order</label>
+            <input
+              name="order"
+              type="number"
+              defaultValue={initialData?.order ?? 0}
+              placeholder="0 = first"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm font-mono focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 pt-1">
+          <input
+            id="isOngoing"
+            name="isOngoing"
+            type="checkbox"
+            checked={isOngoing}
+            onChange={(e) => setIsOngoing(e.target.checked)}
+            className="w-5 h-5 rounded border-border text-sky-500 focus:ring-sky-500/50"
+          />
+          <label htmlFor="isOngoing" className="text-sm font-medium cursor-pointer">
+            This education entry is ongoing
+          </label>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">GPA</label>
+            <input
+              name="gpa"
+              defaultValue={initialData?.gpa ?? ""}
+              placeholder="e.g. 3.85 / 4.00"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm font-mono focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-semibold">Final Project Title</label>
+            <input
+              name="finalProjectTitle"
+              defaultValue={initialData?.finalProjectTitle ?? ""}
+              placeholder="e.g. Sistem Monitoring Distribusi Dokumen"
+              className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-semibold">Final Project URL</label>
+          <input
+            name="finalProjectUrl"
+            type="url"
+            defaultValue={initialData?.finalProjectUrl ?? ""}
+            placeholder="https://repository.example.edu/final-project"
+            className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm font-mono focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-semibold">Description</label>
+          <textarea
+            name="description"
+            rows={4}
+            defaultValue={initialData?.description ?? ""}
+            placeholder="Describe the focus of your studies, thesis theme, or relevant specialization..."
+            className="w-full px-4 py-3 rounded-xl bg-muted/30 border border-border text-sm focus:outline-none focus:ring-2 focus:ring-sky-500/50 transition-all resize-y"
+          />
+        </div>
+
+        <div className="pt-6 border-t border-border/50 flex justify-end">
+          <button
+            type="submit"
+            disabled={loading}
+            className="flex items-center gap-2 px-8 py-3 rounded-xl bg-foreground text-background font-semibold text-sm hover:opacity-90 transition-all disabled:opacity-50 hover:scale-[1.02] shadow-md"
+          >
+            {loading ? (
+              <Loader2 size={18} className="animate-spin" />
+            ) : educationId ? (
+              <><Save size={18} /> Update</>
+            ) : (
+              <><PlusCircle size={18} /> Save Education</>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/features/education/education-section.tsx

@@ -0,0 +1,141 @@
+import { prisma } from "@/core/db/prisma";
+import { AnimatedSection } from "@/shared/components/animated-section";
+import { SectionHeading } from "@/shared/components/section-heading";
+import { ExternalLink, GraduationCap, BookOpen, Landmark, MapPin, School } from "lucide-react";
+import { getTranslations } from "next-intl/server";
+import { formatEducationPeriod } from "./education-utils";
+
+const ICONS = [
+  <GraduationCap key="graduation-cap" size={20} />,
+  <BookOpen key="book-open" size={20} />,
+  <Landmark key="landmark" size={20} />,
+  <School key="school" size={20} />,
+];
+
+export async function EducationSection() {
+  const t = await getTranslations("Education");
+
+  const educationEntries = await prisma.education.findMany({
+    orderBy: { order: "asc" },
+  });
+
+  const timelineData = educationEntries.map((entry, index) => ({
+    ...entry,
+    period: formatEducationPeriod({
+      startYear: entry.startYear,
+      endYear: entry.endYear,
+      isOngoing: entry.isOngoing,
+      presentLabel: t("present"),
+    }),
+    icon: ICONS[index % ICONS.length],
+  }));
+
+  return (
+    <section id="education" className="section-padding relative">
+      <div className="max-w-5xl mx-auto px-6">
+        <AnimatedSection>
+          <SectionHeading title={t("title")} subtitle={t("subtitle")} />
+        </AnimatedSection>
+
+        {timelineData.length === 0 ? (
+          <div className="text-center py-16 text-muted-foreground">
+            <GraduationCap size={40} className="mx-auto mb-4 opacity-30" />
+            <p className="text-lg font-semibold mb-2">{t("emptyTitle")}</p>
+            <p className="text-sm">{t("emptyDescription")}</p>
+          </div>
+        ) : (
+          <div className="relative">
+            <div className="timeline-line" />
+
+            <div className="space-y-12 md:space-y-16">
+              {timelineData.map((item, index) => (
+                <AnimatedSection key={item.id} delay={index * 0.15}>
+                  <div
+                    className={`relative flex flex-col md:flex-row items-start gap-8 md:gap-24 ${
+                      index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
+                    }`}
+                  >
+                    <div
+                      className={`flex-1 ml-20 md:ml-0 ${
+                        index % 2 === 0 ? "md:text-right" : "md:text-left"
+                      }`}
+                    >
+                      <span className="inline-block font-mono text-xs text-sky-500 font-semibold tracking-wider uppercase mb-2">
+                        {item.period}
+                      </span>
+                      <h3 className="text-xl font-bold mb-1">
+                        {item.degree} - {item.fieldOfStudy}
+                      </h3>
+                      <div
+                        className={`text-muted-foreground text-sm font-medium mb-3 flex items-center gap-1.5 ${
+                          index % 2 === 0 ? "md:justify-end" : "md:justify-start"
+                        }`}
+                      >
+                        <School size={14} className="text-sky-500/70" />
+                        <span>{item.institution}</span>
+                      </div>
+
+                      {(item.location || item.gpa) && (
+                        <div
+                          className={`flex flex-wrap gap-2 mb-4 ${
+                            index % 2 === 0 ? "md:justify-end" : "md:justify-start"
+                          }`}
+                        >
+                          {item.location && (
+                            <span className="inline-flex items-center gap-1.5 rounded-full bg-muted/60 px-3 py-1 text-xs text-muted-foreground">
+                              <MapPin size={12} />
+                              {item.location}
+                            </span>
+                          )}
+                          {item.gpa && (
+                            <span className="inline-flex items-center gap-1.5 rounded-full bg-sky-500/10 px-3 py-1 text-xs text-sky-600 dark:text-sky-400">
+                              {t("gpaLabel")}: {item.gpa}
+                            </span>
+                          )}
+                        </div>
+                      )}
+
+                      {item.description && (
+                        <p className="text-muted-foreground text-sm leading-relaxed mb-4">
+                          {item.description}
+                        </p>
+                      )}
+
+                      {item.finalProjectUrl && (
+                        <div className="inline-flex max-w-md flex-col gap-3 rounded-2xl border border-sky-500/15 bg-sky-500/5 p-4">
+                          <span className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-sky-600 dark:text-sky-400">
+                            {t("finalProjectLabel")}
+                          </span>
+                          {item.finalProjectTitle && (
+                            <p className="text-sm font-semibold text-foreground">
+                              {item.finalProjectTitle}
+                            </p>
+                          )}
+                          <a
+                            href={item.finalProjectUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-2 text-sm font-medium text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300 transition-colors"
+                          >
+                            {t("viewFinalProject")}
+                            <ExternalLink size={14} />
+                          </a>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="absolute left-0 md:left-1/2 md:-translate-x-1/2 top-0 w-12 h-12 rounded-xl bg-card border-2 border-sky-500/30 flex items-center justify-center text-sky-500 shadow-lg shadow-sky-500/10 z-10">
+                      {item.icon}
+                    </div>
+
+                    <div className="hidden md:block flex-1" />
+                  </div>
+                </AnimatedSection>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

src/features/education/education-utils.ts

@@ -0,0 +1,21 @@
+export function formatEducationPeriod({
+  startYear,
+  endYear,
+  isOngoing,
+  presentLabel = "Present",
+}: {
+  startYear: number;
+  endYear?: number | null;
+  isOngoing: boolean;
+  presentLabel?: string;
+}) {
+  if (isOngoing) {
+    return `${startYear} - ${presentLabel}`;
+  }
+
+  if (typeof endYear === "number" && endYear > startYear) {
+    return `${startYear} - ${endYear}`;
+  }
+
+  return `${startYear}`;
+}

src/shared/components/footer.tsx

@@ -1,13 +1,14 @@
-import { GitFork, Link2, Mail, ArrowUp, Heart, MapPin } from "lucide-react";
+import { Link2, Mail, ArrowUp, Heart, MapPin } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { BrandLogo } from "@/shared/components/brand-logo";
 
 const quickLinks = [
-  { href: "#experience", label: "Experience" },
+  { href: "#experience", labelKey: "experience" },
-  { href: "#tech-stack", label: "Tech Stack" },
+  { href: "#education", labelKey: "education" },
-  { href: "#projects", label: "Projects" },
+  { href: "#tech-stack", labelKey: "techStack" },
-  { href: "#contact", label: "Contact" },
+  { href: "#projects", labelKey: "projects" },
-];
+  { href: "#contact", labelKey: "contact" },
+] as const;
 
 export function Footer() {
   const t = useTranslations("Footer");
@@ -46,7 +47,7 @@ export function Footer() {
                   href={link.href}
                   className="block text-sm text-muted-foreground hover:text-accent transition-colors"
                 >
-                  {tNav(link.label?.toLowerCase() === "tech stack" ? "techStack" : link.label.toLowerCase() as any)}
+                  {tNav(link.labelKey)}
                 </a>
               ))}
             </div>

src/shared/components/navbar.tsx

@@ -8,7 +8,7 @@ import { BrandLogo } from "@/shared/components/brand-logo";
 import { useTranslations, useLocale } from "next-intl";
 import { usePathname, useRouter } from "@/i18n/routing";
 
-const SECTIONS = ["experience", "tech-stack", "projects", "contact"];
+const SECTIONS = ["experience", "education", "tech-stack", "projects", "contact"];
 
 export function Navbar() {
   const [isScrolled, setIsScrolled] = useState(false);
@@ -49,6 +49,7 @@ export function Navbar() {
 
   const navLinks = [
     { href: "#experience", id: "experience", label: t("experience") },
+    { href: "#education", id: "education", label: t("education") },
     { href: "#tech-stack", id: "tech-stack", label: t("techStack") },
     { href: "#projects", id: "projects", label: t("projects") },
     { href: "#contact", id: "contact", label: t("contact") },