Restructure about page bento layout
This commit is contained in:
MOH
+170
-184
@@ -1,15 +1,5 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import {
|
import { ArrowRight, BriefcaseBusiness, GraduationCap, Layers3, MapPin, Sparkles, Wrench } from "lucide-react";
|
||||||
ArrowRight,
|
|
||||||
Blocks,
|
|
||||||
BriefcaseBusiness,
|
|
||||||
Compass,
|
|
||||||
Layers3,
|
|
||||||
MessageSquareMore,
|
|
||||||
Sparkles,
|
|
||||||
Workflow,
|
|
||||||
} from "lucide-react";
|
|
||||||
import Image from "next/image";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { getTranslations } from "next-intl/server";
|
import { getTranslations } from "next-intl/server";
|
||||||
|
|
||||||
@@ -17,10 +7,8 @@ import { Container } from "@/components/layout/container";
|
|||||||
import { PageHero } from "@/components/layout/page-hero";
|
import { PageHero } from "@/components/layout/page-hero";
|
||||||
import { SiteLogo } from "@/components/layout/site-logo";
|
import { SiteLogo } from "@/components/layout/site-logo";
|
||||||
import { MotionFade } from "@/components/motion-fade";
|
import { MotionFade } from "@/components/motion-fade";
|
||||||
import { AppCard } from "@/components/ui/app-card";
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { CardContent } from "@/components/ui/card";
|
|
||||||
import { getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
|
import { getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
|
||||||
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
|
||||||
import { buildLocalizedMetadata } from "@/lib/metadata";
|
import { buildLocalizedMetadata } from "@/lib/metadata";
|
||||||
@@ -56,61 +44,43 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
|||||||
]);
|
]);
|
||||||
const siteName = siteSettings.locales[localeKey].siteName;
|
const siteName = siteSettings.locales[localeKey].siteName;
|
||||||
|
|
||||||
const valueItems = [
|
const workItems = [
|
||||||
{
|
{
|
||||||
icon: Compass,
|
period: t("workOnePeriod"),
|
||||||
title: t("valueA"),
|
role: t("workOneRole"),
|
||||||
text: t("valueAText"),
|
company: t("workOneCompany"),
|
||||||
|
text: t("workOneText"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Layers3,
|
period: t("workTwoPeriod"),
|
||||||
title: t("valueB"),
|
role: t("workTwoRole"),
|
||||||
text: t("valueBText"),
|
company: t("workTwoCompany"),
|
||||||
|
text: t("workTwoText"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: MessageSquareMore,
|
period: t("workThreePeriod"),
|
||||||
title: t("valueC"),
|
role: t("workThreeRole"),
|
||||||
text: t("valueCText"),
|
company: t("workThreeCompany"),
|
||||||
|
text: t("workThreeText"),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const processItems = [
|
const educationItems = [
|
||||||
{
|
{
|
||||||
icon: Sparkles,
|
title: t("educationOneTitle"),
|
||||||
title: t("processOne"),
|
place: t("educationOnePlace"),
|
||||||
text: t("processOneText"),
|
text: t("educationOneText"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Blocks,
|
title: t("educationTwoTitle"),
|
||||||
title: t("processTwo"),
|
place: t("educationTwoPlace"),
|
||||||
text: t("processTwoText"),
|
text: t("educationTwoText"),
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Workflow,
|
|
||||||
title: t("processThree"),
|
|
||||||
text: t("processThreeText"),
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const statItems = [
|
const skillItems = [t("skillOne"), t("skillTwo"), t("skillThree"), t("skillFour"), t("skillFive"), t("skillSix")];
|
||||||
{
|
const toolItems = [t("toolOne"), t("toolTwo"), t("toolThree"), t("toolFour")];
|
||||||
value: t("statOneValue"),
|
const focusItems = [t("focusOne"), t("focusTwo"), t("focusThree")];
|
||||||
label: t("statOneLabel"),
|
|
||||||
text: t("statOneText"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: t("statTwoValue"),
|
|
||||||
label: t("statTwoLabel"),
|
|
||||||
text: t("statTwoText"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: t("statThreeValue"),
|
|
||||||
label: t("statThreeLabel"),
|
|
||||||
text: t("statThreeText"),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const highlightItems = [t("highlightOne"), t("highlightTwo"), t("highlightThree")];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -121,11 +91,10 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
|||||||
description={t("intro")}
|
description={t("intro")}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Container className="relative z-10 flex flex-col gap-6 pb-12 lg:pb-16">
|
<Container className="relative z-10 flex flex-col gap-8 pb-12 lg:pb-16">
|
||||||
<MotionFade delay={0.05}>
|
<MotionFade delay={0.05}>
|
||||||
<section className="grid gap-6 lg:grid-cols-12">
|
<section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-12">
|
||||||
<AppCard className="overflow-hidden lg:col-span-7">
|
<div className="lg:col-span-9">
|
||||||
<CardContent className="p-6 lg:p-8">
|
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||||
@@ -137,7 +106,7 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
|||||||
{t("storyTitle")}
|
{t("storyTitle")}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(12rem,15rem)] lg:items-start">
|
<div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(15rem,18rem)]">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<p className="text-sm leading-7 text-muted-foreground sm:text-base">
|
<p className="text-sm leading-7 text-muted-foreground sm:text-base">
|
||||||
{t("storyTextOne")}
|
{t("storyTextOne")}
|
||||||
@@ -147,11 +116,11 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-3">
|
<div className="space-y-3">
|
||||||
{highlightItems.map((item) => (
|
{focusItems.map((item) => (
|
||||||
<AppCard key={item} padding="sm" className="text-sm font-medium leading-6 text-foreground/84">
|
<div key={item} className="rounded-nested border border-border/70 bg-surface-2/70 px-4 py-4 text-sm font-medium leading-6 text-foreground/84">
|
||||||
{item}
|
{item}
|
||||||
</AppCard>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -174,22 +143,20 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
|||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</div>
|
||||||
</AppCard>
|
|
||||||
|
|
||||||
<AppCard className="overflow-hidden lg:col-span-5">
|
<aside className="flex flex-col gap-5 lg:col-span-3">
|
||||||
<CardContent className="p-5">
|
<div className="rounded-surface border border-border/70 bg-surface-2/65 p-5">
|
||||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
<Badge
|
||||||
<AppCard className="sm:col-span-2 lg:col-span-4">
|
variant="outline"
|
||||||
<CardContent className="p-4">
|
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||||
<div className="flex items-center justify-between gap-4">
|
>
|
||||||
|
{t("snapshotEyebrow")}
|
||||||
|
</Badge>
|
||||||
|
<div className="mt-5 flex items-center justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-foreground/48">
|
<h3 className="text-lg font-semibold text-foreground">{t("snapshotTitle")}</h3>
|
||||||
{t("logoEyebrow")}
|
<p className="mt-2 text-sm leading-6 text-muted-foreground">{t("snapshotText")}</p>
|
||||||
</p>
|
|
||||||
<p className="mt-2 max-w-[16rem] text-sm leading-6 text-muted-foreground">
|
|
||||||
{t("logoText")}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<SiteLogo
|
<SiteLogo
|
||||||
alt={siteName}
|
alt={siteName}
|
||||||
@@ -199,142 +166,161 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
|
|||||||
className="h-10 sm:h-11"
|
className="h-10 sm:h-11"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</div>
|
||||||
</AppCard>
|
|
||||||
|
|
||||||
<AppCard padding="none" className="overflow-hidden sm:col-span-1 lg:col-span-2">
|
<div className="rounded-surface border border-border/70 bg-background/40 p-5">
|
||||||
<div className="relative min-h-[9rem] overflow-hidden rounded-nested">
|
<div className="flex items-start gap-3">
|
||||||
<Image
|
<MapPin className="mt-0.5 h-4 w-4 text-brand-primary" />
|
||||||
src="/uploads/portfolio/demo-cover.svg"
|
<div>
|
||||||
alt={t("galleryAltOne")}
|
<p className="text-sm font-semibold text-foreground">{t("locationTitle")}</p>
|
||||||
fill
|
<p className="mt-1 text-sm leading-6 text-muted-foreground">{t("locationText")}</p>
|
||||||
sizes="(min-width: 1024px) 16rem, (min-width: 640px) 50vw, 100vw"
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</AppCard>
|
|
||||||
|
|
||||||
<AppCard className="min-h-[9rem] sm:col-span-1 lg:col-span-2">
|
|
||||||
<CardContent className="flex h-full flex-col justify-between p-4">
|
|
||||||
<div className="flex items-center gap-3 text-foreground/86">
|
|
||||||
<BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
|
|
||||||
<span className="text-sm font-medium">{t("availabilityLabel")}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm leading-6 text-muted-foreground">
|
|
||||||
{t("availabilityText")}
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</AppCard>
|
|
||||||
|
|
||||||
<AppCard padding="none" className="overflow-hidden sm:col-span-2 lg:col-span-4">
|
|
||||||
<div className="relative min-h-[13rem] overflow-hidden rounded-nested">
|
|
||||||
<Image
|
|
||||||
src="/uploads/portfolio/demo-cover.svg"
|
|
||||||
alt={t("galleryAltTwo")}
|
|
||||||
fill
|
|
||||||
sizes="(min-width: 1024px) 28rem, (min-width: 640px) 100vw, 100vw"
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</AppCard>
|
</aside>
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</AppCard>
|
|
||||||
</section>
|
</section>
|
||||||
</MotionFade>
|
</MotionFade>
|
||||||
|
|
||||||
<MotionFade delay={0.1}>
|
<MotionFade delay={0.1}>
|
||||||
<section className="grid gap-6 lg:grid-cols-12">
|
<section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-10">
|
||||||
<AppCard className="lg:col-span-3">
|
<div className="lg:col-span-4">
|
||||||
<CardContent className="flex h-full flex-col p-6">
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||||
>
|
>
|
||||||
{t("valuesEyebrow")}
|
{t("experienceEyebrow")}
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
|
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
|
||||||
{t("valuesTitle")}
|
{t("experienceTitle")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
|
|
||||||
{t("valuesIntro")}
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</AppCard>
|
|
||||||
|
|
||||||
{valueItems.map((item) => {
|
|
||||||
const Icon = item.icon;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppCard key={item.title} className="lg:col-span-3">
|
|
||||||
<CardContent className="p-5">
|
|
||||||
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-[linear-gradient(135deg,hsl(var(--hero-left)/0.42),hsl(var(--hero-right)/0.26))]">
|
|
||||||
<Icon className="h-5 w-5 text-foreground/80" />
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mt-4 text-lg font-semibold text-foreground">{item.title}</h3>
|
<BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 space-y-5">
|
||||||
|
{workItems.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={`${item.period}-${item.role}`}
|
||||||
|
className={index === 0 ? "" : "border-t border-border/70 pt-5"}
|
||||||
|
>
|
||||||
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/50">
|
||||||
|
{item.period}
|
||||||
|
</p>
|
||||||
|
<h3 className="mt-3 text-lg font-semibold text-foreground">{item.role}</h3>
|
||||||
|
<p className="mt-1 text-sm font-medium text-foreground/72">{item.company}</p>
|
||||||
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
|
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
|
||||||
</CardContent>
|
</div>
|
||||||
</AppCard>
|
))}
|
||||||
);
|
</div>
|
||||||
})}
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-6">
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||||
|
>
|
||||||
|
{t("educationEyebrow")}
|
||||||
|
</Badge>
|
||||||
|
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
|
||||||
|
{t("educationTitle")}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
|
||||||
|
{t("educationIntro")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<GraduationCap className="h-5 w-5 text-brand-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 grid gap-6 md:grid-cols-2">
|
||||||
|
{educationItems.map((item) => (
|
||||||
|
<div key={item.title} className="rounded-surface border border-border/70 bg-surface-2/60 p-5">
|
||||||
|
<p className="text-sm font-semibold uppercase tracking-[0.16em] text-foreground/50">
|
||||||
|
{item.place}
|
||||||
|
</p>
|
||||||
|
<h3 className="mt-3 text-xl font-semibold text-foreground">{item.title}</h3>
|
||||||
|
<p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</MotionFade>
|
</MotionFade>
|
||||||
|
|
||||||
<MotionFade delay={0.15}>
|
<MotionFade delay={0.15}>
|
||||||
<section className="grid gap-6 lg:grid-cols-12">
|
<section className="grid gap-8 lg:grid-cols-10">
|
||||||
<AppCard className="lg:col-span-4">
|
<div className="lg:col-span-6">
|
||||||
<CardContent className="flex h-full flex-col p-6 lg:p-7">
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||||
>
|
>
|
||||||
{t("processEyebrow")}
|
{t("skillsEyebrow")}
|
||||||
</Badge>
|
</Badge>
|
||||||
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
|
<h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
|
||||||
{t("processTitle")}
|
{t("skillsTitle")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
|
<p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
|
||||||
{t("processIntro")}
|
{t("skillsIntro")}
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
<Layers3 className="h-5 w-5 text-brand-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-6 grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
|
<div className="mt-6 flex flex-wrap gap-3">
|
||||||
{statItems.map((item) => (
|
{skillItems.map((item) => (
|
||||||
<AppCard key={item.label} layer="single" padding="sm" className="shadow-none">
|
<span
|
||||||
<p className="text-3xl font-semibold tracking-[-0.05em] text-foreground">
|
key={item}
|
||||||
{item.value}
|
className="inline-flex items-center rounded-pill border border-border/70 bg-surface-2/70 px-4 py-2 text-sm font-medium text-foreground/84"
|
||||||
</p>
|
>
|
||||||
<h3 className="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-foreground/58">
|
{item}
|
||||||
{item.label}
|
</span>
|
||||||
</h3>
|
|
||||||
<p className="mt-2 text-sm leading-6 text-muted-foreground">{item.text}</p>
|
|
||||||
</AppCard>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
|
||||||
</AppCard>
|
|
||||||
|
|
||||||
<div className="grid gap-6 lg:col-span-8 lg:grid-cols-2">
|
|
||||||
{processItems.map((item, index) => {
|
|
||||||
const Icon = item.icon;
|
|
||||||
const isWide = index === 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppCard key={item.title} className={isWide ? "lg:col-span-2" : ""}>
|
|
||||||
<CardContent className="p-5 lg:p-6">
|
|
||||||
<div className="flex items-center justify-between gap-4">
|
|
||||||
<span className="inline-flex h-8 min-w-[2.5rem] items-center justify-center rounded-pill border border-border/70 px-3 text-xs font-semibold tracking-[0.18em] text-foreground/60">
|
|
||||||
0{index + 1}
|
|
||||||
</span>
|
|
||||||
<Icon className="h-5 w-5 text-brand-primary" />
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="mt-5 text-xl font-semibold text-foreground">{item.title}</h3>
|
|
||||||
<p className="mt-3 max-w-[34rem] text-sm leading-6 text-muted-foreground">
|
<div className="lg:col-span-2">
|
||||||
{item.text}
|
<div className="flex items-center justify-between gap-3">
|
||||||
</p>
|
<Badge
|
||||||
</CardContent>
|
variant="outline"
|
||||||
</AppCard>
|
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||||
);
|
>
|
||||||
})}
|
{t("toolsEyebrow")}
|
||||||
|
</Badge>
|
||||||
|
<Wrench className="h-4 w-4 text-brand-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5 space-y-3">
|
||||||
|
{toolItems.map((item) => (
|
||||||
|
<div key={item} className="rounded-surface border border-border/70 bg-surface-2/60 px-4 py-3 text-sm font-medium text-foreground/84">
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
|
||||||
|
>
|
||||||
|
{t("focusEyebrow")}
|
||||||
|
</Badge>
|
||||||
|
<Sparkles className="h-4 w-4 text-brand-primary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5 space-y-3">
|
||||||
|
{focusItems.map((item) => (
|
||||||
|
<div key={item} className="rounded-surface border border-border/70 bg-background/40 px-4 py-4 text-sm leading-6 text-foreground/84">
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</MotionFade>
|
</MotionFade>
|
||||||
|
|||||||
+50
-41
@@ -66,49 +66,58 @@
|
|||||||
"title": "من أنا",
|
"title": "من أنا",
|
||||||
"heroBadge": "خلّيني عرّفك عليّي",
|
"heroBadge": "خلّيني عرّفك عليّي",
|
||||||
"heroTitle": "معلومات عني",
|
"heroTitle": "معلومات عني",
|
||||||
"intro": "أبني تجارب رقمية واضحة للعلامات والمنتجات والفرق، مع تركيز على الهوية والواجهة والبنية القابلة للتوسع.",
|
"intro": "لمحة سريعة عن خبرتي، دراستي، والمهارات والأدوات التي أستخدمها في شغلي اليومي.",
|
||||||
"storyEyebrow": "نبذة سريعة",
|
"storyEyebrow": "نبذة شخصية",
|
||||||
"storyTitle": "أحوّل الأفكار المبعثرة إلى حضور رقمي مرتب وواضح.",
|
"storyTitle": "أشتغل على بناء حضور رقمي واضح، مرتب، وقابل للنمو.",
|
||||||
"storyTextOne": "هذا النص مؤقت حالياً. الفكرة هنا إن الصفحة تعطي انطباع جاهز: مين أنا، كيف أشتغل، وكيف أقدر أبني تجربة متماسكة من أول الفكرة لآخر الإطلاق.",
|
"storyTextOne": "أنا محمد، أركز على الواجهات، الهوية، وتنظيم التجربة بشكل يخلي المنتج أو الخدمة مفهومة من أول نظرة. أحب الشغل الذي يجمع بين الوضوح البصري والتنفيذ العملي بدون تعقيد زائد.",
|
||||||
"storyTextTwo": "حالياً وضعت محتوى وهمي قريب من النبرة النهائية، حتى يصير أسهل استبداله لاحقاً بمحتوى فعلي بدون الرجوع لتعديل التصميم من جديد.",
|
"storyTextTwo": "هذه الصفحة صارت الآن مهيأة لتعرض قصتي المهنية بشكل مرن: أين عملت، ماذا درست، وما هي المهارات والأدوات التي أعتمد عليها يومياً. كل النصوص الحالية قابلة للتبديل بسهولة لاحقاً.",
|
||||||
"highlightOne": "هوية أوضح ومسار استخدام أنظف.",
|
"focusOne": "أهتم بالوضوح قبل الزخرفة.",
|
||||||
"highlightTwo": "واجهة منظمة ومحتوى أسهل بالتبديل.",
|
"focusTwo": "أفضل الأنظمة القابلة للتوسع والصيانة.",
|
||||||
"highlightThree": "بنية مناسبة للتطوير المستقبلي.",
|
"focusThree": "أشتغل بطريقة مباشرة وسريعة المراجعة.",
|
||||||
"primaryCta": "تواصل معي",
|
"primaryCta": "تواصل معي",
|
||||||
"secondaryCta": "شوف معرض الأعمال",
|
"secondaryCta": "شوف معرض الأعمال",
|
||||||
"logoEyebrow": "الهوية الحالية",
|
"snapshotEyebrow": "حالياً",
|
||||||
"logoText": "الشعار مأخوذ من إعدادات الموقع حتى تبقى الصفحة متطابقة مع الهوية الحالية.",
|
"snapshotTitle": "أبني من برلين",
|
||||||
"galleryAltOne": "صورة وهمية رئيسية لقسم معلومات عني",
|
"snapshotText": "أشتغل عن بعد ومع فرق مختلفة، مع تركيز على المواقع، الواجهات، والأنظمة الصغيرة المرنة.",
|
||||||
"galleryAltTwo": "صورة وهمية ثانوية لقسم معلومات عني",
|
"locationTitle": "القاعدة الحالية",
|
||||||
"availabilityLabel": "الوضع الحالي",
|
"locationText": "برلين، ألمانيا، مع قابلية للعمل مع فرق محلية أو عن بعد.",
|
||||||
"availabilityText": "متاح حالياً لاستقبال مشاريع جديدة، وهذه الجملة أيضاً placeholder قابل للتعديل.",
|
"experienceEyebrow": "أين اشتغلت",
|
||||||
"statOneValue": "06+",
|
"experienceTitle": "خبرتي العملية",
|
||||||
"statOneLabel": "سنوات تقريبية",
|
"workOnePeriod": "2024 - الآن",
|
||||||
"statOneText": "رقم تجريبي ليوضح مكان الخبرة أو عدد السنوات بعد تعبئة المحتوى الحقيقي.",
|
"workOneRole": "Frontend Developer",
|
||||||
"statTwoValue": "24",
|
"workOneCompany": "استوديو رقمي أو شركة منتج",
|
||||||
"statTwoLabel": "مشاريع مختارة",
|
"workOneText": "مكان مخصص لذكر آخر جهة عمل، طبيعة المسؤوليات، ونوع المشاريع التي اشتغلت عليها.",
|
||||||
"statTwoText": "مكان مخصص لعدد المشاريع أو العملاء أو الإطلاقات حسب الصياغة النهائية.",
|
"workTwoPeriod": "2022 - 2024",
|
||||||
"statThreeValue": "03",
|
"workTwoRole": "UI Designer",
|
||||||
"statThreeLabel": "مسارات خدمة",
|
"workTwoCompany": "وكالة أو فريق داخلي",
|
||||||
"statThreeText": "يمكن تحويل هذا الرقم لاحقاً إلى تخصصات أو منتجات أو مجالات عمل رئيسية.",
|
"workTwoText": "هنا يمكن ذكر دور سابق يوضح المزج بين التصميم والتنفيذ أو بين البراند والواجهات.",
|
||||||
"valuesEyebrow": "طريقة الشغل",
|
"workThreePeriod": "قبل ذلك",
|
||||||
"valuesTitle": "كيف أعمل",
|
"workThreeRole": "Freelance / Contract Work",
|
||||||
"valuesIntro": "هذا القسم صار جاهز لعرض المبادئ الأساسية بشكل سريع وواضح بدل فقرة نصية طويلة.",
|
"workThreeCompany": "عمل حر أو تعاونات مستقلة",
|
||||||
"valueA": "الاستراتيجية أولاً",
|
"workThreeText": "خانة مناسبة لإضافة مشاريع خاصة، تعاونات قصيرة، أو مراحل انتقالية مهمة في المسار.",
|
||||||
"valueAText": "أبدأ بتحديد الهدف، الجمهور، وحدود النطاق حتى ما يتحول التنفيذ إلى تخمين.",
|
"educationEyebrow": "شو درست",
|
||||||
"valueB": "أنظمة نظيفة",
|
"educationTitle": "الخلفية الدراسية",
|
||||||
"valueBText": "أبني مكونات قابلة للصيانة والتوسعة حتى يظل المشروع مرتب بعد الإطلاق.",
|
"educationIntro": "هذا القسم مخصص لوضع الدراسة الأكاديمية أو الدورات المركزة التي أثرت على طريقة التفكير والشغل.",
|
||||||
"valueC": "تعاون قريب",
|
"educationOneTitle": "اسم التخصص أو الشهادة",
|
||||||
"valueCText": "أفضل دورات قصيرة وملاحظات مباشرة حتى يظل القرار واضحاً والنتيجة أدق.",
|
"educationOnePlace": "اسم الجامعة أو المعهد",
|
||||||
"processEyebrow": "من البداية للنهاية",
|
"educationOneText": "وصف قصير يوضح ما الذي درسته فعلياً، وكيف انعكس ذلك لاحقاً على شغلك أو على طريقة تحليلك للمشاريع.",
|
||||||
"processTitle": "آلية العمل",
|
"educationTwoTitle": "دورات أو تدريب متخصص",
|
||||||
"processIntro": "قسم مرتب يشرح الرحلة بثلاث خطوات سريعة، وبإمكانك لاحقاً تعديله حسب طريقتك الفعلية.",
|
"educationTwoPlace": "منصة أو جهة تدريب",
|
||||||
"processOne": "اكتشاف وتحديد الهدف",
|
"educationTwoText": "مكان مناسب لذكر أي دراسة مكملة، تدريب عملي، أو برنامج صقل مهارات أخذته لاحقاً.",
|
||||||
"processOneText": "نجمع الصورة العامة، نحدد الأولويات، ونرتب المطلوب قبل أي قرار بصري أو تقني.",
|
"skillsEyebrow": "مهاراتي",
|
||||||
"processTwo": "تصميم ونمذجة أولية",
|
"skillsTitle": "المهارات التي أركز عليها",
|
||||||
"processTwoText": "أصيغ الاتجاه العام، أبني تصور واجهات، وأجهز أساس بصري يسهّل بقية التنفيذ.",
|
"skillsIntro": "كتلة واسعة لعرض المهارات الأساسية التي تريد إظهارها بشكل سريع وواضح وقابل للتحديث.",
|
||||||
"processThree": "بناء واختبار وإطلاق",
|
"skillOne": "تصميم واجهات",
|
||||||
"processThreeText": "بعد تثبيت الاتجاه، يتحول العمل إلى تنفيذ منظم، مراجعة سريعة، ثم إطلاق جاهز."
|
"skillTwo": "بناء Design Systems",
|
||||||
|
"skillThree": "Frontend Architecture",
|
||||||
|
"skillFour": "تحويل الأفكار إلى صفحات واضحة",
|
||||||
|
"skillFive": "تنظيم المحتوى والتسلسل البصري",
|
||||||
|
"skillSix": "التعاون السريع مع العملاء والفرق",
|
||||||
|
"toolsEyebrow": "أدواتي",
|
||||||
|
"toolOne": "Figma",
|
||||||
|
"toolTwo": "Next.js",
|
||||||
|
"toolThree": "Tailwind CSS",
|
||||||
|
"toolFour": "WordPress"
|
||||||
},
|
},
|
||||||
"contactPage": {
|
"contactPage": {
|
||||||
"title": "تواصل",
|
"title": "تواصل",
|
||||||
|
|||||||
+50
-41
@@ -66,49 +66,58 @@
|
|||||||
"title": "Über mich",
|
"title": "Über mich",
|
||||||
"heroBadge": "Mehr über mich",
|
"heroBadge": "Mehr über mich",
|
||||||
"heroTitle": "Über mich",
|
"heroTitle": "Über mich",
|
||||||
"intro": "Ich baue klare digitale Erlebnisse für Marken, Produkte und Teams, mit Fokus auf Identität, Interface Qualität und skalierbare Struktur.",
|
"intro": "Ein schneller Überblick über meine Erfahrung, Ausbildung sowie die Skills und Tools, die ich in der täglichen Arbeit nutze.",
|
||||||
"storyEyebrow": "Kurzprofil",
|
"storyEyebrow": "Persönlicher Überblick",
|
||||||
"storyTitle": "Ich verwandle verstreute Ideen in einen klaren und strukturierten digitalen Auftritt.",
|
"storyTitle": "Ich baue digitale Präsenz, die klar, geordnet und bereit zum Wachsen ist.",
|
||||||
"storyTextOne": "Das ist vorerst Platzhaltertext. Ziel ist eine Seite, die fast fertig wirkt: wer ich bin, wie ich arbeite und wie aus einer Idee ein stimmiger Launch wird.",
|
"storyTextOne": "Ich bin Mohamad und arbeite mit Fokus auf Interfaces, Identität und klar strukturierte Nutzererlebnisse. Mich interessiert Arbeit, die visuelle Klarheit mit praktischer Umsetzung verbindet.",
|
||||||
"storyTextTwo": "Der aktuelle Inhalt ist bewusst nah an einer finalen Tonalität, damit echter Text später ohne neues visuelles Rework eingesetzt werden kann.",
|
"storyTextTwo": "Diese Seite ist jetzt so aufgebaut, dass sie meine berufliche Geschichte flexibel zeigen kann: wo ich gearbeitet habe, was ich studiert habe und welche Skills und Tools ich am häufigsten nutze.",
|
||||||
"highlightOne": "Klarere Identität und sauberer Nutzerfluss.",
|
"focusOne": "Klarheit vor Dekoration.",
|
||||||
"highlightTwo": "Geordnete Oberfläche und leicht austauschbarer Content.",
|
"focusTwo": "Systeme, die skalieren und wartbar bleiben.",
|
||||||
"highlightThree": "Struktur vorbereitet für spätere Weiterentwicklung.",
|
"focusThree": "Direkte Zusammenarbeit mit schnellen Feedback Schleifen.",
|
||||||
"primaryCta": "Kontakt aufnehmen",
|
"primaryCta": "Kontakt aufnehmen",
|
||||||
"secondaryCta": "Portfolio ansehen",
|
"secondaryCta": "Portfolio ansehen",
|
||||||
"logoEyebrow": "Aktuelle Identität",
|
"snapshotEyebrow": "Aktuell",
|
||||||
"logoText": "Das Logo wird aus den Site Settings geladen, damit die Seite mit der aktuellen Markenbasis übereinstimmt.",
|
"snapshotTitle": "Ich arbeite aus Berlin",
|
||||||
"galleryAltOne": "Primäres Platzhalterbild für die Über mich Seite",
|
"snapshotText": "Ich arbeite remote und mit verteilten Teams, mit Fokus auf Websites, Interfaces und flexible kleine Systeme.",
|
||||||
"galleryAltTwo": "Sekundäres Platzhalterbild für die Über mich Seite",
|
"locationTitle": "Aktueller Standort",
|
||||||
"availabilityLabel": "Aktueller Status",
|
"locationText": "Berlin, Deutschland, mit Offenheit für lokale und remote Zusammenarbeit.",
|
||||||
"availabilityText": "Aktuell offen für neue Projekte, und auch diese Zeile ist als Platzhalter für später gedacht.",
|
"experienceEyebrow": "Wo ich gearbeitet habe",
|
||||||
"statOneValue": "06+",
|
"experienceTitle": "Berufserfahrung",
|
||||||
"statOneLabel": "Jahre grob",
|
"workOnePeriod": "2024 - heute",
|
||||||
"statOneText": "Ein Platzhalter für Erfahrung oder Jahre in der Praxis, sobald die echten Inhalte feststehen.",
|
"workOneRole": "Frontend Developer",
|
||||||
"statTwoValue": "24",
|
"workOneCompany": "Digital Studio oder Produktfirma",
|
||||||
"statTwoLabel": "Ausgewählte Projekte",
|
"workOneText": "Hier kann die aktuelle oder letzte Position mit Verantwortung und Projektart eingetragen werden.",
|
||||||
"statTwoText": "Ein flexibler Platz für Projekte, Kunden, Launches oder einen später stärkeren Nachweis.",
|
"workTwoPeriod": "2022 - 2024",
|
||||||
"statThreeValue": "03",
|
"workTwoRole": "UI Designer",
|
||||||
"statThreeLabel": "Leistungsfelder",
|
"workTwoCompany": "Agentur oder internes Team",
|
||||||
"statThreeText": "Später kann das in Spezialisierungen, Produktlinien oder Kernbereiche umgewandelt werden.",
|
"workTwoText": "Ein früherer Schritt, der die Verbindung zwischen Design und Umsetzung oder zwischen Branding und Interface Arbeit zeigt.",
|
||||||
"valuesEyebrow": "Arbeitsweise",
|
"workThreePeriod": "Davor",
|
||||||
"valuesTitle": "Wie ich arbeite",
|
"workThreeRole": "Freelance / Contract Work",
|
||||||
"valuesIntro": "Dieser Bereich ist jetzt so aufgebaut, dass die Grundprinzipien schnell erfassbar sind statt in einem langen Absatz zu verschwinden.",
|
"workThreeCompany": "Unabhängige Zusammenarbeit",
|
||||||
"valueA": "Strategie zuerst",
|
"workThreeText": "Ein guter Platz für freie Projekte, Kooperationen oder wichtige Übergangsphasen im Werdegang.",
|
||||||
"valueAText": "Ich beginne mit Ziel, Zielgruppe und Scope, damit die Umsetzung nicht in Vermutungen abgleitet.",
|
"educationEyebrow": "Was ich studiert habe",
|
||||||
"valueB": "Saubere Systeme",
|
"educationTitle": "Ausbildung und Studium",
|
||||||
"valueBText": "Ich baue wartbare Komponenten und ein klares System, das nach dem Launch weiter wachsen kann.",
|
"educationIntro": "Dieser Bereich ist für Studium oder fokussierte Weiterbildungen gedacht, die meine Denkweise und Arbeitsweise geprägt haben.",
|
||||||
"valueC": "Enge Zusammenarbeit",
|
"educationOneTitle": "Studiengang oder Abschluss",
|
||||||
"valueCText": "Ich arbeite lieber in kurzen Schleifen mit direktem Feedback, damit Entscheidungen klar bleiben.",
|
"educationOnePlace": "Universität oder Institut",
|
||||||
"processEyebrow": "Von Start bis Launch",
|
"educationOneText": "Eine kurze Beschreibung davon, was ich tatsächlich gelernt habe und wie es später meinen Blick auf Projekte beeinflusst hat.",
|
||||||
"processTitle": "Mein Ablauf",
|
"educationTwoTitle": "Kurse oder spezialisiertes Training",
|
||||||
"processIntro": "Ein kompakter Drei Schritte Ablauf, der sich später mit deinem echten Prozess ersetzen lässt ohne den Bereich neu zu gestalten.",
|
"educationTwoPlace": "Plattform oder Trainingsanbieter",
|
||||||
"processOne": "Discovery und Zieldefinition",
|
"educationTwoText": "Ein geeigneter Platz für ergänzende Weiterbildung, praxisnahes Training oder Programme zur Vertiefung meiner Skills.",
|
||||||
"processOneText": "Wir ordnen das Gesamtbild, priorisieren die Anforderungen und klären das Ziel vor der visuellen oder technischen Arbeit.",
|
"skillsEyebrow": "Skills",
|
||||||
"processTwo": "Design und Prototyping",
|
"skillsTitle": "Worauf ich mich konzentriere",
|
||||||
"processTwoText": "Ich forme die Richtung, entwickle erste Interface Ideen und setze ein visuelles System für die Umsetzung auf.",
|
"skillsIntro": "Ein breiter Block für die wichtigsten Fähigkeiten, die schnell, klar und später leicht aktualisierbar gezeigt werden sollen.",
|
||||||
"processThree": "Build, Test und Launch",
|
"skillOne": "Interface Design",
|
||||||
"processThreeText": "Sobald die Richtung steht, geht die Arbeit in strukturierte Umsetzung, Review und Launch Vorbereitung über."
|
"skillTwo": "Design Systems",
|
||||||
|
"skillThree": "Frontend Architektur",
|
||||||
|
"skillFour": "Ideen in klare Seiten übersetzen",
|
||||||
|
"skillFive": "Content Struktur und visuelle Hierarchie",
|
||||||
|
"skillSix": "Schnelle Zusammenarbeit mit Kunden und Teams",
|
||||||
|
"toolsEyebrow": "Tools",
|
||||||
|
"toolOne": "Figma",
|
||||||
|
"toolTwo": "Next.js",
|
||||||
|
"toolThree": "Tailwind CSS",
|
||||||
|
"toolFour": "WordPress"
|
||||||
},
|
},
|
||||||
"contactPage": {
|
"contactPage": {
|
||||||
"title": "Kontakt",
|
"title": "Kontakt",
|
||||||
|
|||||||
+50
-41
@@ -66,49 +66,58 @@
|
|||||||
"title": "About",
|
"title": "About",
|
||||||
"heroBadge": "A bit more about me",
|
"heroBadge": "A bit more about me",
|
||||||
"heroTitle": "About me",
|
"heroTitle": "About me",
|
||||||
"intro": "I build clear digital experiences for brands, products, and teams, with focus on identity, interface quality, and scalable structure.",
|
"intro": "A quick overview of my experience, education, and the skills and tools I rely on in day-to-day work.",
|
||||||
"storyEyebrow": "Quick overview",
|
"storyEyebrow": "Personal overview",
|
||||||
"storyTitle": "I turn scattered ideas into a clear and structured digital presence.",
|
"storyTitle": "I build digital presence that is clear, structured, and ready to grow.",
|
||||||
"storyTextOne": "This is placeholder copy for now. The goal is to make the page feel nearly production-ready: who I am, how I work, and how I shape a cohesive experience from concept to launch.",
|
"storyTextOne": "I am Mohamad, focused on interfaces, identity, and shaping experiences that feel understandable from the first impression. I like work that connects visual clarity with practical execution.",
|
||||||
"storyTextTwo": "The current content is intentionally close to the final tone, so replacing it later with real copy should not require another visual rewrite.",
|
"storyTextTwo": "This page is now structured to present my professional story in a flexible way: where I worked, what I studied, and which skills and tools I use most often. The copy can be replaced easily later.",
|
||||||
"highlightOne": "Sharper identity and cleaner user flow.",
|
"focusOne": "Clarity before decoration.",
|
||||||
"highlightTwo": "Organized interface and easy-to-update content.",
|
"focusTwo": "Systems that scale and stay maintainable.",
|
||||||
"highlightThree": "Structure prepared for future iteration.",
|
"focusThree": "Direct work with fast review cycles.",
|
||||||
"primaryCta": "Contact me",
|
"primaryCta": "Contact me",
|
||||||
"secondaryCta": "View portfolio",
|
"secondaryCta": "View portfolio",
|
||||||
"logoEyebrow": "Current identity",
|
"snapshotEyebrow": "Current",
|
||||||
"logoText": "The logo is pulled from site settings so the page stays aligned with the current brand setup.",
|
"snapshotTitle": "Building from Berlin",
|
||||||
"galleryAltOne": "Primary placeholder visual for the about page",
|
"snapshotText": "I work remotely and with distributed teams, focused on websites, interfaces, and flexible small systems.",
|
||||||
"galleryAltTwo": "Secondary placeholder visual for the about page",
|
"locationTitle": "Current base",
|
||||||
"availabilityLabel": "Current status",
|
"locationText": "Berlin, Germany, with flexibility to work with local and remote teams.",
|
||||||
"availabilityText": "Available for new projects at the moment, and this line is also a placeholder ready for replacement.",
|
"experienceEyebrow": "Where I worked",
|
||||||
"statOneValue": "06+",
|
"experienceTitle": "Work experience",
|
||||||
"statOneLabel": "Approx. years",
|
"workOnePeriod": "2024 - now",
|
||||||
"statOneText": "A placeholder metric for experience or years in practice once the real content is ready.",
|
"workOneRole": "Frontend Developer",
|
||||||
"statTwoValue": "24",
|
"workOneCompany": "Digital studio or product company",
|
||||||
"statTwoLabel": "Selected projects",
|
"workOneText": "Use this slot for the latest role, the responsibilities, and the types of projects handled there.",
|
||||||
"statTwoText": "A flexible slot for projects, clients, launches, or any stronger proof point later on.",
|
"workTwoPeriod": "2022 - 2024",
|
||||||
"statThreeValue": "03",
|
"workTwoRole": "UI Designer",
|
||||||
"statThreeLabel": "Service tracks",
|
"workTwoCompany": "Agency or in-house team",
|
||||||
"statThreeText": "This can later become specialties, product lines, or core work streams.",
|
"workTwoText": "A previous role that shows the overlap between design and implementation or between branding and interface work.",
|
||||||
"valuesEyebrow": "Work style",
|
"workThreePeriod": "Before that",
|
||||||
"valuesTitle": "How I work",
|
"workThreeRole": "Freelance / Contract Work",
|
||||||
"valuesIntro": "This section is now structured to present core principles quickly instead of relying on one long paragraph.",
|
"workThreeCompany": "Independent collaborations",
|
||||||
"valueA": "Strategy first",
|
"workThreeText": "A good place for personal projects, contract work, or key transition stages in the overall path.",
|
||||||
"valueAText": "I start by clarifying goals, audience, and scope so execution does not drift into guesswork.",
|
"educationEyebrow": "What I studied",
|
||||||
"valueB": "Clean systems",
|
"educationTitle": "Educational background",
|
||||||
"valueBText": "I build maintainable components and a clear system that can evolve after launch.",
|
"educationIntro": "This block is meant for academic study or focused learning tracks that shaped the way I think and work.",
|
||||||
"valueC": "Close collaboration",
|
"educationOneTitle": "Degree or field of study",
|
||||||
"valueCText": "I prefer short loops and direct feedback so decisions stay sharp and momentum stays high.",
|
"educationOnePlace": "University or institute",
|
||||||
"processEyebrow": "From start to launch",
|
"educationOneText": "A short description of what I actually studied and how it later influenced the way I approach projects.",
|
||||||
"processTitle": "My process",
|
"educationTwoTitle": "Courses or specialized training",
|
||||||
"processIntro": "A compact three-step flow that can later be replaced with your exact process without redesigning the section.",
|
"educationTwoPlace": "Platform or training provider",
|
||||||
"processOne": "Discovery and goal definition",
|
"educationTwoText": "A good place for follow-up learning, hands-on training, or a program that sharpened my skills later on.",
|
||||||
"processOneText": "We frame the full picture, align priorities, and define the target before visual or technical work starts.",
|
"skillsEyebrow": "Skills",
|
||||||
"processTwo": "Design and prototyping",
|
"skillsTitle": "Skills I focus on",
|
||||||
"processTwoText": "I shape the direction, build interface concepts, and establish a visual system that supports implementation.",
|
"skillsIntro": "A wide block for listing the core skills you want to highlight in a quick and update-friendly way.",
|
||||||
"processThree": "Build, test, and launch",
|
"skillOne": "Interface design",
|
||||||
"processThreeText": "Once the direction is locked, the work moves into structured implementation, review, and launch readiness."
|
"skillTwo": "Design systems",
|
||||||
|
"skillThree": "Frontend architecture",
|
||||||
|
"skillFour": "Turning ideas into clear pages",
|
||||||
|
"skillFive": "Content structure and visual hierarchy",
|
||||||
|
"skillSix": "Fast collaboration with clients and teams",
|
||||||
|
"toolsEyebrow": "Tools",
|
||||||
|
"toolOne": "Figma",
|
||||||
|
"toolTwo": "Next.js",
|
||||||
|
"toolThree": "Tailwind CSS",
|
||||||
|
"toolFour": "WordPress"
|
||||||
},
|
},
|
||||||
"contactPage": {
|
"contactPage": {
|
||||||
"title": "Contact",
|
"title": "Contact",
|
||||||
|
|||||||
Reference in New Issue
Block a user