// app.jsx — main app, router, pages, grid
const { useState, useEffect, useMemo } = React;
// Map aspect setting to CSS aspect-ratio value
function aspectCss(aspect) {
if (aspect === '4-3') return '4 / 3';
if (aspect === '3-2') return '3 / 2';
if (aspect === '1-1') return '1 / 1';
return null; // native
}
// Mixed/masonry per-tile sizing
function mixedSpan(i) {
// rough pattern — produces a nice irregular rhythm
const patt = [[2,2],[1,1],[1,1],[2,1],[1,2],[1,1],[1,1],[1,1],[2,1],[1,1],[1,1],[1,1],[1,1],[2,2],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1]];
return patt[i % patt.length];
}
function Header({ page, navigate }) {
return (
);
}
function NavLink({ active, onClick, children }) {
return (
);
}
function ProjectTitles({ projects, activeId, setActiveId }) {
return (
{projects.map((p, i) => (
{i < projects.length - 1 && (
/
)}
))}
);
}
function Grid({ project, gridMode, aspect, captions, density, onOpen }) {
const photos = project.photos;
const ar = aspectCss(aspect);
if (gridMode === 'masonry') {
return (
{photos.map((p, i) => (
))}
);
}
if (gridMode === 'mixed') {
return (
{photos.map((p, i) => {
const [cs, rs] = mixedSpan(i);
return (
);
})}
);
}
// uniform
return (
{photos.map((p, i) => (
))}
);
}
function Tile({ photo, index, onOpen, captions, aspect, containerStyle, fullHeight }) {
const [hover, setHover] = useState(false);
// Stagger tiles: first few come in individually, later ones group up
const delay = 340 + Math.min(index, 20) * 40 + Math.max(0, index - 20) * 10;
return (
onOpen(index)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
className="rise"
style={{
margin: 0, cursor: 'pointer',
position: 'relative', overflow: 'hidden',
animationDelay: `${delay}ms`,
...containerStyle,
}}
>
{captions !== 'hidden' && (
{photo.caption}
{photo.place}
)}
);
}
function Home({ activeId, setActiveId, onOpenPhoto }) {
const project = PROJECTS.find(p => p.id === activeId) || PROJECTS[0];
const tw = window.__tweakState;
return (
<>
{project.blurb}
Year{project.year}
Locations{project.location}
Frames{project.photos.length}
onOpenPhoto(project, i)}
/>
);
}
function About() {
return (
{/* Hero block — mirrors the Home project-title treatment */}
About
(01)
Yingjie Liang is a photographer based between Shenzhen and the road.
An entrepreneur until 2014, she has been traveling and photographing ever since.
Since2014
BasedShenzhen · in transit
StatusOpen to collaboration
{/* Three simple sections, same label/value rhythm as the header info */}
[e.year, e.places])} />
[e.year, e.item])} />
{label}
{items.map((row, i) => {
const [k, v, href] = row;
const inner = (
- {k}
- {v}
{href && (
↗
)}
);
return href ? (
{inner}
) : {inner};
})}
);
}
function Section({ label, children }) {
return (
);
}
function ContactLine({ label, value, href, delay = 0 }) {
const [hover, setHover] = useState(false);
const content = (
setHover(true)}
onMouseLeave={() => setHover(false)}
className="rise"
style={{
display: 'grid', gridTemplateColumns: '120px 1fr auto',
gap: 20, alignItems: 'center',
padding: '18px 0',
borderTop: '1px solid var(--border-soft)',
cursor: href ? 'pointer' : 'default',
animationDelay: `${delay}ms`,
}}
>
{label}
{value}
{href && (
→
)}
);
return href ? {content} : content;
}
function Contact() {
const [state, setState] = useState({ name: '', email: '', subject: 'editorial', message: '' });
const [sent, setSent] = useState(false);
const submit = (e) => {
e.preventDefault();
setSent(true);
setTimeout(() => setSent(false), 4000);
};
return (
Get in touch
For editorial assignments, print inquiries, and exhibitions. I respond within a week.
{[
['Email', BIO.email],
['Instagram', BIO.instagram],
['Based', BIO.based],
['Representation', 'Direct — no agency'],
['Print sales', 'Editions of 7, signed'],
].map(([k, v]) => (
- {k}
- {v}
))}