<!doctype html>

<head>

<title>Unapologetic Struggle Art by Poverty Fueled Artistry</title>

<style>

:root{

--bg:#0a0a0a; --panel:#f5f5f5;

--accent1:#ff6b6b; --accent2:#4ecdc4; --accent3:#ffe66d;

--muted:#2a2a2a; --gap:1.25rem; --row-h:6.5vw;

}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{

font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;

background:var(--bg); color:var(--panel);

-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

overflow-x:hidden; line-height:1.45;

}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

/* HERO */

header.hero{

min-height:70vh; display:flex; align-items:center; justify-content:center;

position:relative; padding:3rem 1.25rem;

background: linear-gradient(135deg, #ffefef 0%, #fff9e6 40%, #eafffb 100%);

color:#0a0a0a; overflow:hidden;

}

header.hero::after{ content:""; position:absolute; inset:0;

background:

linear-gradient(135deg, rgba(10,10,10,0.02) 0 1px, transparent 1px 2px),

radial-gradient(800px 400px at 10% 20%, rgba(255,107,107,0.08), transparent 30%),

radial-gradient(600px 300px at 90% 80%, rgba(78,205,196,0.06), transparent 30%);

pointer-events:none;

}

.hero-inner{ z-index:2; text-align:center; max-width:1100px; width:100% }

h1.title{

font-family:"Playfair Display",serif; font-size:clamp(2.4rem,6.5vw,5.2rem);

letter-spacing:-0.02em; line-height:0.92; font-weight:900; margin-bottom:.4rem;

color:var(--muted); text-transform:uppercase;

text-shadow: 3px 3px 0 rgba(255,255,255,0.4);

}

p.lead{

font-family:"Cormorant Garamond",serif; font-weight:300;

font-size:clamp(1rem,2.2vw,1.25rem); color:var(--muted); margin-bottom:1rem;

}

.hero-badges{ margin-top:1rem; display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap }

.badge{

font-family:"Syne",sans-serif; background:var(--accent2); color:#071014;

padding:.6rem 1rem; border-radius:8px; font-weight:700; letter-spacing:.06em;

box-shadow:6px 6px 0 rgba(10,10,10,0.06); transition:transform .18s ease,box-shadow .18s ease;

}

.badge:hover{ transform:translateY(-4px); box-shadow:10px 10px 0 rgba(10,10,10,0.08) }

/* BIO */

section.bio{ background:var(--panel); color:var(--bg); padding:4rem 1.25rem; position:relative }

.bio-inner{ max-width:1000px; margin:0 auto; position:relative; z-index:2;

background:#fff; padding:2.25rem; box-shadow:18px 18px 0 var(--accent2); border-left:8px solid var(--accent1);

}

.bio-inner h2{ font-family:"Playfair Display",serif; color:var(--accent1); font-size:clamp(1.6rem,4vw,2.6rem); margin-bottom:1rem }

.bio-inner p{ color:var(--muted); font-size:1.02rem; margin-bottom:1rem }

section.bio::before{ content:""; position:absolute; left:0; top:0; height:100%; width:36%;

background:linear-gradient(180deg,var(--accent1), #ff8b8b 70%);

clip-path: polygon(0 0,100% 0,85% 100%,0 100%); z-index:1; opacity:0.95;

}

/* GALLERY */

section.gallery{ background:var(--bg); padding:3rem 1rem 5rem }

.gallery-header{ text-align:center; margin-bottom:1.25rem }

.gallery-header h2{ font-family:"Playfair Display",serif; color:var(--accent3); font-size:clamp(2rem,5.5vw,3.5rem); margin-bottom:.25rem }

.gallery-sub{ color:#9a9a9a; font-size:.95rem; margin-bottom:.75rem }

.collage-grid{

max-width:1200px; margin:0 auto; display:grid;

grid-template-columns: repeat(auto-fill, minmax(160px,1fr));

grid-auto-rows: var(--row-h); gap:var(--gap); align-items:start; grid-auto-flow:dense;

}

.collage-item{

position:relative; overflow:hidden; display:block;

border:4px solid rgba(255,255,255,0.04);

background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));

transition: transform .35s ease, box-shadow .35s ease, border-color .25s ease;

transform-origin:center; cursor:pointer; will-change:transform; border-radius:8px;

}

.span-4{ grid-row-end: span 4; } .span-3{ grid-row-end: span 3; } .span-2{ grid-row-end: span 2; } .span-1{ grid-row-end: span 1; }

.collage-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .8s cubic-bezier(.2,.9,.2,1); transform-origin:center center; }

