/* premium.jsx — single high-end portfolio. Modal + archive carousel + EN/PL + scroll motion. */
const { useState, useEffect, useRef, useCallback } = React;
const I18N = window.I18N,STACK = window.STACK,LINKS = window.LINKS,MAIL = window.MAIL;
const { useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakRadio, TweakColor } = window;
/* Tweakable defaults — three controls that reshape the whole feel. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": ["#2b8bff", "#00e0ff", "#6a5cff"],
"grit": 100,
"atmo": "storm"
} /*EDITMODE-END*/;
const PALETTES = [
["#FF0000", "#ff1f8f", "#00d2ff"], // Thermal
["#c6ff00", "#9dff00", "#00ffa3"], // Acid
["#2b8bff", "#00e0ff", "#6a5cff"], // Ice
["#ff4400", "#ff7a00", "#ff145e"] // Inferno
];
/* ============================================================
PROJECTS_DATA — single source of truth for every project.
Swap the placeholder URLs with your own files later.
mediaType : 'video' | 'image' | 'vimeo' | 'gallery' → what the modal renders
'vimeo' → set vimeoId (e.g. '1199152904'), mediaUrl unused
'gallery' → set gallery: ['img1.jpg','img2.jpg', ...], swipeable with arrows/dots
group : 'work' → big "Selected Works" rows
: 'archive' → horizontal Archive carousel
============================================================ */
const PROJECTS_DATA = [
// ============= SELECTED WORKS =============
{
id: 'work-01', n: '01', group: 'work',
title: 'Glow in the Dark — Skepta',
description: {
pl: 'Autorski teledysk do utworu "Glow in the Dark" brytyjsko-nigeryjskiego artysty Skepty, zrealizowany za oficjalną zgodą wytwórni Big Smoke Corporation w ramach pracy licencjackiej. Projekt oparty na strategii mixed media — animowany, trójwymiarowy awatar artysty (zaprojektowany i zanimowany w Blenderze) zderza się z surowym materiałem filmowym zarejestrowanym nocą w Poznaniu na iPhone. Estetyka czerpie z nurtu grime i motywu miejskiej inwigilacji, nawiązując do wczesnych teledysków Gorillaz. Cały proces — od modelowania i riggingu postaci, przez motion tracking, po compositing w After Effects i korekcję barwną w DaVinci Resolve — zrealizowano samodzielnie.',
en: 'An original music video for "Glow in the Dark" by British-Nigerian artist Skepta, produced with official clearance from Big Smoke Corporation as part of a bachelor\'s thesis. Built on a mixed-media approach — a 3D animated avatar of the artist (designed and animated in Blender) collides with raw footage shot at night in Poznań on an iPhone. The aesthetic draws on grime and the theme of urban surveillance, referencing early Gorillaz music videos. The entire process — from character modelling and rigging, through motion tracking, to compositing in After Effects and colour grading in DaVinci Resolve — was carried out independently.'
},
tags: ['3D Animation', 'Music Video', 'Blender'],
mediaType: 'gallery',
gallery: [
{ type: 'vimeo', vimeoId: '1199152904' }, // teledysk
{ type: 'image', src: 'images/work-01-storyboard.jpg' }, // szkice storyboardu
{ type: 'image', src: 'images/work-01-concept-sketch.jpg' }, // szkic koncepcyjny awatara
{ type: 'image', src: 'images/work-01-model-compare.jpg' }, // wczesna wersja modelu vs finalna
{ type: 'image', src: 'images/work-01-rig.jpg' }, // rig postaci (Rigify) + render sceny
{ type: 'image', src: 'images/work-01-grading.jpg' } // przed/po korekcji barwnej
],
thumb: 'images/work-01.jpg' // cover image shown on the homepage grid
},
{
id: 'work-02', n: '02', group: 'work',
title: 'OdkrywAI',
description: {
pl: 'Identyfikacja wizualna kampanii społecznej OdkrywAI, promującej inteligentne ortezy wspierające osoby z niepełnosprawnościami ruchowymi. Logo łączy sylwetkę człowieka w ruchu z literami nazwy. Identyfikacja obejmowała również oprawę graficzną towarzyszącego maratonu. Projekt zrealizowano w postaci pełnego systemu nośników: billboardu, plakatu przystankowego oraz materiałów motion — animacji sygnetu marki i spotu promującego szalik eventowy.',
en: 'Visual identity for the OdkrywAI social campaign, promoting smart orthoses that support people with mobility disabilities. The logo combines a human figure in motion with the letters of the name. The identity also covered the graphic design of the accompanying marathon. The project was delivered as a full media system: a billboard, a bus-stop poster, and motion materials — a brand-mark animation and a promotional spot for the event scarf.'
},
tags: ['Visual Identity', 'Campaign', 'Print'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/work-02-billboard.jpg' }, // billboard mockup — slajd 1
{ type: 'image', src: 'images/work-02-zdj.png' }, // szalik — zbliżenia z boku
{ type: 'image', src: 'images/work-02-poster-car.jpg' }, // plakat na szybie samochodu
{ type: 'video', src: 'media/work-02-sygnet-anim.mp4' }, // animacja sygnetu (Behance render)
{ type: 'video', src: 'media/work-02-reklama-szalik.mp4' } // reklama szalika
],
thumb: 'images/work-02-billboard.jpg' // ta sama grafika jako okładka na stronie głównej
},
{
id: 'work-03', n: '03', group: 'work',
title: 'Bittersweet Festival',
description: {
pl: 'Krótki spot animowany promujący festiwal Bittersweet, prezentujący trzech headlinerów — projekt powstały na styku języka wizualnego festiwalu i autorskiej estetyki, łączący spójną tożsamość marki z własnym podejściem do ruchu i kompozycji. Projekt uzupełnia seria trzech plakatów dedykowanych poszczególnym wykonawcom (oparta na częściowo fikcyjnym lineupie), utrzymana w tej samej kolorystyce i języku wizualnym festiwalu.',
en: 'A short animated spot promoting the Bittersweet festival, featuring three headliners — a project built at the intersection of the festival\'s visual language and an original aesthetic, combining a coherent brand identity with a personal approach to motion and composition. The project is complemented by a series of three posters dedicated to individual performers (based on a partly fictional line-up), kept in the same colour palette and visual language as the festival.'
},
tags: ['Motion Graphics', 'Poster Design', 'Event Identity'],
mediaType: 'gallery',
gallery: [
{ type: 'video', src: 'media/work-03-concept-anim.mp4' }, // animacja koncepcyjna
{ type: 'image', src: 'images/work-03-posters.jpg' }, // 3 plakaty (Gorillaz / Radiohead / 21 Pilots)
{ type: 'video', src: 'media/work-03-comp1.mp4' } // druga animacja
],
thumb: 'images/work-03-billboard.jpg' // okładka na stronie głównej
},
// ============= ARCHIVE CAROUSEL =============
{
id: 'arc-01', n: '01', group: 'archive',
title: 'I Lied — Poster Series',
description: {
pl: 'Seria trzech plakatów będących komentarzem do polityki Donalda Trumpa i zjawiska politycznego kłamstwa. Plakaty mają skłaniać do refleksji nad rozbieżnością między słowami a czynami — i nad tym, komu można ufać w przestrzeni publicznej. Jeden z plakatów z serii był prezentowany na wystawie Paste Up Warsaw w Warszawie.',
en: 'A series of three posters commenting on Donald Trump\'s politics and the phenomenon of political lying. The posters are meant to prompt reflection on the gap between words and actions — and on who can be trusted in public space. One poster from the series was exhibited at Paste Up Warsaw in Warsaw.'
},
tags: ['Poster Design'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/arc-01-seria.png' }, // wszystkie trzy plakaty razem
{ type: 'image', src: 'images/arc-01-plakat-3.png' }, // "I will not do anything bad ever again"
{ type: 'image', src: 'images/arc-01-wystawa.png' }, // zdjęcie z wystawy Paste Up Warsaw
{ type: 'image', src: 'images/arc-01-plakat-2.png' }, // sylwetka na tle flagi
{ type: 'image', src: 'images/arc-01-plakat-1.png' } // "I LIED"
],
thumb: 'images/arc-01-seria.png'
},
{
id: 'arc-02', n: '02', group: 'archive',
title: 'Album Cover Series',
description: {
pl: 'Seria autorskich projektów okładek albumowych inspirowanych twórczością artystów muzycznych, którymi się interesuję. Każda okładka powstawała jako niezależna interpretacja estetyki i charakteru danego artysty — bez zlecenia, z własnej inicjatywy.',
en: 'A series of original album cover designs inspired by the work of musicians the author is interested in. Each cover was created as an independent interpretation of a given artist\'s aesthetic and character — unsolicited, entirely self-initiated.'
},
tags: ['Album Art'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/arc-02-seria.png' }, // wszystkie 8 okładek razem
{ type: 'video', src: 'media/arc-02-scianka.mp4' }, // ścianka z okładkami
{ type: 'image', src: 'images/arc-02-osobne-1.png' }, // 0PM BABI / Chmury / Stine Season / LILBOY
{ type: 'image', src: 'images/arc-02-osobne-2.png' } // More Chaos / [55] / Immortels / allsummalong
],
thumb: 'images/arc-02-seria.png'
},
{
id: 'arc-03', n: '03', group: 'archive',
title: 'Lord Apex — Promo Materials',
description: {
pl: 'Materiały promocyjne (plakat trasy koncertowej, zaproszenie) zaprojektowane dla brytyjskiego rapera Lorda Apex — projekt własny, niezależny od artysty, zrealizowany częściowo w ramach zajęć na studiach.',
en: 'Promotional materials (a tour poster, an invitation) designed for the British rapper Lord Apex — a personal project, independent of the artist, partly carried out as part of university coursework.'
},
tags: ['Identity'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/arc-03-sesja2.jpg' }, // sesja zdjęciowa (4 ujęcia, bez podpisów)
{ type: 'image', src: 'images/arc-03-promo.jpg' } // plakat trasy + zaproszenie na koncert
],
thumb: 'images/arc-03-sesja2.jpg'
},
{
id: 'arc-04', n: '04', group: 'archive',
title: 'NoFear — Website Redesign',
description: {
pl: 'Projekt interfejsu strony zakupowej dla marki NoFear — koncepcyjne odświeżenie istniejącej witryny z zachowaniem oryginalnego języka wizualnego marki. Projekt zrealizowany w ramach zajęć akademickich.',
en: 'Interface design for the NoFear e-commerce website — a conceptual refresh of the existing site while preserving the brand\'s original visual language. Project carried out as part of university coursework.'
},
tags: ['UI/UX'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/arc-04-laptop.jpg' }, // widok na laptopie (okładka)
{ type: 'video', src: 'media/arc-04-demo-1.mp4' }, // demo interakcji 1
{ type: 'video', src: 'media/arc-04-demo-2.mp4' } // demo interakcji 2
],
thumb: 'images/arc-04-laptop.jpg'
},
{
id: 'arc-05', n: '05', group: 'archive',
title: 'Gr.up Uken — Poster Series',
description: {
pl: 'Trzy plakaty zrealizowane w ramach konkursu Gr.up\'a Uken, w którym każdy uczestnik miał jeden dzień na wykonanie projektu do wybranego tematu. Jeden z plakatów z serii był prezentowany na wystawie Paste Up Warsaw w Krakowie.',
en: 'Three posters produced for the Gr.up Uken competition, in which each participant had one day to complete a project on a chosen theme. One poster from the series was exhibited at Paste Up Warsaw in Kraków.'
},
tags: ['Poster Design'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/arc-05-plakaty.jpg' } // cudaki / inny nie obcy / łamiszczęka
],
thumb: 'images/arc-05-plakaty.jpg'
},
{
id: 'arc-09', n: '06', group: 'archive',
title: 'Excellent Expo — Website Showcase',
description: {
pl: 'Animacja typu showcase zrealizowana na zlecenie klienta (freelance), prezentująca odświeżoną stronę internetową firmy Excellent Expo.',
en: 'A showcase animation produced for a client (freelance), presenting the redesigned website of Excellent Expo.'
},
tags: ['Motion Graphics'],
mediaType: 'gallery',
gallery: [
{ type: 'video', src: 'media/arc-09-excellent-expo.mp4', poster: 'images/arc-09-cover.jpg' }
],
thumb: 'images/arc-09-cover.jpg' // klatka z logiem "Excellent Expo"
},
{
id: 'arc-06', n: '07', group: 'archive',
title: 'Study2Go — Brand Identity',
description: {
pl: 'Identyfikacja wizualna marki Study2Go — aplikacji edukacyjnej skierowanej do studentów i uczniów potrzebujących prostego i mobilnego rozwiązania do nauki. Projekt utrzymany w minimalistycznym wzornictwie, podkreślającym wartości marki: ruch, mobilność i efektywność.',
en: 'Visual identity for the Study2Go brand — an educational app aimed at students who need a simple, mobile-friendly way to study. The project follows a minimalist design language that emphasises the brand\'s values: movement, mobility and efficiency.'
},
tags: ['Identity'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/arc-06-cover.jpg' }, // księga znaku — strona tytułowa
{ type: 'image', src: 'images/arc-06-siatka.png' } // znak graficzny, warianty, siatka konstrukcyjna
],
thumb: 'images/arc-06-cover.jpg'
},
{
id: 'arc-07', n: '08', group: 'archive',
title: 'SMUK',
description: {
pl: 'Animacja postaci 2D — krótki loop przedstawiający postać o imieniu SMUK, zrealizowany w Adobe After Effects przy użyciu pluginu DUIK Angela, z zastosowaniem techniki paralaksy. Na bazie animacji stworzono również brand hero wykorzystany w ekranach aplikacji mobilnej. SMUK jest zawsze gotów stawić czoła codziennym wyzwaniom — jego długie ręce sprawdzają się w niespodziewanych sytuacjach, pomagając wszystkim dookoła, a sama postać udowadnia, że nawet w trudnych chwilach warto zachować lekkość i radość życia. Inspiracją były surrealistyczne światy znane z animacji "Potwory i Spółka" oraz "Adventure Time".',
en: 'A 2D character animation — a short loop featuring a character named SMUK, created in Adobe After Effects using the DUIK Angela plugin, with a parallax technique. The animation was also developed into a brand hero used across mobile app screens. SMUK is always ready to face everyday challenges — his long arms come in handy in unexpected situations, helping everyone around him, and the character proves that even in tough moments it\'s worth keeping things light and joyful. The inspiration came from the surreal worlds of "Monsters, Inc." and "Adventure Time".'
},
tags: ['2D Animation'],
mediaType: 'gallery',
gallery: [
{ type: 'video', src: 'media/arc-07-demo.mp4', poster: 'images/arc-07-video-poster.jpg' }, // 1. animacja
{ type: 'image', src: 'images/arc-07-poses.png' }, // 2. SMUK — 3 kadry
{ type: 'image', src: 'images/arc-07-app-screens.jpg' }, // 3. ekrany aplikacji
{ type: 'image', src: 'images/arc-07-szkice.jpg' }, // 4. szkice koncepcyjne
{ type: 'image', src: 'images/arc-07-colors.jpg' }, // 5. warianty kolorystyczne postaci
{ type: 'image', src: 'media/arc-07-expr-ciekawy.gif' }, // 6. ekspresja — zaciekawiony
{ type: 'image', src: 'media/arc-07-expr-spokojny.gif' }, // ekspresja — spokojny
{ type: 'image', src: 'media/arc-07-expr-box.gif' } // ekspresja — zaskoczony (pudełko na głowie)
],
thumb: 'images/arc-07-cover.jpg' // duży napis "SMUK" + postać
},
{
id: 'arc-08', n: '09', group: 'archive',
title: 'Spider-Man — Title Sequence',
description: {
pl: 'Autorski title sequence inspirowany filmem "Spider-Man: Across the Spider-Verse" — animacja prezentująca postacie i obsadę w stylu nawiązującym do estetyki produkcji. Projekt zrealizowany jako praca zaliczeniowa na przedmiocie "Animacja Graficzna", w całości w Adobe After Effects.',
en: 'An original title sequence inspired by "Spider-Man: Across the Spider-Verse" — an animation presenting the characters and cast in a style referencing the film\'s aesthetic. Project completed as a coursework assignment for "Graphic Animation," made entirely in Adobe After Effects.'
},
tags: ['Motion Graphics'],
mediaType: 'gallery',
gallery: [
{ type: 'image', src: 'images/arc-08-cover.png' }, // sygnet pająka
{ type: 'video', src: 'media/arc-08-title-sequence.mp4' } // sekwencja tytułowa
],
thumb: 'images/arc-08-cover.png'
}
];
const WORKS = PROJECTS_DATA.filter((p) => p.group === 'work');
const ARCHIVE = PROJECTS_DATA.filter((p) => p.group === 'archive');
/* ---- scroll-reveal: robust rAF/scroll check (IntersectionObserver is unreliable
inside sandboxed preview iframes — its callbacks may never fire). ---- */
const revealNodes = new Set();
function registerReveal(root) {
if (!root) return;
root.querySelectorAll('.reveal, .line-mask').forEach((n) => revealNodes.add(n));
checkReveals();
}
function checkReveals() {
const trigger = window.innerHeight * 0.9;
revealNodes.forEach((n) => {
if (!n.isConnected) {revealNodes.delete(n);return;}
const r = n.getBoundingClientRect();
if (r.top < trigger && r.bottom > 0) {n.classList.add('in');revealNodes.delete(n);}
});
}
(function revealLoop() {
let ticking = false;
const onScroll = () => {if (!ticking) {ticking = true;requestAnimationFrame(() => {checkReveals();ticking = false;});}};
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
setInterval(checkReveals, 250);
})();
function useReveal() {
const ref = useRef(null);
useEffect(() => {
registerReveal(ref.current);
// a couple of delayed passes catch fonts/layout settling
const a = setTimeout(checkReveals, 60),b = setTimeout(checkReveals, 400);
return () => {clearTimeout(a);clearTimeout(b);};
}, []);
return ref;
}
/* ---- parallax: shifts inner .par by element position ---- */
const parallaxNodes = [];
function registerParallax(node, strength) {if (node && !parallaxNodes.some((p) => p.node === node)) parallaxNodes.push({ node, strength });}
(function parallaxLoop() {
let ticking = false;
function update() {
const vh = window.innerHeight;
for (const { node, strength } of parallaxNodes) {
if (!node.isConnected) continue;
const par = node.querySelector('.par');if (!par) continue;
const r = node.getBoundingClientRect();
if (r.bottom < -200 || r.top > vh + 200) continue;
const off = (r.top + r.height / 2 - vh / 2) / vh;
par.style.transform = `translate3d(0, ${(-off * strength).toFixed(1)}px, 0)`;
}
ticking = false;
}
const onScroll = () => {if (!ticking) {ticking = true;requestAnimationFrame(update);}};
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
setInterval(update, 400); // catches newly-mounted nodes
})();
function Tags({ items }) {
return
{items.map((t) => {t})}
;
}
/* big display line that slide-reveals from a mask */
function MaskLine({ children, className = '', style }) {
return {children};
}
/* ---------------------------------- NAV ---------------------------------- */
function Nav({ lang, setLang, t }) {
return (
);
}
/* ---------------------------------- HERO ---------------------------------- */
function Hero({ t }) {
const ref = useReveal();
return (
;
})()}
{data.gallery.length > 1 &&
:
}
{!data.mediaUrl && data.mediaType !== 'vimeo' && data.mediaType !== 'gallery' &&
{data.mediaType === 'video' && }
{m.media} · {data.mediaType === 'video' ? 'VIDEO' : 'IMAGE'}
}