Help

How to make it yours

Change the name, the colours, ten photos and the home page copy in under two hours. Everything below is in the order you will need it.

Start here

Site settings: name, favicon, Open Graph image.
Colour styles: change Albero (the sun) and Night. Everything else follows.
CMS → Projects: replace the six projects with yours (cover first).
Home hero: your best photo, your name, your lead.
SunStudy: set your city (lat, lon, time zone), or switch it off.

What to edit, section by section

Page	Section	What to change
Home	Hero	Photo (focal point), studio name, lead, two buttons, three proof lines. Variant Drawing puts the live house first (?hero=drawing in the prototype).
Home	Ticker	Names of the publications.
Home	Today’s sun	SunStudy (Day): place and model. Switch off with enabled = false.
Home	Intro and figures	One paragraph, four numbers.
Home	Selected work	Nothing: shows Projects with Featured on.
Home	What we do	Four accordion items, each with its image.
Home	Process	Five cards: name, text, duration, weeks on the bar, photo.
Home	Clients	Nothing: shows Projects with a client quote.
Home	Awards	Nothing: shows Press.
Home	Fees, FAQ	Text only.
Home	Journal	Nothing: newest three entries.
Home	Contact	Form fields and the address.
All pages	Footer	Address, links, the big name (it casts the real shadow of the sun).
Work	Filters and views	Filter options come from the Type field.
Project	All sections	CMS fields; the drawings follow lat/lon and model.
Services	Explorer	SunStudy (Explorer), same props.

CMS collections and fields

Four collections, connected by references. In the prototype they are the JSON files in data/; import them into your CMS with the same field names.

Projects

Field	Field type	Used for
`slug`	Slug	URL of the page (/work/casa-del-naranjo)
`title`	Plain text	Project name
`place`	Plain text	Neighbourhood, town
`lat, lon`	Number	Position of the plot, for its sun path and shadow plans
`year`	Number	Year of completion
`area`	Number	m²
`type`	Option: new / renovation / interior	Drives the filter chips
`status`	Plain text	Completed, On site…
`faces`	Number (0–359)	Main façade bearing, turns the compass
`featured`	Toggle	Shown on the home page
`order`	Number	Sort order
`cover`	Image + alt + focal point	Card, hero and Open Graph image
`summary`	Plain text	Lead paragraph and meta description
`body`	Formatted text	The project text
`gallery`	Image gallery (+ layout: full / wide / half, caption)	Photos on the page
`client`	Name, portrait, quote	Testimonial on the page and the home
`team`	Multi Reference → Team	Credits
`credits`	Role + name list	Collaborators
`model`	Code component prop	Boxes for the shadow plans (optional)
`drawingZoom`	Toggle	Shows the 1:500 → 1:5 drawing (Casa del Naranjo only)

Journal

Field	Field type	Used for
`slug`	Slug	URL (/journal/the-21-december-test)
`title`	Plain text	Headline
`date`	Date	Publication date, sorts the list
`category`	Option	Method, Notes, Site diary, Projects, Materials
`cover`	Image + alt	Card and page image
`excerpt`	Plain text	Card text and meta description
`author`	Reference → Team	Byline with portrait
`project`	Reference → Projects	Related project box
`minutes`	Number	Reading time
`body`	Formatted text (paragraph, heading, quote, fact)	The entry

Team

Field	Field type	Used for
`slug`	Slug	Referenced by Projects and Journal
`name`	Plain text
`role`	Plain text
`portrait + focal`	Image	4:5 crop
`bio`	Plain text	Two lines
`email`	Email
`since`	Number	Year they joined
`order`	Number	Sort order

Press

Field	Field type	Used for
`slug`	Slug
`kind`	Option: award / press	Which list it goes in
`year / date`	Number / Date	Sorting
`title`	Plain text	Award or headline
`outlet`	Plain text	Jury or publication
`result`	Plain text	Winner, Shortlisted… (awards)
`project`	Reference → Projects	Links the row and its hover photo
`url`	Link	Article or award page

SunStudy, the signature component

The only code component. It draws a house (boxes in metres) lit by the real sun of any place, with the NOAA equations. If it is off or fails, a static drawing takes its place.

Prop	Values	What it does
`enabled`	true / false	false hides the component and its section; the page keeps working
`variant`	live / static	static shows the drawing in `img/sunstudy-*.svg`
`kind`	day / explorer / solstices / path / badge	Which view to render
`place`	{ name, lat, lon, tz }	Your city: latitude (+N), longitude (+E), IANA time zone such as Europe/Lisbon
`model`	'naranjo' or { boxes, tree, openings, probes }	Your house as boxes in metres: x east, y south, w, d, h; north up
`colors`	{ sun, shadow, ink, ground, wall, roof, glass, tree… }	Drawing colours by day
`night`	same keys	Colours after sunset (mixed through twilight)

<script>
window.AZIMUT_SUN = {
  place: { name: 'Lisboa', lat: 38.7139, lon: -9.1394, tz: 'Europe/Lisbon' },
  colors: { sun: '#E3A33B', shadow: '#7D82A3' },
  enabled: true, variant: 'live'
};
</script>

Spanish version

English is the default. The Spanish site is a full second language version with every page already translated. In this template, add ?lang=es to any page.

Changelog

Version	Date	Changes
2.1	26 Sep 2026	QA pass: one live clock at a time (header readout hides over the hero card and the day section), night state for the sun card, numbers never split from their units, 900 px photo copies for phones, fonts no longer block the first paint, plain CMS index without JavaScript. Nine project photos replaced with Andalusian courtyards, lanes and pools; the stylesheet is inlined minified (no render-blocking request); dates, captions and footer lines move from 13 to 14 px (new Meta style).
2.0	26 Sep 2026	16 page templates, 4 CMS collections, photo-led hero, 51 graded photos, motion system, SunStudy isolated with options and static fallback.
1.0	26 Sep 2026	One-page prototype: live axonometric hero, sun study, four projects, scale drawing.