Skip to content

Commit 0138fbb

Browse files
jedaberojedabero
committed
add image and continue translation
1 parent 191491a commit 0138fbb

File tree

10 files changed

+249
-48
lines changed

10 files changed

+249
-48
lines changed

‎app/[lang]/page.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
import { About } from "@/components/sections/about";
2-
import { Architecture } from "@/components/sections/architecture";
3-
import { Contact } from "@/components/sections/contact";
4-
import { Hero } from "@/components/sections/hero";
5-
import { Projects } from "@/components/sections/projects";
6-
import { Navbar } from "@/components/sections/navbar";
7-
import { getDictionary, type Locale } from "@/lib/i18n";
8-
import { notFound } from "next/navigation";
9-
import { LangRedirect } from "@/components/lang-redirect";
1+
import { About } from '@/components/sections/about';
2+
import { Architecture } from '@/components/sections/architecture';
3+
import { Contact } from '@/components/sections/contact';
4+
import { Hero } from '@/components/sections/hero';
5+
import { Projects } from '@/components/sections/projects';
6+
import { Navbar } from '@/components/sections/navbar';
7+
import { getDictionary, type Locale } from '@/lib/i18n';
8+
import { notFound } from 'next/navigation';
9+
import { LangRedirect } from '@/components/lang-redirect';
1010

1111
type Params = { lang: Locale };
1212

1313
export function generateStaticParams() {
14-
return [{ lang: "es" }, { lang: "en" }];
14+
return [{ lang: 'es' }, { lang: 'en' }];
1515
}
1616

