Writer Portfolio Website Template

£15 View live demo or the whole Vault, £99

A one-page website template for a writer or editor, opening on a photograph you can crop: drag its corners and the headline re-sets around the new shape while the caption reports the crop as figures. White paper, one ink and one flood of colour. Suits authors, journalists, photographers, small studios and independent magazines.

ScrollTrigger advanced

7 more details

dragscroll-revealstaggercounterclip-pathprogressive-enhancement 4 colour palettes

Colour

The business, people and figures in this demo are made up for the example. Any resemblance to a real company is a coincidence.

Released 1 November 2026

About this template

A one-page site for a writer, built on white paper, one ink and one flood of colour. The opening photograph is a tiny reader under an enormous painted wall, and the headline runs across the edge of the picture from paper on to the wall.

Read the full template overview

That photograph is a crop you can handle. Drag a corner and the page swings from full bleed to one small picture alone in a white field, setting the headline afresh at each stop, while the label column reports the crop in columns, points and percent of the negative.

Below it, three flood posters for the books, a portrait bleeding off the right, a full-bleed picture followed straight away by one very small one, a ruled table of commissions, and a paragraph shown with its real edits.

The worked example is Sal Ibbotson, a freelance writer and editor in Bristol. Swap the posters for projects or issues and it serves an author, a photographer, a small studio or a magazine.

Writer Portfolio - website template preview

What's included

8 items

Opening photograph with an art director's crop: drag any corner and the window moves over a picture that never changes scale
The headline, deck and label column re-set for each crop, chosen from line breaks you list, so a word either clearly crosses the edge of the picture or clearly clears it
Live crop figures in the label column: columns, points, percent of the negative, ratio and whether the reader is still in frame
Edge grips instead of corners on touch screens, with vertical swipes passing through to the page, and a full keyboard path with a spoken summary
Three flood posters in a white page, with four palettes that repaint the posters and the opening wall together
Statement left with a portrait bleeding right, then a full-bleed picture followed by one small picture alone in a white screen
Ruled commissions table with count-up totals, and a paragraph marked up with real del and ins elements
Ordinary scroll with no smooth-scroll library, self-hosted fonts, and a complete page without JavaScript

Perfect for

5 use cases

Freelance writers, editors and journalists
Authors and independent publishers listing books or issues
Photographers and illustrators who want the work handled, not just shown
Small design and editorial studios
Exhibition, gallery or personal portfolio sites

How it works

5 sections

A crop, not a resize

The opening photograph stays at one scale in one place on the page, and a clip acts as the window. Corners stop on half columns of a twelve-column page and on sixteenths of the height, so there is a finite set of crops. A small crop leaves one small picture in white paper; the full frame bleeds off the page.

A typesetter for the headline

Each crop gets its own setting of the headline: size, line breaks and position. A word has to clear the picture's edge or cross it decisively, and a line of type never lies along the top or bottom edge. Named keep-out areas, such as the reader and the bench, stay uncovered while they are in frame.

Figures and the deck

The label column reports each crop as columns, points, percent of the negative and ratio, and says whether the person is in frame. Crop the reader out completely and the deck says so. A restore link brings back the opening composition, and screen readers hear a summary after each change.

Touch and keyboard

On a touch screen each edge has its own grip. A side grip takes a sideways drag and leaves a vertical swipe to the page, and pressing commits nothing until the finger moves. On a keyboard the corners are ordinary buttons: arrows move them a stop at a time and Escape restores the crop.

Floods and palettes

The posters use one colour token, with the title of one poster set in that flood on ink. Each palette has a matching photograph with only the wall repainted. Without JavaScript or the CDN the page is a complete document with a fixed crop and every poster showing.

Plugins ScrollTrigger

Difficulty Advanced

Colour palettes 4 ready-made palettes, each measured for AA contrast. Switch with one attribute, or copy the values you want into :root. Try them in the preview above.

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which sites does this writer template suit besides a freelance writer?

