jeffemmett
/
xhivart-mirror
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add gallery lightbox, reorganize About/Art in Motion sections 

- Gallery: clicking any artwork opens a full-size lightbox overlay
  with X button and click-outside-to-close
- About: remove 4-photo grid, move those photos to Art in Motion
- Art in Motion: keep only photos showing Ximena (5 process/portrait
  photos), move art-only photos up to gallery section
- Work With Me: show full Wayra painting with object-contain
  instead of cropping

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-10 20:08:24 +00:00
parent 738b70dc94
commit 9413d97361
1 changed files with 56 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/app/page.tsx
View File

@ -161,6 +161,8 @@ function RitualArtSection() {
// Art Gallery Section
function GallerySection() {
const [selectedArtwork, setSelectedArtwork] = useState<{ src: string; title: string } | null>(null);
const artworks = [
{ src: '/images/art/goddess.webp?v=2', title: 'Goddess' },
{ src: '/images/art/mujer-medicina.webp', title: 'Mujer Medicina' },
@ -197,6 +199,15 @@ function GallerySection() {
{ src: '/images/art/uni-verso.webp', title: 'Uni Verso' },
{ src: '/images/art/wayra.webp', title: 'Wayra' },
{ src: '/images/art/la-illimani.webp', title: 'La Illimani' },
{ src: '/images/about/process-1.webp', title: 'Eagle & Jaguar' },
{ src: '/images/about/process-2.webp', title: 'Kundalini' },
{ src: '/images/about/process-3.webp', title: 'Ancestral Totem' },
{ src: '/images/about/process-4.webp', title: 'Detail — Face' },
{ src: '/images/about/process-5.webp', title: 'Detail — Fire' },
{ src: '/images/about/process-6.webp', title: 'Sacred Union' },
{ src: '/images/about/process-7.webp', title: 'Shiva II' },
{ src: '/images/about/portrait-artist-1.webp', title: 'Night Guardians' },
{ src: '/images/about/portrait-artist-2.webp', title: 'Golden Meditation' },
];
return (
@ -217,6 +228,7 @@ function GallerySection() {
<div
key={index}
className="relative aspect-square rounded-lg overflow-hidden group cursor-pointer"
onClick={() => setSelectedArtwork(artwork)}
>
<Image
src={artwork.src}
@ -233,6 +245,42 @@ function GallerySection() {
))}
</div>
</div>
{/* Lightbox Modal */}
{selectedArtwork && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 md:p-8"
onClick={() => setSelectedArtwork(null)}
>
<button
className="absolute top-4 right-4 md:top-6 md:right-6 z-50 text-white/70 hover:text-white transition-colors p-2"
onClick={() => setSelectedArtwork(null)}
aria-label="Close"
>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
<div
className="relative w-full h-full max-w-6xl max-h-[85vh] flex flex-col items-center justify-center"
onClick={(e) => e.stopPropagation()}
>
<div className="relative w-full flex-1 min-h-0">
<Image
src={selectedArtwork.src}
alt={selectedArtwork.title}
fill
className="object-contain"
sizes="(max-width: 768px) 100vw, 90vw"
/>
</div>
<p className="text-white/80 font-sans-alt text-sm tracking-widest mt-4 text-center">
{selectedArtwork.title}
</p>
</div>
</div>
)}
</section>
);
}
@ -520,43 +568,7 @@ function AboutSection() {
</div>
</div>
{/* Additional Photos */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12">
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/about/portrait-2.jpg"
alt="Ximena Xaguar"
fill
className="object-cover"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/about/portrait-3.jpg"
alt="Ximena Xaguar"
fill
className="object-cover"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/about/portrait-4.jpg"
alt="Ximena Xaguar"
fill
className="object-cover"
/>
</div>
<div className="relative aspect-square rounded-lg overflow-hidden">
<Image
src="/images/about/pachamama.jpg"
alt="Pachamama Art"
fill
className="object-cover"
/>
</div>
</div>
{/* Process & Studio Photos */}
{/* Art in Motion */}
<div className="mt-16 text-center">
<p className="font-sans-alt text-xs tracking-[0.2em] text-[var(--accent-gold)] mb-4">
THE PROCESS
@ -568,16 +580,11 @@ function AboutSection() {
</div>
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mt-8">
{[
{ src: '/images/about/portrait-artist-1.webp', alt: 'Ximena in studio' },
{ src: '/images/about/portrait-artist-2.webp', alt: 'Ximena Quinteros - XHIVA ART' },
{ src: '/images/about/painting-process.webp', alt: 'Painting process' },
{ src: '/images/about/process-1.webp', alt: 'Creative process' },
{ src: '/images/about/process-2.webp', alt: 'Studio work' },
{ src: '/images/about/process-3.webp', alt: 'Art in progress' },
{ src: '/images/about/process-4.webp', alt: 'Working on art' },
{ src: '/images/about/process-5.webp', alt: 'Art creation' },
{ src: '/images/about/process-6.webp', alt: 'Artistic process' },
{ src: '/images/about/process-7.webp', alt: 'Art studio' },
{ src: '/images/about/painting-process.webp', alt: 'Ximena painting' },
{ src: '/images/about/portrait-2.jpg', alt: 'Ximena painting mural' },
{ src: '/images/about/portrait-3.jpg', alt: 'Ximena in studio' },
{ src: '/images/about/portrait-4.jpg', alt: 'Ximena at ceremony' },
{ src: '/images/about/pachamama.jpg', alt: 'Ximena — ritual with smoke' },
].map((photo, index) => (
<div key={index} className="relative aspect-square rounded-lg overflow-hidden group">
<Image
@ -599,14 +606,13 @@ function WorkWithMeSection() {
return (
<section className="section relative overflow-hidden">
{/* Background Image */}
<div className="absolute inset-0 z-0">
<div className="absolute inset-0 z-0 bg-[#0f0f0f]">
<Image
src="/images/art/wayra-bg.webp"
alt="Wayra"
fill
className="object-cover"
className="object-contain opacity-40"
/>
<div className="absolute inset-0 bg-black/70" />
</div>
<div className="max-w-3xl mx-auto relative z-10">