Nola Vale — a quiet photographic portfolio
Build a complete, original portfolio for Nola Vale, a fictional photographer and image maker. The subject is attentive looking: a coastal platform without swimmers, a curtain in an almost empty room, and a few fruits arranged between a table and a distant garden. The website should feel like a small book left open on a clean desk. It must be immediately useful to someone browsing photographs, while preserving the unhurried quality of the work. Do not turn it into an agency landing page. There is no sales funnel, testimonials section, client-logo strip, animated slogan, pricing grid, or oversized subscription invitation. The portfolio’s primary function is to sequence three studies clearly and let a visitor read the visual decisions behind each one.
Use six real documents: index.html, low-water.html, borrowed-light.html, last-fruit.html, about.html, and contact.html. Each document must render meaningful content without requiring a router or a remote service. Use relative links and locally bundled image and font files so the portfolio can be extracted from its download and served independently. The case pages are substantial individual reading experiences. They must not be the same page with only a new title and hero image. Their writing should address different formal questions, their captions should describe different scenes, and their links should create a considered reading sequence.
Reference relationship and originality
The starting reference is Paul Faivret’s portfolio, reached through the DesEngs Minimum directory. On the reviewed homepage, the designer’s name and role sat at the top of a narrow central content rail, followed by a modest introduction, ample white space, and project descriptions separated by fine rules. Project titles, years, descriptions, and media formed readable chapters. The source is an interface designer’s portfolio, not a photographer’s website. Use its restraint, readable prose, and unforced progression as general structural lessons. Do not claim the original reference is a photographic practice. Do not reuse its name, employment, project titles, interface screenshots, biography, confidential-work claims, or exact wording.
Nola has an original photographic subject and a different visual structure. Instead of repeated wide product carousels, use a deliberately varied image sequence: the first photograph spans the main image rail, the second sits at a narrower width aligned to the right, and the third returns to the left at a slightly broader width. The reader experiences changes in scale and position without needing animation. The small introduction belongs above this sequence, not inside a monumental hero. The identity is fictional, and the images are original generated photographic studies. Explain that accurately in a discreet footer and in each study’s contextual note, without filling the page with repetitive technical warnings.
Visual language
The page background is a very light warm ivory, #fcfbf8. The main text is a soft charcoal, #30312e. Secondary labels use a readable gray-green near #65665d, never a pale gray that disappears against the page. Fine rules use a warm gray near #d8d8ce. There is no decorative gradient and no shadow beneath ordinary content. The photographs supply the color: muted blue-gray sea, pale green and cream in the room, and ochre fruit against blue cloth. Do not apply an artificial tint to all three images to force them into a matching palette. Their relationships should be visible through the sequence rather than a filter.
Use a locally bundled Geist variable font for navigation, captions, metadata, and body copy. Use the system Georgia serif for the modest introductory statement, case titles, and essay subheadings. This pairing should read as a practical editorial decision. The introductory heading is approximately 28px on a desktop, with a relaxed line height near 1.4. Case titles can reach 43px. Body copy is approximately 15px with a generous line height, and essay paragraphs increase to roughly 1.85 line height for long-form reading. Labels and captions must remain at least 12px on phones. Avoid the temptation to make everything tiny simply because the site is minimal.
The desktop header uses around four viewport-width units of horizontal padding and 30px of vertical padding. The name is a simple text link, with “Photographic studies” on the second line in smaller secondary text. Work, About, and Contact sit across the opposite side, separated by measured gaps. The header is part of the document flow. It must not float over the photograph or become a sticky opaque band that consumes the phone viewport. Indicate the current top-level page with an understated underline. Hover states may use an underline with a small offset. All keyboard focus states must be clearly visible using a two-pixel olive-gray outline with sufficient offset.
Homepage composition
Begin the homepage introduction with “Images about being somewhere, and looking a little longer.” Keep the wording compact and the line length controlled, with an intentional line break before the second clause when space permits. Below it, add “Selected studies, 2025–26” and the short subject line “Places, small arrangements, borrowed light.” The introduction should be around 530px wide including its side padding. On a desktop it sits centrally, separated from the header by about 70px and from the sequence by about 85px. These spaces establish quietness without forcing visitors through a full-screen empty opening.
Place the category controls beneath the introduction. They are plain text buttons labeled All, Coast, Interior, and Still life. Use a fine bottom rule to define the group, not pill backgrounds or a segmented-control capsule. The selected filter is underlined and has aria-pressed=true. All other filter buttons have aria-pressed=false. Each button has a comfortable interactive height of at least 44px even when the visible letters are small. The controls may wrap on a narrow screen, preserving meaningful spacing. A separate live result sentence says “3 studies shown,” “1 study shown,” or the appropriate count after each filter change.
The first study is Low water. Its image should dominate the start of the sequence without covering the entire browser window. The sequence container is approximately 1150px wide with viewport-relative side padding. Show the image at its natural landscape ratio, with no rounded corners, border, drop shadow, or overlaid title. Under the image, put “01 / Low water” on the left and “Coast · 2026” on the right. The entire image is an accessible link to the case page. The title is also a normal text link. Neither should depend on a hover effect to reveal the project’s identity.
The second study is Borrowed light. On a desktop, use approximately 72 percent of the sequence rail and align it right. Leave a generous gap from the first study, approximately 110px between chapters. This image is intentionally quieter than the coastal frame. It should feel like a different kind of pause. Its caption line reads “02 / Borrowed light” and “Interior · 2026.” The third study is Last fruit, approximately 78 percent of the rail and aligned left. Its metadata reads “03 / Last fruit” and “Still life · 2025.” On mobile, all three studies become full width within the same six-percent side margins. Do not retain desktop asymmetry if it produces postage-stamp images on phones.
Filtering must actually hide nonmatching study articles and update the visible count. It must not navigate to an empty page or leave misleading gaps from hidden articles. Use the hidden attribute rather than opacity alone so hidden links are removed from keyboard navigation and assistive technology. All restores the complete sequence in its original order. The filter state does not need persistent storage or URL synchronization. Keep this interaction simple and local. The category labels are exact matches to the study metadata and should not be inferred from filename fragments.
Three original photographic assets
Create an original landscape image for Low water: an empty concrete sea-bathing platform in pale Atlantic morning light. A rust-red ladder near the right side descends toward still blue-gray water. Keep the horizon high, give the concrete foreground generous negative space, and retain a slight analog grain. No recognizable branded structure, person, sign, or location claim should be introduced. The composition should convey an invitation to enter the water through scale and geometry rather than spectacle. Save an optimized WebP as assets/tide.webp and preserve a meaningful alternative description.
Create Borrowed light as a separate original photograph: a translucent cream curtain in a nearly empty pale green room, a narrow open window toward the left, a soft patch of afternoon light, and a single small dark plum on the floor. The curtain’s folds are the primary subject. The fruit is a counterweight rather than a decorative centerpiece. Do not substitute a generic luxury interior or fill the room with furniture. Save the image as assets/window.webp. Its caption should identify the curtain, opening, and suspended afternoon, while the case text explains how the small object changes the image’s balance.
Create Last fruit as a separate original still life: three quince fruits on a crumpled light blue cloth over a weathered wooden table, with a gray autumn garden glimpsed through a distant open doorway. Keep the fruit and cloth close and tactile while the background remains softer. Use natural directional light, subdued colors, and believable material detail. Save the file as assets/orchard.webp. Do not reuse either of the other photographs as a crop or a recolored substitute. The three assets should differ in subject, spatial depth, lighting geometry, and emotional temperature.
All images are generated studies for this fictional portfolio. Keep a plain-text asset credits file that says so, and include the local font’s license. The site must not pretend to document a real commission or completed exhibition. Do not include provider names, local machine paths, credentials, generation metadata, or branded favicons in public text. Preserve legitimate font attribution. Image dimensions should be declared to prevent layout shift. Use local files rather than remote hotlinks. The source resolution should support the full desktop image rail, and WebP compression should preserve texture without making the download unnecessarily heavy.
Case-page structure
Each case begins with a two-column introduction. The left column contains a return link to all studies and small metadata identifying number, category, and year. The right column contains the serif project title and a short description. The description is not a sales claim; it tells the visitor what to look for. On a phone these columns stack, with the return link and metadata above the title. The case introduction should begin soon after the header and should not repeat the homepage introduction or filter controls.
Place the principal photograph in a wide figure beneath the introduction. It may occupy almost the full page width with four-percent side margins on desktop and six-percent on mobile. Its button opens a native dialog for a larger view. The image itself remains undistorted; use object-fit:contain where a maximum height is necessary. Include a visible caption below the figure and a small sentence that tells the visitor the image can be selected to enlarge. Do not hide the enlargement affordance behind an unexplained cursor alone. The figure caption is distinct from the alternative text but should not contradict it.
After the image, place three short essay sections in a centered reading rail of roughly 610px including padding. Low water discusses the unoccupied invitation of the ladder, the high horizon and foreground, and the constructed nature of the image. Borrowed light discusses the nearly empty room, the plum as counterweight, and the relationship between generated construction and observation. Last fruit discusses near and far, the cloth as a small landscape, and the visibility of construction. Each section needs a meaningful heading and a paragraph of substantive writing. Avoid replacing this with a list of services, invented deliverables, empty metric cards, or generic creative-process slogans.
Finish each case with a fine rule and a next-study link. Low water leads to Borrowed light, Borrowed light leads to Last fruit, and Last fruit returns to Low water. The links should use the actual project titles, not three identical “Next” labels with no context. The shared footer follows naturally. Each document has exactly one h1, and the essay section headings are h2 elements. The site must remain navigable using browser back and normal links; no custom scroll-jacking or animated route transition is required.
Enlarged-image interaction
Use a native dialog element for enlargement so focus containment and Escape behavior follow browser conventions. Give the dialog an accessible label that includes the study title. Its visible top row contains the title and year on one side and a Close button on the other. The image fits within roughly 88 percent of viewport width and 76 percent of viewport height, with a small surrounding light surface. The backdrop is a dark translucent charcoal. The purpose is to see the photograph, so do not add a second toolbar, social sharing tray, download sales flow, or nested cards.
Opening the dialog should be triggered by the image button. Closing it with the visible button or Escape should return focus to that same image button. Do not use a click-only div or remove the focus outline. There is one photograph per case, so there are no misleading previous and next image arrows. A single original photograph is preferable to presenting several crops as separate shoots. The enlarged view is a reading aid, not a claim that the visitor is entering a complete commercial image archive.
About page
The About document uses a different composition from a case study. Put a short serif heading, “Attention, without urgency,” in a left column. Beneath it, use a simple ruled information area naming Nola Vale as a fictional photographer and image maker, listing the three subject areas, and identifying the selection’s years. The right column contains the practice statement. Explain that the portfolio is built around patient looking at ordinary objects and spaces, and that the images are connected by attention rather than a single location.
The practice statement should explain how the coast, interior, and still life create different distances from the viewer. Describe how the accompanying notes make visual choices available rather than wrapping them in mystery. Include a clear sentence that Nola is fictional and the images were generated for the project. Do not invent a school, residence, representation, client list, award, or press feature. A final Working notes section can outline how an editorial collaboration might begin with subject, boundaries, and sequence. End with a useful link to prepare an inquiry draft. On mobile the left and right columns stack, and the heading remains comfortably sized rather than overwhelming the screen.
Contact and draft behavior
The Contact page is a narrow, readable form headed “A subject, a place, an idea to consider.” Explain upfront that it prepares a local draft and sends nothing. Collect only a name, a choice of interest, and a short message. The interest choices are Editorial image study, Still-life direction, and Portfolio conversation. No email address is needed because the demonstration does not send email. The name is required, limited to a sensible length, and must contain a non-space character. The message is required, has a modest minimum length to discourage an empty brief, and is capped at a reasonable maximum.
Use visible labels above every control. Inputs and the select use a transparent background with a fine bottom rule, not heavy rounded boxes. The message textarea is comfortably tall and vertically resizable. The primary action says Prepare draft. Submission prevents navigation, validates the inputs, and renders a plain-text draft containing the portfolio name, visitor name, selected interest, and message. Insert visitor content using textContent rather than innerHTML so angle brackets remain literal text. The draft ends by stating that it was prepared locally and no message has been sent.
After preparation, reveal a Copy draft button and a live status message confirming that the draft is ready to review. If the visitor changes any field, hide the stale draft and copy button and tell them to prepare a new version. This prevents an old copied document from silently disagreeing with the visible fields. Clipboard success should produce a short confirmation. Clipboard failure should leave the visible draft available and explain that it can be selected and copied manually. Do not fake a sent-message success state or present the local draft as a confirmed inquiry. Personal fields must not be written to localStorage, sessionStorage, cookies, analytics, or a backend.
Responsive and quality requirements
At 650px and below, reduce the header padding, tighten navigation gaps without shrinking text below readability, stack case introductions and About columns, and use full-width image studies. Test the portfolio at both 390px and 320px. No page should have horizontal document overflow. All links and buttons should remain reachable without hover. Ensure that the long project titles wrap naturally and the footer’s explanatory sentence stays inside the viewport. A phone visitor should be able to filter, open a study, enlarge the photograph, close it, reach the next study, and prepare a contact draft without hidden controls.
Respect reduced-motion preferences by avoiding unnecessary motion altogether and disabling smooth scrolling when requested. The normal experience does not depend on animation. Verify local assets, relative links, page titles, one h1 per document, form validation, filter counts, dialog focus return, and stale-draft invalidation. Check the actual rendered home on desktop and mobile rather than relying only on source inspection. Keep the final implementation small and understandable: a dedicated builder, original study data, one stylesheet, and a short interaction script are sufficient. The quality comes from the images, spacing, sequence, and writing, not from adding framework complexity.
For a concrete acceptance pass, select Coast and confirm that only Low water remains and the count is singular. Return to All and confirm that the original three-study order returns. Open Borrowed light and use the image button, then Escape, checking that focus returns visibly to the opener. In Contact, prepare a message containing a harmless angle-bracket phrase and verify that it appears literally. Change the message and confirm that the old draft disappears. Prepare again and copy it. Test a whitespace-only name and confirm that the visitor receives a recoverable validation message. These checks prove the small interactions that make this quiet portfolio usable; do not replace them with a screenshot-only claim.