redesign(project-page): editorial redesign of /works/[slug]
- ProjectHero: full-viewport dark hero with blurred cover image overlay, animated entrance (back link → date → title → description), scroll indicator - ProjectMeta: reveal-animated metadata strip with top/bottom dividers, refined label/value typography using brand color tokens - ProjectTechnologies: outline pill tags with per-tag staggered reveal, hover border/color transition - ProjectsColumns: cleaner 2-col prose grid with wider gap - ProjectPreviewGrid: rounded-xl with subtle border, responsive 1→2 col - ProjectVisitButton: pill-shaped dark CTA replacing bordered rectangle - OtherProjects: image-first card layout with scroll reveal, hover scale + brightness on covers, sliding arrow, refined "Voir aussi" header - page.tsx: passes cover prop to ProjectHero, 900px max-width content column, semantic MDX prose styles via article selector chains Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -36,45 +36,46 @@ export default async function ProjectPage({ params }: props) {
|
||||
slug: item.slug,
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
cover: item.cover
|
||||
cover: item.cover,
|
||||
}));
|
||||
|
||||
return (
|
||||
<main className="bg-[#f5f3ef]">
|
||||
<div className="mx-auto max-w-full flex flex-col items-center">
|
||||
<ProjectHero
|
||||
locale={locale}
|
||||
title={project.title}
|
||||
description={project.description}
|
||||
<main className="bg-brand-beige">
|
||||
<ProjectHero
|
||||
locale={locale}
|
||||
title={project.title}
|
||||
description={project.description}
|
||||
dateLabel={project.dateLabel}
|
||||
cover={project.cover}
|
||||
/>
|
||||
|
||||
<div className="mx-auto max-w-[900px] px-8 md:px-14 lg:px-6">
|
||||
<ProjectMeta
|
||||
dateLabel={project.dateLabel}
|
||||
category={project.category}
|
||||
roles={project.roles}
|
||||
client={project.client}
|
||||
/>
|
||||
|
||||
<div className="lg:max-w-[70vw]">
|
||||
<ProjectMeta
|
||||
dateLabel={project.dateLabel}
|
||||
category={project.category}
|
||||
roles={project.roles}
|
||||
client={project.client}
|
||||
/>
|
||||
<ProjectTechnologies technologies={project.technologies} />
|
||||
|
||||
<ProjectTechnologies technologies={project.technologies} />
|
||||
|
||||
<section className="pb-16">
|
||||
<article className="
|
||||
flex flex-col gap-20
|
||||
[&>div>h2]:text-[clamp(80px,10vw,128px)] [&>div>h2]:font-serif [&>div>h2]:text-brand-brown
|
||||
">
|
||||
<MDXRemote
|
||||
source={project.content}
|
||||
components={mdxComponents}
|
||||
options={{ blockJS: false, blockDangerousJS: true }}
|
||||
/>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<OtherProjects locale={locale} projects={otherProjects} />
|
||||
</div>
|
||||
<section className="pb-16">
|
||||
<article
|
||||
className="
|
||||
flex flex-col gap-16
|
||||
[&_h2]:font-serif [&_h2]:text-[clamp(52px,6vw,80px)] [&_h2]:text-brand-brown [&_h2]:leading-none [&_h2]:mb-8 [&_h2]:mt-4
|
||||
[&_p]:font-sans [&_p]:text-sm [&_p]:text-brand-brown/70 [&_p]:leading-[1.8]
|
||||
"
|
||||
>
|
||||
<MDXRemote
|
||||
source={project.content}
|
||||
components={mdxComponents}
|
||||
options={{ blockJS: false, blockDangerousJS: true }}
|
||||
/>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<OtherProjects locale={locale} projects={otherProjects} />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
type PreviewItem = {
|
||||
title: string;
|
||||
image: string;
|
||||
title: string;
|
||||
image: string;
|
||||
};
|
||||
|
||||
type props = {
|
||||
items?: PreviewItem[];
|
||||
items?: PreviewItem[];
|
||||
};
|
||||
|
||||
export function ProjectPreviewGrid({ items = [] }: props) {
|
||||
return (
|
||||
<div className="grid gap-6 2xl:grid-cols-2 2xl:space-x-6">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="rounded-[10px] overflow-hidden bg-brand-brown text-white min-h-65 flex items-center justify-center"
|
||||
>
|
||||
{item.image ? (
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-2xl">{item.title}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className={`grid gap-4 ${items.length > 1 ? 'lg:grid-cols-2' : ''}`}>
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="rounded-xl overflow-hidden bg-brand-brown/5 border border-brand-brown/8"
|
||||
>
|
||||
{item.image ? (
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="min-h-[220px] flex items-center justify-center text-brand-brown/30 font-sans text-sm">
|
||||
{item.title}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,29 @@
|
||||
import { GoLinkExternal } from "react-icons/go";
|
||||
|
||||
type VisitButtonProps = {
|
||||
href: string;
|
||||
href: string;
|
||||
};
|
||||
|
||||
export function ProjectVisitButton({ href }: VisitButtonProps) {
|
||||
if (!href) return null;
|
||||
|
||||
if (href === "" || href === null) { return; }
|
||||
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="rounded-[10px] border border-brand-brown px-6 py-4 text-brand-brown text-base flex flex-row justify-center items-center gap-2"
|
||||
>
|
||||
Visiter le site
|
||||
<GoLinkExternal className="text-xl" />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex justify-center py-6">
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="group inline-flex items-center gap-3 bg-brand-brown text-brand-beige font-sans text-sm uppercase tracking-[0.18em] px-8 py-4 rounded-full hover:bg-brand-brown/85 transition-colors duration-200 cursor-pointer"
|
||||
>
|
||||
Visiter le projet
|
||||
<svg
|
||||
className="w-4 h-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-200"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
type props = {
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function ProjectsColumns({ children }: props) {
|
||||
return (
|
||||
<div className="grid gap-6 text-justify text-base font-sans lg:grid-cols-2 lg:space-x-6">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="grid gap-8 lg:grid-cols-2 lg:gap-14">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,7 @@
|
||||
import Link from "next/link";
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
type props = {
|
||||
locale: string;
|
||||
@@ -11,24 +14,82 @@ type props = {
|
||||
};
|
||||
|
||||
export function OtherProjects({ locale, projects }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.querySelectorAll('.reveal').forEach((node, i) => {
|
||||
setTimeout(() => node.classList.add('visible'), i * 120);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
if (!projects.length) return null;
|
||||
|
||||
return (
|
||||
<section className="pb-20 pt-8">
|
||||
<h2 className="mb-10 text-center text-[clamp(80px,10vw,128px)] font-serif text-brand-brown">
|
||||
Autres projets
|
||||
<section ref={ref} className="pt-6 pb-20">
|
||||
{/* Divider */}
|
||||
<div className="w-full h-px bg-brand-brown/10 mb-14" />
|
||||
|
||||
{/* Label */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="w-6 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
Autres projets
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="reveal font-serif text-[clamp(48px,6vw,80px)] leading-none text-brand-brown mb-12">
|
||||
Voir aussi
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{projects.map((project) => (
|
||||
{projects.map((project, i) => (
|
||||
<Link
|
||||
key={project.slug}
|
||||
href={`/${locale}/works/${project.slug}`}
|
||||
className="group block"
|
||||
className="reveal group block cursor-pointer"
|
||||
style={{ transitionDelay: `${i * 100}ms` }}
|
||||
>
|
||||
<div className="mb-3 text-3xl font-sans">{project.title}</div>
|
||||
<p className="mb-3 text-sm text-neutral-500">{project.description}</p>
|
||||
<img className="flex min-h-[220px] items-center justify-center rounded-[22px] bg-white text-4xl shadow-sm transition group-hover:-translate-y-1" src={project.cover} alt="cover image" />
|
||||
{/* Image */}
|
||||
<div className="w-full h-[240px] rounded-xl overflow-hidden bg-brand-brown/5 mb-5">
|
||||
<img
|
||||
src={project.cover}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="font-serif text-2xl text-brand-brown uppercase mb-1.5">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="font-sans text-sm text-brand-brown/55 leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
className="w-5 h-5 text-brand-brown/30 flex-shrink-0 mt-1 group-hover:translate-x-1 group-hover:text-brand-brown/60 transition-all duration-200"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,36 +1,125 @@
|
||||
import Link from "next/link";
|
||||
'use client';
|
||||
|
||||
import { GoArrowLeft } from "react-icons/go";
|
||||
import { useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
type props = {
|
||||
title: string;
|
||||
description: string;
|
||||
dateLabel: string;
|
||||
locale: string;
|
||||
cover?: string;
|
||||
};
|
||||
|
||||
export function ProjectHero({ title, description, dateLabel, locale }: props) {
|
||||
export function ProjectHero({ title, description, dateLabel, locale, cover }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const section = ref.current;
|
||||
if (!section) return;
|
||||
const items = section.querySelectorAll<HTMLElement>('.hero-reveal');
|
||||
items.forEach((el, i) => {
|
||||
setTimeout(() => {
|
||||
el.style.opacity = '1';
|
||||
el.style.transform = 'translateY(0)';
|
||||
}, 80 + i * 100);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="md:pt-22 w-full">
|
||||
<section className="rounded-[10px] bg-brand-brown flex flex-col items-center justify-center text-brand-beige px-6 py-4">
|
||||
<Link
|
||||
href={`/${locale}#works`}
|
||||
className="w-full mb-10 inline-flex items-center justify-start gap-2 text-sm text-brand-beige"
|
||||
>
|
||||
<GoArrowLeft /> Retour aux projets
|
||||
</Link>
|
||||
|
||||
<div className="mx-auto flex min-h-90 max-w-4xl flex-col items-center justify-center text-center">
|
||||
<h1 className="text-[clamp(30px,4vw,64px)] font-serif">{title}</h1>
|
||||
<p className="mt-4 font-sans text-base text-brand-beige/80">{description}</p>
|
||||
|
||||
<div className="mt-8 flex items-center gap-4 text-sm text-brand-beige/70">
|
||||
<span className="h-px w-16 bg-white/30" />
|
||||
<span>{dateLabel}</span>
|
||||
<span className="h-px w-16 bg-white/30" />
|
||||
</div>
|
||||
<section
|
||||
ref={ref}
|
||||
className="w-full min-h-[calc(100vh-(2*11px))] rounded-[10px] bg-brand-brown text-brand-beige flex flex-col overflow-hidden relative"
|
||||
>
|
||||
{/* Background cover image */}
|
||||
{cover && (
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<img
|
||||
src={cover}
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="w-full h-full object-cover opacity-[0.08]"
|
||||
style={{ filter: 'grayscale(100%)' }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-brand-brown/60 via-brand-brown/40 to-brand-brown/90" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Back link */}
|
||||
<div className="relative z-10 px-8 md:px-14 lg:px-20 pt-10">
|
||||
<div
|
||||
className="hero-reveal"
|
||||
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 500ms ease, transform 500ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}#works`}
|
||||
className="group inline-flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-beige/50 hover:text-brand-beige transition-colors duration-200 cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16l-4-4m0 0l4-4m-4 4h18" />
|
||||
</svg>
|
||||
Retour aux projets
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content — vertically centred */}
|
||||
<div className="relative z-10 flex flex-col flex-1 items-center justify-center px-8 md:px-14 lg:px-20 py-16 text-center">
|
||||
{/* Category pill */}
|
||||
<div
|
||||
className="hero-reveal mb-6"
|
||||
style={{ opacity: 0, transform: 'translateY(20px)', transition: 'opacity 600ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 font-sans text-[11px] uppercase tracking-[0.2em] text-brand-beige/45">
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
{dateLabel}
|
||||
<span className="w-5 h-px bg-brand-beige/30" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div
|
||||
className="hero-reveal"
|
||||
style={{ opacity: 0, transform: 'translateY(28px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<h1 className="font-serif text-[clamp(40px,6vw,96px)] leading-[0.92] text-brand-beige max-w-4xl uppercase">
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div
|
||||
className="hero-reveal mt-8"
|
||||
style={{ opacity: 0, transform: 'translateY(24px)', transition: 'opacity 700ms ease, transform 700ms cubic-bezier(0.22,1,0.36,1)' }}
|
||||
>
|
||||
<p className="font-sans text-base font-light text-brand-beige/55 max-w-xl leading-relaxed">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<div className="relative z-10 flex justify-center pb-8 text-brand-beige/30">
|
||||
<div className="flex flex-col items-center gap-1.5">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.15em]">Défiler</span>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
style={{ animation: 'arrowBounce 1.8s ease-in-out infinite' }}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
|
||||
type props = {
|
||||
dateLabel: string;
|
||||
category: string;
|
||||
@@ -5,34 +9,58 @@ type props = {
|
||||
client: string;
|
||||
};
|
||||
|
||||
function Item({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
function MetaItem({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm text-neutral-500">{label}</p>
|
||||
<div className="text-base text-neutral-900">{children}</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
{label}
|
||||
</span>
|
||||
<div className="font-sans text-sm text-brand-brown/80 leading-relaxed">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectMeta({ dateLabel, category, roles, client }: props) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.classList.add('visible');
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="grid gap-8 py-10 md:grid-cols-4">
|
||||
<Item label="Année">{dateLabel}</Item>
|
||||
<Item label="Catégorie">{category}</Item>
|
||||
<Item label="Rôles">
|
||||
<div className="flex flex-col gap-1">
|
||||
{roles.map((role) => (
|
||||
<span key={role}>{role}</span>
|
||||
))}
|
||||
</div>
|
||||
</Item>
|
||||
<Item label="Client">{client}</Item>
|
||||
<section ref={ref} className="reveal py-12 md:py-16">
|
||||
{/* Top divider */}
|
||||
<div className="w-full h-px bg-brand-brown/10 mb-10" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-8 md:grid-cols-4 md:gap-12">
|
||||
<MetaItem label="Année">{dateLabel}</MetaItem>
|
||||
<MetaItem label="Catégorie">{category}</MetaItem>
|
||||
<MetaItem label="Rôles">
|
||||
<div className="flex flex-col gap-1">
|
||||
{roles.map((role) => (
|
||||
<span key={role}>{role}</span>
|
||||
))}
|
||||
</div>
|
||||
</MetaItem>
|
||||
<MetaItem label="Client">{client}</MetaItem>
|
||||
</div>
|
||||
|
||||
{/* Bottom divider */}
|
||||
<div className="w-full h-px bg-brand-brown/10 mt-10" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
|
||||
type props = {
|
||||
technologies: string[];
|
||||
};
|
||||
|
||||
export function ProjectTechnologies({ technologies }: props) {
|
||||
return (
|
||||
<section className="pb-16">
|
||||
<p className="mb-4 text-sm text-neutral-500">Technologies</p>
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.querySelectorAll('.reveal').forEach((node, i) => {
|
||||
setTimeout(() => node.classList.add('visible'), i * 60);
|
||||
});
|
||||
observer.unobserve(el);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section ref={ref} className="pb-14">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="w-6 h-px bg-brand-brown/40" />
|
||||
<span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
|
||||
Technologies
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
{technologies.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="rounded-full bg-brand-brown px-4 py-2 text-sm text-white"
|
||||
className="reveal font-sans text-xs uppercase tracking-[0.12em] text-brand-brown/70 border border-brand-brown/20 rounded-full px-4 py-1.5 hover:border-brand-brown/50 hover:text-brand-brown transition-colors duration-200 cursor-default"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user