first udpate

2026-03-13 03:16:25 +01:00 · 2026-03-13 03:16:25 +01:00 · 243a182d33
commit 243a182d33
28 changed files with 1144 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/26
+++ b/26
@ -0,0 +1,26 @@
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+RUN addgroup -S nextjs && adduser -S nextjs -G nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+
+CMD ["node", "server.js"]
--- a/38
+++ b/38
@ -0,0 +1,38 @@
+SHELL := /bin/zsh
+COMPOSE_FILE := docker-compose.yml
+PROJECT_NAME := diyaa
+
+.PHONY: start stop restart logs ps build ensure-env ensure-project
+
+ensure-env:
+	@if [ ! -f .env ]; then \
+		if [ -f .env.example ]; then \
+			cp .env.example .env; \
+			echo ".env created from .env.example"; \
+		else \
+			echo ".env file is missing and .env.example was not found."; \
+			exit 1; \
+		fi; \
+	fi
+
+ensure-project: ensure-env
+	@grep -q '^COMPOSE_PROJECT_NAME=$(PROJECT_NAME)$$' .env || \
+	(echo "COMPOSE_PROJECT_NAME in .env must be '$(PROJECT_NAME)' to avoid project mix-up."; exit 1)
+
+start: ensure-project
+	docker compose --env-file .env -f $(COMPOSE_FILE) up -d --build
+	@echo "diyaa services are up"
+
+stop: ensure-project
+	docker compose --env-file .env -f $(COMPOSE_FILE) down
+
+restart: stop start
+
+logs: ensure-project
+	docker compose --env-file .env -f $(COMPOSE_FILE) logs -f --tail=200
+
+ps: ensure-project
+	docker compose --env-file .env -f $(COMPOSE_FILE) ps
+
+build: ensure-project
+	docker compose --env-file .env -f $(COMPOSE_FILE) build
--- a/app/.DS_Store
+++ b/app/.DS_Store
--- a/app/[locale]/.DS_Store
+++ b/app/[locale]/.DS_Store
--- a/app/[locale]/about/page.tsx
+++ b/app/[locale]/about/page.tsx
@ -0,0 +1,39 @@
+import { getDictionary, isLocale, type Locale } from "@/lib/i18n";
+import { notFound } from "next/navigation";
+
+export default function AboutPage({ params }: { params: { locale: string } }) {
+  if (!isLocale(params.locale)) {
+    notFound();
+  }
+
+  const locale = params.locale as Locale;
+  const dictionary = getDictionary(locale);
+
+  return (
+    <section className="panel">
+      <p className="eyebrow">{dictionary.about.kicker}</p>
+      <h1>{dictionary.about.title}</h1>
+      <p className="lead">{dictionary.about.story}</p>
+
+      <div className="split-grid">
+        <article className="card">
+          <h2>{dictionary.about.skillsTitle}</h2>
+          <ul className="list">
+            {dictionary.about.skills.map((skill) => (
+              <li key={skill}>{skill}</li>
+            ))}
+          </ul>
+        </article>
+
+        <article className="card">
+          <h2>{dictionary.about.experienceTitle}</h2>
+          <ul className="list">
+            {dictionary.about.experience.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </article>
+      </div>
+    </section>
+  );
+}
--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@ -0,0 +1,31 @@
+import { getDictionary, isLocale, type Locale } from "@/lib/i18n";
+import { notFound } from "next/navigation";
+
+export default function ContactPage({ params }: { params: { locale: string } }) {
+  if (!isLocale(params.locale)) {
+    notFound();
+  }
+
+  const locale = params.locale as Locale;
+  const dictionary = getDictionary(locale);
+
+  return (
+    <section className="panel">
+      <p className="eyebrow">{dictionary.contact.kicker}</p>
+      <h1>{dictionary.contact.title}</h1>
+      <p className="lead">{dictionary.contact.description}</p>
+
+      <div className="split-grid">
+        {dictionary.contact.channels.map((channel) => (
+          <article className="card" key={channel.name}>
+            <h2>{channel.name}</h2>
+            <p>{channel.status}</p>
+            <button type="button" className="pending-btn" disabled aria-disabled="true">
+              {dictionary.contact.pendingCta}
+            </button>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import { notFound } from "next/navigation";
+import BottomNav from "@/components/BottomNav";
+import SiteFooter from "@/components/SiteFooter";
+import SiteHeader from "@/components/SiteHeader";
+import { getDictionary, getDirection, isLocale, locales, type Locale } from "@/lib/i18n";
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export default function LocaleLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: { locale: string };
+}) {
+  if (!isLocale(params.locale)) {
+    notFound();
+  }
+
+  const locale = params.locale as Locale;
+  const dictionary = getDictionary(locale);
+
+  return (
+    <div dir={getDirection(locale)} className="site-shell">
+      <SiteHeader locale={locale} common={dictionary.common} />
+      <main className="page-content">{children}</main>
+      <BottomNav locale={locale} common={dictionary.common} />
+      <SiteFooter locale={locale} common={dictionary.common} />
+    </div>
+  );
+}
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@ -0,0 +1,14 @@
+import HeroSection from "@/components/HeroSection";
+import { getDictionary, isLocale, type Locale } from "@/lib/i18n";
+import { notFound } from "next/navigation";
+
+export default function HomePage({ params }: { params: { locale: string } }) {
+  if (!isLocale(params.locale)) {
+    notFound();
+  }
+
+  const locale = params.locale as Locale;
+  const dictionary = getDictionary(locale);
+
+  return <HeroSection locale={locale} home={dictionary.home} common={dictionary.common} />;
+}
--- a/app/globals.css
+++ b/app/globals.css
@ -0,0 +1,413 @@
+:root {
+  --bg: #07111f;
+  --surface: rgba(11, 20, 36, 0.84);
+  --surface-2: rgba(16, 28, 48, 0.78);
+  --surface-3: rgba(23, 38, 64, 0.92);
+  --text: #eef4ff;
+  --muted: #9fb1cc;
+  --line: rgba(180, 201, 232, 0.18);
+  --line-strong: rgba(202, 219, 245, 0.3);
+  --brand: #ff7a59;
+  --brand-2: #5ab2ff;
+  --brand-3: #f4c76b;
+  --button-secondary: rgba(22, 35, 58, 0.9);
+  --button-secondary-hover: rgba(28, 45, 72, 0.96);
+  --button-disabled: rgba(17, 28, 46, 0.72);
+  --card-bg: rgba(16, 28, 48, 0.82);
+  --nav-active-bg: rgba(238, 244, 255, 0.94);
+  --nav-active-text: #0d1728;
+  --shadow: 0 34px 70px rgba(2, 7, 20, 0.58);
+}
+
+[data-theme="light"] {
+  --bg: #f5f7ff;
+  --surface: rgba(255, 255, 255, 0.82);
+  --surface-2: rgba(255, 255, 255, 0.7);
+  --surface-3: rgba(255, 255, 255, 0.92);
+  --text: #0e1320;
+  --muted: #475069;
+  --line: rgba(14, 19, 32, 0.12);
+  --line-strong: rgba(14, 19, 32, 0.18);
+  --brand: #ff5d47;
+  --brand-2: #0d8bff;
+  --brand-3: #ffbf3f;
+  --button-secondary: rgba(255, 255, 255, 0.72);
+  --button-secondary-hover: rgba(255, 255, 255, 0.92);
+  --button-disabled: rgba(255, 255, 255, 0.7);
+  --card-bg: rgba(255, 255, 255, 0.74);
+  --nav-active-bg: #ffffff;
+  --nav-active-text: #111827;
+  --shadow: 0 30px 60px rgba(13, 22, 49, 0.2);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 31%),
+    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 30%),
+    radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--brand-3) 18%, transparent), transparent 33%),
+    linear-gradient(180deg, color-mix(in srgb, var(--surface) 32%, var(--bg)) 0%, var(--bg) 52%, color-mix(in srgb, var(--surface-2) 20%, var(--bg)) 100%),
+    var(--bg);
+  font-family: "Space Grotesk", "IBM Plex Sans Arabic", "Cairo", sans-serif;
+  line-height: 1.6;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.site-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.container {
+  width: min(1120px, 92vw);
+  margin: 0 auto;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  backdrop-filter: blur(18px);
+  background: color-mix(in srgb, var(--bg) 76%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
+}
+
+.bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 0.9rem 0;
+}
+
+.brand {
+  font-size: 1.05rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.theme-toggle {
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
+  color: var(--text);
+  border-radius: 999px;
+  padding: 0.4rem 0.8rem;
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 180ms ease, border-color 180ms ease;
+}
+
+.theme-toggle:hover,
+.theme-toggle:focus-visible {
+  border-color: color-mix(in srgb, var(--brand-2) 50%, var(--line));
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.theme-toggle-label {
+  min-width: 3.1rem;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.language-switcher {
+  display: inline-flex;
+  gap: 0.4rem;
+  padding: 0.2rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
+  border: 1px solid color-mix(in srgb, var(--line-strong) 86%, transparent);
+}
+
+.lang-chip {
+  padding: 0.35rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.lang-chip.active {
+  color: white;
+  background: linear-gradient(90deg, var(--brand), var(--brand-2));
+}
+
+.page-content {
+  width: min(1120px, 92vw);
+  margin: 2rem auto 2rem;
+  padding-bottom: 1.1rem;
+  animation: fade-up 460ms ease both;
+}
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--line-strong);
+  border-radius: 24px;
+  box-shadow: var(--shadow);
+  padding: clamp(1.3rem, 2vw, 2rem);
+}
+
+.hero h1,
+.panel h1 {
+  font-size: clamp(1.8rem, 5vw, 3.3rem);
+  line-height: 1.12;
+  margin: 0.2rem 0 0.9rem;
+}
+
+.eyebrow {
+  margin: 0;
+  font-size: 0.83rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--brand-2);
+}
+
+.lead {
+  margin: 0;
+  color: var(--muted);
+  max-width: 70ch;
+}
+
+.cta-row {
+  margin-top: 1.4rem;
+  display: flex;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+}
+
+.cta-btn,
+.ghost-btn,
+.pending-btn {
+  border-radius: 12px;
+  border: 1px solid transparent;
+  padding: 0.74rem 1rem;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.cta-btn {
+  color: white;
+  background: linear-gradient(115deg, var(--brand), var(--brand-2));
+}
+
+.ghost-btn {
+  border-color: var(--line);
+  background: var(--button-secondary);
+}
+
+.pending-btn {
+  margin-top: 0.6rem;
+  border-color: var(--line);
+  color: var(--muted);
+  background: var(--button-disabled);
+  cursor: not-allowed;
+}
+
+.cta-btn:hover,
+.ghost-btn:hover,
+.cta-btn:focus-visible,
+.ghost-btn:focus-visible {
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.ghost-btn:hover,
+.ghost-btn:focus-visible {
+  background: var(--button-secondary-hover);
+  border-color: color-mix(in srgb, var(--brand-2) 24%, var(--line-strong));
+}
+
+.stat-grid,
+.split-grid {
+  margin-top: 1.5rem;
+  display: grid;
+  gap: 1rem;
+}
+
+.stat-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.split-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.stat-card,
+.card {
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: var(--card-bg);
+  padding: 1rem;
+}
+
+.stat-value {
+  display: block;
+  font-size: 1.35rem;
+  font-weight: 800;
+}
+
+.stat-label {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.card h2 {
+  margin: 0 0 0.45rem;
+  font-size: 1.08rem;
+}
+
+.card p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.list {
+  margin: 0;
+  padding-inline-start: 1.1rem;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.site-footer {
+  border-top: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface) 84%, transparent);
+}
+
+.footer-content {
+  padding: 1rem 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.locale-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3rem;
+  padding: 0.2rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+}
+
+.bottom-nav {
+  display: flex;
+  justify-content: center;
+  padding: 0 0 1rem;
+  margin-top: 0.5rem;
+}
+
+.bottom-nav-inner {
+  min-height: 3.2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
+  border-radius: 999px;
+  backdrop-filter: blur(20px);
+  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.25);
+  padding: 0.34rem;
+  width: auto;
+  max-width: min(96vw, 820px);
+}
+
+.bottom-nav-links {
+  display: flex;
+  align-items: center;
+  gap: 0.26rem;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.bottom-nav-links::-webkit-scrollbar {
+  display: none;
+}
+
+.bottom-nav-links a {
+  padding: 0.42rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.36rem;
+  white-space: nowrap;
+  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, background-color 180ms ease;
+}
+
+.bottom-nav-links a:hover,
+.bottom-nav-links a:focus-visible {
+  border-color: var(--line);
+  color: var(--text);
+  transform: translateY(-1px);
+  outline: none;
+}
+
+.bottom-nav-links a.active {
+  color: var(--nav-active-text);
+  border-color: transparent;
+  background: var(--nav-active-bg);
+}
+
+.nav-icon {
+  font-size: 0.72rem;
+  opacity: 0.9;
+}
+
+.lang-toggle {
+  margin-inline-start: 0.18rem;
+  border-color: var(--line) !important;
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 860px) {
+  .split-grid,
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .bottom-nav-inner {
+    min-height: 3.05rem;
+    max-width: min(96vw, 98vw);
+  }
+
+  .footer-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "diyaa | Personal Website",
+  description: "Bilingual personal website built with Next.js",
+};
+
+const themeScript = `
+(() => {
+  try {
+    const storedTheme = localStorage.getItem("theme");
+    const activeTheme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : "dark";
+    document.documentElement.setAttribute("data-theme", activeTheme);
+  } catch {
+    document.documentElement.setAttribute("data-theme", "dark");
+  }
+})();
+`;
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="ar" data-theme="dark" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function RootPage() {
+  redirect("/ar");
+}
--- a/components/BottomNav.tsx
+++ b/components/BottomNav.tsx
@ -0,0 +1,79 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { CommonContent } from "@/content/types";
+import { locales, type Locale } from "@/lib/i18n";
+
+type BottomNavProps = {
+  locale: Locale;
+  common: CommonContent;
+};
+
+export default function BottomNav({ locale, common }: BottomNavProps) {
+  const pathname = usePathname();
+  const segments = pathname.split("/").filter(Boolean);
+
+  const normalizedPath = pathname !== "/" && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
+  const homePath = `/${locale}`;
+  const aboutPath = `/${locale}/about`;
+  const contactPath = `/${locale}/contact`;
+
+  const isHome = normalizedPath === homePath;
+  const isAbout = normalizedPath === aboutPath || normalizedPath.startsWith(`${aboutPath}/`);
+  const isContact = normalizedPath === contactPath || normalizedPath.startsWith(`${contactPath}/`);
+  const targetLocale: Locale = locale === "ar" ? "en" : "ar";
+
+  const switchPath = () => {
+    const nextSegments = [...segments];
+
+    if (nextSegments.length === 0) {
+      return `/${targetLocale}`;
+    }
+
+    if (locales.includes(nextSegments[0] as Locale)) {
+      nextSegments[0] = targetLocale;
+    } else {
+      nextSegments.unshift(targetLocale);
+    }
+
+    return `/${nextSegments.join("/")}`;
+  };
+
+  return (
+    <nav aria-label={common.navLabel} className="bottom-nav">
+      <div className="container bottom-nav-inner">
+        <div className="bottom-nav-links">
+          <Link href={homePath} className={isHome ? "active" : undefined} aria-current={isHome ? "page" : undefined}>
+            <span aria-hidden className="nav-icon">
+              ○
+            </span>
+            {common.nav.home}
+          </Link>
+          <Link href={aboutPath} className={isAbout ? "active" : undefined} aria-current={isAbout ? "page" : undefined}>
+            <span aria-hidden className="nav-icon">
+              □
+            </span>
+            {common.nav.about}
+          </Link>
+          <Link
+            href={contactPath}
+            className={isContact ? "active" : undefined}
+            aria-current={isContact ? "page" : undefined}
+          >
+            <span aria-hidden className="nav-icon">
+              ◇
+            </span>
+            {common.nav.contact}
+          </Link>
+          <Link href={switchPath()} className="lang-toggle" aria-label={common.languageSwitcherLabel}>
+            <span aria-hidden className="nav-icon">
+              ⇄
+            </span>
+            {targetLocale.toUpperCase()}
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+}
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@ -0,0 +1,37 @@
+import Link from "next/link";
+import type { CommonContent, HomeContent } from "@/content/types";
+import type { Locale } from "@/lib/i18n";
+
+type HeroSectionProps = {
+  locale: Locale;
+  home: HomeContent;
+  common: CommonContent;
+};
+
+export default function HeroSection({ locale, home, common }: HeroSectionProps) {
+  return (
+    <section className="hero panel">
+      <p className="eyebrow">{home.kicker}</p>
+      <h1>{home.title}</h1>
+      <p className="lead">{home.description}</p>
+
+      <div className="cta-row">
+        <Link href={`/${locale}/contact`} className="cta-btn">
+          {home.primaryCta}
+        </Link>
+        <Link href={`/${locale}/about`} className="ghost-btn">
+          {common.nav.about}
+        </Link>
+      </div>
+
+      <div className="stat-grid">
+        {home.highlights.map((item) => (
+          <article key={item.label} className="stat-card">
+            <span className="stat-value">{item.value}</span>
+            <span className="stat-label">{item.label}</span>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { locales, type Locale } from "@/lib/i18n";
+
+type LanguageSwitcherProps = {
+  locale: Locale;
+  label: string;
+};
+
+export default function LanguageSwitcher({ locale, label }: LanguageSwitcherProps) {
+  const pathname = usePathname();
+  const segments = pathname.split("/").filter(Boolean);
+
+  const switchPath = (targetLocale: Locale) => {
+    const nextSegments = [...segments];
+
+    if (nextSegments.length === 0) {
+      return `/${targetLocale}`;
+    }
+
+    if (locales.includes(nextSegments[0] as Locale)) {
+      nextSegments[0] = targetLocale;
+    } else {
+      nextSegments.unshift(targetLocale);
+    }
+
+    return `/${nextSegments.join("/")}`;
+  };
+
+  return (
+    <div className="language-switcher" aria-label={label}>
+      {locales.map((item) => {
+        const active = item === locale;
+
+        return (
+          <Link
+            key={item}
+            href={switchPath(item)}
+            className={active ? "lang-chip active" : "lang-chip"}
+            aria-current={active ? "page" : undefined}
+          >
+            {item.toUpperCase()}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
--- a/components/SiteFooter.tsx
+++ b/components/SiteFooter.tsx
@ -0,0 +1,20 @@
+import type { Locale } from "@/lib/i18n";
+import type { CommonContent } from "@/content/types";
+
+type SiteFooterProps = {
+  locale: Locale;
+  common: CommonContent;
+};
+
+export default function SiteFooter({ locale, common }: SiteFooterProps) {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="site-footer">
+      <div className="container footer-content">
+        <p>{common.footerRights.replace("{year}", String(year))}</p>
+        <p className="locale-badge">{locale.toUpperCase()}</p>
+      </div>
+    </footer>
+  );
+}
--- a/components/SiteHeader.tsx
+++ b/components/SiteHeader.tsx
@ -0,0 +1,22 @@
+import Link from "next/link";
+import ThemeToggle from "@/components/ThemeToggle";
+import type { Locale } from "@/lib/i18n";
+import type { CommonContent } from "@/content/types";
+
+type SiteHeaderProps = {
+  locale: Locale;
+  common: CommonContent;
+};
+
+export default function SiteHeader({ locale, common }: SiteHeaderProps) {
+  return (
+    <header className="site-header">
+      <div className="container bar">
+        <Link href={`/${locale}`} className="brand">
+          {common.siteTitle}
+        </Link>
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@ -0,0 +1,42 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type Theme = "dark" | "light";
+
+const STORAGE_KEY = "theme";
+
+function isTheme(value: string | null): value is Theme {
+  return value === "dark" || value === "light";
+}
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>("dark");
+
+  useEffect(() => {
+    const storedTheme = localStorage.getItem(STORAGE_KEY);
+    const activeTheme: Theme = isTheme(storedTheme) ? storedTheme : "dark";
+
+    document.documentElement.setAttribute("data-theme", activeTheme);
+    setTheme(activeTheme);
+  }, []);
+
+  const handleToggle = () => {
+    const nextTheme: Theme = theme === "dark" ? "light" : "dark";
+
+    setTheme(nextTheme);
+    document.documentElement.setAttribute("data-theme", nextTheme);
+    localStorage.setItem(STORAGE_KEY, nextTheme);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleToggle}
+      className="theme-toggle"
+      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+    >
+      <span className="theme-toggle-label">{theme === "dark" ? "Light" : "Dark"}</span>
+    </button>
+  );
+}
--- a/content/ar.ts
+++ b/content/ar.ts
@ -0,0 +1,54 @@
+import type { Dictionary } from "@/content/types";
+
+const ar: Dictionary = {
+  common: {
+    siteTitle: "ضياء",
+    navLabel: "التنقل الرئيسي",
+    languageSwitcherLabel: "تبديل اللغة",
+    nav: {
+      home: "الرئيسية",
+      about: "من أنا",
+      contact: "تواصل",
+    },
+    footerRights: "{year} جميع الحقوق محفوظة",
+  },
+  home: {
+    kicker: "Full-Stack Developer",
+    title: "أبني أنظمة ويب حديثة وقابلة للتوسع",
+    description:
+      "مطور Full-Stack أعمل على بناء تطبيقات ويب حديثة باستخدام Next.js و NestJS و PostgreSQL. أركز على الأنظمة القابلة للتوسع وتجارب المستخدم السريعة.",
+    primaryCta: "تواصل معي",
+    highlights: [
+      { value: "+10", label: "مشاريع برمجية" },
+      { value: "Next.js / NestJS", label: "Stack الأساسي" },
+      { value: "Docker", label: "Dev Infrastructure" },
+    ],
+  },
+  about: {
+    kicker: "نبذة سريعة",
+    title: "من أنا",
+    story:
+      "أنا مطور Full-Stack أركز على بناء تطبيقات ويب حديثة وقابلة للتوسع. أعمل بشكل أساسي باستخدام Next.js و NestJS و PostgreSQL مع بنية تشغيل تعتمد على Docker. أركز في مشاريعي على الأداء، البنية النظيفة، وتجربة المستخدم السريعة، مع تصميم أنظمة يمكن تطويرها بسهولة مع نمو المشروع.",
+    skillsTitle: "مهارات",
+    skills: ["تطوير واجهات", "تحسين تجربة المستخدم", "تنظيم المحتوى", "إدارة مشاريع رقمية"],
+    experienceTitle: "خبرات مختصرة",
+    experience: [
+      "HTML",
+      "CSS , SCSS",
+      "React",
+    ],
+  },
+  contact: {
+    kicker: "لنبدأ خطوة جديدة",
+    title: "تواصل",
+    description: "روابط التواصل ستتم إضافتها لاحقًا. كل العناصر أدناه جاهزة لاستقبال الروابط الفعلية.",
+    pendingCta: "الرابط قيد الإضافة",
+    channels: [
+      { name: "Email", status: "سيتم إضافة الرابط قريبًا" },
+      { name: "LinkedIn", status: "سيتم إضافة الرابط قريبًا" },
+      { name: "GitHub", status: "سيتم إضافة الرابط قريبًا" },
+    ],
+  },
+};
+
+export default ar;
--- a/content/en.ts
+++ b/content/en.ts
@ -0,0 +1,54 @@
+import type { Dictionary } from "@/content/types";
+
+const en: Dictionary = {
+  common: {
+    siteTitle: "diyaa | Personal Site",
+    navLabel: "Main navigation",
+    languageSwitcherLabel: "Switch language",
+    nav: {
+      home: "Home",
+      about: "About Me",
+      contact: "Contact",
+    },
+    footerRights: "{year} All rights reserved",
+  },
+  home: {
+    kicker: "Fresh personal presence",
+    title: "A bold digital space for my professional identity",
+    description:
+      "This is placeholder copy you can replace quickly. It is built to highlight your profile, communicate value, and stay clean on every screen size.",
+    primaryCta: "Start a conversation",
+    highlights: [
+      { value: "3", label: "Core pages" },
+      { value: "RTL/LTR", label: "Direction ready" },
+      { value: "100%", label: "Customizable" },
+    ],
+  },
+  about: {
+    kicker: "Short introduction",
+    title: "About me",
+    story:
+      "This is temporary biography text. Replace it with your real story, strengths, and the kind of outcomes you deliver through your work.",
+    skillsTitle: "Skills",
+    skills: ["Frontend engineering", "UX refinement", "Content structuring", "Digital project delivery"],
+    experienceTitle: "Experience highlights",
+    experience: [
+      "Placeholder experience line 1",
+      "Placeholder experience line 2",
+      "Placeholder experience line 3",
+    ],
+  },
+  contact: {
+    kicker: "Let us connect",
+    title: "Contact",
+    description: "Your real contact links will be added later. The placeholders below are ready for direct replacement.",
+    pendingCta: "Link pending",
+    channels: [
+      { name: "Email", status: "Real link will be added soon" },
+      //{ name: "LinkedIn", status: "Real link will be added soon" },
+      //{ name: "GitHub", status: "Real link will be added soon" },
+    ],
+  },
+};
+
+export default en;
--- a/content/types.ts
+++ b/content/types.ts
@ -0,0 +1,50 @@
+export type CommonContent = {
+  siteTitle: string;
+  navLabel: string;
+  languageSwitcherLabel: string;
+  nav: {
+    home: string;
+    about: string;
+    contact: string;
+  };
+  footerRights: string;
+};
+
+export type HomeContent = {
+  kicker: string;
+  title: string;
+  description: string;
+  primaryCta: string;
+  highlights: Array<{
+    value: string;
+    label: string;
+  }>;
+};
+
+export type AboutContent = {
+  kicker: string;
+  title: string;
+  story: string;
+  skillsTitle: string;
+  skills: string[];
+  experienceTitle: string;
+  experience: string[];
+};
+
+export type ContactContent = {
+  kicker: string;
+  title: string;
+  description: string;
+  pendingCta: string;
+  channels: Array<{
+    name: string;
+    status: string;
+  }>;
+};
+
+export type Dictionary = {
+  common: CommonContent;
+  home: HomeContent;
+  about: AboutContent;
+  contact: ContactContent;
+};
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,23 @@
+name: ${COMPOSE_PROJECT_NAME:-diyaa}
+
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: ${CONTAINER_NAME:-diyaa}
+    ports:
+      - "${APP_PORT:-30002}:3000"
+    env_file:
+      - .env
+    environment:
+      NODE_ENV: ${NODE_ENV:-production}
+      PORT: 3000
+      HOSTNAME: 0.0.0.0
+    healthcheck:
+      test: ["CMD-SHELL", "wget -q --spider http://127.0.0.1:3000 || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 20s
+    restart: unless-stopped
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@ -0,0 +1,24 @@
+import ar from "@/content/ar";
+import en from "@/content/en";
+import type { Dictionary } from "@/content/types";
+
+export const locales = ["ar", "en"] as const;
+
+export type Locale = (typeof locales)[number];
+
+const dictionaries: Record<Locale, Dictionary> = {
+  ar,
+  en,
+};
+
+export function isLocale(value: string): value is Locale {
+  return locales.includes(value as Locale);
+}
+
+export function getDictionary(locale: Locale): Dictionary {
+  return dictionaries[locale];
+}
+
+export function getDirection(locale: Locale): "rtl" | "ltr" {
+  return locale === "ar" ? "rtl" : "ltr";
+}
--- a/next-env.d.ts
+++ b/next-env.d.ts
@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  output: "standalone",
+};
+
+module.exports = nextConfig;
--- a/package.json
+++ b/package.json
@ -0,0 +1,23 @@
+{
+  "name": "docker-system",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.2.32",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "20.14.12",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "sass": "1.77.8",
+    "typescript": "5.5.4"
+  }
+}
--- a/public/.gitkeep
+++ b/public/.gitkeep
@ -0,0 +1 @@
+
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next"}],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}