diff --git a/app/[locale]/(site)/about/page.tsx b/app/[locale]/(site)/about/page.tsx index 667edfe..a51d798 100644 --- a/app/[locale]/(site)/about/page.tsx +++ b/app/[locale]/(site)/about/page.tsx @@ -3,9 +3,19 @@ import { getLocale, getTranslations } from "next-intl/server"; import { Container } from "@/components/layout/container"; import { PageHero } from "@/components/layout/page-hero"; +import { MotionFade } from "@/components/motion-fade"; import { AppCard } from "@/components/ui/app-card"; +import { Badge } from "@/components/ui/badge"; +import { CapabilitiesSection } from "@/components/home/capabilities-section"; +import { ProcessSection } from "@/components/home/process-section"; +import { ContactCtaSection } from "@/components/home/contact-cta-section"; +import type { + CapabilitiesSectionCopy, + ContactCtaSectionCopy, + ProcessSectionCopy, +} from "@/components/home/types"; import { getSiteSettings } from "@/lib/app-config"; -import { resolveLocale } from "@/lib/locale"; +import { getLocalizedPath, resolveLocale } from "@/lib/locale"; import { buildLocalizedMetadata } from "@/lib/metadata"; type AboutPageProps = { @@ -36,6 +46,38 @@ export default async function AboutPage({ params }: AboutPageProps) { const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale); const t = await getTranslations({ locale: localeKey, namespace: "aboutPage" }); + const contactHref = getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale); + + const capabilitiesCopy: CapabilitiesSectionCopy = { + eyebrow: t("capabilities.eyebrow"), + title: t("capabilities.title"), + description: t("capabilities.description"), + items: t.raw("capabilities.items") as CapabilitiesSectionCopy["items"], + }; + + const processCopy: ProcessSectionCopy = { + eyebrow: t("process.eyebrow"), + title: t("process.title"), + description: t("process.description"), + steps: t.raw("process.steps") as ProcessSectionCopy["steps"], + }; + + const contactCtaCopy: ContactCtaSectionCopy = { + eyebrow: t("contactCta.eyebrow"), + title: t("contactCta.title"), + description: t("contactCta.description"), + contactCta: t("contactCta.contactCta"), + githubCta: t("contactCta.githubCta"), + emailLabel: t("contactCta.emailLabel"), + emailValue: t("contactCta.emailValue"), + availabilityLabel: t("contactCta.availabilityLabel"), + availabilityValue: t("contactCta.availabilityValue"), + githubHref: t("contactCta.githubHref"), + }; + + const storyParagraphs = t.raw("story.paragraphs") as string[]; + const toolItems = t.raw("tools.items") as string[]; + return ( <> - - -

{t("placeholder")}

- + + +
+

+ {t("story.eyebrow")} +

+

{t("story.title")}

+
+ {storyParagraphs.map((paragraph) => ( +

+ {paragraph} +

+ ))} +
+
+ + + + + + + + +
+
+

+ {t("tools.eyebrow")} +

+

{t("tools.title")}

+
+
+ {toolItems.map((tool) => ( + + {tool} + + ))} +
+
+ + + + + + + + +

+ {t("personalNote.eyebrow")} + {" — "} + {t("personalNote.text")} +

+ + + + + ); diff --git a/messages/ar.json b/messages/ar.json index 2a683e7..39a6940 100644 --- a/messages/ar.json +++ b/messages/ar.json @@ -270,9 +270,83 @@ }, "aboutPage": { "title": "من أنا", - "description": "نظرة مركزة على دراستي، دوري الحالي، ونوع شغل الواجهات الذي أقدمه.", + "description": "أنا مطور Full-Stack ومصمم جرافيك مقيم في برلين. بتنقل من الفكرة للكود - هوية بصرية وتصميم واجهات والهندسة يلي بتطلعهم عالنور.", "heroEyebrow": "من أنا", - "placeholder": "محتوى صفحة من أنا سينضاف هون قريباً." + "story": { + "eyebrow": "مين أنا", + "title": "بابني منتجات وبصمم كيف بتبين وكيف حاسس فيها المستخدم.", + "paragraphs": [ + "أغلب المطورين بسلموا التصميم لغيرهم، وأغلب المصممين بسلموا الكود لغيرهم. أنا بعمل الاثنين - يعني فجوة أقل بين شكل المنتج وطريقة اشتغاله فعلياً.", + "خلفيتي بتغطي الهوية البصرية والتصميم بقد ما بتغطي TypeScript وأنظمة Backend، فبصمم وأنا حاسب حساب التنفيذ، وببني وأنا محافظ على الحس البصري." + ] + }, + "capabilities": { + "eyebrow": "شو بعمل", + "title": "تطوير وتصميم، بشخص واحد.", + "description": "اختصاصين، جهة تواصل وحدة - من الهوية البصرية لحتى الكود الجاهز للإنتاج.", + "items": [ + { + "title": "تطوير الواجهات", + "description": "واجهات Next.js وReact وTypeScript مبنية للسرعة والوضوح وقابلية الصيانة على المدى الطويل." + }, + { + "title": "Backend والبيانات", + "description": "Node.js وPostgreSQL وPrisma - أنظمة موثوقة شغالة وراء الواجهة." + }, + { + "title": "تصميم بصري وهوية", + "description": "هوية وتصميم UI وأنظمة تخطيط مصممة بـ Figma وIllustrator." + }, + { + "title": "أتمتة وأدوات", + "description": "سير عمل داخلي وأدوات بتشيل الشغل اليدوي المتكرر." + } + ] + }, + "tools": { + "eyebrow": "الأدوات", + "title": "الأدوات اليومية", + "items": ["Figma", "Adobe Illustrator", "Photoshop", "Next.js", "TypeScript", "Tailwind CSS", "Docker"] + }, + "process": { + "eyebrow": "كيف بشتغل", + "title": "آلية عمل بتخلي التصميم والتطوير ماشيين مع بعض.", + "description": "أربع خطوات، بلا فجوة بين شكل المنتج وطريقة بناءه.", + "steps": [ + { + "title": "Discover", + "description": "بفهم المشكلة والجمهور والقيود قبل ما افتح أي أداة." + }, + { + "title": "Design", + "description": "الاتجاه البصري وبنية الـ UX بيتحددوا مع بعض، مش الواحد بعد التاني." + }, + { + "title": "Build", + "description": "بنفذ بنفس العناية يلي كانت بالتصميم - كود نظيف وجاهز للإنتاج." + }, + { + "title": "Refine", + "description": "بصقل التفاصيل، بجرب النتيجة، وبطلق المنتج بثقة." + } + ] + }, + "personalNote": { + "eyebrow": "برا الشغل", + "text": "مقيم ببرلين. لما ما كون مصمم أو مبرمج، غالباً عم بحاول افهم الفرق بين الشغلتين." + }, + "contactCta": { + "eyebrow": "ابدأ الحديث", + "title": "عندك مشروع محتاج تصميم وكود مع بعض؟", + "description": "هات الملخص أو السكتش الأولي أو بس المشكلة. أقدر أساعد أشكل الاتجاه وأصمم النظام وأبنيه.", + "contactCta": "تواصل معي", + "githubCta": "GitHub", + "emailLabel": "البريد الإلكتروني", + "emailValue": "hello@moh-sass.dev", + "availabilityLabel": "التوفر", + "availabilityValue": "مفتوح لشغل منتجات مركز", + "githubHref": "https://github.com/mohfarawati" + } }, "contactPage": { "title": "تواصل", diff --git a/messages/de.json b/messages/de.json index 341fda7..3b5be27 100644 --- a/messages/de.json +++ b/messages/de.json @@ -270,9 +270,83 @@ }, "aboutPage": { "title": "Über mich", - "description": "Ein fokussierter Überblick über meine Ausbildung, meine aktuelle Rolle und die Art von Frontend Arbeit, die ich liefere.", + "description": "Ich bin Full-Stack-Entwickler und Grafikdesigner mit Sitz in Berlin. Ich bewege mich von der Idee bis zum Code — visuelle Identität, Interface-Design und die Technik, die es live bringt.", "heroEyebrow": "Über mich", - "placeholder": "Der Inhalt der About Seite kommt bald hier hin." + "story": { + "eyebrow": "Wer ich bin", + "title": "Ich baue Produkte und gestalte, wie sie aussehen und sich anfühlen.", + "paragraphs": [ + "Die meisten Entwickler geben Design ab. Die meisten Designer geben Code ab. Ich mache beides — dadurch gibt es weniger Lücken zwischen dem, wie ein Produkt aussieht, und dem, wie es tatsächlich funktioniert.", + "Mein Hintergrund reicht genauso weit in Marken- und visuelles Design wie in TypeScript und Backend-Systeme, deshalb gestalte ich mit Blick auf die Umsetzung und baue mit erhaltenem visuellem Urteilsvermögen." + ] + }, + "capabilities": { + "eyebrow": "Was ich mache", + "title": "Entwicklung und Design, aus einer Hand.", + "description": "Zwei Disziplinen, ein Ansprechpartner — von der visuellen Identität bis zum produktionsreifen Code.", + "items": [ + { + "title": "Frontend-Entwicklung", + "description": "Next.js-, React- und TypeScript-Interfaces, gebaut für Geschwindigkeit, Klarheit und langfristige Wartbarkeit." + }, + { + "title": "Backend & Daten", + "description": "Node.js, PostgreSQL und Prisma — verlässliche Systeme hinter dem Interface." + }, + { + "title": "Visuelles & Marken-Design", + "description": "Identität, UI-Design und Layout-Systeme, gestaltet in Figma und Illustrator." + }, + { + "title": "Automatisierung & Tooling", + "description": "Interne Workflows und Tools, die manuelle, sich wiederholende Arbeit entfernen." + } + ] + }, + "tools": { + "eyebrow": "Tools", + "title": "Täglicher Stack", + "items": ["Figma", "Adobe Illustrator", "Photoshop", "Next.js", "TypeScript", "Tailwind CSS", "Docker"] + }, + "process": { + "eyebrow": "Wie ich arbeite", + "title": "Ein Prozess, der Design und Entwicklung im Takt hält.", + "description": "Vier Schritte, keine Übergabe-Lücke zwischen Aussehen und Umsetzung.", + "steps": [ + { + "title": "Discover", + "description": "Problem, Zielgruppe und Rahmenbedingungen klären, bevor überhaupt ein Tool geöffnet wird." + }, + { + "title": "Design", + "description": "Visuelle Richtung und UX-Struktur werden gemeinsam erarbeitet, nicht nacheinander." + }, + { + "title": "Build", + "description": "Umsetzung mit derselben Sorgfalt wie im Design — sauberer, produktionsreifer Code." + }, + { + "title": "Refine", + "description": "Details verfeinern, das Ergebnis testen und mit Zuversicht ausliefern." + } + ] + }, + "personalNote": { + "eyebrow": "Feierabend", + "text": "Ansässig in Berlin. Wenn ich nicht gerade designe oder code, untersuche ich wahrscheinlich den Unterschied zwischen beidem." + }, + "contactCta": { + "eyebrow": "Gespräch starten", + "title": "Ein Projekt, das Design und Code gleichzeitig braucht?", + "description": "Bring das Briefing, die grobe Skizze oder einfach das Problem mit. Ich kann die Richtung formen, das System entwerfen und es bauen.", + "contactCta": "Kontakt aufnehmen", + "githubCta": "GitHub", + "emailLabel": "E-Mail", + "emailValue": "hello@moh-sass.dev", + "availabilityLabel": "Verfügbarkeit", + "availabilityValue": "Offen für fokussierte Produktarbeit", + "githubHref": "https://github.com/mohfarawati" + } }, "contactPage": { "title": "Kontakt", diff --git a/messages/en.json b/messages/en.json index f581ee3..cc11733 100644 --- a/messages/en.json +++ b/messages/en.json @@ -270,9 +270,83 @@ }, "aboutPage": { "title": "About", - "description": "A focused overview of my education, current role, and the kind of frontend work I deliver.", + "description": "I'm a full-stack developer and graphic designer based in Berlin. I move from concept to code — visual identity, interface design, and the engineering that ships it.", "heroEyebrow": "About", - "placeholder": "About page content will be added here soon." + "story": { + "eyebrow": "Who I am", + "title": "I build products and design the way they look and feel.", + "paragraphs": [ + "Most developers hand off design. Most designers hand off code. I do both — which means fewer gaps between how a product looks and how it actually works.", + "My background spans brand and visual design as much as it spans TypeScript and backend systems, so I design with implementation in mind and build with visual judgment intact." + ] + }, + "capabilities": { + "eyebrow": "What I do", + "title": "Development and design, handled by the same person.", + "description": "Two disciplines, one point of contact — from visual identity to production code.", + "items": [ + { + "title": "Frontend Development", + "description": "Next.js, React, and TypeScript interfaces built for speed, clarity, and long-term maintainability." + }, + { + "title": "Backend & Data", + "description": "Node.js, PostgreSQL, and Prisma — reliable systems working behind the interface." + }, + { + "title": "Visual & Brand Design", + "description": "Identity, UI design, and layout systems crafted in Figma and Illustrator." + }, + { + "title": "Automation & Tooling", + "description": "Internal workflows and tools that remove manual, repetitive work." + } + ] + }, + "tools": { + "eyebrow": "Tools", + "title": "Daily stack", + "items": ["Figma", "Adobe Illustrator", "Photoshop", "Next.js", "TypeScript", "Tailwind CSS", "Docker"] + }, + "process": { + "eyebrow": "How I work", + "title": "A process that keeps design and engineering in sync.", + "description": "Four steps, no handoff gap between how it looks and how it's built.", + "steps": [ + { + "title": "Discover", + "description": "Understand the problem, audience, and constraints before opening any tool." + }, + { + "title": "Design", + "description": "Visual direction and UX structure worked out together, not in sequence." + }, + { + "title": "Build", + "description": "Implement with the same care the design had — clean, production-ready code." + }, + { + "title": "Refine", + "description": "Polish detail, test the result, and ship with confidence." + } + ] + }, + "personalNote": { + "eyebrow": "Off the clock", + "text": "Based in Berlin. When I'm not designing or coding, I'm probably studying the difference between the two." + }, + "contactCta": { + "eyebrow": "Start the conversation", + "title": "Have a project that needs both design and code?", + "description": "Bring the brief, the rough sketch, or just the problem. I can shape the direction, design the system, and build it.", + "contactCta": "Contact me", + "githubCta": "GitHub", + "emailLabel": "Email", + "emailValue": "hello@moh-sass.dev", + "availabilityLabel": "Availability", + "availabilityValue": "Open for focused product work", + "githubHref": "https://github.com/mohfarawati" + } }, "contactPage": { "title": "Contact",