Whole websites,built by one person.

1{
2  "title": "Keuken BL",
3  "description": "Subtiel gebruik van materialen in deze keuken.",
4  "thumbnail": "/images/projects/keuken-1.png",
5  "images": ["/images/projects/keuken-2.png"],
6  "order": 3,
7  "updated": "2026-08-18"
8}

52if (carousel.dataset["carouselInitialized"] === "true") {
53  return;
54}
55 
56carousel.dataset["carouselInitialized"] = "true";
57const slides = carousel.querySelectorAll<HTMLElement>(".carousel__slide");
58const dots = carousel.querySelectorAll<HTMLElement>(".carousel__dot");
59if (slides.length <= 1) return;
60 
61let current = 0;
62 
63function goTo(index: number): void {
64  slides[current]?.classList.remove("carousel__slide--active");
65  dots[current]?.classList.remove("carousel__dot--active");
66  current = (index + slides.length) % slides.length;
67  slides[current]?.classList.add("carousel__slide--active");
68  dots[current]?.classList.add("carousel__dot--active");
69}
70 
71const controls: SlideControls = {
72  next: () => goTo(current + 1),
73  prev: () => goTo(current - 1),
74};
75registerCarouselControls(controls);
76 
77carousel.querySelector(".carousel__btn--prev")?.addEventListener("click", controls.prev);
78carousel.querySelector(".carousel__btn--next")?.addEventListener("click", controls.next);
79 
80dots.forEach((dot) => {
81  dot.addEventListener("click", () => {
82    const i = Number(dot.dataset["index"]);
83    if (!Number.isNaN(i)) goTo(i);
84  });

18 
19export async function getStaticPaths() {
20  const projects = await getCollection("projects");
21  return projects.map((project) => ({
22    params: {
23      id: project.id,
24    },
25    props: { project },
26  }));
27}
28 
29const { project } = Astro.props;
30const slug = project.id;
31const renderedBody = renderMarkdown(project.body ?? "");
32const description = metaDescription(project.body ?? "") ?? project.data.description;
33 
34const imageRefs = [project.data.thumbnail, ...(project.data.images ?? [])];
35 
36const carouselMarkup = renderCarouselMarkup(
37  await Promise.all(
38    imageRefs.map(async (ref, i) => ({
39      source: await progressiveImageSource(ref, PROJECT_CAROUSEL_SLIDE),
40      viewTransitionName: i === 0 ? `project-img-${slug}` : undefined,
41    })),
42  ),
43  project.data.title,
44);

1{
2  "trailingSlash": true
3}

33  PageKey.Contact,
34];
35 
36const slugs: Readonly<Record<Locale, Readonly<Record<PageKey, string>>>> = {
37  [Locale.Dutch]: {
38    [PageKey.Home]: "",
39    [PageKey.Appointment]: "afspraak",
40    [PageKey.OnCall]: "wachtdienst",
41    [PageKey.Team]: "team",
42    [PageKey.PracticalInfo]: "praktisch",
43    [PageKey.Announcements]: "mededelingen",
44    [PageKey.Contact]: "contact",
45    [PageKey.Privacy]: "privacy",
46  },
47  [Locale.French]: {
48    [PageKey.Home]: "",
49    [PageKey.Appointment]: "rendez-vous",
50    [PageKey.OnCall]: "garde",
51    [PageKey.Team]: "equipe",
52    [PageKey.PracticalInfo]: "infos-pratiques",
53    [PageKey.Announcements]: "actualites",
54    [PageKey.Contact]: "contact",
55    [PageKey.Privacy]: "vie-privee",

27export function resolveStatus(instant: Date, schedule: PracticeSchedule): PracticeStatus {
28  const wall = brusselsWallTime(instant);
29 
30  const closure = schedule.closures.find(
31    (candidate) =>
32      compareLocalDates(candidate.from, wall.date) <= 0 &&
33      compareLocalDates(wall.date, candidate.to) <= 0,
34  );
35  if (closure) {
36    return {
37      kind: PracticeStatusKind.OnCall,
38      reason: OnCallReason.Closure,
39      closureReason: closure.reason,
40    };
41  }
42 
43  if (isBelgianPublicHoliday(wall.date)) {
44    return {
45      kind: PracticeStatusKind.OnCall,
46      reason: OnCallReason.PublicHoliday,
47      closureReason: null,
48    };
49  }
50 
51  if (wall.weekday === Weekday.Saturday || wall.weekday === Weekday.Sunday) {
52    return { kind: PracticeStatusKind.OnCall, reason: OnCallReason.Weekend, closureReason: null };
53  }
54 
55  const day = schedule.week[wall.weekday];
56 
57  if (day.secretariat && wall.minute >= day.secretariat.from && wall.minute < day.secretariat.to) {
58    return { kind: PracticeStatusKind.SecretariatOpen, until: day.secretariat.to };
59  }
60 
61  if (day.phone && wall.minute >= day.phone.from && wall.minute < day.phone.to) {
62    return { kind: PracticeStatusKind.PhoneOnly, until: day.phone.to };
63  }
64 
65  return {
66    kind: PracticeStatusKind.OnCall,
67    reason: OnCallReason.OutsideHours,
68    closureReason: null,
69  };
70}

11 
12<div data-practice-status-badge aria-busy="true" data-props={JSON.stringify(props)}>
13  <p>
14    {messages.status.fallbackQuestion}{" "}
15    <a href={ladderHref}>{messages.status.fallbackLinkLabel}</a>
16  </p>
17</div>
18 
19<script>
20  import { PracticeStatusScenario } from "@mono-studio/frame-bridge/protocol";
21  import { resolveStatus } from "@mono-studio/practice-status/status";
22 
23  import { messagesFor } from "../i18n/messages";
24  import { applyBadge } from "../status/badge-dom";
25  import { badgeState, decodeBadgeProps } from "../status/practice-status-badge";
26  import { previewedStatus } from "../status/status-preview";
27  import { previewScenario, subscribePreviewScenario } from "../status/status-preview-store";
28  import { startStatusTicker } from "../status/status-ticker";
29 
30  for (const root of document.querySelectorAll<HTMLElement>("[data-practice-status-badge]")) {
31    const payload = root.dataset["props"];
32    if (payload === undefined) continue;
33 
34    const props = decodeBadgeProps(payload);
35    const messages = messagesFor(props.locale);
36 
37    function render(): void {
38      const scenario = previewScenario();
39      const status =
40        scenario === PracticeStatusScenario.Live
41          ? resolveStatus(new Date(), props.schedule)
42          : previewedStatus(scenario, props.schedule);
43      applyBadge(root, badgeState(status, props.phones, messages, props.detail));
44    }
45 
46    startStatusTicker(render);

1{
2  "trailingSlash": true
3}

1{
2  "name": "louq.",
3  "tagline": "Architecture & interior design portfolio",
4  "description": "Portfolio site for architect Louis Cocquyt. Fully prerendered Astro with an in-browser admin overlay that commits straight to GitHub, so the site has no backend at all.",
5  "url": "https://www.louq.be",
6  "status": "live",
7  "accent": "#c9c5c0",
8  "tags": ["astro", "static", "github-api cms", "view transitions", "playwright"],
9  "year": 2025,
10  "order": 1,
11  "pages": [
12    { "label": "Projecten", "path": "/projecten/" },
13    { "label": "Keuken BL", "path": "/projecten/keuken/" },
14    { "label": "Over mij", "path": "/over-mij/" },
15    { "label": "Contact", "path": "/contact/" }
16  ],
17  "layers": [
18    {

24  Hello = "hello",
25  Navigate = "navigate",
26  SetLocale = "setLocale",
27  PreviewPracticeStatus = "previewPracticeStatus",
28  StepCarousel = "stepCarousel",
29}
30 
31export type Command =
32  | { readonly kind: CommandKind.Hello }
33  | { readonly kind: CommandKind.Navigate; readonly path: string }
34  | { readonly kind: CommandKind.SetLocale; readonly locale: LocaleCode }
35  | {
36      readonly kind: CommandKind.PreviewPracticeStatus;
37      readonly scenario: PracticeStatusScenario;
38    }
39  | { readonly kind: CommandKind.StepCarousel; readonly step: CarouselStep };
40 
41export type SiteCommand = Exclude<Command, { readonly kind: CommandKind.Hello }>;
42 
43export enum CapabilityKind {
44  SetLocale = "setLocale",

1---
2import { getImage } from "astro:assets";
3 
4import { readLayerSnippet } from "../layers/read-layer-source";
5import type { Project } from "../portfolio/project";
6import { firstPage, projectOrigin } from "../portfolio/projects";
7import { siteCopy } from "../portfolio/site-copy";
8import { PosterDevice, posterDevices } from "../screenshots/poster-device";
9import { posterImage } from "../screenshots/project-posters";
10import { devicePresets } from "../stage/device-preset";
11import { MAX_FRAME_WIDTH_PX, MIN_FRAME_WIDTH_PX } from "../stage/frame-geometry";
12import type { PosterSources, StageProject } from "../stage/stage-project";
13 
14import LayerCard from "./LayerCard.astro";
15import ProjectRail from "./ProjectRail.astro";
16 
17type Props = {
18  readonly projects: readonly Project[];
19};
20 
21const { projects } = Astro.props;
22const copy = siteCopy.stage;
23 
24async function posterSources(project: Project): Promise<PosterSources> {
25  const entries = await Promise.all(
26    posterDevices.map(async (device) => {
27      const image = posterImage(project.id, device);
28      if (image === null) return [device, null] as const;
29      const optimized = await getImage({ src: image, format: "webp", width: image.width });
30      return [device, optimized.src] as const;

1{ "trailingSlash": true }