/* Portfolio project detail pages */ .project-hero { position: relative; min-height: 52vh; display: flex; align-items: flex-end; overflow: hidden; background: #000; } .project-hero-bg { position: absolute; inset: 0; } .project-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; } .project-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 100%); } .project-hero-content { position: relative; z-index: 2; padding: 120px 20px 48px; max-width: 900px; } .project-back a { color: #e91e8c; font-weight: 600; font-size: 0.9rem; } .project-badge { display: inline-block; margin: 14px 0 12px; padding: 6px 14px; border-radius: 999px; background: rgba(233, 30, 140, 0.25); border: 1px solid rgba(233, 30, 140, 0.45); font-size: 0.8rem; color: #fff; } .project-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; margin-bottom: 16px; } .project-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 22px; color: #cbd5e1; font-size: 0.92rem; padding: 0; } .project-meta i { color: #e91e8c; margin-right: 6px; } .project-body { padding: 48px 0 64px; background: #0a0a0b; } .project-layout { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; } .project-main h2 { color: #fff; font-size: 1.35rem; margin: 28px 0 14px; } .project-main h2:first-child { margin-top: 0; } .project-main p { color: #cbd5e1; margin-bottom: 14px; line-height: 1.7; } .provided-list { margin: 0 0 8px 1.1rem; color: #e2e8f0; } .provided-list li { margin-bottom: 8px; } .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; } .svc-card { background: #16161a; border: 1px solid #2a2a32; border-radius: 12px; padding: 16px; } .svc-card h3 { color: #e91e8c; font-size: 0.95rem; margin: 0 0 8px; } .svc-card p { color: #94a3b8; font-size: 0.9rem; margin: 0; } .project-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; } .project-shot { margin: 0; border-radius: 12px; overflow: hidden; background: #1a1a1e; aspect-ratio: 4/3; } .project-shot img { width: 100%; height: 100%; object-fit: cover; } .project-side { position: sticky; top: 88px; } .side-card { background: #16161a; border: 1px solid #2a2a32; border-radius: 14px; padding: 20px; margin-bottom: 16px; } .side-card h3 { color: #fff; font-size: 1rem; margin: 0 0 14px; } .side-card p { color: #cbd5e1; font-size: 0.9rem; margin: 0 0 12px; line-height: 1.5; } .side-card strong { color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } /* Listing cards link */ .portfolio-item a.portfolio-link { position: absolute; inset: 0; z-index: 3; } .portfolio-item { cursor: pointer; } @media (max-width: 900px) { .project-layout { grid-template-columns: 1fr; } .project-side { position: static; } .svc-grid, .project-gallery { grid-template-columns: 1fr; } } ''' # Write portfolio listing page based on live structure - simplified full page listing = r''' Event Décor Portfolio Nairobi | Ruracio, Weddings & Projects – EventsPlus

Our Work

Real projects from Ruracio, weddings, showers and celebrations across Nairobi, Ruiru, Kamakis and the Eastern Bypass — open any project for full photos and details.

Request a similar setup

''' open('/home/workdir/artifacts/eventsplus-portfolio-projects/portfolio.html','w').write(listing) # portfolio.js - render cards linking to project pages pjs = r'''// Portfolio listing – rich projects from data/portfolio.json (function () { 'use strict'; var grid = document.getElementById('portfolioGrid') || document.querySelector('.portfolio-grid'); if (!grid) return; var FALLBACK = []; function escapeHtml(s) { return String(s || '') .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } function render(items) { var list = (items || []) .filter(function (i) { return i.visible !== false; }) .sort(function (a, b) { return (a.order || 0) - (b.order || 0); }); if (!list.length) { grid.innerHTML = '

No projects yet.

'; return; } grid.innerHTML = list .map(function (item) { var slug = item.slug || item.id; var href = 'portfolio/' + encodeURIComponent(slug) + '.html'; var title = escapeHtml(item.title || ''); var caption = escapeHtml(item.locationArea || item.caption || item.category || ''); var img = escapeHtml(item.coverImage || item.image || ''); return ( '
' + '' + title + '' + '

' + title + '

' + caption + '
' + '' + '
' ); }) .join(''); } try { var raw = localStorage.getItem('eventsplus_portfolio'); if (raw) { var data = JSON.parse(raw); if (Array.isArray(data) && data.length && (data[0].slug || data[0].coverImage || data[0].images)) { render(data); return; } } } catch (e) {} fetch('data/portfolio.json?t=' + Date.now()) .then(function (r) { return r.ok ? r.json() : null; }) .then(function (data) { if (Array.isArray(data) && data.length) render(data); else render(FALLBACK); }) .catch(function () { render(FALLBACK); }); })(); ''' open('/home/workdir/artifacts/eventsplus-portfolio-projects/js/portfolio.js','w').write(pjs) print('listing + js + css ok') PY