A personal site for an interaction designer: the work as canvases on one horizontal rail, case studies and notes with live demos, a work index, about, contact and colophon.
A portfolio in the manner of the designers who build what they draw. The home page is a single rail of canvases: a title plate with one phrase about the work, then each project as a huge cropped word and a single cut in two cool inks, with a numbered index strip beneath that tracks where you are. Each case study is quiet text at body size with the work running inline as live components. Around them sit a work index that shows every project as a grid or a list, notes written around live demos, an about page, a contact page with a short form, a colophon and a 404. The sample designer is Ines Halloran, and every word lives in its content files.
Every section is built from Eased components you can also use on their own, and each one installs by itself from the Pro registry. Light and dark themes, reduced motion and keyboard use are handled the same way they are in the library.
The rail
The index is one horizontal rail of canvases. Drag it, scroll it, swipe it or step through it with the arrow keys, and the underline on the index strip beneath slides with it; as each canvas passes, its cut slides against its word. The first time it comes into view the canvases deal in from the right, the title plate's panel wipes in behind its phrase, and the rail leans left to show there is more. A designer's work reads as a series of objects, which is what it is.
Index/
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Rail
The work as canvases on one horizontal rail with a numbered index strip: drag, scroll, swipe or use the arrow keys, and each cut slides against its word.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Work/work
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Work index
Every project at once beside the rail: its canvas in a two-column grid, or a ruled list of client, role and year, switched with a segmented control.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Case studies
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Case study
A quiet case study: title, facts, the project's canvas, short sections with live figures between them, details and the next project.
Dial figure
An alarm sheet with hour, minute and AM/PM wheels behind one band, as a live figure.
Scrub figure
A spring inspector: two Scrub Labels tune the spring a square crosses its lane on, as a live figure.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Notes/notes
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Notes
The notes index by month, and a note page: the essay in short sections around one live figure, then the next note.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Notes
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Notes
The notes index by month, and a note page: the essay in short sections around one live figure, then the next note.
Scrub figure
A spring inspector: two Scrub Labels tune the spring a square crosses its lane on, as a live figure.
Dial figure
An alarm sheet with hour, minute and AM/PM wheels behind one band, as a live figure.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
About/about
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
About
A notebook-style about page: intro, now, experience, writing and links, in one reading column.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Contact/contact
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Colophon/colophon
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Colophon
How the site is made: the type, the four inks as light and dark swatches, the tools and the credits.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Not found/404
Header
One quiet line: the name, leading back to the index, then work, notes, about and contact.
Not found
The not-found page: a canvas with the code set huge and its corner folded down, and the pages people usually want.
Footer
One line: the name, year and a short note, then links to the notes, the colophon and email.
Download the starter
A Next.js app with every section, the content file and the Eased tokens. Unzip it, run pnpm install and pnpm dev, then make it yours in one file.
Install one section
Each section is its own Pro registry item, with the components it uses. Add it to an app that already has Eased set up.
npx shadcn add @eased-pro/portfolio-rail