Anyone fronted by one person or one body of work: an author, editor or journalist, a photographer or illustrator portfolio, an independent magazine or small publisher, a small design studio, or an exhibition site. Replace the three book posters with projects, issues or shows, swap the commissions table for your own list, and the structure holds without any change.

How do I put my own photograph in the crop?

Replace the wall images in assets/img at the same names, in a 4:3 shape, ideally with a lot of plain space around one subject. Then set data-subject on the cover to the box your subject occupies, and data-keepout to whatever the headline must never cover, both as fractions of the image. The crop figures and the reader line read from those values.

What happens to my headline when someone crops the picture?

The script chooses a size, line breaks and position for every possible crop, from the line breaks you list in data-breaks on the heading. A word either clearly crosses the edge of the picture or clearly clears it, and type never lies along the top or bottom edge. Write your own headline, list three to six ways of breaking it, and that is all it needs.

Do the colour options change the photograph too?

Yes. Each of the four floods has a matching version of the opening photograph with only the wall repainted, so the first screen follows the palette as well as the posters. That repaint is baked into the bundled files for this picture. With your own photograph, either use one colour or supply a version per palette under the same file names.

How does the crop work on a phone?

On a touch screen the corners become four edge grips, because a finger hides the corner it is judging. Pull a side grip sideways to crop; a vertical swipe on the same grip still scrolls the page. The top and bottom grips are short tabs, so they cannot catch a scroll anywhere else on the photograph. The whole crop also works from a keyboard.

Is there a contact form to connect?

There is no form and nothing to wire up: the Write to me poster is a plain email link, so change the address and it works. The rates table is ordinary text in the fictional example. If you would rather collect enquiries, drop a form into that poster and point it at Formspree, Netlify Forms or your CRM.

Can I remove sections or add more books?

Yes. Every section stands alone, and the phone contents sheet is built from the sections it finds, so deleting one removes its entry there. Remove it from the links in the label column and footer too. Posters are plain articles in a grid: add a fourth by copying one, and the flood reveal picks it up without further setup.

Paid template

Purchase to unlock the code.

Buying Writer Portfolio opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£15 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

Unzip and open index.html in a browser, or upload the folder to any static host. There is no build step.
Change the copy in index.html, top to bottom. Every section is plain markup.
Replace the photographs in assets/img/, keeping the file names and shapes (see Photographs).
Set your colour with --flood and --flood-rgb at the top of assets/style.css, or pick a palette (see Palettes).

Using It With Your Own Design

The crop is found through data- hooks on the cover, and works on any markup that has them: data-crop on the stage, data-crop-negative and data-crop-image on the picture, data-crop-statement on the heading, data-crop-frame holding the controls, data-crop-deck on the paragraph that moves, and data-fig on each figure. To lift it into another site, copy the cover section, its rules in assets/style.css and initCrop in assets/script.js.

Everything else is independent. data-flood makes a block rise on scroll, data-reveal fades one in, and data-count counts a number up once. Delete any section and the rest keeps working.

Sections and Configuration

Cover

Attributes on the data-crop element:

Attribute	What it does
`data-subject`	The box your person or object occupies, as `x,y,w,h` fractions of the image. Drives the Reader figure, and swaps the deck when the subject is cropped out.
`data-keepout`	Areas the headline must never cover while they are in frame, as `x,y,w,h` fractions separated by semicolons. Include the subject, anything dark, and any shadow.
`data-default-left`	Where the picture opens, in twelfths of the page width from the left.

On the heading, data-breaks lists the ways the headline may break, with | between lines and ; between options. For your own headline, write three to six options, from two lines to five or six. The narrower options are what the small crops use. If the words in an option do not match the heading, that option is ignored.

On the deck, data-deck-out is the line that replaces it when the subject is out of frame.

How a setting is chosen. The script tries the sizes, breaks and positions, and keeps the largest that obeys the rules, listed under "The composition rules" in assets/script.js: a word clears the picture's side edge or crosses it decisively, a line of type never lies along its top or bottom edge, and a small picture takes no type at all.

Scripted use: document.querySelector('[data-crop]').crop offers set({l, r, t, b}), restore() and frame.

