diff --git a/assets/css/custom.css b/assets/css/custom.css index 66a202f..a768610 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -41,6 +41,9 @@ outline: none; caret-color: transparent; } +/* a command "typed" by the file browser on hover/freeze — dimmed so it reads + as a hint, not something you committed. any real keystroke discards it. */ +.prompt__input.is-ghost { color: var(--color-text-muted); font-weight: 400; } /* blinking terminal cursor, sits right after the typed text */ .caret { @@ -363,3 +366,31 @@ img { filter: none; } /* frozen/locked preview indicator */ .filebrowser.is-frozen .tui__status { color: var(--color-text-primary); } .filebrowser.is-frozen .tui__status::after { content: " ● locked"; } + +/* hide every scrollbar site-wide — content still scrolls (wheel/touch/keys), + just no native chrome. keeps the clean terminal surface everywhere. */ +* { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* old Edge/IE */ +} +*::-webkit-scrollbar { /* WebKit/Blink */ + display: none; +} + +/* ─────────────────── LANGUAGE SWITCH ─────────────────── */ +/* top-right toggle on the shell row: shows only the *other* language, + click to switch. you never see both at once. */ +.topbar { position: relative; } +.lang-switch { + position: absolute; + top: 0; + right: 0; + margin-left: 0; + font-family: var(--font-family-mono); + color: var(--color-text-muted); + border-bottom: 1px dotted; + z-index: 2; +} +.lang-switch:hover { color: var(--color-text-primary); border-bottom: 1px solid; } +/* keep the prompt text clear of the toggle so long paths never slide under it */ +.prompt { padding-right: 3.5ch; } diff --git a/static/js/boot.js b/assets/js/boot.js similarity index 95% rename from static/js/boot.js rename to assets/js/boot.js index 687df5b..a974221 100644 --- a/static/js/boot.js +++ b/assets/js/boot.js @@ -38,11 +38,7 @@ ["ok", "Loaded index.html", 70], ["ok", "Loaded css/bundle.css", 60], ["ok", "Loaded fonts/iosevka-curly-slab.woff2", 90], - ["ok", "Loaded js/cursor.js", 55], - ["ok", "Loaded js/shell.js", 55], - ["ok", "Loaded js/filebrowser.js", 55], - ["ok", "Loaded js/nav.js", 55], - ["ok", "Loaded js/boot.js", 80], + ["ok", "Loaded js/bundle.js", 80], ["ok", "Parsed DOM — 0 errors", 120], ["st", "Mounting routes...", 240], ["ok", "Mounted /", 50], diff --git a/static/js/cursor.js b/assets/js/cursor.js similarity index 100% rename from static/js/cursor.js rename to assets/js/cursor.js diff --git a/static/js/filebrowser.js b/assets/js/filebrowser.js similarity index 75% rename from static/js/filebrowser.js rename to assets/js/filebrowser.js index 56afcab..cbcc85a 100644 --- a/static/js/filebrowser.js +++ b/assets/js/filebrowser.js @@ -10,6 +10,17 @@ function hidePlayer() { if (player) { player.hidden = true; if (pv && !pv.paused) pv.pause(); } } function showPlayer() { if (player) player.hidden = false; } function setFrozen(v) { frozen = v; if (container) container.classList.toggle("is-frozen", v); } + + // tell the shell to "type" the matching command. navigable rows (those with an + // href: ".." and the portfolio project folders) are directories → `cd`; the + // preview-only leaves inside a project (images, info.md, video) are files → `cat`. + function ghostCmd(a) { + if (!a) return; + var name = a.getAttribute("data-name") || ""; + var isDir = a.hasAttribute("href"); + document.dispatchEvent(new CustomEvent("shell:ghost", { detail: (isDir ? "cd " : "cat ") + name })); + } + function ghostClear() { document.dispatchEvent(new CustomEvent("shell:ghost-clear")); } function showImg(src) { if (!img) return; img.hidden = false; @@ -20,7 +31,7 @@ if (img.complete) img.style.opacity = "1"; // already cached → no fade } - function select(i) { + function select(i, silent) { if (!rows.length) return; if (i < 0) i = 0; if (i >= rows.length) i = rows.length - 1; @@ -43,6 +54,8 @@ var y = a.querySelector(".tui__date"); cap.textContent = (n ? n.textContent.trim() : a.getAttribute("data-name")) + (y ? " " + y.textContent.trim() : ""); } + + if (!silent) ghostCmd(a); // echo into the shell, except on the initial load } function bind() { @@ -62,13 +75,13 @@ a.addEventListener("click", function (e) { if (a.getAttribute("href")) return; // navigation rows behave normally e.preventDefault(); - if (frozen && cur === i) setFrozen(false); + if (frozen && cur === i) { setFrozen(false); ghostClear(); } else { select(i); setFrozen(true); } }); }); var start = rows.findIndex(function (a) { return a.classList.contains("is-selected"); }); - select(start < 0 ? 0 : start); + select(start < 0 ? 0 : start, true); // initial selection: don't echo into the shell yet // warm the cache so switching between gallery images is instant var srcs = rows.map(function (a) { return a.getAttribute("data-img"); }).filter(Boolean); @@ -81,7 +94,7 @@ // one-time document listeners (reference the current bound state) document.addEventListener("click", function (e) { if (e.target.closest && e.target.closest(".tui__ls a")) return; - if (frozen) setFrozen(false); + if (frozen) { setFrozen(false); ghostClear(); } }); document.addEventListener("keydown", function (e) { var t = e.target; @@ -95,6 +108,15 @@ } }); + // the always-open home menu lives in the persistent header (outside the + // filebrowser and untouched by pjax). hovering a folder ghost-types `cd ` + // so the shell echoes where a click would take you, until you type for real. + Array.prototype.forEach.call(document.querySelectorAll(".menu .tui__ls a[data-name]"), function (a) { + a.addEventListener("mouseenter", function () { + document.dispatchEvent(new CustomEvent("shell:ghost", { detail: "cd " + (a.getAttribute("data-name") || "") })); + }); + }); + bind(); document.addEventListener("pjax:load", bind); })(); diff --git a/static/js/nav.js b/assets/js/nav.js similarity index 79% rename from static/js/nav.js rename to assets/js/nav.js index 0639879..6f2d8f6 100644 --- a/static/js/nav.js +++ b/assets/js/nav.js @@ -30,6 +30,12 @@ // per-section typeable routes live in .topbar — replace them var topbar = document.querySelector(".topbar"); + + // language switch (persistent header) — repoint it at THIS page's + // translation, otherwise it keeps the target of the first-loaded page + var nl = doc.querySelector(".lang-switch"), ol = document.querySelector(".lang-switch"); + if (ol && ol.parentNode) ol.parentNode.removeChild(ol); + if (nl && topbar) topbar.insertBefore(document.importNode(nl, true), topbar.firstChild); var oldR = document.querySelector(".routes"); if (oldR && oldR.parentNode) oldR.parentNode.removeChild(oldR); var newR = doc.querySelector(".routes"); @@ -49,9 +55,19 @@ if (!cache[url]) cache[url] = fetchHTML(url).catch(function () { delete cache[url]; return null; }); } + // which language a URL belongs to (de lives under /de/, en is the default) + function langOf(u) { + var p; + try { p = new URL(u, location.origin).pathname; } catch (e) { p = u; } + return /^\/de(\/|$)/.test(p) ? "de" : "en"; + } + var busy = false; function go(url, push) { if (busy) return; + // a language change rebuilds the whole chrome (menu, html lang, switch), + // so do a real reload instead of a partial content swap + if (langOf(url) !== (document.documentElement.lang || "en")) { location.href = url; return; } busy = true; (cache[url] || fetchHTML(url)) .then(function (html) { diff --git a/static/js/player.js b/assets/js/player.js similarity index 100% rename from static/js/player.js rename to assets/js/player.js diff --git a/static/js/shell.js b/assets/js/shell.js similarity index 91% rename from static/js/shell.js rename to assets/js/shell.js index 193bb45..65b59a9 100644 --- a/static/js/shell.js +++ b/assets/js/shell.js @@ -18,7 +18,7 @@ var routes = {}; function buildRoutes() { routes = {}; - Array.prototype.forEach.call(document.querySelectorAll(".menu a, .routes a, footer a[data-name]"), function (a) { + Array.prototype.forEach.call(document.querySelectorAll(".menu a, .routes a, footer a[data-name], .lang-switch"), function (a) { var key = (a.getAttribute("data-name") || a.textContent).trim().toLowerCase().replace(/\/+$/, ""); if (key) routes[key] = a.getAttribute("href"); }); @@ -32,7 +32,27 @@ } function say(msg) { if (out) out.textContent = msg; } - function navigate(u) { input.textContent = ""; if (window.pjax) window.pjax(u); else window.location.href = u; } + function navigate(u) { clearGhost(); input.textContent = ""; if (window.pjax) window.pjax(u); else window.location.href = u; } + + // ghost command: the file browser "types" e.g. `cat 03.webp` into the prompt as + // you hover/freeze a file, so you always see where you are. it's only a hint — + // any real keystroke (or navigation) discards it and the line is yours again. + var ghostActive = false; + function setGhost(text) { + if (!ghostActive && input.textContent) return; // never clobber a real command in progress + input.textContent = text; + ghostActive = true; + input.classList.add("is-ghost"); + caretToEnd(); + } + function clearGhost() { + if (!ghostActive) return; + input.textContent = ""; + ghostActive = false; + input.classList.remove("is-ghost"); + } + document.addEventListener("shell:ghost", function (e) { setGhost(e.detail); }); + document.addEventListener("shell:ghost-clear", clearGhost); function pad(n) { return (n < 10 ? "0" : "") + n; } function dateStr() { @@ -271,6 +291,8 @@ } input.addEventListener("keydown", function (e) { + // a real keystroke wins over the file-browser's ghost command + if (ghostActive && !/^(Shift|Control|Alt|Meta|CapsLock)$/.test(e.key)) clearGhost(); if (e.key === "Enter") { e.preventDefault(); run(input.textContent); return; } if (e.key === "Tab") { e.preventDefault(); complete(); return; } if (e.key === "ArrowUp" && hist.length) { @@ -305,6 +327,7 @@ if (e.metaKey || e.ctrlKey || e.altKey) return; if (e.key && e.key.length === 1) { // a printable character e.preventDefault(); + if (ghostActive) clearGhost(); // discard the ghost, type for real input.focus(); input.textContent += e.key; caretToEnd(); diff --git a/content/_index.de.md b/content/_index.de.md new file mode 100644 index 0000000..1322057 --- /dev/null +++ b/content/_index.de.md @@ -0,0 +1,5 @@ +--- +title: "startseite" +description: "architektur studio" +heroImage: "/img/Triest_Rozzol_Melara.webp" +--- diff --git a/content/about.de.md b/content/about.de.md new file mode 100644 index 0000000..98d5957 --- /dev/null +++ b/content/about.de.md @@ -0,0 +1,9 @@ +--- +title: "about" +description: "über karim gabriele varano" +layout: "about" +--- + +mein name ist karim gabriele varano. ich bin im rheintal im kanton st. gallen aufgewachsen. vor der architektur habe ich in der elektrotechnik gearbeitet, auf der baustelle und in der planung. ich bin durch die gestalterische vorbildung gegangen und von dort ins architekturstudium an der ost und der hslu. ich habe einen bachelor in architektur und arbeite zurzeit auf den master hin. was mich an der architektur fesselt, ist ihre tiefe. sie bewegt sich zwischen dem gewicht eines materials und dem gewicht einer gesellschaftlichen krise. sie borgt sich aus dem ingenieurwesen, der soziologie, der kunst, der politik. sie ist keine wissenschaft. sie ist der ort, an dem die wissenschaften sich treffen, und an dem dieses treffen in etwas realem und bewohnbarem enden muss. + +ich bin offen für [zusammenarbeit](mailto:hi@karimgabrielevarano.xyz). diff --git a/content/colophon.de.md b/content/colophon.de.md new file mode 100644 index 0000000..3fb49a3 --- /dev/null +++ b/content/colophon.de.md @@ -0,0 +1,17 @@ +--- +title: "colophon" +description: "wie diese seite gemacht ist" +dotfile: true +--- + +diese seite ist ein kleines terminal. + +sie ist statisch. hugo verwandelt meinen text in einfache html-dateien, und mehr gibt der server nie heraus. keine datenbank, kein backend, nichts zum einloggen. sie läuft auf fast jedem host. + +die leiste oben ist eine echte shell. du kannst darin tippen. portfolio, about, studio, openbureau bringen dich zu diesen seiten. help zeigt die grundlagen, tab vervollständigt ein wort, die pfeiltaste nach oben holt zurück, was du vorher getippt hast. nicht alles, was sie kennt, steht in der liste. jede seite ist auch eine dateiliste, du kannst die projekte und sogar das impressum wie verzeichnisse durchsehen und an ort und stelle lesen. + +der rest sind kleinigkeiten. die schrift ist iosevka curly slab, hier gehostet und von niemandem nachgeladen. der cursor ist pixel für pixel gezeichnet. es gibt einen dunkelmodus, wenn du dark tippst. nichts wird verfolgt, keine cookies, kein tracking. + +sie folgt derselben idee wie [openbureau](/de/openbureau/): besitze deine werkzeuge, halte deine formate lesbar. die inhalte stehen unter cc by-sa, hugo und das theme sind open source (das [impressum](/de/legal-notice/) hat die details), und die seite baut zu einem docker-image, sodass jeder seine eigene kopie betreiben kann. + +geschrieben zwischen rheintal und luzern. diff --git a/content/cv.de.md b/content/cv.de.md new file mode 100644 index 0000000..5ffd820 --- /dev/null +++ b/content/cv.de.md @@ -0,0 +1,33 @@ +--- +title: "cv" +description: "ausbildung, erfahrung, fähigkeiten" +--- + +**ausbildung** + +
+
2025-heute
ma architektur · hslu luzern · laufend
+
2023-2025
ba architektur · hslu luzern · abgeschlossen
+
2022-2023
ba architektur · ost st. gallen · 2 semester
+
2021-2022
bms gestaltung · st. gallen
+
2019-2021
elektroplanung, installation & sicherheit · 3 semester, unvollständig
+
2014-2016
lehre als elektroinstallateur
+
2011-2014
lehre als montage-elektriker
+
+ +**erfahrung** + +
+
2025-heute
architektur
+
2018-2022
elektroplanung
+
2016-2018
tontechniker
+
+ +**fähigkeiten** + +
+
gestaltung
architektur · grafik · editorial · web
+
open source
self-hosting · ict einrichtung & support
+
+ +[hi@karimgabrielevarano.xyz](mailto:hi@karimgabrielevarano.xyz) diff --git a/content/legal-notice.de.md b/content/legal-notice.de.md new file mode 100644 index 0000000..1a8c853 --- /dev/null +++ b/content/legal-notice.de.md @@ -0,0 +1,6 @@ +--- +title: "impressum" +description: "impressum, datenschutz und lizenzen" +layout: "legal" +dotfile: true +--- diff --git a/content/legal/_index.de.md b/content/legal/_index.de.md new file mode 100644 index 0000000..25f1d24 --- /dev/null +++ b/content/legal/_index.de.md @@ -0,0 +1,5 @@ +--- +build: + render: never + list: never +--- diff --git a/content/legal/disclaimer.de.md b/content/legal/disclaimer.de.md new file mode 100644 index 0000000..6ff2577 --- /dev/null +++ b/content/legal/disclaimer.de.md @@ -0,0 +1,12 @@ +--- +build: + render: never + list: never +--- + +**HAFTUNGSAUSSCHLUSS** + +der autor übernimmt keine haftung für die richtigkeit, vollständigkeit oder aktualität der bereitgestellten inhalte. ansprüche auf schadenersatz aus der nutzung oder nichtnutzung der angebotenen informationen sind ausgeschlossen. +für den inhalt extern verlinkter seiten sind ausschliesslich deren betreiber verantwortlich. zum zeitpunkt der verlinkung waren keine rechtsverstösse erkennbar. wird ein verstoss bekannt, wird der entsprechende link umgehend entfernt. + +architekturzeichnungen und projektdokumentationen, die auf dieser website veröffentlicht werden, dienen ausschliesslich der information und der präsentation von arbeiten. sie stellen keine baubewilligungen, keine statischen freigaben und keine fachliche beratung dar. diff --git a/content/legal/licences.de.md b/content/legal/licences.de.md new file mode 100644 index 0000000..d4bf202 --- /dev/null +++ b/content/legal/licences.de.md @@ -0,0 +1,16 @@ +--- +build: + render: never + list: never +--- + +**LIZENZEN** + +**WEBSITE-INHALTE**\ +alle texte, bilder und projektdokumentationen auf dieser website stehen, sofern nicht anders angegeben, unter der lizenz [creative commons namensnennung-weitergabe unter gleichen bedingungen 4.0 international (cc by-sa 4.0)](https://creativecommons.org/licenses/by-sa/4.0/). du darfst das material teilen und bearbeiten, sofern du angemessen credit gibst und deine beiträge unter derselben lizenz weitergibst. + +**FRAMEWORK — HUGO**\ +diese website wurde mit [hugo](https://gohugo.io) gebaut, einem quelloffenen statischen website-generator, lizenziert unter der [apache license 2.0](https://github.com/gohugoio/hugo/blob/master/LICENSE). + +**THEME — SHIBUI**\ +das theme shibui von nguyen tuan khanh ist unter der [mit license](https://github.com/ntk148v/shibui/blob/master/LICENSE) lizenziert. diff --git a/content/legal/privacy.de.md b/content/legal/privacy.de.md new file mode 100644 index 0000000..d3cdbd5 --- /dev/null +++ b/content/legal/privacy.de.md @@ -0,0 +1,26 @@ +--- +build: + render: never + list: never +--- + +**DATENSCHUTZERKLÄRUNG** + +der schutz deiner personendaten ist mir wichtig. diese erklärung beschreibt, wie auf dieser website mit daten umgegangen wird, im einklang mit dem schweizerischen bundesgesetz über den datenschutz (revdsg, in kraft seit 1. september 2023). + +**VERANTWORTLICHE STELLE**\ +karim gabriele varano, fluhmühlerain 1, 6015 luzern. kontaktangaben wie oben. + +**SERVER-LOG**\ +der hosting-anbieter erfasst automatisch technische zugriffsdaten in server-logdateien. dazu gehören aufgerufene seiten, datum und uhrzeit, browsertyp, betriebssystem, referrer-url und ip-adresse. diese daten werden ausschliesslich zu technischen und statistischen zwecken verwendet und nicht mit anderen datenquellen zusammengeführt oder für marketing genutzt. + +**KONTAKT PER E-MAIL**\ +wenn du mich per e-mail kontaktierst, werden deine angaben zur bearbeitung der anfrage gespeichert. diese daten werden ohne deine zustimmung nicht an dritte weitergegeben und nach abschluss der korrespondenz gelöscht, sofern keine gesetzliche aufbewahrungspflicht besteht. + +**DEINE RECHTE**\ +nach dem revdsg hast du das recht, auskunft über deine gespeicherten personendaten zu verlangen sowie deren berichtigung, löschung oder die einschränkung der bearbeitung. wende dich dazu an die oben genannte adresse. + +du hast zudem das recht, bei der zuständigen aufsichtsbehörde beschwerde zu führen, dem eidgenössischen datenschutz- und öffentlichkeitsbeauftragten (edöb): [www.edoeb.admin.ch](https://www.edoeb.admin.ch) + +**ÄNDERUNGEN**\ +diese datenschutzerklärung kann bei bedarf angepasst werden. die aktuelle fassung ist immer auf dieser seite verfügbar. diff --git a/content/legal/responsible.de.md b/content/legal/responsible.de.md new file mode 100644 index 0000000..6261b43 --- /dev/null +++ b/content/legal/responsible.de.md @@ -0,0 +1,11 @@ +--- +build: + render: never + list: never +--- + +**VERANTWORTLICH FÜR DEN INHALT** + +karim gabriele varano\ +fluhmühlerain 1, 6015 luzern, schweiz\ +[hi@karimgabrielevarano.xyz](mailto:hi@karimgabrielevarano.xyz) diff --git a/content/ob/_index.de.md b/content/ob/_index.de.md new file mode 100644 index 0000000..25f1d24 --- /dev/null +++ b/content/ob/_index.de.md @@ -0,0 +1,5 @@ +--- +build: + render: never + list: never +--- diff --git a/content/ob/dossier.de.md b/content/ob/dossier.de.md new file mode 100644 index 0000000..a30b286 --- /dev/null +++ b/content/ob/dossier.de.md @@ -0,0 +1,12 @@ +--- +build: + render: never + list: never +--- + +**DOSSIER**\ +2026 + +ein rhino-plugin für die frühe phase des architektonischen entwurfs. wände, türen, fenster, decken, treppen, geschosse und eine 2d-zeichenebene, die sich wie eine 2d-zeichenebene anfühlt. native rhino-objekte, keine parallele datenbank zum abgleichen. was es gibt, ist entweder teure proprietäre software oder vollständige bim-systeme, gebaut für die dokumentationsphasen im büromassstab, die nicht dazu passen, wie man während einer skizze tatsächlich denkt. quelloffene bim-werkzeuge leben in blender oder freecad und folgen einer 3d-zuerst-logik, nützlich, aber nicht so, wie man einen plan in 2d zeichnet. studierende und kleine büros zahlen am ende, raubkopieren oder behelfen sich im blanken rhino. dossier ist das werkzeug, das ich während meines masters und meiner eigenen arbeit selbst nutzen wollte. warum rhino und nicht ein vollständig quelloffenes cad? rhino verkauft dauerlizenzen, die man wirklich besitzt, statt abonnements, die man mietet, und seine dateiformate (3dm, opennurbs) und apis (rhinocommon, eto.forms) sind gut dokumentiert und auch ausserhalb der anwendung lesbar. das ist keine freie software, aber eine gangbare position zu eigentum und offenen daten, und dort, wo manche architekten ohnehin schon arbeiten. freecad oder librecad wären philosophisch offener, aber ihre verbreitung in der architektur ist marginal. dossier trifft die disziplin dort, wo sie steht. offene daten, eine etablierte gemeinschaft, genug infrastruktur, um darauf aufzubauen. + +[repo](https://dossier.openbureau.ch) diff --git a/content/ob/rapport.de.md b/content/ob/rapport.de.md new file mode 100644 index 0000000..23d6ca2 --- /dev/null +++ b/content/ob/rapport.de.md @@ -0,0 +1,12 @@ +--- +build: + render: never + list: never +--- + +**RAPPORT**\ +2026 + +ein verwaltungswerkzeug für kleine architekturbüros. projektverwaltung, zeiterfassung, offerten und rechnungen, buchhaltung, personaldaten, lohn, sitzungsprotokolle. alles an einem ort statt fünf zusammengeflickter abonnements. was es gibt, ist entweder zu klein (einzweck-apps, die nicht miteinander reden) oder zu gross (unternehmenssuiten für büros mit hundert leuten, mit passendem budget dazu). kleine büros zahlen am ende für software, die für jemand anderen entworfen wurde, und füllen die lücken mit tabellen. rapport ist das werkzeug, das ich selbst nutzen wollte. freie software, selbst hostbar, keine lizenz pro arbeitsplatz. deine daten bleiben auf deinen geräten. + +[repo](https://rapport.openbureau.ch) diff --git a/content/openbureau.de.md b/content/openbureau.de.md new file mode 100644 index 0000000..6405561 --- /dev/null +++ b/content/openbureau.de.md @@ -0,0 +1,13 @@ +--- +title: "openbureau" +description: "offene und selbst besessene werkzeuge für die architektur" +layout: "openbureau" +--- + +architektur läuft auf werkzeugen. die werkzeuge formen, was gedacht, gezeichnet und gebaut wird. die meisten sind proprietär: abonnements, die gekündigt werden können, dateiformate, die nur ihre eigentümer lesen können, arbeit, die verschwindet, wenn eine lizenz ausläuft. in einem beruf, der ohnehin auf prekärer arbeit läuft, ist das mietabschöpfung. + +freie und quelloffene software ist die sauberste antwort, aber nicht die einzige. worum es mir geht, ist eigentum und offenheit. werkzeuge, die du besitzt, statt sie zu mieten. dateiformate, die jeder lesen kann. daten, die nicht hinter einer bezahlschranke liegen. code als gemeingut, wo möglich. wo nicht, wenigstens offene daten. + +openbureau ist der ort, an dem ich sammle, was ich in dieser richtung baue. kleine werkzeuge, für die eigene praxis geschrieben, veröffentlicht, damit andere sie nutzen oder forken können. + +über das hinaus, was ich baue, ist openbureau auch eine dienstleistung: ich kuratiere quelloffene software, die keine fixkosten und keine abhängigkeit erzeugt, richte sie ein und betreue sie, damit ein studio oder ein kleines büro auf werkzeugen läuft, die es besitzt, statt auf abonnements, die es mietet. diff --git a/content/portfolio/_index.de.md b/content/portfolio/_index.de.md new file mode 100644 index 0000000..f6fa1db --- /dev/null +++ b/content/portfolio/_index.de.md @@ -0,0 +1,4 @@ +--- +title: "portfolio" +description: "ausgewählte projekte" +--- diff --git a/content/portfolio/dojo.de.md b/content/portfolio/dojo.de.md new file mode 100644 index 0000000..fca5570 --- /dev/null +++ b/content/portfolio/dojo.de.md @@ -0,0 +1,19 @@ +--- +title: "dojo" +slug: "dojo" +date: 2023-01-10 +thumbnail: "/img/sem02/thumbnail.webp" +studies: "/studies/ost/ba/semester_02" +schools: ["ost"] +degrees: ["ba"] +semesters: ["semester_02"] +images: + - { src: "/img/sem02/01.webp", name: "timber-model.webp" } + - { src: "/img/sem02/02.webp", name: "long-elevation.webp" } + - { src: "/img/sem02/03.webp", name: "section.webp" } + - { 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" } +--- + +im zentrum dieses studienprojekts steht die konstruktive auseinandersetzung mit dem holzknoten, nicht als statisches detail, sondern als räumlich wirksames system. ausgehend von einem grundknoten, der ohne diagonale aussteifung auskommt und allein auf horizontalen und vertikalen balken beruht, wurde ein räumliches prinzip entwickelt, das zugleich rational und atmosphärisch ist. die besonderheit liegt in seiner skalierbarkeit: derselbe knoten wird in unterschiedlichen massstäben angewendet, vom feinen raster der fassadenstruktur bis zur tragenden ordnung des zweigeschossigen baus. so entsteht ein durchgehendes konstruktives system, das den ganzen bau trägt und sich zugleich sichtbar macht. das dojo ist um einen offenen innenhof organisiert. die klare holzkonstruktion vermittelt zwischen offenheit und konzentration, zwischen leichtigkeit und strenge, eigenschaften, die sich aus den kampfkünsten ableiten. der entwurf versteht sich als architektonische reflexion über struktur, disziplin und räumliche wahrnehmung. diff --git a/content/portfolio/museo.de.md b/content/portfolio/museo.de.md new file mode 100644 index 0000000..b2bf244 --- /dev/null +++ b/content/portfolio/museo.de.md @@ -0,0 +1,21 @@ +--- +title: "museo" +slug: "museo" +date: 2022-01-10 +thumbnail: "/img/sem01/thumbnail.webp" +studies: "/studies/ost/ba/semester_01" +schools: ["ost"] +degrees: ["ba"] +semesters: ["semester_01"] +images: + - { src: "/img/sem01/01.webp", name: "cutaway-model-front.webp" } + - { src: "/img/sem01/08.webp", name: "exploded-axonometric.webp" } + - { src: "/img/sem01/02.webp", name: "plan-ground-floor.webp" } + - { src: "/img/sem01/03.webp", name: "plan-upper-floor.webp" } + - { src: "/img/sem01/04.webp", name: "section.webp" } + - { 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" } +--- + +tonhalle museo ist ein spekulatives studienprojekt an der schnittstelle von architektur, klang und theorie. zwei scheinbar widersprüchliche programme, konzertsaal und museum, treffen in einem einzigen gebäude zusammen. dieses zusammentreffen wird nicht harmonisiert, sondern bewusst verschärft: unterschiedliche räumliche logiken, nutzungsdynamiken und atmosphären prallen aufeinander und erzeugen ein spannungsfeld, das den architektonischen ausdruck prägt. der entwurf beruht auf einer auditiven analyse, eine fünfminütige klangsequenz diente als ausgangspunkt für die räumliche struktur. im fokus standen nicht funktion oder form, sondern die übersetzung von klang in räumliche dimensionen. lautstärke, rhythmus, dichte und stille wurden in proportionen, übergänge und materialität übersetzt. das ergebnis ist ein gebautes fragment, eine bewusst unvollständige idee, ein raumkörper, der nicht erklären, sondern erfahrbar werden will. tonhalle museo versteht sich als versuch, architektur durch das hören zu denken, als räumliche partitur zwischen konzentration und ablenkung, zwischen aufführung und betrachtung. diff --git a/content/portfolio/studytrip-trieste.de.md b/content/portfolio/studytrip-trieste.de.md new file mode 100644 index 0000000..2ba3c41 --- /dev/null +++ b/content/portfolio/studytrip-trieste.de.md @@ -0,0 +1,29 @@ +--- +title: "studienreise nach triest" +slug: "studytrip-trieste" +date: 2024-09-27 +thumbnail: "/img/studytrip-trieste/Triest_Canale_Grande_SantAntonio_Tramaturgo-01.webp" +studies: "/studies/hslu/ba/semester_05" +schools: ["hslu"] +degrees: ["ba"] +semesters: ["semester_05"] +images: + - { src: "/img/studytrip-trieste/Triest_Canale_Grande_SantAntonio_Tramaturgo-01.webp", name: "canale-grande-01.webp" } + - { src: "/img/studytrip-trieste/Triest_Canale_Grande_SantAntonio_Tramaturgo-02.webp", name: "canale-grande-02.webp" } + - { src: "/img/studytrip-trieste/Triest_Canale_Grande_SantAntonio_Tramaturgo-03.webp", name: "canale-grande-03.webp" } + - { src: "/img/studytrip-trieste/Triest_Canale_Grande_SantAntonio_Tramaturgo-04.webp", name: "canale-grande-04.webp" } + - { src: "/img/studytrip-trieste/Triest_Casa_Bartoli-02.webp", name: "casa-bartoli.webp" } + - { src: "/img/studytrip-trieste/Triest_Cpo_Androna_Campo_Marzio-01.webp", name: "campo-marzio.webp" } + - { src: "/img/studytrip-trieste/Triest_Kathedrale_San_Giusto-02.webp", name: "san-giusto.webp" } + - { src: "/img/studytrip-trieste/Triest_Liceo_Artistico-02.webp", name: "liceo-artistico-01.webp" } + - { src: "/img/studytrip-trieste/Triest_Liceo_Artistico-03.webp", name: "liceo-artistico-02.webp" } + - { src: "/img/studytrip-trieste/Triest_Liceo_Artistico-05.webp", name: "liceo-artistico-03.webp" } + - { src: "/img/studytrip-trieste/Triest_Liceo_Artistico-07.webp", name: "liceo-artistico-04.webp" } + - { src: "/img/studytrip-trieste/Triest_Palmanova-01.webp", name: "palmanova.webp" } + - { src: "/img/studytrip-trieste/Triest_Rozzol_Melara-01.webp", name: "rozzol-melara-01.webp" } + - { src: "/img/studytrip-trieste/Triest_Rozzol_Melara-02.webp", name: "rozzol-melara-02.webp" } + - { src: "/img/studytrip-trieste/Triest_Rozzol_Melara-03.webp", name: "rozzol-melara-03.webp" } + - { 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" } +--- diff --git a/content/portfolio/textilsteinwerk.de.md b/content/portfolio/textilsteinwerk.de.md new file mode 100644 index 0000000..b8ca0cd --- /dev/null +++ b/content/portfolio/textilsteinwerk.de.md @@ -0,0 +1,20 @@ +--- +title: "textilsteinwerk" +slug: "textilsteinwerk" +date: 2025-01-10T10:00:00 +thumbnail: "/img/sem05/03.webp" +studies: "/studies/hslu/ba/semester_05" +schools: ["hslu"] +degrees: ["ba"] +semesters: ["semester_05"] +images: + - { src: "/img/sem05/01.webp", name: "context-model.webp" } + - { src: "/img/sem05/02.webp", name: "sectional-model.webp" } + - { src: "/img/sem05/03.webp", name: "hall-interior.webp" } + - { src: "/img/sem05/04.webp", name: "facade-model.webp" } + - { 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" } +--- + +die séchoir-halle ist ein studienprojekt, das die themen handel, bestand und weiternutzung innerhalb ehemaliger industriearchitektur untersucht. ein ehemaliges industriegebäude, verwurzelt in der lokalen textilgeschichte, wird in seiner identität bewahrt und zugleich mit einem neuen programm versehen. wo einst viskosestoffe zum trocknen aufgehängt wurden, werden heute neue bausteine aus recycelten textilien produziert, tragende elemente, aus alten stoffen in einem stampfverfahren gefertigt, nach den prinzipien der kreislaufwirtschaft und der wiederverwendung von material. der bestand wird erhalten und über einer hälfte der halle um ein zusätzliches geschoss ergänzt, das seine rohe, funktionale atmosphäre fortführt, statt sie zu ersetzen. neue wohneinheiten in direkter nachbarschaft treten in dialog mit der industriearchitektur und schaffen ein gemischtes quartier mit produktiven, sozialen und wohnfunktionen. diff --git a/content/portfolio/the-shadow-over-emmen.de.md b/content/portfolio/the-shadow-over-emmen.de.md new file mode 100644 index 0000000..5316f19 --- /dev/null +++ b/content/portfolio/the-shadow-over-emmen.de.md @@ -0,0 +1,7 @@ +--- +title: "der schatten über emmen" +slug: "the-shadow-over-emmen" +date: 2025-01-10T09:00:00 +thumbnail: "/img/shadowofemmen/thumbnail.webp" +video: "/media/shadow.mp4" +--- diff --git a/content/studio.de.md b/content/studio.de.md new file mode 100644 index 0000000..763b1fc --- /dev/null +++ b/content/studio.de.md @@ -0,0 +1,26 @@ +--- +title: "studio" +description: "ruhige, typografisch präzise websites für architektur und gestaltung" +--- + +ich gestalte ruhige, typografisch präzise websites für menschen, die genug haben von überladenen baukasten-seiten. ich bin architekt. ich verstehe, wie man arbeit zeigt, bevor das gespräch anfängt. + +**was ich mache**\ +schlanke, schnelle websites, die dem gehören, der sie bezahlt. kein plugin-wildwuchs, keine monatlichen lizenzfallen, keine seite, die nach zwei jahren auseinanderfällt. gestaltung, die zurücktritt, damit die arbeit nach vorne kommt. + +**warum so und nicht anders**\ +die meisten kleinen websites laufen auf systemen, die mehr verwalten als gestalten. sie sind langsam, teuer im unterhalt und hängen an diensten, über die niemand mehr kontrolle hat. ich baue anders. statische seiten, die in fünf jahren noch laufen, im unterhalt fast nichts kosten und von keinem konzern abhängen. die gleiche haltung steckt hinter [openbureau](/de/openbureau/). + +**für wen**\ +architekturbüros, innenarchitekten, fotografen, werkstätten mit anspruch. menschen, die form ernst nehmen und eine website wollen, die das zeigt, statt es zu behaupten. + +**arbeiten**\ +
+
fund bureau
one-page-website für ein kollektiv von architekten in luzern · 2026 · fundbureau.xyz
+
+ +--- + +**kontakt**\ +wenn das nach ihrer vorstellung klingt, schreiben sie mir. ein kurzer satz dazu, wer sie sind und was sie machen, reicht für den anfang.\ +[hi@karimgabrielevarano.xyz](mailto:hi@karimgabrielevarano.xyz) diff --git a/content/studio.md b/content/studio.md index 6021c0c..c91456e 100644 --- a/content/studio.md +++ b/content/studio.md @@ -1,18 +1,18 @@ --- title: "studio" -description: "design across scales, and the open tools underneath" +description: "calm, typographically precise websites for architecture and design" --- -i work independently across scales, from buildings to books to screens, and the open infrastructure underneath them. it sounds like several jobs, but it's one: design with a bias toward things you own rather than rent, toward formats anyone can read, toward work that outlives a licence. the same logic that runs [openbureau](/openbureau/). +i make calm, typographically precise websites for people who have had enough of bloated site builders. i'm an architect. i understand how to show work before the conversation starts. -**architecture**\ -concept and design work, from early studies to drawings. +**what i do**\ +lean, fast websites that belong to whoever pays for them. no plugin sprawl, no monthly licence traps, no site that falls apart in two years. design that steps back so the work comes forward. -**open-source ICT**, via [openbureau](/openbureau/)\ -i curate, set up, and support open-source software that carries no fixed costs, so a studio runs on tools it owns instead of subscriptions it rents. +**why this way**\ +most small websites run on systems that manage more than they design. they're slow, expensive to maintain, and tied to services no one really controls anymore. i build differently. static pages that still run in five years, cost almost nothing to keep, and depend on no corporation. the same stance behind [openbureau](/openbureau/). -**graphic, editorial & web**\ -visual identity, graphic design, book and publication layout, and websites built to be fast, readable, and yours, like this one. +**who it's for**\ +architecture practices, interior designers, photographers, workshops with standards. people who take form seriously and want a website that shows it instead of claiming it. **work**\
@@ -21,5 +21,6 @@ visual identity, graphic design, book and publication layout, and websites built --- -**available** for architecture collaborations, commissions, consulting, and open-source work.\ +**contact**\ +if that sounds like what you have in mind, write to me. a short line about who you are and what you do is enough to start.\ [hi@karimgabrielevarano.xyz](mailto:hi@karimgabrielevarano.xyz) diff --git a/hugo.toml b/hugo.toml index 4ab09f8..acb1258 100644 --- a/hugo.toml +++ b/hugo.toml @@ -9,11 +9,6 @@ enableRobotsTXT = true degree = "degrees" semester = "semesters" -[languages] - [languages.en] - locale = "en_US" - weight = 1 - [params] description = "architecture studio" email = "hi@karimgabrielevarano.xyz" @@ -23,23 +18,54 @@ enableRobotsTXT = true shellUser = "karimgabrielevarano" shellHost = "xyz" -[menu] - [[menu.main]] - name = "portfolio" - url = "/portfolio/" +[languages] + [languages.en] + locale = "en_US" + label = "en" weight = 1 - [[menu.main]] - name = "about" - url = "/about/" + [languages.en.params] + description = "architecture studio" + [languages.en.menu] + [[languages.en.menu.main]] + name = "portfolio" + pageRef = "/portfolio" + weight = 1 + [[languages.en.menu.main]] + name = "about" + pageRef = "/about" + weight = 2 + [[languages.en.menu.main]] + name = "studio" + pageRef = "/studio" + weight = 3 + [[languages.en.menu.main]] + name = "openbureau" + pageRef = "/openbureau" + weight = 4 + + [languages.de] + locale = "de_CH" + label = "de" weight = 2 - [[menu.main]] - name = "studio" - url = "/studio/" - weight = 3 - [[menu.main]] - name = "openbureau" - url = "/openbureau/" - weight = 4 + [languages.de.params] + description = "architektur studio" + [languages.de.menu] + [[languages.de.menu.main]] + name = "portfolio" + pageRef = "/portfolio" + weight = 1 + [[languages.de.menu.main]] + name = "about" + pageRef = "/about" + weight = 2 + [[languages.de.menu.main]] + name = "studio" + pageRef = "/studio" + weight = 3 + [[languages.de.menu.main]] + name = "openbureau" + pageRef = "/openbureau" + weight = 4 [markup] [markup.goldmark.renderer] diff --git a/i18n/de.toml b/i18n/de.toml new file mode 100644 index 0000000..ab407b0 --- /dev/null +++ b/i18n/de.toml @@ -0,0 +1,11 @@ +[skip_to_content] +other = "Zum Inhalt springen" + +[table_of_contents] +other = "INHALTSVERZEICHNIS" + +[colophon] +other = "kolophon" + +[legal_notice] +other = "impressum" diff --git a/i18n/en.toml b/i18n/en.toml new file mode 100644 index 0000000..383f084 --- /dev/null +++ b/i18n/en.toml @@ -0,0 +1,11 @@ +[skip_to_content] +other = "Skip to content" + +[table_of_contents] +other = "TABLE OF CONTENTS" + +[colophon] +other = "colophon" + +[legal_notice] +other = "legal notice" diff --git a/layouts/404.html b/layouts/404.html index e6a8d85..c7a1293 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -4,7 +4,7 @@

$ cd .

cd: no such file or directory: .

error 404 — nothing lives here.

-

cd ~

+

cd ~

- - - - - + {{/* one fingerprinted bundle: the hash changes whenever any script changes, + so the long browser/proxy cache can never serve a stale build. order is + preserved (deferred IIFEs run in sequence). */}} + {{ $js := slice + (resources.Get "js/cursor.js") + (resources.Get "js/shell.js") + (resources.Get "js/filebrowser.js") + (resources.Get "js/player.js") + (resources.Get "js/nav.js") + (resources.Get "js/boot.js") + | resources.Concat "js/bundle.js" | minify | fingerprint }} + diff --git a/layouts/_default/legal.html b/layouts/_default/legal.html index 5c956c2..da5c211 100644 --- a/layouts/_default/legal.html +++ b/layouts/_default/legal.html @@ -10,7 +10,7 @@

$ ls

total {{ len $files }}