1717
export default function LangPage({ params }: { params: Params }) {
18-
if (params.lang !== "es" && params.lang !== "en") {
18+
if (params.lang !== 'es' && params.lang !== 'en') {
1919
return notFound();
2020
}
2121
const dict = getDictionary(params.lang);
2222
return (
2323
<main className="min-h-screen">
2424
<LangRedirect currentLocale={params.lang} />
2525
<Navbar content={dict.nav} currentLocale={params.lang} />
26-
<div className="bg-page-gradient bg-grid">
26+
<div className="bg-page-gradient">
2727
<Hero content={dict.hero} />
2828
<About content={dict.about} />
29-
<Projects content={dict.projects} />
29+
<Projects content={dict.projects} locale={params.lang} />
3030
<Architecture content={dict.architecture} />
3131
<Contact content={dict.contact} />
3232
</div>

‎app/[lang]/projects/[slug]/page.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { CompanyLogo } from '@/components/company-logo';
2+
import { Badge } from '@/components/ui/badge';
3+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
4+
import { Tabs } from '@/components/ui/tabs';
5+
import { caseStudies } from '@/lib/data/case-studies';
6+
import type { Locale } from '@/lib/i18n';
7+
import { notFound } from 'next/navigation';
8+
9+
type Params = { lang: Locale; slug: string };
10+
11+
export function generateStaticParams() {
12+
const locales: Locale[] = ['es', 'en'];
13+
return caseStudies.flatMap((item) => locales.map((lang) => ({ lang, slug: item.slug })));
14+
}
15+
16+
export default function CaseStudyLangPage({ params }: { params: Params }) {
17+
if (params.lang !== 'es' && params.lang !== 'en') return notFound();
18+
19+
const study = caseStudies.find((item) => item.slug === params.slug);
20+
if (!study) return notFound();
21+
22+
const isEn = params.lang === 'en';
23+
const title = isEn && study.titleEn ? study.titleEn : study.title;
24+
const problem = isEn && study.problemEn ? study.problemEn : study.problem;
25+
const solution = isEn && study.solutionEn ? study.solutionEn : study.solution;
26+
const impact = isEn && study.impactEn ? study.impactEn : study.impact;
27+
28+
const tabs = [
29+
{ id: 'context', label: isEn ? 'Context' : 'Contexto', content: problem },
30+
{ id: 'solution', label: isEn ? 'Solution' : 'Solución', content: solution },
31+
{
32+
id: 'impact',
33+
label: isEn ? 'Impact' : 'Impacto',
34+
content: (
35+
<ul className="list-disc pl-4 space-y-1">
36+
{impact.map((item) => (
37+
<li key={item}>{item}</li>
38+
))}
39+
</ul>
40+
)
41+
}
42+
];
43+
44+
return (
45+
<main className="min-h-screen py-16 md:py-20">
46+
<div className="max-w-4xl mx-auto px-4 space-y-8">
47+
<div className="flex items-center gap-3">
48+
<CompanyLogo companyId={study.companyId} size={40} />
49+
<div>
50+
<p className="text-sm text-base-muted uppercase tracking-[0.2em]">{study.company}</p>
51+
<h1 className="text-3xl font-semibold font-display text-base-text">{title}</h1>
52+
</div>
53+
</div>
54+
<div className="flex flex-wrap gap-2">
55+
<Badge variant="blue">{study.domain}</Badge>
56+
{study.frontend.map((item) => (
57+
<Badge key={item} variant="mint">
58+
Frontend: {item}
59+
</Badge>
60+
))}
61+
{study.backend.map((item) => (
62+
<Badge key={item} variant="mint">
63+
Backend: {item}
64+
</Badge>
65+
))}
66+
{study.infra.map((item) => (
67+
<Badge key={item} variant="muted">
68+
{item}
69+
</Badge>
70+
))}
71+
</div>
72+
<Card>
73+
<CardHeader>
74+
<CardTitle>{isEn ? 'Details' : 'Detalles'}</CardTitle>
75+
</CardHeader>
76+
<CardContent>
77+
<Tabs tabs={tabs} />
78+
</CardContent>
79+
</Card>
80+
</div>
81+
</main>
82+
);
83+
}

‎app/page.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import { About } from "@/components/sections/about";
2-
import { Architecture } from "@/components/sections/architecture";
3-
import { Contact } from "@/components/sections/contact";
4-
import { Hero } from "@/components/sections/hero";
5-
import { Projects } from "@/components/sections/projects";
6-
import { Navbar } from "@/components/sections/navbar";
7-
import { getDictionary } from "@/lib/i18n";
8-
import { LangRedirect } from "@/components/lang-redirect";
1+
import { About } from '@/components/sections/about';
2+
import { Architecture } from '@/components/sections/architecture';
3+
import { Contact } from '@/components/sections/contact';
4+
import { Hero } from '@/components/sections/hero';
5+
import { Projects } from '@/components/sections/projects';
6+
import { Navbar } from '@/components/sections/navbar';
7+
import { getDictionary } from '@/lib/i18n';
8+
import { LangRedirect } from '@/components/lang-redirect';
99

1010
export default function HomePage() {
11-
const dict = getDictionary("es");
11+
const dict = getDictionary('es');
1212
return (
1313
<main className="min-h-screen">
1414
<LangRedirect currentLocale="es" />
1515
<Navbar content={dict.nav} currentLocale="es" />
16-
<div className="bg-page-gradient bg-grid">
16+
<div className="bg-page-gradient">
1717
<Hero content={dict.hero} />
1818
<About content={dict.about} />
19-
<Projects content={dict.projects} />
19+
<Projects content={dict.projects} locale="es" />
2020
<Architecture content={dict.architecture} />
2121
<Contact content={dict.contact} />
2222
</div>

‎app/projects/[slug]/page.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
33
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
44
import { Tabs } from '@/components/ui/tabs';
55
import { caseStudies } from '@/lib/data/case-studies';
6+
import type { Locale } from '@/lib/i18n';
67
import { notFound } from 'next/navigation';
78

89
type Params = { slug: string };
@@ -15,15 +16,21 @@ export default function CaseStudyPage({ params }: { params: Params }) {
1516
const study = caseStudies.find((item) => item.slug === params.slug);
1617
if (!study) return notFound();
1718

19+
const locale: Locale = 'es';
20+
const title = locale === 'en' && study.titleEn ? study.titleEn : study.title;
21+
const problem = locale === 'en' && study.problemEn ? study.problemEn : study.problem;
22+
const solution = locale === 'en' && study.solutionEn ? study.solutionEn : study.solution;
23+
const impact = locale === 'en' && study.impactEn ? study.impactEn : study.impact;
24+
1825
const tabs = [
19-
{ id: 'context', label: 'Contexto', content: study.problem },
20-
{ id: 'solution', label: 'Solución', content: study.solution },
26+
{ id: 'context', label: locale === 'en' ? 'Context' : 'Contexto', content: problem },
27+
{ id: 'solution', label: locale === 'en' ? 'Solution' : 'Solución', content: solution },
2128
{
2229
id: 'impact',
23-
label: 'Impacto',
30+
label: locale === 'en' ? 'Impact' : 'Impacto',
2431
content: (
2532
<ul className="list-disc pl-4 space-y-1">
26-
{study.impact.map((item) => (
33+
{impact.map((item) => (
2734
<li key={item}>{item}</li>
2835
))}
2936
</ul>
@@ -38,7 +45,7 @@ export default function CaseStudyPage({ params }: { params: Params }) {
3845
<CompanyLogo companyId={study.companyId} size={40} />
3946
<div>
4047
<p className="text-sm text-base-muted uppercase tracking-[0.2em]">{study.company}</p>
41-
<h1 className="text-3xl font-semibold font-display text-base-text">{study.title}</h1>
48+
<h1 className="text-3xl font-semibold font-display text-base-text">{title}</h1>
4249
</div>
4350
</div>
4451
<div className="flex flex-wrap gap-2">

‎components/sections/about.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Badge } from '@/components/ui/badge';
22
import { getExperienceYears } from '@/lib/data/experience';
33
import type { AboutContent } from '@/lib/i18n';
4+
import Image from 'next/image';
45

56
const coreStack = ['React', 'React Native', 'Node.js', 'NestJS', 'Express', 'PostgreSQL', 'GraphQL'];
67

@@ -22,12 +23,25 @@ export function About({ content }: Props) {
2223
<p className="text-base text-base-muted">{intro}</p>
2324
<p className="text-base text-base-muted">{content.detail}</p>
2425
</div>
25-
<div className="flex flex-wrap gap-2">
26-
{coreStack.map((item) => (
27-
<Badge key={item} variant={item === 'PostgreSQL' ? 'blue' : 'mint'}>
28-
{item}
29-
</Badge>
30-
))}
26+
<div className="flex flex-col items-center md:items-start gap-4">
27+
<div className="relative">
28+
<div className="absolute inset-0 blur-3xl bg-accent-mint/10 rounded-full" aria-hidden />
29+
<Image
30+
src="/me.png"
31+
alt="Jedabero"
32+
width={240}
33+
height={240}
34+
className="relative h-48 w-48 md:h-56 md:w-56 rounded-2xl object-cover ring-2 ring-white/10 shadow-lg shadow-black/30"
35+
priority
36+
/>
37+
</div>
38+
<div className="flex flex-wrap gap-2">
39+
{coreStack.map((item) => (
40+
<Badge key={item} variant={item === 'PostgreSQL' ? 'blue' : 'mint'}>
41+
{item}
42+
</Badge>
43+
))}
44+
</div>
3145
</div>
3246
</div>
3347
</section>

‎components/sections/projects.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import { Badge } from '@/components/ui/badge';
33
import { Button } from '@/components/ui/button';
44
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
55
import { projects } from '@/lib/data/projects';
6-
import type { ProjectsContent } from '@/lib/i18n';
6+
import type { ProjectsContent, Locale } from '@/lib/i18n';
77
import Link from 'next/link';
88

99
type Props = {
1010
content: ProjectsContent;
11+
locale: Locale;
1112
};
1213

13-
export function Projects({ content }: Props) {
14+
export function Projects({ content, locale }: Props) {
15+
const isEn = locale === 'en';
1416
return (
1517
<section id="projects" className="py-16 md:py-20">
1618
<div className="max-w-6xl mx-auto px-4 space-y-8">
@@ -36,7 +38,7 @@ export function Projects({ content }: Props) {
3638
</div>
3739
</CardHeader>
3840
<CardContent className="flex flex-col gap-4">
39-
<p className="text-base text-base-muted">{project.summary}</p>
41+
<p className="text-base text-base-muted">{isEn && project.summaryEn ? project.summaryEn : project.summary}</p>
4042
<div className="flex flex-wrap gap-2">
4143
{project.stack.map((item) => (
4244
<Badge key={item} variant="mint">
@@ -45,7 +47,7 @@ export function Projects({ content }: Props) {
4547
))}
4648
</div>
4749
<div className="pt-2">
48-
<Link href={`/projects/${project.slug}`} className="inline-flex">
50+
<Link href={`${isEn ? '/en' : ''}/projects/${project.slug}`} className="inline-flex">
4951
<Button variant="ghost" size="md">{content.cta}</Button>
5052
</Link>
5153
</div>

0 commit comments

Comments
 (0)