.collage-item:hover{ transform:translateY(-8px) rotate(-0.6deg) scale(1.02); box-shadow:16px 24px 40px rgba(0,0,0,0.45); z-index:20; border-color:var(--accent3) }

.collage-item:hover img{ transform: scale(1.08) rotate(-0.6deg); }

/* ---------- BOLD HOVER TAG (STYLE B) ---------- */

.collage-caption{

position:absolute; left:12px; bottom:12px; font-family:"Syne",sans-serif;

background:var(--accent3); color:#071014; padding:.45rem .75rem; font-size:0.88rem;

border-radius:6px; font-weight:700; letter-spacing:.03em; text-transform:none;

box-shadow:4px 6px 0 rgba(0,0,0,0.12);

}

/* CTA & Footer */

.cta{ padding:3rem 1rem; background: linear-gradient(45deg,var(--accent2),var(--accent1)); text-align:center }

.cta h2{ font-family:"Playfair Display",serif; color:#0a0a0a; font-size:clamp(1.4rem,3.5vw,2.4rem); margin-bottom:.6rem }

.cta .cta-actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1rem }

.btn{ font-family:"Space Grotesk",sans-serif; padding:.85rem 1.4rem; border-radius:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; border:0; box-shadow:6px 6px 0 rgba(10,10,10,0.08); transition:transform .18s ease,box-shadow .18s ease }

.btn-ig{ background:rgba(10,10,10,0.95); color:var(--accent3) } .btn-coffee{ background:rgba(255,255,255,0.95); color:#071014 }

.btn:hover{ transform: translateY(-4px) }

footer{ padding:1.25rem; text-align:center; color:#9a9a9a; border-top:4px solid var(--accent1); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent) }

footer p{ font-family:"Cormorant Garamond",serif; font-size:.95rem }

/* Lightbox */

.lb-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:9999; }

.lb-active{ display:flex }

.lb-stage{ max-width:95vw; max-height:92vh; display:flex; align-items:center; justify-content:center; position:relative; gap:1rem }

.lb-img{ max-width:calc(95vw - 200px); max-height:92vh; display:block; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.7) }

.lb-meta{ position:absolute; right:24px; bottom:24px; color:#fff; text-align:right; font-family:"Cormorant Garamond",serif; max-width:360px }

.lb-title{ font-size:1.35rem; font-weight:700; margin-bottom:.35rem }

.lb-count{ font-size:.9rem; color:rgba(255,255,255,0.8) }

.lb-close, .lb-prev, .lb-next{

position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.06); color:#fff; border:0; padding:.7rem .9rem; border-radius:8px; cursor:pointer;

}

.lb-close{ right:18px; top:18px; transform:none }

.lb-prev{ left:8px } .lb-next{ right:8px }

.lb-arrow{ font-size:1.15rem; font-weight:700; opacity:0.95 }

@media (min-width:1100px){ :root{ --row-h:6.5vw } .collage-grid{ grid-template-columns: repeat(4,1fr) } }

@media (min-width:1400px){ .collage-grid{ grid-template-columns: repeat(5,1fr) } }

@media (max-width:900px){ :root{ --row-h:8.5vw } }

@media (max-width:560px){ :root{ --row-h:12.5vw; --gap:.75rem } .collage-caption{ font-size:.78rem } .lb-meta{ display:none } .lb-img{ max-width:95vw } }

.collage-item:focus{ outline:3px solid rgba(255,230,109,0.25); outline-offset:4px }

</style>

</head>

<body>

<h1 class="title">Unapologetic Struggle Art

