Initial deploy
هذا الالتزام موجود في:
166
components/resume-page-content.tsx
Normal file
166
components/resume-page-content.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import Link from "next/link";
|
||||
import { SectionHeading } from "@/components/section-heading";
|
||||
import { SiteShell } from "@/components/site-shell";
|
||||
import { portfolioContent, resumeFile, sharedProfile, type Language } from "@/data/portfolio";
|
||||
|
||||
export function ResumePageContent({ language }: { language: Language }) {
|
||||
const t = portfolioContent[language];
|
||||
const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
|
||||
const address = language === "ar" ? sharedProfile.addressAr : sharedProfile.address;
|
||||
const hasResume = resumeFile.available;
|
||||
|
||||
return (
|
||||
<SiteShell language={language}>
|
||||
<main className="site-container flex flex-col gap-10 py-8 md:py-10 lg:gap-12 lg:py-12">
|
||||
<section className="section-shell hero-glow">
|
||||
<div className="section-padding grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
|
||||
<div>
|
||||
<p className="section-kicker">{t.ui.onlineResume}</p>
|
||||
<h1 className="type-page-title mt-4 max-w-4xl text-[var(--color-ink)]">
|
||||
{brandName}
|
||||
</h1>
|
||||
<p className="type-body-responsive mt-4 uppercase tracking-[0.18em] text-[var(--color-muted)]">
|
||||
{t.ui.architectureEngineer}
|
||||
</p>
|
||||
<p className="type-body-responsive mt-6 max-w-2xl text-[var(--color-muted)]">
|
||||
{t.resume.resumeIntro}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{hasResume ? (
|
||||
<Link href={resumeFile.href} className="button-primary" download>
|
||||
{t.ui.downloadCv}
|
||||
</Link>
|
||||
) : (
|
||||
<p className="notice-card max-w-xs">
|
||||
{t.ui.resumeUnavailable}
|
||||
</p>
|
||||
)}
|
||||
<Link href={`/${language}`} className="button-secondary">
|
||||
{t.ui.backToPortfolio}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
|
||||
<section className="section-shell">
|
||||
<div className="section-padding">
|
||||
<SectionHeading
|
||||
eyebrow={t.ui.profile}
|
||||
title={t.ui.summary}
|
||||
description={t.resume.onlineResumeDescription}
|
||||
/>
|
||||
|
||||
<div className="type-body-editorial mt-8 space-y-4 text-[var(--color-muted)]">
|
||||
<p>{t.about.description}</p>
|
||||
<p>{t.resume.profileParagraph}</p>
|
||||
</div>
|
||||
|
||||
<dl className="type-chip mt-8 grid gap-4 text-[var(--color-muted)]">
|
||||
<div className="surface-card rounded-[22px] p-5">
|
||||
<dt className="type-label-wide">{t.ui.phone}</dt>
|
||||
<dd dir="ltr" className="type-body data-ltr mt-2 font-semibold text-[var(--color-ink)]">
|
||||
{sharedProfile.phone}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="surface-card-alt rounded-[22px] p-5">
|
||||
<dt className="type-label-wide">{t.ui.email}</dt>
|
||||
<dd dir="ltr" className="type-body data-ltr mt-2 font-semibold text-[var(--color-ink)]">
|
||||
{sharedProfile.email}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="surface-card rounded-[22px] p-5">
|
||||
<dt className="type-label-wide">{t.ui.links}</dt>
|
||||
<dd className="type-body mt-2 space-y-2 font-semibold text-[var(--color-ink)]">
|
||||
<p>{address}</p>
|
||||
<p>Facebook: {sharedProfile.facebook}</p>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-shell">
|
||||
<div className="section-padding">
|
||||
<SectionHeading
|
||||
eyebrow={t.ui.experience}
|
||||
title={t.ui.professionalTimeline}
|
||||
description={t.resume.experienceDescription}
|
||||
/>
|
||||
|
||||
<div className="mt-10 space-y-5">
|
||||
{t.resume.experience.map((item) => (
|
||||
<article
|
||||
key={`${item.period}-${item.role}`}
|
||||
className="resume-timeline-card"
|
||||
>
|
||||
<p className="type-label-wide text-[var(--color-muted)]">
|
||||
{item.period}
|
||||
</p>
|
||||
<h2 className="type-card-title-small mt-3 text-[var(--color-ink)]">{item.role}</h2>
|
||||
<p className="type-body mt-3 text-[var(--color-muted)]">{item.detail}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section className="grid gap-10 lg:grid-cols-2">
|
||||
<section className="section-shell">
|
||||
<div className="section-padding">
|
||||
<SectionHeading
|
||||
eyebrow={t.ui.education}
|
||||
title={t.resume.education.degree}
|
||||
description={`${t.resume.education.school} - ${t.resume.education.location}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-shell">
|
||||
<div className="section-padding">
|
||||
<SectionHeading
|
||||
eyebrow={t.ui.coreSkills}
|
||||
title={t.ui.designDelivery}
|
||||
description={t.resume.designDeliveryDescription}
|
||||
/>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
{t.craft.skills.map((skill) => (
|
||||
<span
|
||||
key={skill}
|
||||
className="type-chip surface-chip px-4 py-3 font-semibold text-[var(--color-ink)]"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section className="section-shell">
|
||||
<div className="section-padding">
|
||||
<SectionHeading
|
||||
eyebrow={t.ui.software}
|
||||
title={t.ui.productionTools}
|
||||
description={t.resume.productionToolsDescription}
|
||||
/>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
{t.craft.software.map((tool) => (
|
||||
<span
|
||||
key={tool}
|
||||
className="type-chip surface-chip-alt px-4 py-3 font-semibold text-[var(--color-ink)]"
|
||||
>
|
||||
{tool}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</SiteShell>
|
||||
);
|
||||
}
|
||||
المرجع في مشكلة جديدة
حظر مستخدم