الصفحات صعب
Photography Portfolio — Dark Film
Dark film-aesthetic photography portfolio with warm black/gold palette, grain overlay, EB Garamond serif italic typography, masonry photo grid with parallax hover, and series list with staggered reveals.
فتح في المختبر
MCP
gsap scrolltrigger lenis eb-garamond geist-mono
الأهداف: JS HTML
الكود
/* ── Demo 48: Photography Portfolio — Dark Film ── */
/* Palette: Deep Black / Warm Off-White / Muted Gold / Grain Texture */
/* Fonts: EB Garamond (serif italic display) + Geist Mono (metadata/labels) */
:root {
--black: #0c0b09;
--dark: #111009;
--panel: #1a1812;
--border: #2c2820;
--text: #e8e3d8;
--warm: #d4c9b4;
--muted: #8a8070;
--faint: #3a342a;
--gold: #c8a96e;
--gold-dim: #8a7045;
--sepia: #a89060;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "EB Garamond", Georgia, serif;
background: var(--black);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ── Grain overlay ── */
.grain {
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size: 256px 256px;
background-repeat: repeat;
mix-blend-mode: overlay;
}
/* ── Navigation ── */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 3rem;
background: transparent;
transition: background 0.5s ease, border-bottom 0.5s ease;
}
.nav.scrolled {
background: rgba(12, 11, 9, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.nav-logo {
font-family: "EB Garamond", serif;
font-size: 1.05rem;
font-weight: 400;
font-style: italic;
color: var(--text);
text-decoration: none;
letter-spacing: 0.02em;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-family: "Geist Mono", monospace;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--muted);
text-decoration: none;
text-transform: uppercase;
transition: color 0.25s;
}
.nav-links a:hover {
color: var(--warm);
}
.nav-book {
font-family: "Geist Mono", monospace;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid var(--gold-dim);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.nav-book:hover {
color: var(--warm);
border-color: var(--warm);
}
/* ── Section label ── */
.section-label {
font-family: "Geist Mono", monospace;
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 0.75rem;
}
/* ── Hero ── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 5rem 3rem 4rem;
overflow: hidden;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
flex: 1;
padding-top: 2rem;
}
.hero-eyebrow {
font-family: "Geist Mono", monospace;
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 2rem;
}
.hero-h1 {
font-family: "EB Garamond", serif;
font-size: clamp(3rem, 6vw, 5.5rem);
font-weight: 400;
line-height: 1.2;
color: var(--text);
}
.hero-h1 em {
font-style: italic;
color: var(--gold);
}
/* Hero featured image */
.hero-featured {
position: relative;
}
.hf-img--main {
width: 100%;
aspect-ratio: 3 / 4;
background: linear-gradient(180deg, #2a2318 0%, #1a160e 30%, #121008 60%, #0e0c07 100%);
/* Simulate a film photograph — warm dark composition */
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
position: relative;
}
.hf-img--main::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 60% 25%, rgba(200, 169, 110, 0.08) 0%, transparent 55%),
radial-gradient(ellipse at 20% 80%, rgba(80, 60, 30, 0.2) 0%, transparent 40%);
}
.hf-caption {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.75rem;
}
.hf-title {
font-family: "Geist Mono", monospace;
font-size: 0.68rem;
color: var(--muted);
letter-spacing: 0.08em;
}
.hf-series {
font-family: "EB Garamond", serif;
font-size: 0.85rem;
font-style: italic;
color: var(--gold);
}
/* Scroll hint */
.hero-scroll-hint {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 3rem;
}
.hero-scroll-hint span {
font-family: "Geist Mono", monospace;
font-size: 0.62rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.scroll-line {
width: 60px;
height: 1px;
background: var(--border);
position: relative;
overflow: hidden;
}
.scroll-line::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 1px;
background: var(--gold);
animation: scroll-hint 2s ease-in-out infinite;
}
@keyframes scroll-hint {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* ── Work Section / Masonry ── */
.work-section {
padding: 5rem 3rem;
border-top: 1px solid var(--border);
}
.work-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2.5rem;
}
.work-header .section-label {
margin-bottom: 0;
}
.work-year {
font-family: "Geist Mono", monospace;
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.1em;
}
.masonry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
background: var(--border);
}
.photo-item {
background: var(--black);
overflow: hidden;
cursor: pointer;
position: relative;
}
.photo-item--tall {
grid-row: span 2;
}
.photo-item--wide {
grid-column: span 2;
}
.pi-img {
width: 100%;
height: 100%;
min-height: 280px;
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.photo-item--tall .pi-img {
min-height: 580px;
}
.photo-item--wide .pi-img {
min-height: 280px;
}
.photo-item:hover .pi-img {
transform: scale(1.04);
}
/* Film-like gradients for each photo */
.pi-img--1 {
background: linear-gradient(160deg, #1c1710 0%, #0e0c08 50%, #16130d 100%);
}
.pi-img--2 {
background: linear-gradient(200deg, #1a1e1c 0%, #0c1010 50%, #141812 100%);
}
.pi-img--3 {
background: linear-gradient(140deg, #1e1b14 0%, #130f08 50%, #1a1710 100%);
}
.pi-img--4 {
background: linear-gradient(180deg, #181614 0%, #0f0d0a 50%, #1c1a16 100%);
}
.pi-img--5 {
background: linear-gradient(150deg, #141210 0%, #0c0b08 50%, #18160e 100%);
}
.pi-img--6 {
background: linear-gradient(170deg, #1a1814 0%, #0e0c09 50%, #161410 100%);
}
.pi-img--7 {
background: linear-gradient(190deg, #1c1a16 0%, #110f0b 50%, #1a1810 100%);
}
/* Light simulation on images */
.pi-img--1::after,
.pi-img--3::after,
.pi-img--6::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 35% 30%, rgba(200, 169, 110, 0.06) 0%, transparent 50%);
pointer-events: none;
}
.pi-img--2::after,
.pi-img--5::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 70% 60%, rgba(200, 169, 110, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.pi-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem 1.25rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
display: flex;
align-items: flex-end;
gap: 0.75rem;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.photo-item:hover .pi-caption {
opacity: 1;
transform: translateY(0);
}
.pi-num {
font-family: "Geist Mono", monospace;
font-size: 0.6rem;
color: var(--gold);
letter-spacing: 0.05em;
flex-shrink: 0;
}
.pi-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pi-info strong {
font-family: "EB Garamond", serif;
font-size: 0.9rem;
font-weight: 400;
color: var(--warm);
}
.pi-info span {
font-family: "Geist Mono", monospace;
font-size: 0.62rem;
color: var(--muted);
letter-spacing: 0.06em;
}
/* ── Series Section ── */
.series-section {
padding: 5rem 3rem;
border-top: 1px solid var(--border);
}
.series-header {
margin-bottom: 3rem;
}
.series-h2 {
font-family: "EB Garamond", serif;
font-size: clamp(2.2rem, 4vw, 3.5rem);
font-weight: 400;
line-height: 1.2;
color: var(--text);
}
.series-h2 em {
font-style: italic;
color: var(--gold);
}
.series-list {
display: flex;
flex-direction: column;
}
.series-item {
display: grid;
grid-template-columns: 80px 1fr auto 120px;
align-items: center;
gap: 2rem;
padding: 2.5rem 0;
border-bottom: 1px solid var(--border);
transition: background 0.3s;
}
.series-item:first-child {
border-top: 1px solid var(--border);
}
.si-number {
font-family: "EB Garamond", serif;
font-size: 3rem;
font-weight: 400;
font-style: italic;
color: var(--faint);
line-height: 1;
}
.si-content h3 {
font-family: "EB Garamond", serif;
font-size: 1.5rem;
font-weight: 400;
color: var(--text);
margin-bottom: 0.6rem;
}
.si-content p {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.75;
max-width: 400px;
margin-bottom: 0.75rem;
}
.si-meta {
display: flex;
gap: 1.5rem;
font-family: "Geist Mono", monospace;
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.06em;
}
.si-preview {
display: flex;
gap: 4px;
}
.si-img {
width: 50px;
height: 70px;
flex-shrink: 0;
}
/* Series preview images */
.si-img--1 {
background: linear-gradient(160deg, #1c1710, #0e0c08);
}
.si-img--2 {
background: linear-gradient(180deg, #181614, #120f0a);
}
.si-img--3 {
background: linear-gradient(140deg, #1e1b14, #130f08);
}
.si-img--4 {
background: linear-gradient(170deg, #1a1812, #0c0b08);
}
.si-img--5 {
background: linear-gradient(150deg, #161410, #0e0c09);
}
.si-img--6 {
background: linear-gradient(190deg, #1c1a16, #110f0b);
}
.si-img--7 {
background: linear-gradient(160deg, #18160e, #0f0e0a);
}
.si-img--8 {
background: linear-gradient(175deg, #1a1914, #141209);
}
.si-img--9 {
background: linear-gradient(145deg, #1c1b16, #100e0a);
}
.si-link {
font-family: "Geist Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.1em;
color: var(--gold);
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
border-bottom: 1px solid var(--gold-dim);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.si-link:hover {
color: var(--warm);
border-color: var(--warm);
}
/* ── Info / About ── */
.info-section {
padding: 5rem 3rem;
border-top: 1px solid var(--border);
}
.info-inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 5rem;
margin-bottom: 4rem;
}
.info-h2 {
font-family: "EB Garamond", serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 400;
line-height: 1.2;
color: var(--text);
}
.info-h2 em {
font-style: italic;
color: var(--gold);
}
.info-bio {
font-size: 1rem;
color: var(--warm);
line-height: 1.85;
margin-bottom: 1.2rem;
max-width: 560px;
}
.info-stats {
display: flex;
gap: 3rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.is-item {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.is-num {
font-family: "EB Garamond", serif;
font-size: 2.5rem;
font-weight: 400;
color: var(--gold);
line-height: 1;
}
.is-label {
font-family: "Geist Mono", monospace;
font-size: 0.65rem;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Info portrait */
.info-portrait {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.75rem;
}
.ip-img {
width: 280px;
height: 380px;
background: linear-gradient(160deg, #1c1812 0%, #0e0c08 50%, #181410 100%);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ip-caption {
font-family: "Geist Mono", monospace;
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.08em;
}
/* ── Contact ── */
.contact-section {
padding: 5rem 3rem;
border-top: 1px solid var(--border);
background: var(--dark);
}
.contact-inner {
max-width: 900px;
}
.contact-h2 {
font-family: "EB Garamond", serif;
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 400;
line-height: 1.15;
color: var(--text);
margin-bottom: 3.5rem;
}
.contact-h2 em {
font-style: italic;
color: var(--gold);
}
.contact-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.contact-links {
display: flex;
flex-direction: column;
gap: 0;
}
.cl-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1.2rem 0;
border-bottom: 1px solid var(--border);
text-decoration: none;
transition: color 0.2s;
}
.cl-item:first-child {
border-top: 1px solid var(--border);
}
.cl-label {
font-family: "Geist Mono", monospace;
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
}
.cl-value {
font-family: "EB Garamond", serif;
font-size: 1.05rem;
color: var(--warm);
transition: color 0.2s;
}
.cl-item:hover .cl-value {
color: var(--gold);
}
.contact-availability {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.ca-status {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: "Geist Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
}
.ca-dot {
width: 7px;
height: 7px;
background: var(--gold);
border-radius: 50%;
animation: pulse-gold 2s ease-in-out infinite;
}
@keyframes pulse-gold {
0%,
100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(200, 169, 110, 0.4);
}
50% {
opacity: 0.7;
box-shadow: 0 0 0 4px rgba(200, 169, 110, 0);
}
}
.contact-availability p {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.8;
}
.btn-film {
display: inline-block;
padding: 0.85rem 2rem;
border: 1px solid var(--gold-dim);
background: transparent;
color: var(--gold);
font-family: "Geist Mono", monospace;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
align-self: flex-start;
}
.btn-film:hover {
background: var(--gold);
color: var(--black);
border-color: var(--gold);
}
/* ── Footer ── */
.footer {
padding: 1.5rem 3rem;
background: var(--black);
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer span {
font-family: "Geist Mono", monospace;
font-size: 0.62rem;
letter-spacing: 0.1em;
color: var(--muted);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.hero-inner {
grid-template-columns: 1fr;
}
.hf-img--main {
aspect-ratio: 16 / 9;
}
.series-item {
grid-template-columns: 60px 1fr 100px;
}
.si-link {
display: none;
}
.info-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.info-portrait {
align-items: flex-start;
}
.contact-body {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nav {
padding: 1.25rem 1.5rem;
}
.nav-links {
display: none;
}
.hero,
.work-section,
.series-section,
.info-section,
.contact-section {
padding: 4rem 1.5rem;
}
.masonry-grid {
grid-template-columns: 1fr 1fr;
}
.photo-item--tall,
.photo-item--wide {
grid-column: auto;
grid-row: auto;
}
.series-item {
grid-template-columns: 1fr;
}
.si-number,
.si-preview {
display: none;
}
.info-portrait {
display: none;
}
.footer {
padding: 1.5rem;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}
/* ── Reduced Motion ── */
html.reduced-motion .scroll-line::after,
html.reduced-motion .ca-dot {
animation: none !important;
}
html.reduced-motion .photo-item:hover .pi-img {
transform: none !important;
}
html.reduced-motion .photo-item:hover .pi-caption {
opacity: 1;
transform: none;
}
html.reduced-motion * {
transition-duration: 0.01ms !important;
}if (!window.MotionPreference) {
const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
const __listeners = new Set();
const MotionPreference = {
prefersReducedMotion() {
return __mql.matches;
},
setOverride(value) {
const reduced = Boolean(value);
document.documentElement.classList.toggle("reduced-motion", reduced);
window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
for (const listener of __listeners) {
try {
listener({ reduced, override: reduced, systemReduced: __mql.matches });
} catch {}
}
},
onChange(listener) {
__listeners.add(listener);
try {
listener({
reduced: __mql.matches,
override: null,
systemReduced: __mql.matches,
});
} catch {}
return () => __listeners.delete(listener);
},
getState() {
return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
},
};
window.MotionPreference = MotionPreference;
}
function prefersReducedMotion() {
return window.MotionPreference.prefersReducedMotion();
}
function initDemoShell() {
// No-op shim in imported standalone snippets.
}
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger);
initDemoShell({
title: "Photography Portfolio — Dark Film",
category: "pages",
tech: ["gsap", "scroll-trigger", "lenis", "eb-garamond", "geist-mono"],
});
const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");
// ── Lenis smooth scroll ───────────────────────────────────────────────────────
const lenis = new Lenis({ lerp: 0.075, smoothWheel: true });
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);
// ── Nav scroll state ──────────────────────────────────────────────────────────
const nav = document.getElementById("nav");
ScrollTrigger.create({
start: "top -80px",
onUpdate: (self) => {
nav.classList.toggle("scrolled", self.scroll() > 80);
},
});
// ── Hero entrance ─────────────────────────────────────────────────────────────
if (!reduced) {
// Staggered entrance — calm and deliberate, like a photograph developing
gsap.set(".hero-eyebrow", { opacity: 0 });
gsap.set(".hero-h1", { opacity: 0, y: 20 });
gsap.set(".hf-img--main", { opacity: 0, scale: 1.03 });
gsap.set(".hf-caption", { opacity: 0 });
gsap.set(".hero-scroll-hint", { opacity: 0 });
gsap
.timeline({ delay: 0.5, defaults: { ease: "power2.out" } })
.to(".hero-eyebrow", { opacity: 1, duration: 1 })
.to(".hero-h1", { opacity: 1, y: 0, duration: 1.4, ease: "expo.out" }, "-=0.5")
.to(".hf-img--main", { opacity: 1, scale: 1, duration: 1.6 }, "-=1")
.to(".hf-caption", { opacity: 1, duration: 0.8 }, "-=0.4")
.to(".hero-scroll-hint", { opacity: 1, duration: 0.8 }, "-=0.3");
}
// ── Photo grid — staggered reveal ─────────────────────────────────────────────
document.querySelectorAll(".photo-item").forEach((item, i) => {
if (!reduced) {
gsap.set(item, { opacity: 0 });
gsap.to(item, {
opacity: 1,
duration: 1.2,
ease: "power1.out",
delay: (i % 3) * 0.15,
scrollTrigger: {
trigger: item,
start: "top 85%",
toggleActions: "play none none none",
},
});
}
});
// ── Parallax on masonry images ────────────────────────────────────────────────
if (!reduced) {
document.querySelectorAll(".pi-img").forEach((img, i) => {
const speed = 0.05 + (i % 3) * 0.02;
gsap.to(img, {
yPercent: -8 * speed * 10,
ease: "none",
scrollTrigger: {
trigger: img.closest(".photo-item"),
start: "top bottom",
end: "bottom top",
scrub: 1.5,
},
});
});
}
// ── Series items reveal ───────────────────────────────────────────────────────
document.querySelectorAll(".series-item").forEach((item, i) => {
if (!reduced) {
gsap.set(item, { opacity: 0, x: -15 });
gsap.to(item, {
opacity: 1,
x: 0,
duration: 1,
ease: "expo.out",
delay: i * 0.12,
scrollTrigger: {
trigger: ".series-list",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
// Reveal preview images staggered
const imgs = item.querySelectorAll(".si-img");
gsap.set(imgs, { opacity: 0, y: 10 });
gsap.to(imgs, {
opacity: 1,
y: 0,
duration: 0.6,
stagger: 0.08,
ease: "power2.out",
delay: 0.4 + i * 0.12,
scrollTrigger: {
trigger: ".series-list",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
}
});
// ── Italic number animation on series ────────────────────────────────────────
if (!reduced) {
document.querySelectorAll(".si-number").forEach((num) => {
num.addEventListener("mouseenter", () => {
gsap.to(num, { color: "rgba(200, 169, 110, 0.4)", duration: 0.4, ease: "power2.out" });
});
num.addEventListener("mouseleave", () => {
gsap.to(num, { color: "rgba(58, 52, 42, 1)", duration: 0.4, ease: "power2.out" });
});
});
}
// ── Info section reveal ───────────────────────────────────────────────────────
if (!reduced) {
gsap.set(".info-h2", { opacity: 0, y: 25 });
gsap.to(".info-h2", {
opacity: 1,
y: 0,
duration: 1.2,
ease: "expo.out",
scrollTrigger: {
trigger: ".info-section",
start: "top 70%",
toggleActions: "play none none reverse",
},
});
gsap.set(".info-bio", { opacity: 0, y: 18 });
gsap.to(".info-bio", {
opacity: 1,
y: 0,
duration: 1,
stagger: 0.15,
ease: "expo.out",
delay: 0.2,
scrollTrigger: {
trigger: ".info-right",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
// Stats count up
document.querySelectorAll(".is-num").forEach((el) => {
const text = el.textContent.trim();
const hasPlus = text.includes("+");
const target = parseFloat(text);
ScrollTrigger.create({
trigger: ".info-stats",
start: "top 80%",
end: "top 35%",
onUpdate: (self) => {
const val = Math.round(target * self.progress);
el.textContent = val + (hasPlus ? "+" : "");
},
});
});
// Portrait fade in
gsap.set(".ip-img", { opacity: 0, scale: 1.02 });
gsap.to(".ip-img", {
opacity: 1,
scale: 1,
duration: 1.4,
ease: "power2.out",
scrollTrigger: {
trigger: ".info-portrait",
start: "top 80%",
toggleActions: "play none none reverse",
},
});
}
// ── Contact section reveal ────────────────────────────────────────────────────
if (!reduced) {
gsap.set(".contact-h2", { opacity: 0, y: 30 });
gsap.to(".contact-h2", {
opacity: 1,
y: 0,
duration: 1.2,
ease: "expo.out",
scrollTrigger: {
trigger: ".contact-section",
start: "top 70%",
toggleActions: "play none none reverse",
},
});
gsap.set(".cl-item", { opacity: 0, y: 12 });
gsap.to(".cl-item", {
opacity: 1,
y: 0,
duration: 0.8,
stagger: 0.1,
ease: "expo.out",
delay: 0.2,
scrollTrigger: {
trigger: ".contact-body",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
gsap.set(".contact-availability > *", { opacity: 0, y: 12 });
gsap.to(".contact-availability > *", {
opacity: 1,
y: 0,
duration: 0.8,
stagger: 0.12,
ease: "expo.out",
delay: 0.35,
scrollTrigger: {
trigger: ".contact-body",
start: "top 75%",
toggleActions: "play none none reverse",
},
});
}
// ── Slow scroll‐driven parallax on hero image ─────────────────────────────────
if (!reduced) {
gsap.to(".hf-img--main", {
yPercent: -6,
ease: "none",
scrollTrigger: {
trigger: ".hero",
start: "top top",
end: "bottom top",
scrub: 2,
},
});
}
// ── Section label fade-in ─────────────────────────────────────────────────────
if (!reduced) {
document.querySelectorAll(".section-label").forEach((label) => {
gsap.set(label, { opacity: 0 });
gsap.to(label, {
opacity: 1,
duration: 1,
ease: "power1.out",
scrollTrigger: {
trigger: label,
start: "top 85%",
toggleActions: "play none none reverse",
},
});
});
}
// ── Motion preference toggle ──────────────────────────────────────────────────
window.addEventListener("motion-preference", (e) => {
if (e.detail.reduced) {
gsap.globalTimeline.paused(true);
} else {
gsap.globalTimeline.paused(false);
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elara Voss — Photography</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Geist+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script type="importmap">{"imports":{"gsap":"https://esm.sh/[email protected]","gsap/ScrollTrigger":"https://esm.sh/[email protected]/ScrollTrigger","gsap/SplitText":"https://esm.sh/[email protected]/SplitText","gsap/Flip":"https://esm.sh/[email protected]/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/[email protected]/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/[email protected]/TextPlugin","gsap/all":"https://esm.sh/[email protected]/all","gsap/":"https://esm.sh/[email protected]/","lenis":"https://esm.sh/[email protected]/dist/lenis.mjs","three":"https://esm.sh/[email protected]","three/addons/":"https://esm.sh/[email protected]/examples/jsm/"}}</script>
<style>html.lenis,
html.lenis body {
height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
pointer-events: none;
}
.lenis.lenis-autoToggle {
transition-property: overflow;
transition-duration: 1ms;
transition-behavior: allow-discrete;
}</style>
</head>
<body>
<!-- Grain texture overlay -->
<div class="grain" aria-hidden="true"></div>
<!-- Navigation -->
<nav class="nav" id="nav">
<a href="#" class="nav-logo">Elara Voss</a>
<ul class="nav-links">
<li><a href="#work">Work</a></li>
<li><a href="#series">Series</a></li>
<li><a href="#info">Info</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="nav-book">Book a Session</a>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-inner">
<div class="hero-text">
<div class="hero-eyebrow">Documentary · Portrait · Architecture</div>
<h1 class="hero-h1">
<em>Light </em>finds<br>
the truth in<br>
<em>stillness.</em>
</h1>
</div>
<div class="hero-featured" aria-hidden="true">
<div class="hf-img hf-img--main"></div>
<div class="hf-caption">
<span class="hf-title">Berlin, 2024</span>
<span class="hf-series">Concrete & Sky</span>
</div>
</div>
</div>
<div class="hero-scroll-hint">
<span>Scroll to explore</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- Work / Masonry Grid -->
<section class="work-section" id="work">
<div class="work-header">
<span class="section-label">Selected Work</span>
<div class="work-year">2020 — 2025</div>
</div>
<div class="masonry-grid">
<!-- Row 1 -->
<figure class="photo-item photo-item--tall" data-index="01">
<div class="pi-img pi-img--1"></div>
<figcaption class="pi-caption">
<span class="pi-num">01</span>
<div class="pi-info">
<strong>Morning Transit</strong>
<span>Tokyo, 2024</span>
</div>
</figcaption>
</figure>
<figure class="photo-item" data-index="02">
<div class="pi-img pi-img--2"></div>
<figcaption class="pi-caption">
<span class="pi-num">02</span>
<div class="pi-info">
<strong>Fog Study No. 3</strong>
<span>Iceland, 2023</span>
</div>
</figcaption>
</figure>
<figure class="photo-item" data-index="03">
<div class="pi-img pi-img--3"></div>
<figcaption class="pi-caption">
<span class="pi-num">03</span>
<div class="pi-info">
<strong>Interior Light</strong>
<span>Copenhagen, 2024</span>
</div>
</figcaption>
</figure>
<!-- Row 2 -->
<figure class="photo-item" data-index="04">
<div class="pi-img pi-img--4"></div>
<figcaption class="pi-caption">
<span class="pi-num">04</span>
<div class="pi-info">
<strong>Passage</strong>
<span>Paris, 2023</span>
</div>
</figcaption>
</figure>
<figure class="photo-item photo-item--wide" data-index="05">
<div class="pi-img pi-img--5"></div>
<figcaption class="pi-caption">
<span class="pi-num">05</span>
<div class="pi-info">
<strong>Dusk, East Quarter</strong>
<span>Berlin, 2024</span>
</div>
</figcaption>
</figure>
<!-- Row 3 -->
<figure class="photo-item photo-item--wide" data-index="06">
<div class="pi-img pi-img--6"></div>
<figcaption class="pi-caption">
<span class="pi-num">06</span>
<div class="pi-info">
<strong>The Architects</strong>
<span>Rotterdam, 2023</span>
</div>
</figcaption>
</figure>
<figure class="photo-item" data-index="07">
<div class="pi-img pi-img--7"></div>
<figcaption class="pi-caption">
<span class="pi-num">07</span>
<div class="pi-info">
<strong>Window Study</strong>
<span>Lisbon, 2024</span>
</div>
</figcaption>
</figure>
</div>
</section>
<!-- Series Section -->
<section class="series-section" id="series">
<div class="series-header">
<span class="section-label">Ongoing Series</span>
<h2 class="series-h2">Long-form <em>projects</em></h2>
</div>
<div class="series-list">
<div class="series-item" id="series-1">
<div class="si-number">01</div>
<div class="si-content">
<h3>Concrete & Sky</h3>
<p>Brutalist architecture photographed at the hour when artificial and natural light are indistinguishable.</p>
<div class="si-meta">
<span>32 images</span>
<span>2022 — ongoing</span>
</div>
</div>
<div class="si-preview">
<div class="si-img si-img--1"></div>
<div class="si-img si-img--2"></div>
<div class="si-img si-img--3"></div>
</div>
<a href="#" class="si-link">View Series →</a>
</div>
<div class="series-item" id="series-2">
<div class="si-number">02</div>
<div class="si-content">
<h3>Threshold</h3>
<p>Doorways, windows, and liminal spaces — moments of transition captured across six countries.</p>
<div class="si-meta">
<span>48 images</span>
<span>2021 — 2023</span>
</div>
</div>
<div class="si-preview">
<div class="si-img si-img--4"></div>
<div class="si-img si-img--5"></div>
<div class="si-img si-img--6"></div>
</div>
<a href="#" class="si-link">View Series →</a>
</div>
<div class="series-item" id="series-3">
<div class="si-number">03</div>
<div class="si-content">
<h3>Portraits in Available Light</h3>
<p>Intimate character studies shot exclusively with ambient light. No flash, no reflectors.</p>
<div class="si-meta">
<span>24 images</span>
<span>2023 — ongoing</span>
</div>
</div>
<div class="si-preview">
<div class="si-img si-img--7"></div>
<div class="si-img si-img--8"></div>
<div class="si-img si-img--9"></div>
</div>
<a href="#" class="si-link">View Series →</a>
</div>
</div>
</section>
<!-- Info / About -->
<section class="info-section" id="info">
<div class="info-inner">
<div class="info-left">
<span class="section-label">About</span>
<h2 class="info-h2">
<em>Quietly</em><br>
observant.
</h2>
</div>
<div class="info-right">
<p class="info-bio">Elara Voss is a documentary and architectural photographer based between Berlin and Tokyo. Her work explores the tension between built environments and the people who inhabit them.</p>
<p class="info-bio">Exhibited at the Foam Museum Amsterdam, Rencontres d'Arles, and the Tokyo Photographic Art Museum. Published in Aperture, Magnum Photos, and The Guardian Weekend Magazine.</p>
<div class="info-stats">
<div class="is-item">
<span class="is-num">14</span>
<span class="is-label">Years shooting</span>
</div>
<div class="is-item">
<span class="is-num">30+</span>
<span class="is-label">Exhibitions</span>
</div>
<div class="is-item">
<span class="is-num">8</span>
<span class="is-label">Published books</span>
</div>
</div>
</div>
</div>
<div class="info-portrait" aria-hidden="true">
<div class="ip-img"></div>
<div class="ip-caption">Berlin, 2024. Canon F-1 · Kodak Gold 200</div>
</div>
</section>
<!-- Contact -->
<section class="contact-section" id="contact">
<div class="contact-inner">
<h2 class="contact-h2">
Let's create<br>
<em>something real.</em>
</h2>
<div class="contact-body">
<div class="contact-links">
<a href="mailto:[email protected]" class="cl-item">
<span class="cl-label">Email</span>
<span class="cl-value">[email protected]</span>
</a>
<a href="#" class="cl-item">
<span class="cl-label">Instagram</span>
<span class="cl-value">@elaravoss</span>
</a>
<a href="#" class="cl-item">
<span class="cl-label">Represented by</span>
<span class="cl-value">Ostkreuz Agency</span>
</a>
</div>
<div class="contact-availability">
<div class="ca-status">
<span class="ca-dot"></span>
<span>Available for commissions</span>
</div>
<p>Currently booking for Q3–Q4 2025.<br>Commissions, editorial, and exhibition prints.</p>
<a href="mailto:[email protected]" class="btn-film">Send Enquiry</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<span>Elara Voss Photography</span>
<span>© 2025 · All rights reserved · Berlin / Tokyo</span>
</footer>
<script type="module" src="script.js"></script>
</body>
</html>Photography Portfolio — Dark Film
Dark film-aesthetic photography portfolio with warm black/gold palette, grain overlay, EB Garamond serif italic typography, masonry photo grid with parallax hover, and series list with staggered reveals.
Source
- Repository:
libs-genclaude - Original demo id:
48-photography-portfolio
Notes
Dark film-aesthetic photography portfolio with warm black/gold palette, grain overlay, EB Garamond serif italic typography, masonry photo grid with parallax hover, and series list with staggered reveals.