Books

Three .poster articles in a grid. Each has a fact and a title; add or remove them freely. The dark poster sets its title in the flood on ink. Posters suit projects, issues or exhibitions just as well.

About, the full-bleed picture and the small picture

Statement left, portrait bleeding off the right, then one picture across the whole width followed straight away by one small picture in a screen of white. The swing between those two is the design, so keep them next to each other.

Commissions

Ordinary tables with rules, used only for figures. The totals take their end value from data-count, and the same number sits in the markup for anyone without JavaScript.

An edit

Real <del> and <ins> elements. Added text takes the flood as a highlight, in ink.

Write to me

A plain mailto: link in a flood poster. There is no form to wire up. If you want one, add it to this poster and point it at a service such as Formspree or Netlify Forms.

Navigation

Desktop links are in the label column of the cover and in the footer. Phones get a bar with a Contents button that opens a sheet. The sheet is built from each section's data-section and data-note, so a removed section disappears from it. Without JavaScript, the Contents link goes to the footer.

Palettes

Set data-palette on <html>, or copy one block's values into :root and delete the others.

`data-palette`	Name	`--flood`	Ink on flood	Display face
(none)	Painted wall	`#F26A0B`	6.15:1	Baskervville
`pink`	Proof pink	`#F83085`	5.2:1	Baskervville
`sky`	Sky	`#21A0F8`	6.7:1	Baskervville
`yolk`	Yolk	`#F8CF17`	12.5:1	Baskervville

White on any of these fails, so type on a flood is always ink. The headline runs on to the wall in ink as large text, which needs 3:1. Measured on the wall's own pixels under the letters at the crops most covered by type, the worst single pixel was 2.87:1 on Painted wall, 3.06:1 on Proof pink, 3.44:1 on Sky and 3.49:1 on Yolk, with under 0.002% of pixels below 3:1. A new flood needs the same room, so check it against ink before you use it.

Each palette loads a matching photograph with only the wall repainted, wall-<name>-960.webp and wall-<name>-1440.webp. With your own photograph, either keep one colour or supply your own versions under those names.

Photographs

All are bundled as optimised WebP derivatives. Replace a file with one of the same name and proportions, then update its alt text and caption.

File	Shows	Source
`wall-*.webp`	Reader on a bench under a painted wall. 4:3. Darkest wall marks lifted so type stays legible; wall recoloured and paving neutralised in the alternates	Pexels 31653088
`portrait.webp`	Sal in a library	Pexels 7968085
`desk.webp`, `desk-960.webp`	Sal at the desk with a red pen	Pexels 7967597
`copies.webp`	A small stack of paperbacks	Pexels 6963779
`edit.webp`	A marked-up typed page, part legible	Pexels 7968061
`harbour.webp`	Bristol harbour and its coloured terraces	Pexels 16031320

These come under the Pexels licence. The newspaper on the opening picture has real printed words on it, and the crop's alt text and copy describe this one picture. The best replacement has a small subject and a lot of plain space, because the crop needs something to find.

Accessibility

The heading carries the whole sentence as its accessible name; the placed words are hidden from assistive technology.
Corners and grips are real buttons. Arrow keys move a stop, Shift with an arrow moves two, and Escape restores the crop. A polite live region reads the new figures after each change.
On touch screens, side grips let vertical swipes through to the page.
Reduced motion: the crop jumps with no glide, and no reveals or the opening nudge play. The page is complete at rest.
Without JavaScript or the CDN: a complete page, with a fixed crop and every section visible.

Dependencies

GSAP 3.15.0 and ScrollTrigger from jsDelivr, as plain script tags; compatible with GSAP 3.12+.
Baskervville and Familjen Grotesk, self-hosted under the SIL Open Font Licence (the licence files are in assets/fonts/).
No smooth-scroll library and no build step.

Teardown

window.gsapContext.revert() removes the page's animations. Each init in assets/script.js returns its own cleanup for listeners and observers. Nothing needs tearing down for ordinary navigation.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.