<small style="font-size:.35em;display:block;margin-top:.45rem;font-family:'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#333">by Poverty Fueled Artistry</small>

</h1>

<p class="lead">30+ years of boundary-breaking work — a chaotic, colorful manifesto on the page.</p>

<div class="badge">Experimental</div>

<div class="badge">Color-Block</div>

<div class="badge">Unfiltered</div>

</div>

</header>

<h2 id="about-title">About the Artist</h2>

<p>For over three decades, Poverty Fueled Artistry has refused to be confined by medium, genre, or convention. Their expansive practice spans drawing, painting, photography, digital art & graphic design — each discipline serving as another language in an ever-evolving creative vocabulary.</p>

<p>What began with traditional media has evolved into a primary focus on digital art, where pixels become as malleable as paint. The work demands attention, provokes reaction, and challenges viewers to confront their own boundaries.</p>

<p>Eclecticism isn’t a phase — it’s a philosophy. This portfolio is a creative odyssey: raw, messy, exacting, and unapologetic.</p>

</div>

</section>

<h2 id="gallery-title">Featured Works</h2>

<div class="gallery-sub">Unlimited. Add image files to the folder (artwork1.jpg, artwork1.webp, or your-optimized names). Titles appear on hover and in the lightbox.</div>

</div>

</section>

<h2 id="cta-title">Connect & Support</h2>

<a class="btn btn-ig" href="https://instagram.com/PovertyFueledArtistry" target="_blank" rel="noopener">Follow on Instagram</a>

<a class="btn btn-coffee" href="https://buymeacoffee.com/PovertyFueledArtistry" target="_blank" rel="noopener">Buy Me a Coffee</a>

</div>

</section>

<p>© <span id="year"></span> Poverty Fueled Artistry — Unapologetically Creative</p>

</footer>

</div>

</div>

