TYPORVA — Editorial Portfolio HTML Template

Overview

TYPORVA is a typography-led editorial HTML template suite by Mixing Theme, built for creative practices that want their work presented like a printed monograph rather than a grid of cards. Condensed Anton headlines sit on a warm paper canvas with charcoal, olive and terracotta accents, hairline rules, numbered section labels and asymmetric editorial splits.

The suite ships five complete presets that share one design system — one token palette, one component library and one set of JavaScript modules — so a single purchase covers several distinct audiences and visual angles. Every preset runs on semantic HTML5, CSS custom properties and vanilla JavaScript, with no build step and no CDN requests at runtime: fonts, libraries and images are all bundled in the package.

Suitable For

• Independent designers and art directors — Template 01 (Art Director)
• Architects, interior and spatial studios — Template 02 (Spatial Atelier)
• Type foundries and lettering studios — Template 03 (Type Foundry)
• Motion designers, film and sound practices — Template 04 (Motion & Sonic)
• Galleries, studios and edition publishers — Template 05 (Gallery & Editions)
• Portfolio sites, studio showcases, project case-study hubs, typographic specimen pages, exhibition and programme microsites, personal brands in design and architecture.

Key Features

• Template selection hub: a full-viewport vertical Swiper where slide 00 introduces the suite and slides 01–05 present each preset with its own live-demo links, navigable by wheel, swipe, arrow keys or the numbered rail.
• Dual theme and dual direction: light/dark modes and instant LTR/RTL switching, both persisted per visitor; dark mode re-declares the same design tokens, RTL is built with CSS logical properties.
• Isotope-style filtering with GSAP FLIP: a three-phase transition on the art-director and atelier work pages, the foundry catalogue and the motion film slate, with an aria-live result counter and an instant animation-free fallback.
• Live variable specimen tester on the foundry home page: working font-size and tracking sliders plus an editable specimen stage.
• Dynamic detail pages: a slug-keyed dataset hydrates project and article pages through the ?id= query parameter (Template 01).
• Accessible form handling: contact, newsletter and brief forms validate their fields, mark invalid inputs, move focus to the first problem and announce the outcome in a live region — no alert() dialogs anywhere.
• Motion and reading aids: GSAP ScrollTrigger reveals on compositor-safe properties, a gallery lightbox, an article scroll-progress bar and a keyboard-accessible mobile drawer with a focus trap.
• Page loader: an always-dark full-viewport overlay injected before first paint and dismissed once every file has loaded, with a configurable max-wait safety net, a per-page opt-out attribute and no fade under reduced motion.
• Central configuration: brand name, tagline, year, contact email, social URLs, form endpoints and the animation switch all live in one config file.

Included Demos and Pages

34 HTML pages in total inside template/.

Each preset keeps its own accent colour and page set while all five depend on the shared template/assets/ folder.

Technologies

• HTML5 — semantic structure, with data-tp-* attributes wiring the markup to the scripts.
• CSS3 — main.css carries the design tokens, components, dark theme and RTL rules; responsive.css holds four breakpoint layers (1024 / 768 / 576 / 390 px); fonts.css declares the self-hosted faces.
• Bootstrap 5.3.3 — grid and utility classes; the visual identity is authored CSS, not default Bootstrap styling.
• Bootstrap Icons 1.11.3 — icon set used across navigation, buttons and lists.
• Swiper 14.3.0 — the hub's full-viewport vertical slider only.
• GSAP 3.12.5 + ScrollTrigger — entrance reveals, pinned scroll sections and the FLIP filter transition.
• Vanilla JavaScript — 13 modules: config, theme, navigation, portfolio, forms, details, content-data, animations, lightbox, scroll-progress, hub-swiper, loader, main.
• Anton and Inter — self-hosted WOFF2 subsets; no Google Fonts request at runtime.

Customization

• Colours: edit the --tp-color-* tokens in the :root block of assets/css/main.css; dark mode re-declares the same names under [data-theme="dark"].
• Typography: faces are declared in assets/fonts/fonts.css and referenced through the display, body and serif tokens.
• Brand, year, socials, endpoints and the loader switch: one object in assets/js/config.js.
• Content: copy and markup are plain HTML per page; Template 01 detail content can also be edited in assets/js/content-data.js and reached through ?id=slug.
• Filtering: add a data-tp-filter button and a matching data-tp-category on any card.
• Images: photography is grouped by page under assets/images/; swap files while keeping names and aspect ratios.
• Motion: disable all animation with animations.enabled, or all entrance motion plus the loader with their own switches.
• RTL by default: hard-code <html lang="ar" dir="rtl"> instead of using the header switch.
• Deployment: upload template/ as-is to any static host, or keep one preset as long as it stays a sibling of assets/ and of the hub index.html.

A 22-section guide ships alongside the template, covering setup, hosting, header/footer, colours, fonts, images, filters, journal content, forms, social links, animations, reduced motion, RTL, dependencies, credits, troubleshooting, changelog and support.

Package Contents

• template/ — everything deployable (114 files, about 21 MB): the hub, 404.html, five preset folders with 34 HTML pages, assets/css (main.css, responsive.css), assets/js (13 vanilla modules), assets/vendor (Bootstrap 5.3.3, Bootstrap Icons 1.11.3, Swiper 14.3.0, GSAP 3.12.5, ScrollTrigger 3.12.5), assets/fonts (23 self-hosted WOFF2 subsets of Anton and Inter plus fonts.css), assets/images (27 placeholder images: 21 JPG + 6 PNG), licenses/OFL.txt and asset-credits.md.
• documentation/ — index.html (22 sections) plus its stylesheet.
• README.md — highlights, folder structure, quickstart and licence notes.

Important Notes

• Static template only: finished HTML, CSS and JavaScript source files. No build step, no package manager and no server-side code to install.
• No backend and no CMS. Editing content means editing HTML files, or the content-data.js dataset for the Template 01 detail pages.
• Forms validate but do not send out of the box. The package ships with empty endpoints, which engages the documented demo mode. Point the contact or newsletter endpoint at your own service (Formspree, a newsletter API or your own route) to receive real submissions; that service is not included.
• No e-commerce. The "BUY DESKTOP LICENSE", "RESERVE" and "REQUEST DOSSIER" buttons are markup and links into the demo contact page — no cart, payment provider, booking system or download delivery.
• Audio and video are demonstration-only. The package contains no audio, video or embedded player code: the sonic play button toggles its own icon and stem "SOLO" buttons only toggle their label.
• Photography and copy are placeholders. The 27 image files must be replaced or covered by redistribution rights before publishing a live demo, and all names, projects, awards, prices and biographical text are fictional.
• Third-party licences: Anton and Inter are bundled under SIL Open Font License 1.1 with the full text and notices included; Bootstrap, Bootstrap Icons and Swiper are MIT with notices retained in the bundled files. GSAP and ScrollTrigger require the applicable GreenSock Template/Corporate licence for a product that is sold.
• The serif token references Newsreader, which is not bundled — it renders with the Georgia fallback until you add the files.
• Responsive behaviour is implemented (four breakpoint layers, viewport meta on every page) but has not been device-tested, so no cross-device guarantee is claimed.
• Accessibility is built in at code level (skip link, focus states, focus traps, ARIA attributes, live-region form status, reduced-motion handling); a formal WCAG audit has not been performed, so no conformance level is claimed.
• No external services are required at runtime — no CDN, no web-font requests and no API calls unless you connect a form endpoint yourself.