Portfolio
A designer-who-builds portfolio that can show its own grid, spacing and type: one switch turns the page into its own spec
Datum is a portfolio for an independent designer who also builds. Work comes straight after the hero: five projects, each with a cover, a detail shot, one outcome in plain words and a strip of week cells that splits the project into design weeks and build weeks on a shared scale. Below them sit a table of smaller projects and three priced services (a sprint, design and build, a monthly partnership), each with its own week strip and a button that takes the visitor to the enquiry form with that service ticked. Inspect mode, a switch in the header, draws the page's 12-column grid, section spacing, type specs and a live measure under the pointer. There is a case study page for each project, an about section, an enquiry form, a 404 and a privacy page.
Tax included · Checkout by Polar
Digital product · All sales final · Refund policy
Signature effect
Inspect mode: one switch (or the I key, or ?inspect in the URL) shows the page's own grid, section spacing, type specs and a live measure of whatever is under the pointer, read from the real layout, and it plays once on the hero when the page opens
Installation
No accounts, plugins or build tools. The HTML edition runs straight from the folder you download, and the React edition is a standard Next.js project.
Download the zip after checkout and unzip it anywhere.
Double-click it and the site opens in your browser. Change the text in any text editor, save and refresh.
Drop the folder onto Netlify or Vercel, or upload it to any static host. It takes about a minute.
datum-html-1.0.0
datum-react-1.0.0
npm install
npm run dev
Pages
Fonts
Who it suits
Palette
work/<name>.html in HTML, /work/<name>/ in React), 404, privacy.app/work/[slug], built with generateStaticParams from the cases list), 404 and privacy as a Next.js 16 static export (React 19, TypeScript, Tailwind CSS 4, Motion). All copy, prices and projects are in content/site.ts; adding a project there adds its case on Home, its page, its About link and its place in the "Next project" loop. Inspect mode and the week strips are client components with the same settings as the HTML edition, and the form posts to contact.endpoint. Without JavaScript its week strips show their cells, drawn filled.noindex, so Lighthouse gives that page a lower SEO score. No loading changes were needed: the fonts are self-hosted, the images have width and height, and layout shift is 0.concepts/datum/. The edition has the same six pages, in work/ for the case studies, plus 404.html and privacy.html (same header and footer).assets/fonts/ with their licences (SIL Open Font License). The concept loaded them from Google Fonts; no request goes there now.tokens.css, grouped and commented, with Brand — start here first. The concept's inline colours (--plate:#A3B39B and similar) now point at those tokens, and the other inline styles are classes.main.js plus effects/inspect.js and effects/weeks.js, each with a CONFIG block at the top. Reveals use the kit's kit.reveal, so a failed observer can no longer leave a block invisible; the reveal class is .is-in instead of .in.enabled (false removes the switch and the footer hint), urlFlag and hoverMeasure. The key handler also ignores keys pressed on the window itself, not only inside fields.data-plan.timeline, problem, design, build, result, next), so they can be linked to.Person on Home and a CreativeWork on each case study), a favicon, a touch icon, a social image, a web manifest and robots.txt.julesarden.example, hello@julesarden.example, the example.com links) are all invented. Replace them before launch, including the JSON-LD blocks.HTML if you want a site that runs straight from the folder, with no build step. React if you already build in Next.js. The bundle gets you both, for less than buying them apart.
The license page spells out what a purchase covers, including client projects.
Read the licenseNo. It's a digital product, delivered as soon as you've paid, so all sales are final. If something doesn't work as described, email contact@no-code.supply.
Read the refund policyNo. A new version of a template you've bought is a free download from your Polar account — see the changelog below for what changed.
Mostly, yes. In the HTML edition you change the words and images in any text editor, save and refresh. The README and DESIGN files show where the colours and fonts live.
Drag the folder onto Netlify or Vercel, or upload it to any static host — no build step for the HTML edition, or a couple of commands for the React one.
As a remix link, right after checkout and in your Polar customer portal after that. It copies the whole project into your Framer workspace: pages, CMS collections, code components and the Framer Skills that teach Framer's agent how the site is built.
Yes. All-Access includes every template's Framer edition, alongside the HTML and React editions. On its own, it's sold by itself or with both code editions in the HTML + React + Framer bundle.
Ashlar is a website for a boutique real-estate office that sells a few exceptional houses by introduction. It has five material slabs that open into exterior photographs, a register with photo galleries, facts and drawn site plans, a draggable terrace view with bearing marks and a dial, a three-step method with a timeline, advisor cards with live local times, and an introduction form that writes a letter as you type.
A quiet, clay-and-bronze skincare template for a Copenhagen barrier-repair brand: a raymarched WebGL serum drop that bulges toward the cursor in the hero, a three-step ritual with CSS-rendered bottles, an ingredient list with generated molecule diagrams, a draggable before/after hydration map, clinical-result stat cards and a working shop with size pickers and a bag.
Cistern is a launch site for a residential energy-storage product, with a drawn graphite slab and its seam of light, a draggable 24-hour instrument that reads roof, house, battery and grid, a self-sufficiency calculator that suggests a model, three model cards, a FAQ and a free-survey request form.