{/* prop="waarde" andere-prop="waarde" */}
(markdown-element hieronder)

---
layout: page
pageKind: utility
title: Voorbeeldpagina
description: Een voorbeeld van een praktische pagina met een compacte hero.
---

{/* hero */}
![Hero voorbeeld](https://picsum.photos/seed/doc-hero-example/1600/900)

# Voorbeeld _hero_

Een korte introductie met één vervolgstap.

{/* color="secondary" icon="arrow-right" */}
[Bekijk cases](/cases)

---

{/* side-by-side shapes="hexagon,dots,rhombus,arrow" */}
![Laptop](https://picsum.photos/seed/doc-sbs-right/600)

#### VOORBEELD • DOCUMENTATIE

## Afbeelding _links_

De afbeelding staat boven de tekst in de MDX, dus wordt deze links getoond. Dit is het standaardgedrag. Zorg voor een regel whitespace tussen tekst en afbeelding.

{/* icon="arrow-right" */}
[Meer informatie](/docs)

---

{/* side-by-side background="light-grey" shapes="polygons" */}

#### VOORBEELD • DOCUMENTATIE

## Afbeelding _rechts_

De afbeelding staat onder de tekst in de MDX, dus wordt deze rechts getoond. De achtergrond is light-grey met polygons shapes. Zorg voor een regel whitespace tussen tekst en afbeelding.

![Meeting](https://picsum.photos/seed/doc-sbs-left/600)

{/* icon="arrow-right" */}
[Meer informatie](/docs)

---

{/* side-by-side background="dark-secondary" shapes="polygons" */}
![Code](https://picsum.photos/seed/doc-sbs-dark/600)

#### DONKERE VARIANT

## Dark-secondary _achtergrond_

Op donkere achtergronden wordt de tekst automatisch wit.

{/* icon="arrow-right" */}
[Bekijk meer](/docs)

---

{/* side-by-side shapes="hexagon,dots" */}

#### DIAGRAM • SIDE-BY-SIDE

## Diagram naast tekst

Zet een mermaid-diagram op de mediaplek in plaats van een afbeelding. Omdat het diagram onder de tekst staat, verschijnt het rechts.

{/* background="dark-secondary" */}

```mermaid
flowchart TD
  A[Verzoek] --> B{In cache?}
  B -->|Ja| C[Uit cache]
  B -->|Nee| D[Ophalen]
  D --> E[Opslaan]
```

{/* icon="arrow-right" */}
[Meer informatie](/docs)

---

{/* side-by-side background="light-grey" shapes="polygons" */}

{/* background="dark-gray" */}

```typescript
export function greet(name: string) {
  return `Hallo, ${name}!`;
}
```

#### CODE • SIDE-BY-SIDE

## Codeblok naast tekst

Ook een codeblok kan de mediaplek innemen. Omdat het codeblok boven de tekst staat, verschijnt het links.

---

{/* feature-section gridPattern="both" */}

#### Documentatie voorbeeld

## Wat we kunnen _betekenen_

{/* feature icon="settings" */}

### Software ontwikkeling

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor.

[Bekijk cases](/cases)

{/* feature icon="pencil" */}

### Doorontwikkeling

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor.

[Bekijk cases](/cases)

{/* feature icon="arrow-right" */}

### Support & onderhoud

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor.

[Bekijk cases](/cases)

{/* icon="arrow-right" */}
[Ontdek onze diensten](/diensten)

---

{/* feature-section variant="list" gridPattern="both" */}

#### Documentatie voorbeeld

## Wat we kunnen _betekenen_

{/* feature icon="settings" */}

#### Van idee tot werkende applicatie

### Software ontwikkeling

Wij bouwen software op maat die naadloos aansluit op jouw processen.

[Bekijk onze projecten](/cases)

{/* feature icon="pencil" */}

#### Bestaande systemen verbeteren

### Software doorontwikkeling

Bestaande applicaties verdienen aandacht. We moderniseren verouderde systemen en voegen nieuwe functionaliteit toe.

[Meer over doorontwikkeling](/cases)

{/* feature icon="wrench" */}

#### Altijd up-to-date en stabiel

### Support & onderhoud

Jouw software blijft bij ons in goede handen met proactief onderhoud en korte lijnen voor support.

[Ontdek ons supportteam](/cases)

{/* icon="arrow-right" */}
[Ontdek onze diensten](/diensten)

---

{/* technology-section overlapPrevious="false" titleEmphasis="technologieën" buttonText="Bekijk alle" buttonHref="/technologie" */}

#### hoe we dat doen

## Onze

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor.

{/* technology label="Back-end" leftTitle="Back-end" */}

### Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec condimentum sit amet magna vel tincidunt.

- Kwalitatieve technische fundering — Robuuste systemen die meegroeien.
- Proactieve monitoring — Real-time inzicht in performance.

![Node.js](https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg)
![Python](https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg)

{/* technology label="Front-end" leftTitle="Front-end" */}

### Moderne interfaces

Onze front-end specialisten bouwen snelle, toegankelijke interfaces.

- Moderne frameworks — React, Vue, Angular en Qwik.
- Performance optimalisatie — Snelle laadtijden op elk apparaat.

![React](https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg)
![TypeScript](https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg)

---

{/* testimonial-carousel gridPattern="both" */}

{/* testimonial */}

## 10KB levert precies wat ze beloven — en meer.

![Klant logo](https://picsum.photos/seed/doc-testimonial-1/550/550)

### Alex de Vries

CTO bij Voorbeeld BV

{/* testimonial */}

## Tweede getuigenis met _nadruk_.

![Tweede persoon](https://picsum.photos/seed/doc-testimonial-2/550/550)

### Jamie Jansen

Product owner

---

```typescript
const greeting: string = "Hello, world!";

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("10KB"));
```

{/* background="light-grey" */}

```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Ewout",
  email: "ewout@10kb.nl",
};
```

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Ewout",
  email: "ewout@10kb.nl",
};

{/* background="dark-primary" shapes="hexagon" */}

```css
.container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}
```

{/* background="dark-gray" shapes="tech" contentWidth="proseWide" */}

```javascript
async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
  return response.json();
}

const data = await fetchData("/api/users");
console.log(data);
```

{/* background="dark-gray" shapes="polygons" */}

```typescript
export type Result<T, E = Error> = { ok: true; value: T } | { ok: false; error: E };

function divide(a: number, b: number): Result<number> {
  if (b === 0) return { ok: false, error: new Error("Deling door nul") };
  return { ok: true, value: a / b };
}
```

{/* background="light-grey" shapes="dots" */}

```json
{
  "name": "website",
  "version": "1.0.0",
  "dependencies": {
    "@builder.io/qwik": "^1.12.1",
    "@builder.io/qwik-city": "^1.12.1"
  }
}
```

{
  "name": "website",
  "version": "1.0.0",
  "dependencies": {
    "@builder.io/qwik": "^1.12.1",
    "@builder.io/qwik-city": "^1.12.1"
  }
}

{/* background="white" */}

```bash
# Installeer dependencies en start de dev server
npm install
npm run dev

# Bouw voor productie
npm run build
npm run preview
```

# Installeer dependencies en start de dev server
npm install
npm run dev

# Bouw voor productie
npm run build
npm run preview

{/* background="dark-secondary" */}

```typescript
import { component$, useSignal } from "@builder.io/qwik";

export const Counter = component$(() => {
  const count = useSignal(0);

  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={() => count.value++}>Increment</button>
    </div>
  );
});
```

```mermaid
flowchart LR
  A[Start] --> B{Beslissing}
  B -->|Ja| C[Oké]
  B -->|Nee| D[Stop]
```

{/* background="dark-primary" shapes="hexagon" title="Deploymentflow" */}

```mermaid
sequenceDiagram
  participant Dev
  participant CI
  participant Prod
  Dev->>CI: Push commit
  CI->>Prod: Deploy build
  Prod-->>Dev: Status
```

{/* background="light-grey" */}

```mermaid
flowchart TD
  A[Idee] --> B[Ontwerp]
  B --> C[Implementatie]
  C --> D[Release]
```

{/* background="dark-secondary" shapes="polygons" contentWidth="proseWide" title="Verwerkingspijplijn" */}

```mermaid
flowchart TB
  Start([Start]) --> Input[/Invoer/]
  Input --> Validate{Valide?}
  Validate -->|Nee| Error[[Foutafhandeling]]
  Validate -->|Ja| Process

  subgraph Process [Verwerking]
    direction LR
    Load[(Database)] --> Transform[Transformeer]
    Transform --> Cache{{Cache}}
    Cache -.-> Queue[/Wachtrij/]
  end

  Process ==> Decision{Klaar?}
  Decision -->|Nee| Retry(Opnieuw proberen)
  Retry --> Process
  Decision -->|Ja| Report[Rapport]
  Report --> Notify>Notificatie]
  Notify --> Done([Einde])
  Error --> Done

  classDef success fill:#023020,stroke:#0a5c3e,color:#fff;
  classDef danger fill:#a47b0f,stroke:#e2aa14,color:#fff;
  class Done,Report success;
  class Error danger;
```

{/* variant="rhombus-left-arrow-right" */}
![Voorbeeld afbeelding met rhombus en arrow](https://picsum.photos/seed/doc-img-rhombus/720/300)

{/* variant="arrow-left-hexagon-right" */}
![Voorbeeld afbeelding met arrow en hexagon](https://picsum.photos/seed/doc-img-hexagon/720/300)

{/* variant="rhombus-left-arrow-right" contentWidth="proseWide" */}
![Brede afbeelding met decoratie](https://picsum.photos/seed/doc-img-wide/900/300)

{/* pull-quote author="Ewout" role="Founder 10KB" */}

> Software ontwikkeling is een continu proces van verbetering en innovatie. Een vast team dat jouw domein begrijpt maakt het verschil.

{/* pull-quote author="Google DeepMind" role="Productaankondiging" contentWidth="proseWide" */}

> Gemini 2.5 Pro leidt toonaangevende benchmarks voor coding, wiskunde en wetenschap en is nu breed beschikbaar via de Gemini API.

{/* article-list */}

- **Server-side rendering** Alle syntax highlighting wordt server-side uitgevoerd via Shiki, zonder JavaScript in de browser.
- **Comment-syntaxis** Componenten worden aangestuurd via JSX-commentaren, geen imports nodig.
- **Automatische theme-detectie** Donkere achtergronden krijgen automatisch een donker kleurenschema en vice versa.

{/* key-takeaways contentWidth="default" */}

## Key _takeaways_

- Alle componenten gebruiken de comment-syntaxis voor configuratie
- Sectie-componenten worden afgesloten met ---
- Achtergrondkleuren en vormen zijn beschikbaar voor meerdere componenten
- Afbeeldingspositie bij SideBySide wordt automatisch bepaald

---

{/* showcase */}
![Laptop op bureau](https://picsum.photos/seed/doc-showcase/1920/1080)

#### TECHNIEK 1 • TECHNIEK 2 • TECHNIEK 3

## Toegevoegde waarde als vaste IT _partner_

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed lacus ultrices, blandit elit vitae, imperdiet tortor.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus, dignissim urna vulputate, tempor libero. Nunc hendrerit diam eu diam eleifend efficitur ut id mauris.

{/* icon="arrow-right" */}
[Lees meer](/cases)

---

{/* showcase align="right" */}
![Kantoor](https://picsum.photos/seed/doc-showcase-right/1920/1080)

#### SOFTWARE ONTWIKKELING

## Mission critical _software_

Wij bouwen software die betrouwbaar, veilig en schaalbaar is.

Donec condimentum sit amet magna vel tincidunt. Sed ullamcorper tortor maximus.

{/* icon="arrow-right" */}
[Ontdek onze diensten](/diensten)

---

{/* faq contentWidth="default" background="light-grey" */}

## Veelgestelde _vragen_

Korte intro vóór de vragen.

### Eerste vraag?

Hier het antwoord. Met een [link](/docs).

### Tweede vraag?

Nog een antwoord.

Nog niet gevonden?

{/* icon="arrow-right" */}
[Neem contact op](/contact)

---

{/* case-study-carousel placement="generic" limit="6" */}

#### ONS WERK

## Cases waar we _trots_ op zijn

Eerste intro paragraaf.

Tweede intro paragraaf.

---

{/* case-study-carousel placement="generic" limit="6" autoplay="true" interval="6000" */}

#### CARROUSEL

## Met _autoplay_

Korte intro.

---

{/* case-overview */}

---

{/* timeline background="light-grey" shapes="hexagon,dots" */}

#### Documentatie voorbeeld

## Onze _geschiedenis_

Een korte tijdlijn van momenten die het bureau hebben gevormd.

{/* milestone year="2012" */}

### Start van het bureau

Een compact ontwikkelteam dat software bouwt die jaren meegaat.

{/* milestone year="2016" */}

### Groei van het team

Meer specialisten, dezelfde werkwijze en dezelfde aandacht voor kwaliteit.

{/* milestone year="Nu" */}

### Doorlopende samenwerking

Langetermijnpartnerschappen in plaats van eenmalige projecten.

---

---
layout: page
title: Paginatitel
description: Meta-beschrijving voor SEO.
---

---
layout: blog
title: Blogtitel - 10KB
heroTitle: "Titel met\nregelafbreking en *emphasis*"
description: Meta-beschrijving voor SEO.
image: ~/assets/photos/afbeelding.png
authorName: Ewout
date: 2026-01-15
tags: [continuity, software-development]
---

---
layout: blog-overview
overviewType: blog
title: Blog van 10KB - 10KB
heroTitle: "Inzichten over *softwareontwikkeling*"
description: Artikelen van 10KB over softwareontwikkeling, DevOps en maatwerksoftware.
---

---
layout: blog
title: Hoe continuïteit waarde creëert - 10KB
heroTitle: "Hoe continuïteit waarde\ncreëert voor *bedrijven*"
description: Ontdek hoe continuïteit in software ontwikkeling waarde creëert.
image: ~/assets/photos/continuity.png
authorName: Ewout
date: 2026-01-15
tags: [continuity, software-development]
---

---
layout: blog
slug: /en/blog/how-continuity-creates-value
title: How Continuity Creates Value - 10KB
heroTitle: "How continuity creates\nvalue for *businesses*"
description: Discover how continuity in software development creates value.
---

---
inheritKeys: [image, date]
---