"Portfolio page IV"
battle of systems
It is a small triptych — though not of saints or stories, but of systems. Three frames held in a single breath of laser-cut construction: a landscape at the center, like a horizon made tangible, flanked by two portraits, grounding the composition in quiet attention.
The images are fractals — ghost architectures of nature. Printed on Hahnemühle paper, they carry the weight and texture of a kept promise: archival, certain, there. And yet, also not there. For this frame is also a threshold to motion.
Present in the room, they are still — three frames holding their infinite geometries in patient silence. In the digital dark, a quiet metamorphosis begins. Perhaps only one stirs, its patterns breathing inward like a thought emerging. Or all three awaken at once, their animations falling into a slow, intricate dance — a conversation no one else was meant to overhear.
These fractals are usually the supporting cast in my other work. They appear in the margins, in the deep background, sometimes so faint you almost miss them — like the recursive whisper of a fern in shadow, or the branching of rivers seen from a great height. They are the mathematics that nature hums to itself when it thinks no one is listening.
This work is a small act of attention. A modest frame built for the patterns that usually go unnoticed. Here, incidentally, they are not background. They slipped into focus.
.pgnav {
/* CHANGE THIS COLOR to update both the arrows and the active dot ring */
--accent-color: #888;
display:flex; align-items:center; justify-content:center; gap:20px;
padding:22px 10px; user-select:none; font-family:inherit;
}
/* Base arrow container */
.pg-arrow {display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; text-decoration:none; cursor:pointer;
transition:transform .15s, opacity .15s}
.pg-arrow:hover {transform:scale(1.1)}
.pg-arrow:active {transform:scale(.95)}
.pg-arrow.disabled {opacity:.25; pointer-events:none}
/* SVG Styling */
.pg-arrow svg {width: 26px; height: 26px;}
.pg-arrow path {
fill: var(--accent-color);
transition: fill .15s;
}
/* Hover color change (darkens the arrow slightly on hover) */
.pg-next:hover path, .pg-prev:hover path {fill: #333;}
/* Dots styling */
.pg-dots {display:flex; align-items:center; gap:12px;} /* Increased gap slightly to fit the ring */
.pg-dot {width:11px; height:11px; border-radius:50%;
background:#c9c9c9; text-decoration:none; transition:all .15s;
position: relative;}
.pg-dot:hover {background:#999;}
/* Active dot: filled with accent color, and a thin ring around it */
.pg-dot.active {
background: var(--accent-color);
/* Box-shadow with a spread of 2px creates the thin ring without altering the dot's physical size */
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--accent-color);
}
(function(){
// ==== CONFIG: set this on each page ====
var currentPage = 5; // 1){
prev.href = pages[currentPage-2];
} else {
prev.classList.add('disabled');
prev.removeAttribute('href');
}
if(currentPage < total){
next.href = pages[currentPage];
} else {
next.classList.add('disabled');
next.removeAttribute('href');
}
// Sliding window of dots
var half = Math.floor(visibleDots/2);
var start = currentPage - 1 - half;
var end = start + visibleDots - 1;
if(start total-1){ end = total-1; start = total-visibleDots; }
if(start < 0) start = 0;
for(var i=start; i<=end; i++){
var a = document.createElement('a');
a.className = 'pg-dot' + (i === currentPage-1 ? ' active' : '');
a.href = pages[i];
a.setAttribute('aria-label','Go to page ' + (i+1));
if(i === currentPage-1) a.setAttribute('aria-current','page');
dotsBox.appendChild(a);
}
})();