The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
I built three free website templates you can make your own
A small release from my playground: Meridian, Fieldnote and Ostara are now available as free downloads on Contra.
I wanted three different starting points, each with its own character: a studio website that gives photography room, a publication made for reading, and a storefront you can click through.
They use plain HTML, CSS and JavaScript. No package installation or build step: you get the files, edit the content, and make them yours.
Meridian: let the work do the talking
Meridian is for architecture, interiors and design studios. Large project images lead into services, a studio introduction, process and an enquiry section. Everything sits on one page, so visitors can get a feel for the work and the practice without hunting through a menu.
Fieldnote: room for a longer read
Fieldnote takes a newspaper-inspired direction, with a lead story, a most-read list and generous article layouts. It includes four complete sample articles, an about page and a section archive. I wanted the front page to feel like a publication, with a clear sense of which stories come first.
Ostara: browse, choose, add to the bag
Ostara is the furniture and homeware template. You can filter the collection, choose finishes and sizes, and try a cart that remembers its contents. Warm colours and large photographs give the products space. It's a storefront frontend; the demo checkout takes no payment and places no order.
All three include setup notes and example content to replace with your own. The enquiry and newsletter forms open email drafts by default; connect your own services for direct submissions.
The code is MIT-licensed for personal and commercial projects. Keep the included licence notices; the sample photographs have their own terms, listed in the image credits.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
"High-Performance Creative Web Exploration"
A civic bureau seals your letter to 2126 under molten wax, witnessed. A civic bureau that seals letters for exactly one hundred years. Write a message to 2126, watch it set in wax, and receive your engraved certificate of deposit.
I built this project to test A civic bureau seals your letter to 2126 under molten wax, witnessed. A civic bureau that seals letters for exactly one hundred years. Write a message to 2126, watch it set in wax, and receive your engraved certificate of deposit. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Canvas2D while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of wax-seal SVG under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Canvas2D, Wax-seal SVG. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Canvas2D, Wax-seal SVG. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of wax-seal SVG with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Dynamic or static?
A procedural shaded-relief cartographer's table; export the map as PNG.
I built this project to test A procedural shaded-relief cartographer's table; export the map as PNG. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Canvas2D while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Real-time topographic contour line extraction using Marching Squares
Mountain ridge carving and hydrographic river basin generation
THE TECHNICAL SIDE:
Combines domain-warped fractional brownian motion (fBm) with Marching Squares contour generation. Renders vintage parchment styled topographic maps with seeded coordinates.
Everything executes in the browser using Canvas2D, Procedural Cartography, Contour Line Marching Squares. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Contour line marching squares often generated disconnected micro-segments. Stitching adjacent line segments into continuous polyline paths allowed smooth canvas stroke rendering.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Really nice map detail
High-Performance Creative Web Exploration
Twenty-eight risers, no summit, drag the loop and it confesses. The Institute surveys, catalogs, and preserves staircases that should not exist. Specimen Nº 001: a closed ascending loop of twenty-eight risers and no summit.
I built this project to test Twenty-eight risers, no summit, drag the loop and it confesses. The Institute surveys, catalogs, and preserves staircases that should not exist. Specimen Nº 001: a closed ascending loop of twenty-eight risers and no summit. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of forced perspective under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), Forced perspective. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), Forced perspective. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of forced perspective with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Clean yet premium user interface.