tmpo.pt
The Project
A portfolio and store for a creative practice working across illustration, design and architecture. Built from scratch with no framework, no CMS, no dependencies.
Stack
Cloudflare Pages
HTML / CSS / Vanilla JS
Shopify + Printful (store)
A complete digital platform for a creative practice that spans illustration, graphic design, and set design for television. The site needed to work as a portfolio, a storefront, and a credibility surface for broadcast credits, all without feeling like three different products stitched together.
The previous site ran on Adobe Portfolio: a grid of images linking to bigger images. No data layer, no commercial integration, no editorial voice. The brief was to replace it with something that could grow with the practice.
The new platform had to support four core functions. First, a portfolio that organizes 81 illustrations into 19 named series with editorial depth: statements, palettes, technique metadata, and cross-linking between sister collections. Second, a design catalog for television props, displaying 400+ designed objects across 7 TV shows with per-prop photography, production credits, and network logos. Third, a commercial layer that connects every illustration to its matching product on Shopify, turning the portfolio into a seamless storefront serving 35+ countries. Fourth, a credibility surface for broadcast work, treating TV and streaming placements as a first-class feature rather than a buried footnote.
Beyond those functions, the site had to be fast, maintainable without a CMS, and built on a design system strict enough to hold across portfolio, store, and editorial contexts without visual drift.
The artwork comes first. Everything else steps back.
Every design decision serves one goal: let the illustration speak, then get out of the way. The visual system uses a single typeface, five neutral surfaces, and zero decoration. No rounded corners, no gradients, no shadows, no accent colors.
Hierarchy is built from typographic weight, size, and whitespace alone. The interface stays monochrome so the artwork provides all the color. When an illustration fills the screen, nothing competes with it.
This constraint-driven approach holds across seven distinct page types, each with different content needs but the same visual DNA. Homepage, portfolio landing, project page, series editorial, props catalog, show landing, and archive grid all feel like one site without feeling templated.
The system is strict enough that new pages can be generated automatically and still look designed. Every surface, every margin, every type choice is an intentional decision, not a default.
One file runs the entire site.
Every project, every series, every show, every tag lives in a single data.js file. Three Node.js generators read it at build time and produce 132 static project pages, 20 series pages, and 8 show pages, all with full SEO metadata and cross-linking.
No CMS, no database, no framework. The data file is the CMS. Edit a description, run the generators, push to Cloudflare. The site rebuilds in seconds.
The file holds three data structures. PORTFOLIO contains 132 entries across illustration and design, each with structured fields for series membership, palettes, technique metadata, and editorial statements. SERIES_META maps 19 illustration series with editorial voice, sister-set pairings, and taxonomy. SHOWS_META maps 7 TV shows with production companies, broadcast networks, and external links.
The dispatch logic routes each project to the right generator: illustration series pages get palette documentation and image statements. Props pages get per-prop catalogs with front/detail/context photography. Design case studies get editorial layouts. The schema grew from 5 fields to 20+ but the workflow never changed: edit one file, run one command.
// illustration entry { id: 'la-vie-03', series: 'la vie', store: true, palette: ['#0E0D0B 38%', ...] } // props entry { id: 'alista-drinks-1', show: 'alista', propsPage: true, category: 'Packaging / Bottles' }
19 series. 81 illustrations. All connected.
Each illustration belongs to a named series. Series have landing pages with editorial statements, technique metadata, and palette documentation. Sister sets are visually linked: jump and kick, birds and fishes, naked and portrait.
Series titles are italic and clickable everywhere they appear on the site: in the project hero, in the meta strip, in the "more from this series" band. Every mention leads to the series landing page. Nothing dead-ends.
Each series page carries its own editorial voice: a three-paragraph image statement, technique breakdown, format specifications, and a five-color palette with percentage distributions extracted from the source artwork. The series strip at the bottom of every project page shows three sibling works from the same collection.
Sister sets create visual conversations across the body of work. Jump pairs with kick. Birds pairs with fishes. Naked pairs with portrait. These pairings surface in the series footer as navigational links between related collections.
The series index at /pages/series/ lists all 19 collections in a single grid. Each series page is generated from SERIES_META in data.js, where editorial statements, sister-set pairings, and taxonomy are maintained alongside the portfolio entries themselves.
The portfolio is the storefront.
Every illustration with a matching product on store.tmpo.pt gets a "wear this artwork" band at the bottom of its project page, linking directly to the Shopify product. The illustration landing page has a dedicated store strip. The main navigation links to the store. The entire site is a sales funnel that never feels like one.
Three Shopify markets serve distinct regions. Portugal with EUR pricing. The USA with dollar pricing and US sales tax. International covering 26 EU countries plus the UK, Canada, Mexico, Switzerland, Norway, Iceland, Australia, New Zealand, and Japan.
Printful handles print-on-demand fulfillment from local facilities in each region. No inventory, no warehousing. A customer in Tokyo and a customer in Lisbon both get fast shipping because Printful prints locally.
Google Merchant Center feeds product data from Shopify across all active markets, making the store discoverable through Google Shopping in every supported region.
400+ props designed for 7 television productions.
Bottle labels, book covers, magazine covers, vinyl records, posters, packaging, and digital screens, all designed as fictional props for Portuguese television. Each object had to look real enough to hold up on camera and carry its own visual identity within the show's world.
The site organizes this work into 43 collections across 7 shows. Each collection gets its own catalog page with per-prop photography grouped by object: front view, detail, and context. The generator reads image filenames at build time, detects view labels, and groups them automatically. A prop with three images gets a three-column layout. Two images get 50/50. One gets full width.
Each show gets a dedicated landing page with production credits, network logos, and external links to the broadcaster. The show pages mirror the series architecture: a hero, metadata section, collection grid, and category tags. The shows index at /pages/shows/ lists all 7 productions.
The editorial rule is strict: always "aired on," never "commissioned by." The language treats the props as creative work made for the production, and the network as the broadcaster, not the client.
Built to be found.
Every page carries structured metadata: Open Graph tags, Twitter cards, canonical URLs, and a dynamically generated sitemap covering all 132 project URLs plus series and show pages. When someone shares a project on social media, the preview card shows the right image, title, and description.
Old Adobe Portfolio slugs redirect cleanly via Cloudflare rules. No broken links, no lost search equity from the previous site. Google Merchant Center feeds product data from Shopify across 27 active regions. GA4 runs on both tmpo.pt and store.tmpo.pt.
Cloudflare provides the CDN, security headers, and Access controls for the admin dashboard. Google Business Profile is verified as a service-area business. The infrastructure is invisible but load-bearing.