feat: category tags (design/film/photo/text) on the portfolio index

new categories taxonomy, multi-value per project. shown inline in each ls row as [tag] after the slug, muted like the other row metadata and inverting with it on hover/select. reuses the existing shared taxonomy template, so /categories/ and /categories/<tag>/ come for free as browsable archives in the same shell style already used for schools/degrees/semesters.\n\nassigned by medium: design for anything with plans/models, film for the two video projects, photo for the trieste study trip, text alongside design for translation (collage + accompanying theoretical text).
2026-08-14 23:50:54 +00:00
parent 892dfe600d
commit 6b59b58082
21 changed files with 25 additions and 3 deletions
@@ -148,7 +148,8 @@ body:not(.home) .menu { display: none; }
  white-space: nowrap;
 }
 .tui__perm,
-.tui__date { color: var(--color-text-muted); }
+.tui__date,
 .tui__tags { color: var(--color-text-muted); }
 .tui__ls a:hover,
 .tui__ls a.is-selected {
  background: var(--color-text-primary);
@@ -157,9 +158,11 @@ body:not(.home) .menu { display: none; }
 .tui__ls a:hover .tui__perm,
 .tui__ls a:hover .tui__date,
 .tui__ls a:hover .tui__name,
 .tui__ls a:hover .tui__tags,
 .tui__ls a.is-selected .tui__perm,
 .tui__ls a.is-selected .tui__date,
-.tui__ls a.is-selected .tui__name { color: var(--color-bg-primary); }
+.tui__ls a.is-selected .tui__name,
 .tui__ls a.is-selected .tui__tags { color: var(--color-bg-primary); }
 /* preview pane (ranger-style) below the listing */
 .tui__preview { margin: 1.25rem 0 0; }
@@ -14,6 +14,7 @@ images:
  - { src: "/img/sem02/04.webp", name: "front-elevation.webp" }
  - { src: "/img/sem02/05.webp", name: "side-elevation.webp" }
  - { src: "/img/sem02/06.webp", name: "joint-axonometric.webp" }
 categories: ["design"]
 ---
 im zentrum dieses entwurfs steht die konstruktive auseinandersetzung mit dem holzknoten – nicht als statisches detail, sondern als räumlich wirksames system. ausgehend von einem grundknoten, der ohne diagonale aussteifungen auskommt und ausschliesslich mit horizontalen und vertikalen balken funktioniert, wurde ein räumliches prinzip entwickelt, das zugleich rational und atmosphärisch ist.
@@ -14,6 +14,7 @@ images:
  - { src: "/img/sem02/04.webp", name: "front-elevation.webp" }
  - { src: "/img/sem02/05.webp", name: "side-elevation.webp" }
  - { src: "/img/sem02/06.webp", name: "joint-axonometric.webp" }
 categories: ["design"]
 ---
 at the centre of this design is the constructive exploration of the timber joint — not as a static detail, but as a spatially effective system. starting from a basic joint that works without diagonal bracing, relying solely on horizontal and vertical beams, a spatial principle was developed that is both rational and atmospheric.
@@ -12,6 +12,7 @@ images:
  - { src: "/img/hotel-national/plan-full-ground-floor.webp", name: "plan-full-ground-floor.webp" }
  - { src: "/img/hotel-national/plan-intervention-near.webp", name: "plan-intervention-near.webp" }
  - { src: "/img/hotel-national/plan-intervention-detail.webp", name: "plan-intervention-detail.webp" }
 categories: ["design"]
 ---
 in zusammenarbeit mit tamara grabovska basiert die zusammenführung des hotel national mit der lotte bibliothek auf einem bewusst gesetzten widerspruch. ein grandhotel mit klassischer repräsentationsarchitektur trifft auf eine linksautonome bibliothek. statt diesen gegensatz zu nivellieren, wird er räumlich inszeniert – als produktive koexistenz zweier haltungen innerhalb desselben gebäudes.
@@ -12,6 +12,7 @@ images:
  - { src: "/img/hotel-national/plan-full-ground-floor.webp", name: "plan-full-ground-floor.webp" }
  - { src: "/img/hotel-national/plan-intervention-near.webp", name: "plan-intervention-near.webp" }
  - { src: "/img/hotel-national/plan-intervention-detail.webp", name: "plan-intervention-detail.webp" }
 categories: ["design"]
 ---
 in collaboration with tamara grabovska, merging the hotel national with the lotte library is based on a deliberately set contradiction. a grand hotel with classical representational architecture meets a left-autonomous library. rather than levelling this opposition, it is staged spatially — as a productive coexistence of two attitudes within the same building.
@@ -16,6 +16,7 @@ images:
  - { src: "/img/sem01/05.webp", name: "cutaway-model-angle.webp" }
  - { src: "/img/sem01/06.webp", name: "site-plan.webp" }
  - { src: "/img/sem01/07.webp", name: "street-linocut.webp" }
 categories: ["design"]
 ---
 tonhalle museo ist ein spekulativer entwurf an der schnittstelle von architektur, klang und theorie. zwei scheinbar gegensätzliche programme – konzertsaal und museum – treffen in einem gemeinsamen baukörper aufeinander. dieses aufeinandertreffen wird nicht harmonisiert, sondern bewusst zugespitzt.
@@ -16,6 +16,7 @@ images:
  - { src: "/img/sem01/05.webp", name: "cutaway-model-angle.webp" }
  - { src: "/img/sem01/06.webp", name: "site-plan.webp" }
  - { src: "/img/sem01/07.webp", name: "street-linocut.webp" }
 categories: ["design"]
 ---
 tonhalle museo is a speculative design at the intersection of architecture, sound, and theory. two seemingly contradictory programmes — concert hall and museum — meet within a single building. this convergence is not harmonised but deliberately sharpened.
@@ -4,4 +4,5 @@ slug: "object-oriented-ontology"
 date: 2026-01-15
 thumbnail: "/img/ooo/thumbnail.webp"
 video: "/media/ooo.mp4"
 categories: ["film"]
 ---
@@ -4,4 +4,5 @@ slug: "object-oriented-ontology"
 date: 2026-01-15
 thumbnail: "/img/ooo/thumbnail.webp"
 video: "/media/ooo.mp4"
 categories: ["film"]
 ---
@@ -26,4 +26,5 @@ images:
  - { src: "/img/studytrip-trieste/Triest_Rozzol_Melara-04.webp", name: "rozzol-melara-04.webp" }
  - { src: "/img/studytrip-trieste/Triest_Rozzol_Melara-05.webp", name: "rozzol-melara-05.webp" }
  - { src: "/img/studytrip-trieste/Triest_Stanjel-01.webp", name: "stanjel.webp" }
 categories: ["photo"]
 ---
@@ -26,4 +26,5 @@ images:
  - { src: "/img/studytrip-trieste/Triest_Rozzol_Melara-04.webp", name: "rozzol-melara-04.webp" }
  - { src: "/img/studytrip-trieste/Triest_Rozzol_Melara-05.webp", name: "rozzol-melara-05.webp" }
  - { src: "/img/studytrip-trieste/Triest_Stanjel-01.webp", name: "stanjel.webp" }
 categories: ["photo"]
 ---
@@ -15,6 +15,7 @@ images:
  - { src: "/img/sem05/05.webp", name: "dwelling-interior.webp" }
  - { src: "/img/sem05/section01.webp", name: "long-section.webp" }
  - { src: "/img/sem05/section02.webp", name: "hall-section.webp" }
 categories: ["design"]
 ---
 die séchoir-halle, ein ehemaliger industriebau mit ursprung in der lokalen textilgeschichte, wurde in ihrer identität bewahrt und zugleich neu programmiert. wo früher viskosestoffe zum trocknen aufgehängt wurden, entstehen heute neue bausteine aus recycelten textilien. aus alten stoffen werden im stampfverfahren tragende elemente gefertigt – ein konstruktives system auf basis von kreislaufprinzipien.
@@ -15,6 +15,7 @@ images:
  - { src: "/img/sem05/05.webp", name: "dwelling-interior.webp" }
  - { src: "/img/sem05/section01.webp", name: "long-section.webp" }
  - { src: "/img/sem05/section02.webp", name: "hall-section.webp" }
 categories: ["design"]
 ---
 the séchoir-halle, a former industrial building rooted in the local textile history, was preserved in its identity while being given a new programme. where viscose fabrics were once hung to dry, new building blocks made from recycled textiles are produced today — load-bearing elements crafted from old fabrics through a ramming process, a constructive system based on circular principles.
@@ -4,4 +4,5 @@ slug: "the-shadow-over-emmen"
 date: 2025-01-10T09:00:00
 thumbnail: "/img/shadowofemmen/thumbnail.webp"
 video: "/media/shadow.mp4"
 categories: ["film"]
 ---
@@ -4,4 +4,5 @@ slug: "the-shadow-over-emmen"
 date: 2025-01-10T09:00:00
 thumbnail: "/img/shadowofemmen/thumbnail.webp"
 video: "/media/shadow.mp4"
 categories: ["film"]
 ---
@@ -7,6 +7,7 @@ schools: ["hslu"]
 degrees: ["ma"]
 images:
  - { src: "/img/translation/grid-collage.webp", name: "grid-collage.webp" }
 categories: ["design", "text"]
 ---
 in der zusammenarbeit mit tim schwander und jérôme arnold entsteht eine auseinandersetzung mit architektonischen denkweisen, die weniger zitiert als vielmehr übersetzt werden. die arbeit versteht sich als experimentierfeld, in dem ordnungssysteme, landschaft und fragment sich gegenseitig verschieben.
@@ -7,6 +7,7 @@ schools: ["hslu"]
 degrees: ["ma"]
 images:
  - { src: "/img/translation/grid-collage.webp", name: "grid-collage.webp" }
 categories: ["design", "text"]
 ---
 in collaboration with tim schwander and jérôme arnold, this work engages with architectural ways of thinking that are less quoted than translated. it understands itself as a field of experimentation in which systems of order, landscape, and fragment shift against one another.
@@ -14,6 +14,7 @@ images:
  - { src: "/img/utopie-der-koexistenz/facade-detail-model.webp", name: "facade-detail-model.webp" }
  - { src: "/img/utopie-der-koexistenz/courtyard-overview-render.webp", name: "courtyard-overview-render.webp" }
  - { src: "/img/utopie-der-koexistenz/site-plan-ground-floor.webp", name: "site-plan-ground-floor.webp" }
 categories: ["design"]
 ---
 vor dem hintergrund der funktionalen krise vieler spitäler aus den 1960er- und 70er-jahren setzt diese bachelorarbeit auf eine weiterentwicklung des bestehenden kantonsspitals baden anstelle eines radikalen abrisses. der ursprünglich vorgesehene komplettneubau wird infrage gestellt – zugunsten einer strategie, die brüche, übergänge und reibungen nicht glättet, sondern produktiv macht.
@@ -14,6 +14,7 @@ images:
  - { src: "/img/utopie-der-koexistenz/facade-detail-model.webp", name: "facade-detail-model.webp" }
  - { src: "/img/utopie-der-koexistenz/courtyard-overview-render.webp", name: "courtyard-overview-render.webp" }
  - { src: "/img/utopie-der-koexistenz/site-plan-ground-floor.webp", name: "site-plan-ground-floor.webp" }
 categories: ["design"]
 ---
 against the backdrop of the functional crisis affecting many hospitals built in the 1960s and 70s, this bachelor thesis pursues a development of the existing kantonsspital baden rather than a radical demolition. the originally planned complete new build is called into question — in favour of a strategy that does not smooth over ruptures, transitions, and frictions, but makes them productive.
@@ -8,6 +8,7 @@ enableRobotsTXT = true
  school = "schools"
  degree = "degrees"
  semester = "semesters"
  category = "categories"
 [params]
  description = "architecture studio"
@@ -16,7 +16,7 @@
           data-img="{{ with $p.Params.thumbnail }}{{ . | relURL }}{{ end }}"
           data-name="{{ $p.Slug }}"
           {{ if eq $i 0 }}class="is-selected"{{ end }}>
-      <span class="tui__perm">drwxr-xr-x</span><span class="tui__date">{{ $p.Date.Format "2006" }}</span><span class="tui__name">{{ $p.Slug }}/</span>
+      <span class="tui__perm">drwxr-xr-x</span><span class="tui__date">{{ $p.Date.Format "2006" }}</span><span class="tui__name">{{ $p.Slug }}/{{ with $p.Params.categories }} <span class="tui__tags">{{ range . }}[{{ . }}]{{ end }}</span>{{ end }}</span>
    </a></li>
    {{ end }}
  </ul>