first udpate
This commit is contained in:
diyaa
commit
243a182d33
26
Dockerfile
Normal file
26
Dockerfile
Normal file
@ -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"]
|
||||||
38
Makefile
Normal file
38
Makefile
Normal file
@ -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
|
||||||
BIN
app/.DS_Store
vendored
Normal file
BIN
app/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
app/[locale]/.DS_Store
vendored
Normal file
BIN
app/[locale]/.DS_Store
vendored
Normal file
Binary file not shown.
39
app/[locale]/about/page.tsx
Normal file
39
app/[locale]/about/page.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
31
app/[locale]/contact/page.tsx
Normal file
31
app/[locale]/contact/page.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
34
app/[locale]/layout.tsx
Normal file
34
app/[locale]/layout.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
app/[locale]/page.tsx
Normal file
14
app/[locale]/page.tsx
Normal file
@ -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} />;
|
||||||
|
}
|
||||||
413
app/globals.css
Normal file
413
app/globals.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
31
app/layout.tsx
Normal file
31
app/layout.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
app/page.tsx
Normal file
5
app/page.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
|
export default function RootPage() {
|
||||||
|
redirect("/ar");
|
||||||
|
}
|
||||||
79
components/BottomNav.tsx
Normal file
79
components/BottomNav.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
37
components/HeroSection.tsx
Normal file
37
components/HeroSection.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
50
components/LanguageSwitcher.tsx
Normal file
50
components/LanguageSwitcher.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
20
components/SiteFooter.tsx
Normal file
20
components/SiteFooter.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
22
components/SiteHeader.tsx
Normal file
22
components/SiteHeader.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
42
components/ThemeToggle.tsx
Normal file
42
components/ThemeToggle.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
54
content/ar.ts
Normal file
54
content/ar.ts
Normal file
@ -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;
|
||||||
54
content/en.ts
Normal file
54
content/en.ts
Normal file
@ -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;
|
||||||
50
content/types.ts
Normal file
50
content/types.ts
Normal file
@ -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;
|
||||||
|
};
|
||||||
23
docker-compose.yml
Normal file
23
docker-compose.yml
Normal file
@ -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
|
||||||
24
lib/i18n.ts
Normal file
24
lib/i18n.ts
Normal file
@ -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";
|
||||||
|
}
|
||||||
4
next-env.d.ts
vendored
Normal file
4
next-env.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/// <reference types="next" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
7
next.config.js
Normal file
7
next.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
reactStrictMode: true,
|
||||||
|
output: "standalone",
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = nextConfig;
|
||||||
23
package.json
Normal file
23
package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/.gitkeep
Normal file
1
public/.gitkeep
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
23
tsconfig.json
Normal file
23
tsconfig.json
Normal file
@ -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"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user