Component

A component is a self-contained, reusable piece of a website’s interface: its structure, styling, and behavior bundled together as one unit. Instead of building each page from scratch, modern web development assembles pages from components (a navigation bar, a card, a footer) that can be dropped in wherever they’re needed. Different frameworks like React, Astro, and Vue each have their own component format, but the core idea is the same: build it once, use it everywhere, update it in one place.

The Simple Version

Think of a website like a page in a magazine. You’ve got the header at the top, a navigation menu, some cards showing articles, a footer at the bottom. Each of those pieces is a component: a self-contained chunk that you can build once and reuse everywhere.

It’s the LEGO approach to building websites. Instead of crafting each page as one giant thing, you build small pieces and snap them together.

Why It Matters

Components keep things organized and consistent. If your navigation menu is a component, you build it once and drop it into every page. Need to change a link? Update the component, and it changes everywhere. No hunting through dozens of pages to fix the same thing in 20 places.

How It’s Used on This Site

This site has components for everything. Some examples you can see right now:

• Header: the navigation bar at the top of every page (one component, used everywhere)
• DictionaryTeaser: the section on the homepage that previews glossary terms, pulling live data from the content collection
• Projects cards: the two project cards on the homepage, each linking to a dedicated project page
• GlossarySearch: the search bar on the Dictionary index page, a React component that filters terms instantly
• FileClarityDemo: the interactive before-and-after explorer at /projects/file-clarity

When a new page is added, it’s assembled from existing components like building blocks, plus any new ones the page needs.