(function(){

// CONFIG

const MAX_IMAGES = 60; // how many filenames to probe

const container = document.getElementById('collage');

const lightbox = document.getElementById('lb');

const lbImg = lightbox.querySelector('.lb-img');

const lbTitle = lightbox.querySelector('.lb-title');

const lbCount = lightbox.querySelector('.lb-count');

const closeBtn = lightbox.querySelector('.lb-close');

const prevBtn = lightbox.querySelector('.lb-prev');

const nextBtn = lightbox.querySelector('.lb-next');

// Title map (locked-in titles)

const titleMap = {

1: "Sunrise Over the Struggle Line",

2: "Dressed for a World That Isn’t Coming",

3: "Golden Ratio of Resistance"

// additional titles can be added here keyed by image index

};

// fallback name alternatives to try when probing

const tryExtensions = ['.webp','.jpg','.jpeg','.png'];

// If you have individually named optimized files in the folder,

// you can add them here to map index -> filename

// e.g. manualMap[1] = "getimg_ai_img-tOZc5QmMQ2OB9cUIjtTRe.webp"

const manualMap = {

// Example (auto-detected too): uncomment and edit if you want explicit names

// 1: "getimg_ai_img-tOZc5QmMQ2OB9cUIjtTRe.webp",

// 2: "weekshot dog n lady.webp",

// 3: "getimg_ai_img-LNwow9XDtjIzeefSucOd3.webp"

};

// store loaded items for lightbox navigation

const galleryItems = [];

function probeSrcNamed(base){

// try various extensions and thumb variants

const candidates = [];

for (const ext of tryExtensions){

candidates.push(base + ext);

candidates.push(base + ext.replace('.', '_thumb.'));

// also try explicit thumb suffix

candidates.push(base + '_thumb' + ext);

}

return probeCandidates(candidates);

}

function probeCandidates(list){

return new Promise(resolve=>{

let found = null, i=0;

function tryNext(){

if (i>=list.length){ resolve(null); return; }

const url = list[i++];

const img = new Image();

img.onload = ()=>resolve(url);

img.onerror = ()=>tryNext();

img.src = url;

}

tryNext();

});

}

// given a base name (artworkN) try to find existing file (webp,jpg,png)

async function findArtworkByIndex(index){

// first: explicit manual map

if (manualMap[index]) {

// check file exists quickly

const ok = await probeCandidates([manualMap[index]]);

if (ok) return manualMap[index];

}

// try several naming conventions

const bases = [

`artwork${index}`,

`artwork-${index}`,

`artwork_${index}`,

`getimg_ai_img-${index}`,

`image${index}`,

`img${index}`,

// also check original numeric names

`artwork${index}`

];

for (const b of bases){

const found = await probeSrcNamed(b);

if (found) return found;

}

// lastly try common explicit original names the user uploaded (best-effort)

if (index === 1) {

const try1 = await probeCandidates(["getimg_ai_img-tOZc5QmMQ2OB9cUIjtTRe.webp","getimg_ai_img-tOZc5QmMQ2OB9cUIjtTRe.jpg"]);

if (try1) return try1;

}

if (index === 2) {

const try2 = await probeCandidates(["weekshot dog n lady.webp","weekshot dog n lady.jpg","weekshot%20dog%20n%20lady.webp"]);

if (try2) return try2;

}

if (index === 3) {

const try3 = await probeCandidates(["getimg_ai_img-LNwow9XDtjIzeefSucOd3.webp","getimg_ai_img-LNwow9XDtjIzeefSucOd3.jpg"]);

if (try3) return try3;

}

return null;

}

// create element for grid using thumbnail if available

function makeItem(src, thumbSrc, idx, naturalW, naturalH){

const a = document.createElement('a');

a.href = src;

a.className = 'collage-item';

a.dataset.index = idx;

a.setAttribute('aria-label', `Artwork ${idx}`);

a.tabIndex = 0;

const img = document.createElement('img');

img.src = thumbSrc || src;

img.alt = titleMap[idx] || `Artwork ${idx}`;

img.loading = 'lazy';

a.appendChild(img);

const cap = document.createElement('span');

cap.className = 'collage-caption';

cap.textContent = titleMap[idx] || `Artwork ${idx}`;

a.appendChild(cap);

// choose span based on aspect ratio favoring portrait

let span = 'span-2';

if (naturalW && naturalH){

const ratio = naturalH / naturalW;

if (ratio > 1.6) span = 'span-4';

else if (ratio > 1.15) span = 'span-3';

else if (ratio > 0.85) span = 'span-2';

else span = 'span-1';

} else {

// random-ish with portrait bias

const r = Math.random();

span = (r > 0.7) ? 'span-4' : (r > 0.35 ? 'span-3' : 'span-2');

}

a.classList.add(span);

// click opens lightbox

a.addEventListener('click', function(ev){

ev.preventDefault();

openLightboxByIndex(galleryItems.findIndex(it => it.src === src));

});

// keyboard accessibility (Enter)

a.addEventListener('keydown', function(ev){

if (ev.key === 'Enter') { ev.preventDefault(); a.click(); }

});

return a;

}

// probe one index, detect src & thumb & natural sizes

async function probeIndex(i){

// possible names to try for thumbnail

const primary = await findArtworkByIndex(i);

if (!primary) return null;

// try to find thumb version

const baseNoExt = primary.replace(/\.(webp|jpg|jpeg|png)$/i,'');

const thumbCandidates = [

baseNoExt + '_thumb.webp', baseNoExt + '_thumb.jpg',

baseNoExt + '_thumb.png', baseNoExt + '.webp', baseNoExt + '.jpg'

];

// detect actual thumb file exists

let thumbFound = null;

for (const c of thumbCandidates){

const ok = await probeCandidates([c]);

if (ok){ thumbFound = ok; break; }

}

// measure natural size by creating Image

const m = await new Promise((res)=>{

const tester = new Image();

tester.onload = ()=>res({w:tester.naturalWidth, h:tester.naturalHeight});

tester.onerror = ()=>res({w:0,h:0});

tester.src = primary;

});

return { src: primary, thumb: thumbFound, w:m.w, h:m.h, index:i };

}

// sequential load to keep order (and not hammer server)

(async function loadGallery(){

for (let i=1;i<=MAX_IMAGES;i++){

const p = await probeIndex(i);

if (p){

const itemEl = makeItem(p.src, p.thumb, i, p.w, p.h);

container.appendChild(itemEl);

galleryItems.push({ src:p.src, title: (titleMap[i] || `Artwork ${i}`) , thumb:p.thumb });

}

// if none loaded, show placeholders instructing filenames

if (galleryItems.length === 0){

for (let j=1;j<=3;j++){

const ph = document.createElement('div');

ph.className = 'collage-item span-3';

ph.style.display='flex'; ph.style.alignItems='center'; ph.style.justifyContent='center';

ph.style.minHeight='220px';

ph.style.background=`linear-gradient(45deg, rgba(255,107,107,0.07), rgba(78,205,196,0.04))`;

ph.innerHTML = `<div style="text-align:center;padding:1rem;color:rgba(255,255,255,0.85)"><strong style="display:block;font-family:'Syne',sans-serif;margin-bottom:.35rem">No artworks found</strong><span style="font-family: 'Space Grotesk',sans-serif;font-size:.95rem">Add files named <code>artwork1.webp</code>, <code>artwork2.webp</code> etc. to this folder.</span></div>`;

container.appendChild(ph);

}

})();

// LIGHTBOX FUNCTIONS

let currentIndex = -1;

function openLightboxByIndex(idx){

if (idx < 0 || idx >= galleryItems.length) return;

currentIndex = idx;

const item = galleryItems[idx];

lbImg.src = item.src;

lbImg.alt = item.title;

lbTitle.textContent = item.title;

lbCount.textContent = `${idx+1} / ${galleryItems.length}`;

lightbox.classList.add('lb-active');

lightbox.setAttribute('aria-hidden','false');

document.body.style.overflow = 'hidden';

// set focus

closeBtn.focus();

}

function closeLightbox(){

lightbox.classList.remove('lb-active');

lightbox.setAttribute('aria-hidden','true');

lbImg.src = '';

document.body.style.overflow = '';

currentIndex = -1;

}

function showPrev(){

if (galleryItems.length === 0) return;

currentIndex = (currentIndex - 1 + galleryItems.length) % galleryItems.length;

openLightboxByIndex(currentIndex);

}

function showNext(){

if (galleryItems.length === 0) return;

currentIndex = (currentIndex + 1) % galleryItems.length;

openLightboxByIndex(currentIndex);

}

// events

closeBtn.addEventListener('click', closeLightbox);

prevBtn.addEventListener('click', showPrev);

nextBtn.addEventListener('click', showNext);

// keyboard nav

document.addEventListener('keydown', function(e){

if (!lightbox.classList.contains('lb-active')) return;

if (e.key === 'Escape') { closeLightbox(); }

if (e.key === 'ArrowLeft') { showPrev(); }

if (e.key === 'ArrowRight') { showNext(); }

});

// click backdrop to close (but not clicks inside stage)

lightbox.addEventListener('click', function(e){

if (e.target === lightbox) closeLightbox();

});

// touch / swipe support for mobile

(function addSwipe(){

let startX=0, startY=0, distX=0, distY=0, startTime=0;

const threshold = 80; // required min distance

const allowedTime = 500;

lightbox.addEventListener('touchstart', function(e){

const t = e.changedTouches[0];

startX = t.pageX; startY = t.pageY; startTime = new Date().getTime();

}, {passive:true});

lightbox.addEventListener('touchend', function(e){

const t = e.changedTouches[0];

distX = t.pageX - startX; distY = t.pageY - startY;

const elapsed = new Date().getTime() - startTime;

if (elapsed <= allowedTime){

if (Math.abs(distX) >= threshold && Math.abs(distY) <= 100){

if (distX > 0) showPrev(); else showNext();

} else if (Math.abs(distY) >= threshold && Math.abs(distX) <= 100){

// vertical swipe closes

closeLightbox();

}

}, {passive:true});

})();

// update copyright year

document.getElementById('year').textContent = new Date().getFullYear();

})();

</script>

</body>

</html>