Altair docs
Sections
The sections of the home page, how to hide them, reorder them and change the menu.
The home page is built from one component per section. src/pages/index.astro lists them in order:
<Hero />
<Clients />
<Work />
<About />
<Services />
<Experience />
<Testimonials />
<Writing />
<Contact />Each section lives in src/components/sections/, with its markup at the top and its styles at the bottom.
Hide a section
Most sections hide themselves when they have nothing to show, and the numbers on the remaining sections (01, 02, 03…) adjust automatically.
| Section | To hide it |
|---|---|
| Clients | Set clients to [] in site.config.ts. |
| Selected work | Delete the files in src/content/projects/. |
| Services | Set src/data/services.yaml to []. |
| Experience | Set src/data/experience.yaml to []. |
| Testimonials | Set src/data/testimonials.yaml to []. |
| Writing | Delete your posts and set src/data/writing.yaml to []. |
| Availability badge | Set availability: false in site.config.ts. |
The Hero, About and Contact sections are always shown. To remove one of them anyway, delete its line in src/pages/index.astro.
Reorder sections
Move the component lines in src/pages/index.astro. For example, to show Experience before Services, swap those two lines. The section numbers follow the new order.
The menu
The header links are created in src/lib/nav.ts. They point to sections on the home page, such as /#work, so they also work from blog posts. Links to empty sections are left out automatically. To add your own link, add an entry to the list:
{ href: '/uses/', label: 'Uses' },On phones the section links are hidden to keep the header tidy; the theme toggle and the “Let’s talk” button stay visible.
Light and dark mode
The page follows the visitor’s system setting. The moon and sun button switches modes, and the choice is remembered on that device. Both modes are designed from the same color tokens, so your accent color works in both. See Colors, fonts and images.
Motion
The headline underline draws itself, the round badge spins slowly and sections fade in as you scroll. All of it is done in CSS, and it is switched off for visitors who ask their device for reduced motion.