Sections

Your home page is the sections: list in the front matter of index.md. Each item is one section, shown in the order you list them.

---
layout: home
title: Brand and web designer in Lisbon
description: Independent brand and web designer in Lisbon.
sections:
  - type: hero
    heading: I design brands and websites for *small, careful* businesses.
  - type: services
    label: Services
    nav: Services
    heading: What I can help with
    items:
      - title: Brand identity
        text: Name, logo, colours and type.
---

YAML is fussy about two things. Keep the indentation exactly as in the examples (spaces, never tabs). If a line of text contains a colon followed by a space, wrap it in quotes: text: "Note: I'm away in August.".

Settings every section has

Field	What it does
type	Which section: hero, logos, services, work, process, about, testimonials, faq or contact.
variant	Which look, where a section has more than one.
label	The small label above the heading, numbered for you: “01 — Services”. Reorder the sections and the numbers follow.
nav	Adds a link to this section in the header menu, with this text.
heading	The section’s heading. Words in *stars* turn vermilion and italic.
intro	A line or two under the heading. Markdown links work.
id	The section’s address on the page (#work). Defaults to its type. Set it if you use a type twice.
tone	The background: default, sand, ink (always dark) or vermilion (always dark).
hidden	true switches the section off without deleting it.
actions	Buttons: a list of label, url and style (primary, outline or link). The first is primary unless you say otherwise.

hero

The opening statement. Use it once, first.

• Variants: text (words only; looks finished with no photo) and portrait (the same beside a photo or drawing).
• Fields: heading, text, status (overrides the availability badge), actions, facts (a list of label and value), and for portrait: image or art, plus caption.

  - type: hero
    variant: text
    heading: I design brands and websites for *small, careful* businesses.
    text: I'm Ana, an independent designer in Lisbon.
    actions:
      - label: Start a project
        url: "#contact"
      - label: See the work
        url: "#work"
    facts:
      - label: Based in
        value: Lisbon, working worldwide

logos

A row of clients you’ve worked with. Use only clients who are happy to be named.

• Fields: label, and items, each with a name and optionally a url and an image (src, alt, width, height). Names are set in the display font. Logo images are shown at the same height in one colour, and flip to light in dark mode.
• Its label isn’t numbered.

services

What you offer.

• Variants: list (numbered rows on rules, like a printed menu) and cards.
• Fields: items, each with title, text, price and tags (a list). All but title are optional.

work

Selected projects, two to six.

• Variants: cards (big cards, two across) and list (a compact index by year).
• Fields: items, each with title, client, year, role, text, url, and a picture: image (a photo), art (a drawing) or neither, which shows a coloured panel with the title in the colour set by tone (sand, ink or vermilion).
• With a url, the whole card is a link.

process

How working with you goes, in three to five steps.

• Fields: steps, each with title, time (such as “Within a week”) and text.

about

Who you are.

• Fields: text (a few paragraphs; use | and a blank line between paragraphs), image or art, facts (a list of label and value), and actions, for example a link to your CV.
• Without a picture, the text moves to the right and keeps a comfortable line length.

  - type: about
    label: About
    nav: About
    heading: Hello, I'm *Ana*.
    text: |
      I've been a designer for twelve years.

      I like small businesses because you can see the work matter.
    art: designer-desk
    art_label: Drawing of a designer at her desk

testimonials

What clients say. Use their real words, with permission.

• Variants: single (one large quote; extra items are ignored) and grid (two or three side by side).
• Fields: items, each with quote, name, role, company and optionally image (a small square photo). Without a photo, their initials show in a circle.

faq

Questions people ask before they get in touch. They open and close without JavaScript, and search engines are told about them.

• Fields: items, each with q and a (Markdown), open_first: true to open the first one, and actions.

contact

The form and other ways to reach you.

• Fields: email (overrides alcor.email), booking (label and url, for Calendly, Cal.com or similar), budgets (a list, adds a budget menu to the form) and note (a short line beside the Send button).
• Your profiles come from alcor.social. The form itself is set up in _config.yml: see Contact form.

Text below the front matter

Anything you write in index.md below the closing --- appears after the sections, in a narrow column. Handy for a short privacy note.