PageSourceSearch

https://lucasvogel.click/projects/citylab-2024

html lucasvogel.click collected 2026-09-25 21:06:22 UTC 100,205 bytes, 138 lines download raw bytes

1<!doctype html>
2<html lang="en" data-applied-mode="light">
3	<head>
4		<meta charset="utf-8" />
5		<meta name="viewport" content="width=device-width, initial-scale=1" />
6		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
7		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
8		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
9		<link rel="manifest" href="/site.webmanifest" />
10		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000" />
11		<meta name="msapplication-TileColor" content="#000000" />
12		<meta name="theme-color" content="#ffffff" />
13
14		<link rel="sitemap" href="/sitemap-index.xml" />
15		<link rel="alternate" title="Main RSS Feed" type="application/rss+xml" href="/rss.xml" />
16		<link
17			rel="alternate"
18			title="Pages-only RSS Feed"
19			type="application/rss+xml"
20			href="/rss-pages-only.xml"
21		/>
22		<link
23			rel="alternate"
24			title="Projects-only RSS Feed"
25			type="application/rss+xml"
26			href="/rss-projects-only.xml"
27		/>
28		<link
29			rel="alternate"
30			title="Cool sites-only RSS Feed"
31			type="application/rss+xml"
32			href="/rss-cool-sites-only.xml"
33		/>
34
35		
35<script>
36			// Prevent flash of light mode by applying theme before page renders
37			(function () {
38				try {
39					// Check localStorage first
40					const savedMode = localStorage.getItem('mode');
41					if (savedMode && (savedMode === 'light' || savedMode === 'dark')) {
42						document.documentElement.setAttribute('data-applied-mode', savedMode);
43						return;
44					}
45
46					// Fallback to system preference
47					if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
48						document.documentElement.setAttribute('data-applied-mode', 'dark');
49					} else {
50						document.documentElement.setAttribute('data-applied-mode', 'light');
51					}
52				} catch (e) {
53					// Fallback to light mode if anything fails
54					document.documentElement.setAttribute('data-applied-mode', 'light');
55				}
56			})();
57		</script>
57
58		
59		<link href="../../_app/immutable/assets/0.D2qSEJ96.css" rel="stylesheet">
60		<link href="../../_app/immutable/assets/Thumbnail.C0gyaOjD.css" rel="stylesheet">
61		<link href="../../_app/immutable/assets/14.poiN2xq2.css" rel="stylesheet">
62		<link rel="modulepreload" href="../../_app/immutable/entry/start.DZN56MFG.js">
63		<link rel="modulepreload" href="../../_app/immutable/chunks/C9lwCFCy.js">
64		<link rel="modulepreload" href="../../_app/immutable/chunks/CvxdmOXe.js">
65		<link rel="modulepreload" href="../../_app/immutable/chunks/BUERCR41.js">
66		<link rel="modulepreload" href="../../_app/immutable/chunks/x8LmkaR1.js">
67		<link rel="modulepreload" href="../../_app/immutable/entry/app.Cn_oiBk9.js">
68		<link rel="modulepreload" href="../../_app/immutable/chunks/KYrZkAQz.js">
69		<link rel="modulepreload" href="../../_app/immutable/chunks/R4am36Fm.js">
70		<link rel="modulepreload" href="../../_app/immutable/chunks/zVIBi7iU.js">
71		<link rel="modulepreload" href="../../_app/immutable/chunks/B2dlxjSh.js">
72		<link rel="modulepreload" href="../../_app/immutable/chunks/CCKQQ7wx.js">
73		<link rel="modulepreload" href="../../_app/immutable/chunks/DrPCdIh6.js">
74		<link rel="modulepreload" href="../../_app/immutable/nodes/0.BGI7WXqg.js">
75		<link rel="modulepreload" href="../../_app/immutable/chunks/DFXVbdo4.js">
76		<link rel="modulepreload" href="../../_app/immutable/chunks/5kCMflgU.js">
77		<link rel="modulepreload" href="../../_app/immutable/chunks/D8BbNB2e.js">
78		<link rel="modulepreload" href="../../_app/immutable/chunks/XTHsl7b3.js">
79		<link rel="modulepreload" href="../../_app/immutable/chunks/DMDv-LU-.js">
80		<link rel="modulepreload" href="../../_app/immutable/chunks/B9b5bQAs.js">
81		<link rel="modulepreload" href="../../_app/immutable/chunks/C4WSSYhr.js">
82		<link rel="modulepreload" href="../../_app/immutable/chunks/fFSeIRSl.js">
83		<link rel="modulepreload" href="../../_app/immutable/chunks/DllpYOHk.js">
84		<link rel="modulepreload" href="../../_app/immutable/chunks/BnqpbS3Z.js">
85		<link rel="modulepreload" href="../../_app/immutable/chunks/BeYJjmsQ.js">
86		<link rel="modulepreload" href="../../_app/immutable/chunks/CyTMK979.js">
87		<link rel="modulepreload" href="../../_app/immutable/chunks/CP-JHTm_.js">
88		<link rel="modulepreload" href="../../_app/immutable/chunks/CnPPOZJz.js">
89		<link rel="modulepreload" href="../../_app/immutable/nodes/14.Cd2fV7u1.js">
90		<link rel="modulepreload" href="../../_app/immutable/chunks/RSfjiCby.js">
91		<link rel="modulepreload" href="../../_app/immutable/chunks/D-zH2u6Y.js">
92		<link rel="modulepreload" href="../../_app/immutable/chunks/DyyktW2F.js">
93		<link rel="modulepreload" href="../../_app/immutable/chunks/CPHJ_euT.js">
94		<link rel="modulepreload" href="../../_app/immutable/chunks/0b8r5D2t.js">
95		<link rel="modulepreload" href="../../_app/immutable/chunks/ClWLiFvp.js">
96		<link rel="modulepreload" href="../../_app/immutable/chunks/CJLWqODJ.js">
97		<link rel="modulepreload" href="../../_app/immutable/chunks/DW2C_i5J.js">
98		<link rel="modulepreload" href="../../_app/immutable/chunks/O3Ntqxdf.js">
99		<link rel="modulepreload" href="../../_app/env.js"><!--146blvs--><!---->
99<script type="application/ld+json">{"@context":"https://schema.org","@type":"CreativeWork","name":"CityLAB Annual Review 2024","description":"*Annual review report* for CityLAB Berlin for the year 2024","datePublished":"2025-01-01","url":"https://2024.citylab-berlin.org/en","sameAs":["https://2024.citylab-berlin.org/en","https://github.com/vogelino/2024-citylab-jahresbericht"],"contributor":[{"@type":"Person","name":"Yi Jun Huang","url":"https://www.linkedin.com/in/yi-jun-huang/"},{"@type":"Person","name":"Nora Eilers","url":"https://www.linkedin.com/in/nora-eilers-9677a4310"},{"@type":"Person","name":"CityLAB Berlin","url":"https://citylab-berlin.org/de/start/"},{"@type":"Person","name":"Berlin's Tecnological Foundation","url":"https://www.technologiestiftung-berlin.de/en/"}],"keywords":"Svelte (kit),GitHub Actions,EsLint,NVM,Prettier,Vercel,CSS,HTML,TypeScript,GitHub,Tailwind CSS","about":[{"@type":"Thing","name":"Svelte (kit)","description":"A framework for building reactive web applications.","url":"https://svelte.dev/"},{"@type":"Thing","name":"GitHub Actions","description":"An automation tool for workflows in GitHub repositories.","url":"https://docs.github.com/en/actions"},{"@type":"Thing","name":"EsLint","description":"A widely used JavaScript linter that helps find and fix problems in your code.","url":"https://eslint.org/"},{"@type":"Thing","name":"NVM","description":"Node Version Manager, a tool to manage multiple active Node.js versions.","url":"https://github.com/nvm-sh/nvm"},{"@type":"Thing","name":"Prettier","description":"An opinionated code formatter that ensures consistent code style.","url":"https://prettier.io/"},{"@type":"Thing","name":"Vercel","description":"A cloud platform for deploying serverless functions and frontend apps.","url":"https://vercel.com/"},{"@type":"Thing","name":"CSS","description":"A style sheet language used for web page layout and design.","url":"https://developer.mozilla.org/en-US/docs/Web/CSS"},{"@type":"Thing","name":"HTML","description":"A markup language for creating web pages.","url":"https://developer.mozilla.org/en-US/docs/Web/HTML"},{"@type":"Thing","name":"TypeScript","description":"A statically typed superset of JavaScript.","url":"https://www.typescriptlang.org/"},{"@type":"Thing","name":"GitHub","description":"A web-based platform for version control and collaboration.","url":"https://github.com/"},{"@type":"Thing","name":"Tailwind CSS","description":"A utility-first CSS framework for building user interfaces.","url":"https://tailwindcss.com/"}],"genre":"Microsite","temporalCoverage":"2025","image":[{"@type":"ImageObject","url":"https://lucasvogel.click/src/assets/images/projects-media/001-citylab-2024.png","caption":"CityLAB Annual Review 2024"},{"@type":"ImageObject","url":"https://lucasvogel.click/src/assets/images/projects-media/002-citylab-2024.png","caption":"CityLAB Annual Review 2024"},{"@type":"ImageObject","url":"https://lucasvogel.click/src/assets/images/projects-media/003-citylab-2024.png","caption":"CityLAB Annual Review 2024"},{"@type":"ImageObject","url":"https://lucasvogel.click/src/assets/images/projects-media/004-citylab-2024.png","caption":"CityLAB Annual Review 2024"},{"@type":"ImageObject","url":"https://lucasvogel.click/src/assets/images/projects-media/005-citylab-2024.png","caption":"CityLAB Annual Review 2024"},{"@type":"ImageObject","url":"https://lucasvogel.click/src/assets/images/projects-media/006-citylab-2024.png","caption":"CityLAB Annual Review 2024"}],"programmingLanguage":""}</script>
99<!----><!----><!--j6jtfs--><meta name="description" content="Annual review report for CityLAB Berlin for the year 2024 – A web development and interface design project by Lucas Vogel."/> <meta property="og:title" content="CityLAB Annual Review 2024 – Lucas Vogel"/> <meta property="og:description" content="Annual review report for CityLAB Berlin for the year 2024 – A web development and interface design project by Lucas Vogel."/> <meta property="og:url" content="https://lucasvogel.click/projects/citylab-2024"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/> <meta property="og:image" content="https://lucasvogel.click/_app/immutable/assets/og-projects-citylab-2024.CBN53Wfn.png"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="Lucas Vogel"/> <meta property="og:locale" content="en_US"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="CityLAB Annual Review 2024 – Lucas Vogel"/> <meta name="twitter:description" content="Annual review report for CityLAB Berlin for the year 2024 – A web development and interface design project by Lucas Vogel."/> <meta name="twitter:image" content="https://lucasvogel.click/_app/immutable/assets/og-projects-citylab-2024.CBN53Wfn.png"/> <meta name="color-scheme" content="light dark"/> <meta name="application-name" content="Lucas Vogel"/> <meta name="author" content="Lucas Vogel"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="apple-mobile-web-app-title" content="Lucas Vogel"/> <meta name="mobile-web-app-capable" content="yes"/> <meta name="format-detection" content="telephone=no"/> <meta name="msapplication-config" content="/browserconfig.xml"/> <meta name="msapplication-starturl" content="/"/> <link rel="preload" href="https://lucasvogel.click/images/OSpv-vintage-concrete.webp" as="image" type="image/webp" crossorigin="anonymous" fetchpriority="high"/> <link rel="canonical" href="https://lucasvogel.click/projects/citylab-2024"/> <!--[--><meta name="keywords" content="Web Development,Front-End Development,Interface Design,Interaction Design,User Experience,Pixel Perfect,Svelte (kit),GitHub Actions,EsLint,NVM,Prettier,Vercel,CSS,HTML,TypeScript,GitHub,Tailwind CSS"/><!--]--><!----><title>CityLAB Annual Review 2024 – Lucas Vogel</title>
100	</head>
101	<body
102		data-sveltekit-preload-data="hover"
103		id="body"
104		class="!md:overflow-y-auto bg-bg text-fg min-[1440px]:border-gray-med relative mx-auto min-h-screen w-screen max-w-[1440px] overflow-x-hidden antialiased min-[1440px]:border-x"
105	>
106		<div style="display: contents"><!--[--><!--[--><!----><!----> <div aria-hidden="true" class="md:[view-transition-name:menu-backdrop] menu-backdrop pointer-events-none z-30 fixed w-screen opacity-0 md:opacity-0 to
106p-[68px] h-[calc(100svh-68px)] transition-opacity scrolled-up:top-[100px] scrolled-up:h-[calc(100svh-100px)] scrolled-up:md:h-auto"></div> <header aria-label="Main header" class="md:[view-transition-name:header] logo-visible fixed top-0 left-0 z-50 w-screen min-[1440px]:left-1/2 min-[1440px]:-translate-x-1/2 text-fg max-w-[1440px] min-[1440px]:border-x min-[1440px]:border-x-gray-med border-b flex h-[101px] items-center justify-between transition motion-reduce:transition-none px-8 lg:px-8 border-b-transparent scrolled-top translate-y-0"><a href="/" class="logo font-heading texture-mask rounded-xs antialiased group focus-visible:ring-offset-bg relative focus-visible:ring-offset-8 focus-visible:ring-fg text-2xl outline-hidden focus-visible:ring-2 md:text-3xl" aria-label="Logo (Link to Homepage)" style="view-transition-name: logo-large;"><!--[!-->Lucas Vogel<!--]--></a><!----> <span class="md:hidden" aria-hidden="true"></span> <button aria-label="Show the main navitation menu" id="burger-menu" aria-hidden="true" aria-expanded="false" tabindex="-1" class="md:invisible md:hidden"><span></span></button> <nav id="menu" aria-label="Main navigation" class="fixed left-0 w-screen md:bg-transparent opacity-0 md:pointer-events-auto md:static md:opacity-100 transition-opacity md:w-auto md:bg-none border-gray-med z-50 border-t motion-reduce:transition-none md:border-t-0 top-[100px] h-[calc(100svh-100px)] md:h-auto pointer-events-none"><ul class="flex flex-col items-center md:flex-row md:gap-2"><li class="inline-block w-full md:w-auto"><a href="/" class="border-border border-b text-xl tracking-wide md:border md:border-transparent md:normal-case px-8 pt-5 pb-6 motion-safe:transition md:px-4 hover:border-border md:py-1 md:tracking-normal inline-block w-screen md:w-auto focus-visible:ring-fg outline-hidden focus-visible:ring-2 hover:bg-gray-ultra-light md:[view-transition-name:menu-link-projects]" tabindex="0">Home</a></li><!----> <li class="inline-block w-full md:w-auto"><a href="/about" class="border-border border-b text-xl tracking-wide md:border md:border-transparent md:normal-case px-8 pt-5 pb-6 motion-safe:transition md:px-4 hover:border-border md:py-1 md:tracking-normal inline-block w-screen md:w-auto focus-visible:ring-fg outline-hidden focus-visible:ring-2 hover:bg-gray-ultra-light md:[view-transition-name:menu-link-about]" tabindex="0">About</a></li><!----> <li class="inline-block w-full md:w-auto"><a href="/cool-sites" class="border-border border-b text-xl tracking-wide md:border md:border-transparent md:normal-case px-8 pt-5 pb-6 motion-safe:transition md:px-4 hover:border-border md:py-1 md:tracking-normal inline-block w-screen md:w-auto focus-visible:ring-fg outline-hidden focus-visible:ring-2 hover:bg-gray-ultra-light md:[view-transition-name:menu-link-stuff]" tabindex="0">Stuff</a></li><!----> <li class="text-muted-foreground w-full py-5 md:w-auto md:p-0 flex items-center justify-between pr-6 pl-2 md:pr-0"><div class="md:hidden" id="social-icons"><div class="flex flex-wrap gap-2 px-6 pb-1"><a href="https://github.com/vogelino" aria-label="My GitHub profile" target="_blank" class="-ml-1.5 rounded-full px-1.5 py-1 text-xl flex items-center justify-center text-center transition-colors motion-reduce:transition-none hover:bg-fg hover:text-alt focus-visible:ring-fg outline-hidden focus-visible:ring-2 motion-safe:animate-slide-up-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" role="img" aria-label="GitHub icon"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" fill="currentColor"></path></svg><!----></a><!----> <a href="https://www.linkedin.com/in/vogelino/" aria-label="My LinkedIn profile" target="_blank" class="-ml-1.5 rounded-full px-1.5 py-1 text-xl flex items-center justify-center text-center transition-colors motion-reduce:transition-none hover:bg-fg hover:text-alt focus-visible:ring-fg outline-hidden focu
106s-visible:ring-2 motion-safe:animate-slide-up-5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="LinkedIn icon"><path d="M20.455 20.454h-3.608v-6.26c0-1.847-.785-2.417-1.798-2.417-1.07 0-2.12.806-2.12 2.463v6.214H9.32V8.992h3.47v1.588h.045c.35-.705 1.568-1.91 3.43-1.91 2.013 0 4.189 1.194 4.189 4.695v7.09ZM5.349 7.395c-1.149 0-2.08-.874-2.08-2.07 0-1.197.931-2.073 2.08-2.073s2.08.876 2.08 2.072c0 1.197-.931 2.071-2.08 2.071Zm1.804 13.05H3.545V8.983h3.608v11.462ZM22.228 0H1.772C.793 0 0 .793 0 1.772v20.456c0 .978.793 1.771 1.772 1.771h20.456c.979 0 1.772-.793 1.772-1.771V1.772C24 .793 23.207 0 22.228 0Z" fill="currentColor"></path></svg><!----></a><!----> <a href="https://dribbble.com/vogelino" aria-label="My Dribbble profile" target="_blank" class="-ml-1.5 rounded-full px-1.5 py-1 text-xl flex items-center justify-center text-center transition-colors motion-reduce:transition-none hover:bg-fg hover:text-alt focus-visible:ring-fg outline-hidden focus-visible:ring-2 motion-safe:animate-slide-up-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 108 100" role="img" aria-label="Dribble icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M50 0C22.397 0 0 22.397 0 50C0 77.603 22.397 100 50 100C77.5488 100 100 77.603 100 50C100 22.397 77.5488 0 50 0ZM83.026 23.0477C88.9913 30.3145 92.5705 39.5879 92.679 49.6204C91.269 49.3492 77.1692 46.4751 62.961 48.2646C62.6356 47.5597 62.3644 46.8004 62.0391 46.0412C61.1714 43.9805 60.1952 41.8655 59.2191 39.859C74.9458 33.4599 82.1041 24.2408 83.026 23.0477ZM50 7.37527C60.846 7.37527 70.7701 11.4425 78.308 18.1128C77.5488 19.1974 71.0954 27.82 55.9111 33.5141C48.9154 20.6616 41.1605 10.141 39.9675 8.5141C43.167 7.75488 46.5293 7.37527 50 7.37527ZM31.833 11.3883C32.9718 12.9067 40.564 23.4816 47.6681 36.0629C27.7115 41.3774 10.0868 41.269 8.18872 41.269C10.9544 28.0369 19.9024 17.0282 31.833 11.3883ZM7.26681 50.0542C7.26681 49.6204 7.26681 49.1866 7.26681 48.7527C9.11063 48.8069 29.8265 49.0781 51.1388 42.679C52.3861 45.0651 53.5249 47.5054 54.6095 49.9458C54.0672 50.1085 53.4707 50.2712 52.9284 50.4338C30.9111 57.538 19.1974 76.9523 18.2213 78.5792C11.4425 71.0412 7.26681 61.0087 7.26681 50.0542ZM50 92.7332C40.1302 92.7332 31.0195 89.3709 23.8069 83.731C24.5662 82.1584 33.243 65.4555 57.321 57.0499C57.4295 56.9957 57.4837 56.9957 57.5922 56.9414C63.6117 72.5054 66.0521 85.5748 66.7028 89.3167C61.551 91.5401 55.9111 92.7332 50 92.7332ZM73.807 85.4122C73.3731 82.8091 71.0955 70.3362 65.5098 54.9892C78.9046 52.8742 90.6182 56.3449 92.0824 56.833C90.2386 68.7093 83.4056 78.9588 73.807 85.4122Z" fill="currentColor"></path></svg><!----></a><!----> <a href="https://bsky.app/profile/vogelino.bsky.social" aria-label="My Bluesky profile" target="_blank" class="-ml-1.5 rounded-full px-1.5 py-1 text-xl flex items-center justify-center text-center transition-colors motion-reduce:transition-none hover:bg-fg hover:text-alt focus-visible:ring-fg outline-hidden focus-visible:ring-2 motion-safe:animate-slide-up-7"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Bluesky icon"><path d="M5.20228 2.8284C7.95384 4.89418 10.9132 9.08265 12 11.3302C13.0868 9.08265 16.0462 4.89418 18.7977 2.8284C20.7831 1.33787 24 0.184647 24 3.8544C24 4.58733 23.5798 10.0113 23.3333 10.892C22.4767 13.9533 19.355 14.7342 16.578 14.2616C21.4319 15.0877 22.6667 17.8241 20 20.5604C14.9355 25.7572 12.7208 19.2565 12.1535 17.5907C12.0494 17.2854 12.0007 17.1426 12 17.264C11.9992 17.1425 11.9506 17.2854 11.8465 17.5907C11.2792 19.2565 9.0645 25.7573 4.00003 20.5604C1.33331 17.8241 2.56809 15.0877 7.42191 14.2616C4.64503 14.7342 1.52334 13.9533 0.666656 10.892C0.420188 10.0113 0 4.58733 0 3.8544C0 0.184647 3.21694 1.33787 5.20228 2.8284Z" fill="currentColor"></path></svg><!----></a><!----> <a href="https://www.instagram.com/lucasvogel.click/" aria-label="My Instagram profile" target="_blank" class="-ml-1.5 rounded-full px-1.5 py-1 text-xl flex items-center justify-center text-center transition-colors motion-reduce:transition-none hover:bg-fg hover:text-alt focus-visible:ring-fg outline-hidden focu
106s-visible:ring-2 motion-safe:animate-slide-up-8"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-instagram"><!--[--><!----><rect width="20" height="20" x="2" y="2" rx="5" ry="5"><!----></rect><!----><!----><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"><!----></path><!----><!----><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"><!----></line><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----></a><!----></div><!----></div> <div class="text-fg inline-flex items-center"><button id="mode-toggle" class="mode-toggle inline-flex h-10 w-10 items-center justify-center focus-visible:ring-fg outline-hidden focus-visible:ring-2 focus-visible:rounded-full" title="Dark mode" role="switch" aria-checked="false" aria-label="Light mode"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="mode-toggle__within size-6" viewBox="0 0 32 32" fill="currentColor"><clipPath id="mode-toggle__within__clip"><path d="M0 0h32v32h-32ZM6 16A1 1 0 0026 16 1 1 0 006 16"></path></clipPath><g clip-path="url(#mode-toggle__within__clip)"><path d="M30.7 21.3 27.1 16l3.7-5.3c.4-.5.1-1.3-.6-1.4l-6.3-1.1-1.1-6.3c-.1-.6-.8-.9-1.4-.6L16 5l-5.4-3.7c-.5-.4-1.3-.1-1.4.6l-1 6.3-6.4 1.1c-.6.1-.9.9-.6 1.3L4.9 16l-3.7 5.3c-.4.5-.1 1.3.6 1.4l6.3 1.1 1.1 6.3c.1.6.8.9 1.4.6l5.3-3.7 5.3 3.7c.5.4 1.3.1 1.4-.6l1.1-6.3 6.3-1.1c.8-.1 1.1-.8.7-1.4zM16 25.1c-5.1 0-9.1-4.1-9.1-9.1 0-5.1 4.1-9.1 9.1-9.1s9.1 4.1 9.1 9.1c0 5.1-4 9.1-9.1 9.1z"></path></g><path class="mode-toggle__within__circle" d="M16 7.7c-4.6 0-8.2 3.7-8.2 8.2s3.6 8.4 8.2 8.4 8.2-3.7 8.2-8.2-3.6-8.4-8.2-8.4zm0 14.4c-3.4 0-6.1-2.9-6.1-6.2s2.7-6.1 6.1-6.1c3.4 0 6.1 2.9 6.1 6.2s-2.7 6.1-6.1 6.1z"></path><path class="mode-toggle__within__inner" d="M16 9.5c-3.6 0-6.4 2.9-6.4 6.4s2.8 6.5 6.4 6.5 6.4-2.9 6.4-6.4-2.8-6.5-6.4-6.5z"></path></svg></button><!----></div></li></ul></nav></header><!----> <!--[!--><!----><!----> <!----> <!----><main class="flex min-h-screen w-screen max-w-[1438px] flex-col overflow-x-hidden"><div class="pswp-gallery relative splide h-[calc(100svh-16px)] w-screen overflow-x-hidden max-w-[1438px] group outline-hidden" aria-label="List of project images" id="main-slider"><div class="splide__track h-[calc(100svh-16px)] w-screen max-w-[1438px] top-0 border-b-gray-med bg-gray-ultra-light border-b" style="position: fixed !important; opacity: calc(1 - var(--scroll-percentage, 0)); will-change: opacity; transition: opacity 100ms ease-out;"><svg class="5xl:-scale-x-100 text-gray-light pointer-events-none absolute inset-0 size-full -scale-y-100" aria-hidden="true"><defs><pattern id="pattern-checkers" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse"><rect fill="currentColor" x="15" y="0" width="1" height="16"></rect><rect fill="currentColor" x="0" y="15" width="16" height="1"></rect></pattern><radialGradient id="radialGradient"><stop offset="0%" stop-color="white"></stop><stop offset="100%" stop-color="black"></stop></radialGradient><mask id="radialMask"><rect x="0" y="-100%" width="200%" height="200%" fill="url(#radialGradient)"></rect></mask></defs><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers
106)" mask="url(#radialMask)"></rect></svg><!----> <ul class="splide__list h-[calc(100svh-16px)] w-screen max-w-[1440px]"><!--[--><li class="splide__slide splide__intro relative h-[calc(100svh-188px)] w-screen max-w-[1440px] !md:my-20 mt-24! mb-0 items-stretch justify-center gap-[3vh] flex flex-col sm:flex-row"><div class="flex flex-col sm:shrink-0 sm:grow sm:basis-[180px] lg:min-w-sm items-start justify-start p-8 sm:items-center sm:justify-center" style="will-change: filter; filter: blur(calc(var(--scroll-percentage, 0) * 30px));"><div class="inline-flex max-w-md flex-col items-start"><span class="mb-[1svh] inline-block sm:text-xl md:text-2xl text-muted-foreground select-text motion-safe:animate-slide-up-1">2025</span> <h1 class="font-heading text-3xl antialiased sm:text-5xl md:text-6xl 2xl:text-7xl leading-[0.9em] text-balance sm:leading-[1em] texture-mask select-text motion-safe:animate-slide-up-2"><!---->CityLAB Annual Review 2024<!----></h1> <p class="text-balance select-text leading-[1.2em] mt-[1vh] sm:mt-3 sm:text-xl md:mt-4 md:text-2xl motion-safe:animate-slide-up-3"><!----><strong>Annual review report</strong> for CityLAB Berlin for the year 2024<!----></p> <div class="mt-4 flex flex-wrap gap-x-4 gap-y-2 pt-6 border-gray-light col-span-full border-t motion-safe:animate-slide-up-4"><!--[--><!--[--><a href="https://2024.citylab-berlin.org/en" target="_blank" class="w-fit antialiased top-0 transition motion-reduce:transition-none flex items-center gap-1 md:gap-2 px-2 pt-1 pb-1.5 text-xl md:px-4 md:pt-1.5 md:pb-2 md:text-2xl outline-hidden focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg border bg-fg texture-mask text-bg border-fg hover:bg-bg hover:text-fg font-hightlight"><!--[--><!---->Launch<!----><!--]--> <!--[--><!----><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="mt-1" class="lucide-icon lucide lucide-link"><!--[--><!----><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"><!----></path><!----><!----><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----><!--]--></a><!--]--><!--]--> <!--[--><!--[--><a href="https://github.com/vogelino/2024-citylab-jahresbericht" target="_blank" class="w-fit antialiased top-0 transition motion-reduce:transition-none flex items-center gap-1 md:gap-2 px-2 pt-1 pb-1.5 text-xl md:px-4 md:pt-1.5 md:pb-2 md:text-2xl outline-hidden focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg border-border border bg-gray-ultra-light text-fg hover:bg-bg hover:text-fg hover:border-fg"><!--[--><!---->Code<!----><!--]--> <!--[--><!----><svg xmlns="http://www.w3.org/2000/svg" class="mt-1" width="24" height="24" viewBox="0 0 16 16" role="img" aria-label="GitHub icon"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" fill="currentColor"></path></svg><!----><!--]--></a><!--]--><!--]--></div></div></div> <div class="xs:py-6 flex items-center justify-center px-6 relative max-h-full basis-[45vw] sm:basis-[50vw] md:basis-[60vw] intro-slide-tilted-image" style="will-change: filter; filter: blur(calc(var(--scroll-percentage, 0) * 30px));"><div class="motion-safe:animate-slide-up-5 relative w-full"><div class="z-0 max-h-[30vh] sm:max-h-[70vh] md:max-h-[80vh] intro-slide-tilted-shadow absolute inset-0" aria-hidden="true"><div class="absolute inset-0 bg-linear-to-t from-black/20 via-black/5 to-black/0 origin-bottom -skew-x-8 blur-xs"></div></div> <div class="max-h-[30vh] sm:max-h-[70vh] md:max-h-[80vh] bg-bg w-full ring-gray-light ring-1 dark:contrast-[1.1] dark:saturate-[1.1] relative z-10 overflow-hidden"><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/citylab-2024.CNwOfBeZ.avif 720w, /_app/immutable/assets/citylab-2024.DoZHtNa5.avif 1440w" type="image/avif"/><source srcset="/_app/immutable/assets/citylab-2024.DVolQ0NT.webp 720w, /_app/immutable/assets/citylab-2024.DEwZE_v8.webp 1440w" type="image/webp"/><source srcset="/_app/immutable/assets/citylab-2024.NrTbOh0l.png 720w, /_app/immutable/assets/citylab-2024.CzGGOsGt.png 1440w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/citylab-2024.CzGGOsGt.png" alt="Thumbn
106ail for the project &quot;CityLAB Annual Review 2024&quot;" loading="eager" fetchpriority="high" width="1440" height="2217"/></picture><!--]--></div></div></div> <!--[!--><!--]--></li><!--]--><!----> <!--[--><!--[--><li class="splide__slide mt-24! mb-20! h-[calc(100svh-188x)] w-screen px-6 lg:px-8 xl:px-10 flex items-center justify-center" style="filter: blur(calc(var(--scroll-percentage, 0) * 10px)); transition: filter 100ms ease-out;"><a class="powerswipe-link overflow-hidden shadow-lg shadow-gray-med dark:shadow-gray-ultra-light contrast-more:shadow-bg max-h-full max-w-full ring-1 ring-black/5 focus-visible:ring-fg outline-hidden focus-visible:ring-2 focus-visible:ring-offset-gray-ultra-light focus-visible:ring-offset-4 hover:cursor-zoom-in" href="/_app/immutable/assets/001-citylab-2024.CyqJQ609.png" aria-label="Screenshot of the project CityLAB Annual Review 2024" data-pswp-width="2880" data-pswp-height="1800" target="_blank" rel="noreferrer"><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/001-citylab-2024.q0ud9cio.avif 1440w, /_app/immutable/assets/001-citylab-2024.CCUEB-3z.avif 2880w" type="image/avif"/><source srcset="/_app/immutable/assets/001-citylab-2024.DNCn0MDY.webp 1440w, /_app/immutable/assets/001-citylab-2024.Bw8mERiB.webp 2880w" type="image/webp"/><source srcset="/_app/immutable/assets/001-citylab-2024.CjT4kpmT.png 1440w, /_app/immutable/assets/001-citylab-2024.CyqJQ609.png 2880w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/001-citylab-2024.CyqJQ609.png" alt="Screenshot of the project CityLAB Annual Review 2024" class="splide__img" loading="eager" width="2880" height="1800"/></picture><!--]--></a></li><!--]--><!--[--><li class="splide__slide mt-24! mb-20! h-[calc(100svh-188x)] w-screen px-6 lg:px-8 xl:px-10 flex items-center justify-center" style="filter: blur(calc(var(--scroll-percentage, 0) * 10px)); transition: filter 100ms ease-out;"><a class="powerswipe-link overflow-hidden shadow-lg shadow-gray-med dark:shadow-gray-ultra-light contrast-more:shadow-bg max-h-full max-w-full ring-1 ring-black/5 focus-visible:ring-fg outline-hidden focus-visible:ring-2 focus-visible:ring-offset-gray-ultra-light focus-visible:ring-offset-4 hover:cursor-zoom-in" href="/_app/immutable/assets/002-citylab-2024.DCFogxod.png" aria-label="Screenshot of the project CityLAB Annual Review 2024" data-pswp-width="2880" data-pswp-height="1800" target="_blank" rel="noreferrer"><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/002-citylab-2024.PBWVHYIk.avif 1440w, /_app/immutable/assets/002-citylab-2024.Cn-CZXK4.avif 2880w" type="image/avif"/><source srcset="/_app/immutable/assets/002-citylab-2024.CzPOh3ho.webp 1440w, /_app/immutable/assets/002-citylab-2024.CXEirmlV.webp 2880w" type="image/webp"/><source srcset="/_app/immutable/assets/002-citylab-2024.DAySG5Ok.png 1440w, /_app/immutable/assets/002-citylab-2024.DCFogxod.png 2880w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/002-citylab-2024.DCFogxod.png" alt="Screenshot of the project CityLAB Annual Review 2024" class="splide__img" loading="eager" width="2880" height="1800"/></picture><!--]--></a></li><!--]--><!--[--><li class="splide__slide mt-24! mb-20! h-[calc(100svh-188x)] w-screen px-6 lg:px-8 xl:px-10 flex items-center justify-center" style="filter: blur(calc(var(--scroll-percentage, 0) * 10px)); transition: filter 100ms ease-out;"><a class="powerswipe-link overflow-hidden shadow-lg shadow-gray-med dark:shadow-gray-ultra-light contrast-more:shadow-bg max-h-full max-w-full ring-1 ring-black/5 focus-visible:ring-fg outline-hidden focus-visible:ring-2 focus-visible:ring-offset-gray-ultra-light focus-visible:ring-offset-4 hover:cursor-zoom-in" href="/_app/immutable/assets/003-citylab-2024.DqIYjh9X.png" aria-label="Screenshot of the project CityLAB Annual Review 2024" data-pswp-width="2880" data-pswp-height="1800" target="_blank" rel="noreferrer"><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/003-citylab-2024.CDl6LbzR.avif 1440w, /_app/immutable/assets/003-citylab-2024.B6l7Rzr3.avif 2880w" type="image/avif"/><source srcset="/_app/immutable/assets/003-citylab-2024.CeS2UdFv.webp 1440w, /_app/immutable/assets/003-citylab-2024.Ct2gwsWg.webp 2880w" type="image/webp"/><source srcset="/_app/immutable/assets/003-citylab-2024.CCDabMcx.png 1440w, /_app/immutable/assets/003-citylab-2024.DqIYjh9X.png 2880w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/003-citylab-2024.DqIYjh9X.png" alt="Screenshot of the project CityLAB Annual Review 2024" class="splide__img" loading="eager" width="2880" height="1800"/></picture><!--]--></a></li>
106<!--]--><!--[--><li class="splide__slide mt-24! mb-20! h-[calc(100svh-188x)] w-screen px-6 lg:px-8 xl:px-10 flex items-center justify-center" style="filter: blur(calc(var(--scroll-percentage, 0) * 10px)); transition: filter 100ms ease-out;"><a class="powerswipe-link overflow-hidden shadow-lg shadow-gray-med dark:shadow-gray-ultra-light contrast-more:shadow-bg max-h-full max-w-full ring-1 ring-black/5 focus-visible:ring-fg outline-hidden focus-visible:ring-2 focus-visible:ring-offset-gray-ultra-light focus-visible:ring-offset-4 hover:cursor-zoom-in" href="/_app/immutable/assets/004-citylab-2024.1nOTJ7RX.png" aria-label="Screenshot of the project CityLAB Annual Review 2024" data-pswp-width="2880" data-pswp-height="1800" target="_blank" rel="noreferrer"><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/004-citylab-2024.3u5SZjjG.avif 1440w, /_app/immutable/assets/004-citylab-2024.CA1yVdfk.avif 2880w" type="image/avif"/><source srcset="/_app/immutable/assets/004-citylab-2024.DQFttbBQ.webp 1440w, /_app/immutable/assets/004-citylab-2024.CwVzbZzS.webp 2880w" type="image/webp"/><source srcset="/_app/immutable/assets/004-citylab-2024.DomregUe.png 1440w, /_app/immutable/assets/004-citylab-2024.1nOTJ7RX.png 2880w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/004-citylab-2024.1nOTJ7RX.png" alt="Screenshot of the project CityLAB Annual Review 2024" class="splide__img" loading="eager" width="2880" height="1800"/></picture><!--]--></a></li><!--]--><!--[--><li class="splide__slide mt-24! mb-20! h-[calc(100svh-188x)] w-screen px-6 lg:px-8 xl:px-10 flex items-center justify-center" style="filter: blur(calc(var(--scroll-percentage, 0) * 10px)); transition: filter 100ms ease-out;"><a class="powerswipe-link overflow-hidden shadow-lg shadow-gray-med dark:shadow-gray-ultra-light contrast-more:shadow-bg max-h-full max-w-full ring-1 ring-black/5 focus-visible:ring-fg outline-hidden focus-visible:ring-2 focus-visible:ring-offset-gray-ultra-light focus-visible:ring-offset-4 hover:cursor-zoom-in" href="/_app/immutable/assets/005-citylab-2024.B0P7XOxr.png" aria-label="Screenshot of the project CityLAB Annual Review 2024" data-pswp-width="2880" data-pswp-height="1800" target="_blank" rel="noreferrer"><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/005-citylab-2024.DoTvDt-e.avif 1440w, /_app/immutable/assets/005-citylab-2024.nQ3dv5v2.avif 2880w" type="image/avif"/><source srcset="/_app/immutable/assets/005-citylab-2024.Dr-ShyO4.webp 1440w, /_app/immutable/assets/005-citylab-2024.CqhUEVYO.webp 2880w" type="image/webp"/><source srcset="/_app/immutable/assets/005-citylab-2024.B_o-55UI.png 1440w, /_app/immutable/assets/005-citylab-2024.B0P7XOxr.png 2880w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/005-citylab-2024.B0P7XOxr.png" alt="Screenshot of the project CityLAB Annual Review 2024" class="splide__img" loading="eager" width="2880" height="1800"/></picture><!--]--></a></li><!--]--><!--[--><li class="splide__slide mt-24! mb-20! h-[calc(100svh-188x)] w-screen px-6 lg:px-8 xl:px-10 flex items-center justify-center" style="filter: blur(calc(var(--scroll-percentage, 0) * 10px)); transition: filter 100ms ease-out;"><a class="powerswipe-link overflow-hidden shadow-lg shadow-gray-med dark:shadow-gray-ultra-light contrast-more:shadow-bg max-h-full max-w-full ring-1 ring-black/5 focus-visible:ring-fg outline-hidden focus-visible:ring-2 focus-visible:ring-offset-gray-ultra-light focus-visible:ring-offset-4 hover:cursor-zoom-in" href="/_app/immutable/assets/006-citylab-2024.FRMppI0-.png" aria-label="Screenshot of the project CityLAB Annual Review 2024" data-pswp-width="2880" data-pswp-height="1800" target="_blank" rel="noreferrer"><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/006-citylab-2024.DRwQD8mM.avif 1440w, /_app/immutable/assets/006-citylab-2024.De5LLLbP.avif 2880w" type="image/avif"/><source srcset="/_app/immutable/assets/006-citylab-2024.yuzC2Fx5.webp 1440w, /_app/immutable/assets/006-citylab-2024.CUDvJFgi.webp 2880w" type="image/webp"/><source srcset="/_app/immutable/assets/006-citylab-2024.CObefFnY.png 1440w, /_app/immutable/assets/006-citylab-2024.FRMppI0-.png 2880w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/006-citylab-2024.FRMppI0-.png" alt="Screenshot of the project CityLAB Annual Review 2024" class="splide__img" loading="eager" width="2880" height="1800"/></picture><!--]--></a></li>
106<!--]--><!--]--></ul></div></div><!----> <section aria-label="Project information" class="bg-bg border-t-gray-med relative -mt-px border-t"><nav aria-label="Slides navigation" class="flex w-screen justify-between px-0 max-w-[1440px] -translate-y-full"><button aria-label="Scroll to the text description of the project" id="about-tab" class="text-2xl transition-colors xs:pb-3 xs:pt-3 pt-2 pb-1.5 tracking-wide translate-y-px px-6 lg:px-8 border-b-bg bg-bg z-20 border-t border-r outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg focus-visible:z-30 focus-visible:rounded-sm hover:bg-fg hover:text-bg cursor-pointer justify-center motion-reduce:transition-none">Info</button> <div class="-gap-px -mr-px flex min-[1438px]:mr-px"><button aria-label="Show the previous project image" id="project-prev" class="text-xl transition-colors md:text-2xl xs:px-5 -ml-px border px-3 py-4 tracking-wide bg-bg border-gray-med z-20 outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg focus-visible:z-30 focus-visible:rounded-sm hover:bg-fg hover:text-bg hover:border-fg cursor-pointer motion-reduce:transition-none"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-left"><!--[--><!----><path d="m12 19-7-7 7-7"><!----></path><!----><!----><path d="M19 12H5"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----></button> <button aria-label="Show the next project image" id="project-next" class="text-xl transition-colors md:text-2xl xs:px-5 -ml-px border px-3 py-4 tracking-wide bg-bg border-gray-med z-20 outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg focus-visible:z-30 focus-visible:rounded-sm hover:bg-fg hover:text-bg hover:border-fg cursor-pointer motion-reduce:transition-none"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-right"><!--[--><!----><path d="M5 12h14"><!----></path><!----><!----><path d="m12 5 7 7-7 7"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----></button></div></nav><!----> <div class="-mt-4 px-6 leading-normal lg:px-8 sm:text-xl lg:text-2xl xl:grid xl:grid-cols-[5fr_2fr] xl:gap-8 2xl:grid-cols-[3fr_1fr]"><div class="relative lg:gap-8 max-w-3xl xl:max-w-[90%]" aria-label="Project description"><!----><h3>Insight</h3> <p>The CityLAB Berlin 2024 annual review microsite marks both a celebration of the year’s accomplishments and the lab’s 5th anniversary.
107Designed as an engaging digital report, the site presents CityLAB’s highlights milestones, and impact in a celebrative, visually dynamic format.
108It underscores CityLAB’s mission to connect public administration, citizens, and technology experts around sustainability, digital participation, and open innovation through interactive storytelling and distinctive visuals.</p> <h3>Process</h3> <p>The main focus was to showcase the many facets of CityLAB Berlin—the diversity of its services, projects, and programmes—in a way that feels cohesive and engaging. I designed dynamic layouts using CityLAB’s isometric shapes, with scroll-driven animations and 
108SVG masks to add visual interest and guide users through the content. The bilingual site, built with SvelteKit and vanilla JavaScript, features sections on the lab’s mission, key projects (like “Gieß den Kiez” and the Kiezlabor), events, and community initiatives. Regular feedback from the CityLAB team helped ensure the content and interactions reflected the collaborative, experimental spirit of the lab.</p> <h3>Personal role</h3> <p>I was responsible for the design and front-end development, from layout concepts to implementing animations and interactive elements. I took CityLAB’s brand identity and adapted it into a celebratory version for the anniversary, building custom visual features like animated stats, image galeries, and fun fact nuggets. This project allowed me to use playful, content-driven storytelling to make what makes CityLAB unique palpable.</p><!----></div> <aside class="@container/collabs relative" aria-label="Project collaborators"><div class="sticky top-20 max-w-3xl items-stretch grid grid-cols-1 @lg/collabs:grid-cols-2 @2xl/collabs:grid-cols-3 text-base @lg/collabs:text-xl"><!--[--><div class="mb-8 flex flex-wrap gap-x-4 gap-y-2 pb-8 border-gray-light col-span-full border-b"><!--[--><!--[--><a href="https://2024.citylab-berlin.org/en" target="_blank" class="w-fit antialiased top-0 transition motion-reduce:transition-none flex items-center gap-1 md:gap-2 px-2 pt-1 pb-1.5 text-xl md:px-4 md:pt-1.5 md:pb-2 md:text-2xl outline-hidden focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg border bg-fg texture-mask text-bg border-fg hover:bg-bg hover:text-fg font-hightlight"><!--[--><!---->Launch<!----><!--]--> <!--[--><!----><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="mt-1" class="lucide-icon lucide lucide-link"><!--[--><!----><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"><!----></path><!----><!----><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----><!--]--></a><!--]--><!--]--> <!--[--><!--[--><a href="https://github.com/vogelino/2024-citylab-jahresbericht" target="_blank" class="w-fit antialiased top-0 transition motion-reduce:transition-none flex items-center gap-1 md:gap-2 px-2 pt-1 pb-1.5 text-xl md:px-4 md:pt-1.5 md:pb-2 md:text-2xl outline-hidden focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg border-border border bg-gray-ultra-light text-fg hover:bg-bg hover:text-fg hover:border-fg"><!--[--><!---->Code<!----><!--]--> <!--[--><!----><svg xmlns="http://www.w3.org/2000/svg" class="mt-1" width="24" height="24" viewBox="0 0 16 16" role="img" aria-label="GitHub icon"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" fill="currentColor"></path></svg><!----><!--]--></a><!--]--><!--]--> <!--[--><!--]--></div><!--]--> <!--[--><div class="bg-bg relative flex flex-col gap-2 pb-8 basis-full md:basis-1/2" aria-label="Collaborators group: Made for"><div class="min-h-[calc(100%-1rem)] w-[calc(100%-1rem)]"><h2 class="font-heading pb-3.5 antialiased">Made for</h2> <ul class="flex flex-col gap-2" aria-label="Collaborators list"><!--[--><!--[--><li><!--[!--><a href="https://citylab-berlin.org/de/start/" title="Site of CityLAB Berlin" target="_blank" rel="noreferrer nofollow" class="grid grid-cols-[45px_1fr] items-center dark:text-white group w-fit pr-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-fg focus-visible:ring-offset-bg focus-visible:rounded-xs relative outline-hidden focu
108s-visible:z-10 hover:bg-fg hover:text-white dark:hover:text-bg transition-colors motion-reduce:transition-none"><!--[--><span class="relative overflow-clip bg-bg size-8"><!--[!--><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/odis.C2cfyMyw.avif 45w, /_app/immutable/assets/odis.BqrOknxG.avif 90w" type="image/avif"/><source srcset="/_app/immutable/assets/odis.D3WtU2SY.webp 45w, /_app/immutable/assets/odis.WN1Fplad.webp 90w" type="image/webp"/><source srcset="/_app/immutable/assets/odis.DId0CTWU.png 45w, /_app/immutable/assets/odis.BdfW4mN2.png 90w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/odis.BdfW4mN2.png" alt="Portrait image of CityLAB Berlin" class="object-center aspect-square border border-border transition-opacity bg-gray-light/30 motion-reduce:transition-none min-w-full min-h-full" width="90" height="90"/></picture><!--]--><!--]--></span> <span class="text-sm leading-4 decoration-gray-med underline">CityLAB Berlin</span><!--]--><!----></a><!--]--></li><!--]--><!--[--><li><!--[!--><a href="https://www.technologiestiftung-berlin.de/en/" title="Site of Berlin's Tecnological Foundation" target="_blank" rel="noreferrer nofollow" class="grid grid-cols-[45px_1fr] items-center dark:text-white group w-fit pr-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-fg focus-visible:ring-offset-bg focus-visible:rounded-xs relative outline-hidden focus-visible:z-10 hover:bg-fg hover:text-white dark:hover:text-bg transition-colors motion-reduce:transition-none"><!--[--><span class="relative overflow-clip bg-bg size-8"><!--[--><img src="data:image/svg+xml,%3csvg%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_447_9243)'%3e%3cpath%20d='M40%200H0V40H40V0Z'%20fill='white'/%3e%3cpath%20d='M8.12801%2023.2623L8.44831%2023.0633L13.8795%2023.9303L13.6706%2024.1436L8.12801%2023.2623ZM22.444%2016.7662L22.263%2016.951L28.3765%2019.6944L28.3208%2019.3959L22.444%2016.7662ZM20.1044%2015.7143L19.8538%2015.8706L21.0236%2016.3966L21.2046%2016.2118L20.1044%2015.7143ZM33%2021.4286L30.4655%2027.1286L15.105%2024.4705L15.5088%2024.0299L29.9641%2026.5458L27.2485%2011.1514L9.31173%2030L7%2022.9495L12.1109%2012.0469L18.7815%2015.0462L18.2801%2015.3589L12.3476%2012.6866L7.77986%2022.4378L27.527%2010L30.368%2026.1052L32.3455%2021.6844L29.7831%2020.533L29.6856%2019.936L33%2021.4286ZM9.52062%2029.0618L26.4826%2011.2509L7.5849%2023.1485L9.52062%2029.0618Z'%20fill='%231E3590'%20stroke='%231E3590'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_447_9243'%3e%3crect%20width='40'%20height='40'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Portrait image of Berlin's Tecnological Foundation" class="object-center aspect-square border border-border transition-opacity bg-gray-light/30 motion-reduce:transition-none min-w-full min-h-full"/><!--]--></span> <span class="text-sm leading-4 decoration-gray-med underline">Berlin's Tecnological Foundation</span><!--]--><!----></a><!--]--></li><!--]--><!--]--></ul></div></div><!--]--><!----> <!--[!--><!--]--><!----> <!--[--><div class="bg-bg relative flex flex-col gap-2 pb-8 basis-full md:basis-1/2" aria-label="Collaborators group: Supervised by"><div class="min-h-[calc(100%-1rem)] w-[calc(100%-1rem)]"><h2 class="font-heading pb-3.5 antialiased">Supervised by</h2> <ul class="flex flex-col gap-2" aria-label="Collaborators list"><!--[--><!--[--><li><!--[!--><a href="https://www.linkedin.com/in/yi-jun-huang/" title="Site of Yi Jun Huang" target="_blank" rel="noreferrer nofollow" class="grid grid-cols-[45px_1fr] items-center dark:text-white group w-fit pr-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-fg focus-visible:ring-offset-bg focus-visible:rounded-xs relative outline-hidden focus-visible:z-10 hover:bg-fg hover:text-white dark:hover:text-bg transition-colors motion-reduce:transition-none"><!--[--><span class="relative overflow-clip bg-bg size-8"><!--[!--><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/jenny-huang.DADAaSTW.avif 45w, /_app/immutable/assets/jenny-huang.BBSUni18.avif 90w" type="image/avif"/><source srcset="/_app/immutable/assets/jenny-huang.COH5PX2M.webp 45w, /_app/immutable/assets/jenny-huang.DFYmFY53.webp 90w" type="image/webp"/><source srcset="/_app/immutable/assets/jenny-huang.DEcBcKjP.png 45w, /_app/immutable/assets/jenny-huang.blMYp0x9.png 90w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/jenny-huang.blMYp0x9.png" alt="Portrait image of Yi Jun Huang" class="object-center aspect-square border border-border transition-opacity bg-gray-light/30 motion-reduce:transition-none min-w-full min-h-full" width="90" height="90"/></picture><!--]--><!--]--></span> <span class="text-sm leading-4 decoration-gray-med underline">Yi Jun Huang</span><!--]--><!----></a>
108<!--]--></li><!--]--><!--[--><li><!--[!--><a href="https://www.linkedin.com/in/nora-eilers-9677a4310" title="Site of Nora Eilers" target="_blank" rel="noreferrer nofollow" class="grid grid-cols-[45px_1fr] items-center dark:text-white group w-fit pr-4 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-fg focus-visible:ring-offset-bg focus-visible:rounded-xs relative outline-hidden focus-visible:z-10 hover:bg-fg hover:text-white dark:hover:text-bg transition-colors motion-reduce:transition-none"><!--[--><span class="relative overflow-clip bg-bg size-8"><!--[!--><!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/nora-eilers.C-6-VYkR.avif 45w, /_app/immutable/assets/nora-eilers.DqE478ov.avif 90w" type="image/avif"/><source srcset="/_app/immutable/assets/nora-eilers.BfrIv6ot.webp 45w, /_app/immutable/assets/nora-eilers.BRpjaITo.webp 90w" type="image/webp"/><source srcset="/_app/immutable/assets/nora-eilers.DzxOPLLW.png 45w, /_app/immutable/assets/nora-eilers.DAsTlp_T.png 90w" type="image/png"/><!--]--> <img src="/_app/immutable/assets/nora-eilers.DAsTlp_T.png" alt="Portrait image of Nora Eilers" class="object-center aspect-square border border-border transition-opacity bg-gray-light/30 motion-reduce:transition-none min-w-full min-h-full" width="90" height="90"/></picture><!--]--><!--]--></span> <span class="text-sm leading-4 decoration-gray-med underline">Nora Eilers</span><!--]--><!----></a><!--]--></li><!--]--><!--]--></ul></div></div><!--]--><!----> <!--[!--><!--]--><!----> <!--[!--><!--]--><!----> <!--[!--><!--]--><!----></div></aside></div> <div class="mt-4 px-6 lg:px-8"><section class="@container"><h2 class="font-heading mt-8 mb-4 text-xl antialiased">Technologies</h2> <div class="-ml-3 flex flex-wrap gap-4"><!--[--><div class="relative flex flex-col gap-1"><span aria-label="The following technologies are used as a (Meta) Framework" class="text-muted-foreground ml-3 text-xs leading-loose whitespace-nowrap uppercase">(Meta) Framework</span> <ul class="flex flex-wrap md:gap-1"><!--[--><li><a href="https://svelte.dev/" target="_blank" rel="noopener nofollower" title="Svelte (kit): A framework for building reactive web applications." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.0082%202.9788C13.8766%201.1204%2017.8441%201.98713%2019.8528%204.91095C20.3295%205.58949%2020.6679%206.35858%2020.8486%207.172C21.0292%207.98532%2021.0486%208.82722%2020.905%209.64813C20.7659%2010.4322%2020.4716%2011.1794%2020.0405%2011.8447C20.6695%2013.0647%2020.8809%2014.4635%2020.6406%2015.8192C20.4986%2016.6239%2020.1931%2017.3899%2019.7435%2018.0677C19.294%2018.7456%2018.7102%2019.3207%2018.0296%2019.7561L12.9918%2023.0209C10.1238%2024.8794%206.15634%2024.0136%204.14716%2021.0896C3.67056%2020.411%203.33208%2019.642%203.1514%2018.8286C2.97075%2018.0152%202.95152%2017.1734%203.095%2016.3524C3.23422%2015.5684%203.5283%2014.8211%203.95946%2014.1559C3.33015%2012.936%203.11904%2011.5371%203.35937%2010.1814C3.5014%209.37659%203.80686%208.6107%204.25643%207.93285C4.70602%207.25498%205.28983%206.67987%205.97037%206.24446L11.0082%202.9788ZM17.7802%206.25432C16.8237%204.85196%2015.1086%204.20459%2013.4844%204.63403C13.1221%204.73245%2012.7767%204.88721%2012.4604%205.09198L7.42171%208.35854C7.01229%208.62036%206.66118%208.96617%206.3907%209.3739C6.12023%209.78164%205.93593%2010.2421%205.85052%2010.7262C5.7642%2011.2201%205.77619%2011.7264%205.88489%2012.2157C5.99361%2012.705%206.19733%2013.1679%206.48411%2013.5761C7.44071%2014.9782%209.15585%2015.625%2010.78%2015.1955C11.1419%2015.0971%2011.4869%2014.9428%2011.803%2014.7384L13.7258%2013.4918C13.8213%2013.43%2013.9258%2013.3827%2014.0351%2013.3529C14.274%2013.2899%2014.5264%2013.3033%2014.7577%2013.3906C14.9891%2013.4779%2015.189%2013.6359%2015.3296%2013.8422C15.4157%2013.9652%2015.4767%2014.1045%2015.5094%2014.2518C15.5421%2014.3993%2015.5458%2014.5519%2015.5199%2
108014.7008C15.4941%2014.8466%2015.4384%2014.9857%2015.3569%2015.1085C15.2755%2015.2312%2015.1699%2015.3353%2015.0467%2015.4141L10.0072%2018.6798C9.91153%2018.7417%209.80736%2018.7889%209.69785%2018.8187C9.45902%2018.8817%209.20659%2018.8684%208.97526%2018.7811C8.74406%2018.6937%208.54476%2018.5364%208.40425%2018.3303C8.2502%2018.1088%208.17788%2017.8389%208.20069%2017.5685L8.21831%2017.3776L8.03062%2017.3203C7.32236%2017.103%206.65554%2016.7638%206.05937%2016.3184L5.80118%2016.1257L5.70689%2016.4196C5.65593%2016.5762%205.61541%2016.7369%205.58616%2016.8991C5.49988%2017.3929%205.51097%2017.8993%205.61965%2018.3885C5.72833%2018.8777%205.93223%2019.3399%206.21887%2019.748C7.17554%2021.1504%208.89123%2021.797%2010.5156%2021.3674C10.8778%2021.269%2011.2233%2021.1151%2011.5396%2020.9104L16.5783%2017.6447C16.9877%2017.3828%2017.3388%2017.0362%2017.6093%2016.6284C17.8797%2016.2207%2018.064%2015.7602%2018.1495%2015.2761C18.2358%2014.7823%2018.2237%2014.2759%2018.1151%2013.7867C18.0064%2013.2974%2017.8026%2012.8344%2017.5159%2012.4263C16.5593%2011.024%2014.8442%2010.3775%2013.22%2010.8069C12.8581%2010.9053%2012.5129%2011.0593%2012.1969%2011.2639L10.2742%2012.5105C10.1785%2012.5724%2010.0735%2012.6187%209.96397%2012.6485C9.7253%2012.7114%209.47344%2012.6989%209.24227%2012.6118C9.01087%2012.5244%208.81101%2012.3664%208.67037%2012.1601C8.58413%2012.0371%208.52243%2011.8979%208.48972%2011.7506C8.45703%2011.6031%208.45407%2011.4504%208.48003%2011.3016C8.50579%2011.1558%208.56072%2011.0166%208.64217%2010.8938C8.72365%2010.771%208.82992%2010.6671%208.95323%2010.5882L13.9928%207.32166C14.0883%207.25988%2014.1928%207.21338%2014.3021%207.18365C14.5408%207.12066%2014.7926%207.13407%2015.0238%207.22129C15.2552%207.30861%2015.4552%207.46581%2015.5957%207.67207C15.7496%207.89372%2015.8211%208.16349%2015.7984%208.43382L15.7817%208.62381L15.9685%208.68206C16.6769%208.8994%2017.3436%209.23827%201
1087.9397%209.68398L18.1979%209.87666L18.2931%209.58182C18.3439%209.42536%2018.3845%209.2653%2018.4138%209.10326C18.5001%208.60944%2018.4881%208.10304%2018.3794%207.61382C18.2707%207.12455%2018.0669%206.66246%2017.7802%206.25432Z'%20fill='black'/%3e%3c/svg%3e" alt="Svelte (kit)" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="svelte"/><!--]--><!--]--> <span class="mt-0.5">Svelte (kit)</span></a><!----></li><!--]--></ul></div><div class="relative flex flex-col gap-1"><span aria-label="The following technologies are used as a CI/CD" class="text-muted-foreground ml-3 text-xs leading-loose whitespace-nowrap uppercase">CI/CD</span> <ul class="flex flex-wrap md:gap-1"><!--[--><li><a href="https://docs.github.com/en/actions" target="_blank" rel="noopener nofollower" title="GitHub Actions: An automation tool for workflows in GitHub repositories." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="/_app/immutable/assets/gh-actions.CN7xRO85.svg?enhanced=true" alt="GitHub Actions" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="gh-actions"/><!--]--><!--]--> <span class="mt-0.5">GitHub Actions</span></a><!----></li><!--]--></ul></div><div class="relative flex flex-col gap-1"><span aria-label="The following technologies are used as a Code Quality" class="text-muted-foreground ml-3 text-xs leading-loose whitespace-nowrap uppercase">Code Quality</span> <ul class="flex flex-wrap md:gap-1"><!--[--><li><a href="https://eslint.org/" target="_blank" rel="noopener nofollower" title="EsLint: A widely used JavaScript linter that helps find and fix problems in your code." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M22.0447%2013.2226L17.4305%2021.0051C17.3445%2021.141%2017.2241%2021.2517%2017.0815%2021.3261C16.9389%2021.4004%2016.7792%2021.4358%2016.6186%2021.4285H7.3866C7.22555%2021.4348%207.06569%2021.3985%206.92314%2021.3233C6.7806%2021.248%206.66042%2021.1365%206.57472%2021L1.95908%2013.2298C1.87685%2013.0898%201.8335%2012.9304%201.8335%2012.768C1.8335%2012.6056%201.87685%2012.4462%201.95908%2012.3061L6.57327%204.4909C6.6558%204.34658%206.77383%204.22573%206.91617%204.13982C7.05851%204.0539%207.22044%204.00578%207.3866%204H16.6157C16.7818%204.00617%2016.9435%204.05463%2017.0856%204.14079C17.2276%204.22696%2017.3454%204.34796%2017.4276%204.49235L22.0418%2012.325C22.1235%2012.4607%2022.1667%2012.6161%2022.1667%2012.7745C22.1667%2012.9329%2022.1235%2013.0883%2022.0418%2013.224L22.0447%2013.2226ZM18.2235%2016.2726V9.291L12.0001%205.79078L5.7839%209.291V16.2726L12.0001%2019.7721L18.2235%2016.2726Z'%20fill='%23000'/%3e%3cpath%20d='M16.2134%2015.0298L12.04%2017.379L7.87024%2015.0298V10.3314L12.04%207.98145L16.2134%2010.3314V15.0298Z'%20fill='%23000'/%3e%3c/svg%3e" alt="EsLint" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="eslint"/><!--]--><!--]--> <span class="mt-0.5">EsLint</span></a><!----></li><li><a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener nofollower" title="NVM: Node Version Manager, a tool to manage multiple active Node.js versions." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="/_app/immutable/assets/nvm.BzYb742m.svg?enhanced=true" alt="NVM" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="nvm"/><!--]--><!--]--> <span class="mt-0.5">NVM</span></a><!----></li><li><a href="https://prettier.io/" target="_blank" rel="noopener nofollower" title="Prettier: An opinionated code formatter that ensures consistent code style." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_292_2742)'%3e%3cg%20clip-path='url(%23clip1_292_2742)'%3e%3cpath%20d='M8.57025%2024.0198C8.57025%2024.3363%208.316%2024.5898%208.00025%2024.5898H2.28525C1.52325%2024.5898%201.52325%2023.4453%202.28525%2023.4453H8.00025C8.31675%2023.4453%208.57025%2023.7033%208.57025%2024.0198ZM8.00025%2021.1601H6.85575C6.09375%2021.1601%206.09375%2022.3046%206.85575%2022.3046H8.00025C8.76225%2022.3046%208.76225%2021.1601%208.00025%2021.1601ZM2.28525%2022.3046H4.5705C5.3325%2022.3046%205.3325%2021.1601%204.5705%202
1081.1601H2.28525C1.52325%2021.1601%201.52325%2022.3046%202.28525%2022.3046ZM8.00025%2018.8748H2.28525C1.52325%2018.8748%201.52325%2020.0193%202.28525%2020.0193H8.00025C8.76225%2020.0193%208.76225%2018.8748%208.00025%2018.8748ZM15.9997%2016.5896H5.71425C4.95225%2016.5896%204.95225%2017.7341%205.71425%2017.7341H15.9997C16.7617%2017.7341%2016.7617%2016.5896%2015.9997%2016.5896ZM2.28525%2017.7341H3.42975C4.19175%2017.7341%204.19175%2016.5896%203.42975%2016.5896H2.28525C1.52325%2016.5896%201.52325%2017.7341%202.28525%2017.7341ZM19.4295%2014.3043H15.9997C15.2377%2014.3043%2015.2377%2015.4451%2015.9997%2015.4451H19.4295C20.1915%2015.4451%2020.1915%2014.3043%2019.4295%2014.3043ZM9.14475%2015.4451H13.7152C14.4772%2015.4451%2014.4772%2014.3043%2013.7152%2014.3043H9.14475C8.38275%2014.3043%208.38275%2015.4451%209.14475%2015.4451ZM2.28525%2015.4451H6.85575C7.61775%2015.4451%207.61775%2014.3043%206.85575%2014.3043H2.28525C1.52325%2014.3043%201.52325%2015.4451%202.28525%2015.4451ZM20.5702%2012.0198H11.4292C10.6672%2012.0198%2010.6672%2013.1606%2011.4292%2013.1606H20.5702C21.3322%2013.1606%2021.3322%2012.0198%2020.5702%2012.0198ZM9.71475%2012.5898C9.71475%2012.2733%209.45675%2012.0198%209.14475%2012.0198H5.715C4.953%2012.0198%204.953%2013.1606%205.715%2013.1606H9.14475C9.4575%2013.1606%209.71475%2012.9056%209.71475%2012.5898ZM2.28525%2013.1598H3.42975C4.19175%2013.1598%204.19175%2012.0191%203.42975%2012.0191H2.28525C1.52325%2012.0191%201.52325%2013.1598%202.28525%2013.1598ZM21.7147%209.73459H15.9997C15.2377%209.73459%2015.2377%2010.8753%2015.9997%2010.8753H21.7147C22.4767%2010.8753%2022.4767%209.73459%2021.7147%209.73459ZM2.28525%2010.8753H8.00025C8.76225%2010.8753%208.76225%209.73459%208.00025%209.73459H2.28525C1.52325%209.73459%201.52325%2010.8753%202.28525%2010.8753ZM15.4297%208.01934C15.4297%208.33209%2015.684%208.58934%2015.9997%208.58934H21.7147C22.4767%208.58934%2022.4767%207.44484%2021.7147%207.44484H15.9997C15.6832%207.44484%2015.4297%207.70284%2015.4297%208.01934ZM6.85575%207.44559C6.09375%207.44559%206.09375%208.59009%206.85575%208.59009H8.00025C8.76225%208.59009%208.76225%207.44559%208.00025%207.44559H6.85575ZM2.28525%208.59009H4.5705C5.3325%208.59009%205.3325%207.44559%204.5705%207.44559H2.28525C1.52325%207.44559%201.52325%208.59009%202.28525%208.59009ZM18.8557%205.73409C18.8557%206.04684%2019.1137%206.30409%2019.4302%206.30409H20.571C21.333%206.30409%2021.333%205.15959%2020.571%205.15959H19.4302C19.1137%205.15959%2018.8602%205.41759%2018.8602%205.73409H18.8557ZM17.715%205.73409C17.715%205.41759%2017.457%205.15959%2017.145%205.15959H12.5707C11.8087%205.15959%2011.8087%206.30409%2012.5707%206.30409H17.1412C17.4577%206.30409%2017.715%206.04609%2017.715%205.73409ZM2.28525%206.30484H10.2855C11.0475%206.30484%2011.0475%205.16034%2010.2855%205.16034H2.28525C1.52325%205.16034%201.52325%206.30484%202.28525%206.30484ZM7.4295%203.44509C7.4295%203.76159%207.68375%204.01959%207.9995%204.01959H19.4295C20.1915%204.01959%2020.1915%202.87509%2019.4295%202.87509H7.9995C7.683%202.87509%207.4295%203.13309%207.4295%203.44509ZM2.28525%204.01959H5.715C6.477%204.01959%206.477%202.87509%205.715%202.87509H2.28525C1.52325%202.87509%201.52325%204.01959%202.28525%204.01959ZM2.28525%201.73434H15.9997C16.7617%201.73434%2016.7617%200.589844%2015.9997%200.589844H2.28525C1.52325%200.589844%201.52325%201.73434%202.28525%201.73434Z'%20fill='%23000'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_292_2742'%3e%3crect%20width='24'%20height='24'%20fill='white'%20transform='translate(0%200.589844)'/%3e%3c/clipPath%3e%3cclipPath%20id='clip1_292_2742'%3e%3crect%20width='24'%20height='24'%20fill='white'%20transform='translate(0%200.589844)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Prettier" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="prettier"/><!--]--><!--]--> <span class="mt-0.5">Prettier</span></a><!----></li><!--]--></ul></div><div class="relative flex flex-col gap-1"><span aria-label="The following technologies are used as a Deployment" class="text-muted-foreground ml-3 text-xs leading-loose whitespace-nowrap uppercase">Deployment</span> <ul class="flex flex-wrap md:gap-1"><!--[--><li><a href="https://vercel.com/" target="_blank" rel="noopener nofollower" title="Vercel: A cloud platform for deploying serverless functions and frontend apps." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M11.5%207L19%2019H4L11.5%207Z'%20fill='%23000'/%3e%3c/svg%3e" alt="Vercel" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="vercel"/><!--]--><!--]--> <span class="mt-0.5">Vercel</span></a><!----></li>
108<!--]--></ul></div><div class="relative flex flex-col gap-1"><span aria-label="The following technologies are used as a Prog. Language(s)" class="text-muted-foreground ml-3 text-xs leading-loose whitespace-nowrap uppercase">Prog. Language(s)</span> <ul class="flex flex-wrap md:gap-1"><!--[--><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank" rel="noopener nofollower" title="CSS: A style sheet language used for web page layout and design." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="/_app/immutable/assets/css-modules.Pe6KRu1U.svg?enhanced=true" alt="CSS" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="css"/><!--]--><!--]--> <span class="mt-0.5">CSS</span></a><!----></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener nofollower" title="HTML: A markup language for creating web pages." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.8304%209.29876H9.16663L9.34921%2011.3339H16.6489L16.0989%2017.4336L11.9904%2018.5631L7.88745%2017.4336L7.60734%2014.3129H9.61798L9.76086%2015.8991L11.9915%2016.4954L11.996%2016.4943L14.2278%2015.8969L14.4591%2013.3206H7.51776L6.97796%207.31201H17.0107L16.8304%209.29876Z'%20fill='%23000'/%3e%3cpath%20d='M3.45231%204.05037L4.90209%2020.1802C4.92636%2020.4501%205.11556%2020.6767%205.37686%2020.7487L11.8178%2022.5229C11.9307%2022.554%2012.0499%2022.5541%2012.1628%2022.523L18.6207%2020.7464C18.882%2020.6745%2019.0713%2020.448%2019.0956%2020.178L20.538%204.15829C20.5722%203.77783%2020.2726%203.45%2019.8906%203.45H4.00113C3.67733%203.45%203.42332%203.72786%203.45231%204.05037Z'%20stroke='%23000'%20stroke-width='1.1'/%3e%3c/svg%3e" alt="HTML" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="html"/><!--]--><!--]--> <span class="mt-0.5">HTML</span></a><!----></li><li><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener nofollower" title="TypeScript: A statically typed superset of JavaScript." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M20.325%203.03984H3.675C3.00237%203.03984%202.45%203.58211%202.45%204.25977V20.9199C2.45%2021.5976%203.00238%2022.1398%203.675%2022.1398H20.325C20.9976%2022.1398%2021.55%2021.5976%2021.55%2020.9199V4.25977C21.55%203.5821%2020.9976%203.03984%2020.325%203.03984Z'%20stroke='%23000'%20stroke-width='1.1'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M13.0061%2013.0941V11.6289H6.59999V13.0941H8.88707V19.6178H10.7078V13.0941H13.0061ZM13.732%2019.4456C14.0256%2019.5941%2014.3728%2019.7056%2014.7737%2019.7798C15.1746%2019.8541%2015.5971%2019.8913%2016.0413%2019.8913C16.4742%2019.8913%2016.8854%2019.8504%2017.275%2019.7687C17.6646%2019.687%2018.0061%2019.5523%2018.2997%2019.3648C18.5933%2019.1772%2018.8258%2018.9321%2018.9971%2018.6294C19.1683%2018.3266%2019.254%2017.9524%2019.254%2017.5067C19.254%2017.1836%2019.205%2016.9004%2019.1071%2016.6571C19.0093%2016.4138%2018.8682%2016.1974%2018.6837%2016.008C18.4993%2015.8186%2018.2781%2015.6486%2018.0202%2015.4982C17.7624%2015.3478%2017.4717%2015.2057%2017.148%2015.072C16.9108%2014.9754%2016.6981%2014.8816%2016.5099%2014.7907C16.3217%2014.6997%2016.1617%2014.6068%2016.03%2014.5121C15.8982%2014.4174%2015.7966%2014.3171%2015.7251%2014.2112C15.6536%2014.1054%2015.6178%2013.9856%2015.6178%2013.8519C15.6178%2013.7293%2015.6498%2013.6188%2015.7138%2013.5204C15.7778%2013.422%2015.8681%2013.3374%2015.9848%2013.2669C16.1015%2013.1963%2016.2445%2013.1416%2016.4139%2013.1025C16.5833%2013.0636%2016.7715%2013.0441%2016.9785%2013.0441C17.1291%2013.0441%2017.2881%2013.0552%2017.4557%2013.0775C17.6232%2013.0998%2017.7916%2013.1341%2017.961%2013.1805C18.1304%2013.227%2018.2951%2013.2854%2018.4551%2013.3561C18.615%2013.4266%2018.7628%2013.5083%2018.8983%2013.6012V11.9354C18.6235%2011.8313%2018.3233%2011.7542%2017.9977%2011.7041C17.6721%2011.654%2017.2985%2011.6289%2016.8769%2011.6289C16.4478%2011.6289%2016.0413%2011.6744%2015.6573%2011.7654C15.2734%2011.8564%2014.9356%2011.9985%2014.6438%2012.1916C14.3521%2012.3848%2014.1215%2012.6308%2013.9522%2012.9298
108C13.7827%2013.2288%2013.6981%2013.5863%2013.6981%2014.0023C13.6981%2014.5335%2013.8533%2014.9866%2014.1639%2015.3617C14.4745%2015.7369%2014.9459%2016.0544%2015.5783%2016.3144C15.8267%2016.4148%2016.0582%2016.5132%2016.2728%2016.6098C16.4873%2016.7063%2016.6727%2016.8066%2016.8289%2016.9106C16.9851%2017.0146%2017.1084%2017.1278%2017.1987%2017.2504C17.2891%2017.373%2017.3343%2017.5123%2017.3343%2017.6683C17.3343%2017.7835%2017.306%2017.8902%2017.2495%2017.9886C17.1931%2018.0871%2017.1074%2018.1725%2016.9926%2018.2449C16.8778%2018.3173%2016.7348%2018.374%2016.5636%2018.4148C16.3923%2018.4557%2016.1918%2018.4761%2015.9622%2018.4761C15.5707%2018.4761%2015.183%2018.4084%2014.7991%2018.2728C14.4152%2018.1373%2014.0594%2017.9339%2013.732%2017.6627V19.4456Z'%20fill='%23000'/%3e%3c/svg%3e" alt="TypeScript" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="typescript"/><!--]--><!--]--> <span class="mt-0.5">TypeScript</span></a><!----></li><!--]--></ul></div><div class="relative flex flex-col gap-1"><span aria-label="The following technologies are used as a Project Management" class="text-muted-foreground ml-3 text-xs leading-loose whitespace-nowrap uppercase">Project Management</span> <ul class="flex flex-wrap md:gap-1"><!--[--><li><a href="https://github.com/" target="_blank" rel="noopener nofollower" title="GitHub: A web-based platform for version control and collaboration." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12%202C5.9225%202%201%206.9225%201%2013C1%2017.8675%204.14875%2021.9788%208.52125%2023.4363C9.07125%2023.5325%209.2775%2023.2025%209.2775%2022.9138C9.2775%2022.6525%209.26375%2021.7863%209.26375%2020.865C6.5%2021.3738%205.785%2020.1912%205.565%2019.5725C5.44125%2019.2562%204.905%2018.28%204.4375%2018.0187C4.0525%2017.8125%203.5025%2017.3037%204.42375%2017.29C5.29%2017.2762%205.90875%2018.0875%206.115%2018.4175C7.105%2020.0812%208.68625%2019.6138%209.31875%2019.325C9.415%2018.61%209.70375%2018.1287%2010.02%2017.8537C7.5725%2017.5787%205.015%2016.63%205.015%2012.4225C5.015%2011.2262%205.44125%2010.2362%206.1425%209.46625C6.0325%209.19125%205.6475%208.06375%206.2525%206.55125C6.2525%206.55125%207.17375%206.2625%209.2775%207.67875C10.1575%207.43125%2011.0925%207.3075%2012.0275%207.3075C12.9625%207.3075%2013.8975%207.43125%2014.7775%207.67875C16.8813%206.24875%2017.8025%206.55125%2017.8025%206.55125C18.4075%208.06375%2018.0225%209.19125%2017.9125%209.46625C18.6138%2010.2362%2019.04%2011.2125%2019.04%2012.4225C19.04%2016.6437%2016.4688%2017.5787%2014.0213%2017.8537C14.42%2018.1975%2014.7638%2018.8575%2014.7638%2019.8888C14.7638%2021.36%2014.75%2022.5425%2014.75%2022.9138C14.75%2023.2025%2014.9563%2023.5463%2015.5063%2023.4363C19.8513%2021.9788%2023%2017.8537%2023%2013C23%206.9225%2018.0775%202%2012%202Z'%20fill='black'/%3e%3c/svg%3e" alt="GitHub" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="github"/><!--]--><!--]--> <span class="mt-0.5">GitHub</span></a><!----></li><!--]--></ul></div><div class="relative flex flex-col gap-1"><span aria-label="The following technologies are used as a Styling" class="text-muted-foreground ml-3 text-xs leading-loose whitespace-nowrap uppercase">Styling</span> <ul class="flex flex-wrap md:gap-1"><!--[--><li><a href="https://tailwindcss.com/" target="_blank" rel="noopener nofollower" title="Tailwind CSS: A utility-first CSS framework for building user interfaces." class="group px-3 py-1 transition-colors hover:bg-fg hover:text-bg flex items-center gap-1 focus-visible:ring-fg focus-visible:ring-2 focus-visible:outline-hidden"><!--[--><!--[--><img src="data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.0002%206C9.33329%206%207.66692%207.33342%206.9999%2010.0003C8.00004%208.66684%209.16674%208.16691%2010.5%208.50007C11.2607%208.6901%2011.8046%209.24208%2012.4062%209.8532C13.3867%2010.8483%2014.5217%2012%2017.0001%2012C19.6666%2012%2021.3334%2010.6666%2022%208.00013C21.0003%209.33355%2019.8336%209.83349%2018.5003%209.49993
108C17.7392%209.3099%2017.1953%208.75792%2016.5937%208.14719C15.6132%207.15127%2014.4786%206%2012.0002%206ZM6.9999%2012C4.33339%2012%202.66663%2013.3334%202%2016.0003C3.00014%2014.6668%204.16683%2014.1669%205.4997%2014.5001C6.26077%2014.6901%206.80473%2015.2421%207.40631%2015.8532C8.38685%2016.8483%209.52141%2018%2012.0002%2018C14.6667%2018%2016.3335%2016.667%2017.0001%2014.0001C16%2015.3336%2014.8333%2015.8335%2013.5%2015.5003C12.7393%2015.3099%2012.1954%2014.7579%2011.5938%2014.1472C10.6132%2013.1521%209.4783%2012%206.9999%2012Z'%20fill='%23000'/%3e%3c/svg%3e" alt="Tailwind CSS" class="h-6 w-6 group-hover:invert motion-safe:transition-all dark:invert dark:group-hover:invert-0" id="tailwind-css"/><!--]--><!--]--> <span class="mt-0.5">Tailwind CSS</span></a><!----></li><!--]--></ul></div><!--]--></div></section><!----></div> <section aria-label="More projects" class="mt-12 flex flex-col md:grid md:grid-cols-6"><!--[--><article class="contents"><a data-sveltekit-noscroll="" href="/projects/ubermetrics" class="project-thumbnail group @container/thumb relative cursor-pointer p-10 hover:bg-fg hover:text-bg hover:border-fg grid grid-rows-[auto_1fr] overflow-clip transition-colors bg-bg shrink grow shadow-[0_0_0_1px_var(--color-gray-med)] col-span-2 focus-visible:ring-0 focus-visible:outline-0 svelte-16uaffw" aria-label="Ubermetrics"><div class="relative aspect-[1920/1248] w-full col-span-2 transition-colors from-gray-ultra-light to-bg bg-gradient-to-b group-hover:from-fg group-hover:to-fg flex items-center justify-center svelte-16uaffw" style="--imageUrl: url('/_app/immutable/assets/ubermetrics.Dz43TuWK.png');"><div aria-hidden="true" class="ring-border thumbnail-image size-full shadow-md ring-1 group-focus-visible:outline-fg group-focus-visible:outline-2 group-focus-visible:outline-offset-8 group-focus-visible:outline-solid svelte-16uaffw"></div> <!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/ubermetrics.DedO9d7T.avif 400w, /_app/immutable/assets/ubermetrics.evFRFfuH.avif 800w" sizes="min(400px, 100vw)" type="image/avif"/><source srcset="/_app/immutable/assets/ubermetrics.BuqVqTZs.webp 400w, /_app/immutable/assets/ubermetrics.DwydbI-0.webp 800w" sizes="min(400px, 100vw)" type="image/webp"/><source srcset="/_app/immutable/assets/ubermetrics.DMY8adFO.png 400w, /_app/immutable/assets/ubermetrics.DwYZaVF1.png 800w" sizes="min(400px, 100vw)" type="image/png"/><!--]--> <img src="/_app/immutable/assets/ubermetrics.DwYZaVF1.png" alt="Uber&amp;shy;metrics" class="absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100 dark:invert dark:group-hover:invert-0 contrast-200 group-hover:contrast-100 svelte-16uaffw" fetchpriority="low" loading="lazy" width="800" height="520"/></picture><!--]--></div> <div class="relative col-span-2 flex flex-col gap-1 pt-6 svelte-16uaffw"><h2 class="text-4xl text-pretty @xl/thumb:text-5xl font-heading hyphens-none texture-mask antialiased svelte-16uaffw"><!---->Ubermetrics<!----></h2> <p class="sr-only">A Compre&amp;shy;­­­­hensive *Media Moni&amp;shy;toring* Software as a Service</p> <p class="text-muted-foreground flex text-lg motion-reduce:transition-none svelte-16uaffw"><span>Secure Cloud SaaS</span> <span aria-hidden="true" class="text-muted">・</span> <span>2013</span></p></div></a></article><!--]--><!----> <!--[--><article class="contents"><a data-sveltekit-noscroll="" href="/projects/data2resilience" class="project-thumbnail group @container/thumb relative cursor-pointer p-10 hover:bg-fg hover:text-bg hover:border-fg grid grid-rows-[auto_1fr] overflow-clip transition-colors bg-bg shrink grow shadow-[0_0_0_1px_var(--color-gray-med)] col-span-2 focus-visible:ring-0 focus-visible:outline-0 svelte-16uaffw" aria-label="Data&amp;shy;2&amp;shy;Resilience"><div class="relative aspect-[1920/1248] w-full col-span-2 transition-colors from-gray-ultra-light to-bg bg-gradient-to-b group-hover:from-fg group-hover:to-fg flex items-center justify-center svelte-16uaffw" style="--imageUrl: url('/_app/immutable/assets/data2resilience.Dgmf1f5y.png');"><div aria-hidden="true" class="ring-border thumbnail-image size-full shadow-md ring-1 group-focus-visible:outline-fg group-focus-visible:outline-2 group-focus-visible:outline-offset-8 group-focus-visible:outline-solid svelte-16uaffw"></div> <!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/data2resilience.JG-JQ3Zp.av
108if 400w, /_app/immutable/assets/data2resilience.B06tO8O8.avif 800w" sizes="min(400px, 100vw)" type="image/avif"/><source srcset="/_app/immutable/assets/data2resilience.D09o3jKw.webp 400w, /_app/immutable/assets/data2resilience.B0TLWlkz.webp 800w" sizes="min(400px, 100vw)" type="image/webp"/><source srcset="/_app/immutable/assets/data2resilience.K2m_L0EP.png 400w, /_app/immutable/assets/data2resilience.D1nc6TPD.png 800w" sizes="min(400px, 100vw)" type="image/png"/><!--]--> <img src="/_app/immutable/assets/data2resilience.D1nc6TPD.png" alt="Data&amp;shy;2&amp;shy;Resilience" class="absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100 dark:invert dark:group-hover:invert-0 contrast-200 group-hover:contrast-100 svelte-16uaffw" fetchpriority="low" loading="lazy" width="800" height="520"/></picture><!--]--></div> <div class="relative col-span-2 flex flex-col gap-1 pt-6 svelte-16uaffw"><h2 class="text-4xl text-pretty @xl/thumb:text-5xl font-heading hyphens-none texture-mask antialiased svelte-16uaffw"><!---->Data&shy;2&shy;Resilience<!----></h2> <p class="sr-only">*Live Data Dashboard* showing heat stress levels in the city of Dortmund</p> <p class="text-muted-foreground flex text-lg motion-reduce:transition-none svelte-16uaffw"><span>Interactive Dashboard</span> <span aria-hidden="true" class="text-muted">・</span> <span>2025</span></p></div></a></article><!--]--><!----> <!--[--><article class="contents"><a data-sveltekit-noscroll="" href="/projects/media-impact-monitor" class="project-thumbnail group @container/thumb relative cursor-pointer p-10 hover:bg-fg hover:text-bg hover:border-fg grid grid-rows-[auto_1fr] overflow-clip transition-colors bg-bg shrink grow shadow-[0_0_0_1px_var(--color-gray-med)] col-span-2 focus-visible:ring-0 focus-visible:outline-0 svelte-16uaffw" aria-label="Media Impact Monitor"><div class="relative aspect-[1920/1248] w-full col-span-2 transition-colors from-gray-ultra-light to-bg bg-gradient-to-b group-hover:from-fg group-hover:to-fg flex items-center justify-center svelte-16uaffw" style="--imageUrl: url('/_app/immutable/assets/media-impact-monitor.DuLzv0eh.png');"><div aria-hidden="true" class="ring-border thumbnail-image size-full shadow-md ring-1 group-focus-visible:outline-fg group-focus-visible:outline-2 group-focus-visible:outline-offset-8 group-focus-visible:outline-solid svelte-16uaffw"></div> <!--[!--><picture><!--[--><source srcset="/_app/immutable/assets/media-impact-monitor.CMWfMzOh.avif 400w, /_app/immutable/assets/media-impact-monitor.U39RxwyI.avif 800w" sizes="min(400px, 100vw)" type="image/avif"/><source srcset="/_app/immutable/assets/media-impact-monitor.CZ9kroCW.webp 400w, /_app/immutable/assets/media-impact-monitor.Dgt9RP2s.webp 800w" sizes="min(400px, 100vw)" type="image/webp"/><source srcset="/_app/immutable/assets/media-impact-monitor.Bjo25e-S.png 400w, /_app/immutable/assets/media-impact-monitor.BD7LAiGU.png 800w" sizes="min(400px, 100vw)" type="image/png"/><!--]--> <img src="/_app/immutable/assets/media-impact-monitor.BD7LAiGU.png" alt="Media Impact Monitor" class="absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100 dark:invert dark:group-hover:invert-0 contrast-200 group-hover:contrast-100 svelte-16uaffw" fetchpriority="low" loading="lazy" width="800" height="520"/></picture><!--]--></div> <div class="relative col-span-2 flex flex-col gap-1 pt-6 svelte-16uaffw"><h2 class="text-4xl text-pretty @xl/thumb:text-5xl font-heading hyphens-none texture-mask antialiased svelte-16uaffw"><!---->Media Impact Monitor<!----></h2> <p class="sr-only">*Media monitoring dashboard* helping activist organisations to raise awareness on their campaigns</p> <p class="text-muted-foreground flex text-lg motion-reduce:transition-none svelte-16uaffw"><span>Interactive Dashboard</span> <span aria-hidden="true" class="text-muted">・</span> <span>2024</span></p></div></a></article><!--]--><!----></section></section></main><!----><!----><!--]--><!----> <footer class="bg-bg border-gray-med relative z-0 border-t pt-6 pb-5" aria-label="Main page footer"><section class="flex flex-wrap items-center justify-between gap-4 px-6 text-muted-foreground tracking-wide"><div class="flex flex-wrap items-center gap-6"><span>2026</span> <div class="dropdown-menu relative inline-block text-left" id="rssList"><div><button id="dropdown-button-rssList" type="button" aria-label="Download my CV as PDF file in different languages" aria-expanded="false" aria-controls="dropdown-rssList" tabindex="0" class="dropdown-button bg-gray-ultra-light border-border text-fg border text-xl inline-flex w-full items-center justify-center cursor-pointer py-2 font-bold hover:bg-fg hover:text-bg transition-colors motion-reduce:transition-none focusable px-2.5" aria-haspopup="true"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-rss"><!--[--><!----><path d="M4 11a9 9 0 0 1 9 9"><!----></path><!----><!----><path d="M4 4a16 16 0 0 1 16 16"><!----></path><!----><!----><circle cx="5" cy="19" r="1"><!----></circle><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!--]--> <!--[!--><!--]--> <svg class="-mr-1 h-5 w-5 rotate-180" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path stroke="currentColor" fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path></svg></button></div> <div role="menu" aria-orientation="vertical" id="dropdown-rssList" aria-labelledby="rssList" class="bottom-full left-0 absolute z-10 my-2 origin-top-right bg-bg border-gray-med border shadow-md transition-opacity motion-reduce:transition-none pointer-events-none whitespace-nowrap opacity-0 focus-within:
108pointer-events-auto focus-within:opacity-100"><div class="py-1" role="group"><!--[--><a href="/rss.xml" tabindex="0" class="flex justify-between gap-8 px-4 py-2 text-base normal-case text-fg hover:bg-alt transition-colors motion-reduce:transition-none focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-fg focus-visible:rounded-xs" role="menuitem" id="menu-item-1-rss-with-all-contents" target="_blank" rel="noopener noreferrer"><span>RSS with all contents</span> <!--[!--><!--]--></a><a href="/rss-pages-only.xml" tabindex="0" class="flex justify-between gap-8 px-4 py-2 text-base normal-case text-fg hover:bg-alt transition-colors motion-reduce:transition-none focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-fg focus-visible:rounded-xs" role="menuitem" id="menu-item-2-rss-with-pages-only" target="_blank" rel="noopener noreferrer"><span>RSS with pages only</span> <!--[!--><!--]--></a><a href="/rss-projects-only.xml" tabindex="0" class="flex justify-between gap-8 px-4 py-2 text-base normal-case text-fg hover:bg-alt transition-colors motion-reduce:transition-none focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-fg focus-visible:rounded-xs" role="menuitem" id="menu-item-3-rss-with-projects-only" target="_blank" rel="noopener noreferrer"><span>RSS with projects only</span> <!--[!--><!--]--></a><a href="/rss-cool-sites-only.xml" tabindex="0" class="flex justify-between gap-8 px-4 py-2 text-base normal-case text-fg hover:bg-alt transition-colors motion-reduce:transition-none focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-fg focus-visible:rounded-xs" role="menuitem" id="menu-item-4-rss-with-cool-sites-only" target="_blank" rel="noopener noreferrer"><span>RSS with cool sites only</span> <!--[!--><!--]--></a><!--]--></div></div></div><!----></div> <span class="hidden sm:inline-block">Lucas Vogel</span> <button id="back-to-top" aria-label="Scroll to top" tabindex="0" class="bg-gray-ultra-light border-border text-fg border p-1 hover:bg-fg hover:text-bg hover:border-fg cursor-pointer transition-colors focus-visible:ring-fg outline-hidden focus-visible:ring-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up"><!--[--><!----><path d="m5 12 7-7 7 7"><!----></path><!----><!----><path d="M12 19V5"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----></button></section></footer><!----> <div class="grain" aria-hidden="true"></div><!----><!--]--> <!--[!--><!--]--><!--]-->
109			
110			
110<script>
111				{
112					__sveltekit_1uan8z5 = {
113						base: new URL("../..", location).pathname.slice(0, -1),
114						env: null
115					};
116
117					const element = document.currentScript.parentElement;
118
119					import("../../_app/env.js").then(({ env }) => {
120						__sveltekit_1uan8z5.env = env;
121
122						Promise.all([
123							import("../../_app/immutable/entry/start.DZN56MFG.js"),
124							import("../../_app/immutable/entry/app.Cn_oiBk9.js")
125						]).then(([kit, app]) => {
126							kit.start(app, element, {
127									node_ids: [0, 14],
128									data: [null,(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o){a.id="eslint";a.name="EsLint";a.description="A widely used JavaScript linter that helps find and fix problems in your code.";a.url="https://eslint.org/";a.categories=["Code Quality"];b.id="nvm";b.name="NVM";b.description="Node Version Manager, a tool to manage multiple active Node.js versions.";b.url="https://github.com/nvm-sh/nvm";b.categories=["Code Quality"];c.id="prettier";c.name="Prettier";c.description="An opinionated code formatter that ensures consistent code style.";c.url="https://prettier.io/";c.categories=["Code Quality"];d.id="github";d.name="GitHub";d.description="A web-based platform for version control and collaboration.";d.url="https://github.com/";d.categories=["Project Management"];f.id="gh-actions";f.name="GitHub Actions";f.description="An automation tool for workflows in GitHub repositories.";f.url="https://docs.github.com/en/actions";f.categories=["CI/CD"];g.id="vercel";g.name="Vercel";g.description="A cloud platform for deploying serverless functions and frontend apps.";g.url="https://vercel.com/";g.categories=["Deployment"];h.id="css";h.name="CSS";h.description="A style sheet language used for web page layout and design.";h.url="https://developer.mozilla.org/en-US/docs/Web/CSS";h.categories=["Prog. Language(s)"];i.id="html";i.name="HTML";i.description="A markup language for creating web pages.";i.url="https://developer.mozilla.org/en-US/docs/Web/HTML";i.categories=["Prog. Language(s)"];j.id="typescript";j.name="TypeScript";j.description="A statically typed superset of JavaScript.";j.url="https://www.typescriptlang.org/";j.categories=["Prog. Language(s)"];k.id="tailwind-css";k.name="Tailwind CSS";k.description="A utility-first CSS framework for building user interfaces.";k.url="https://tailwindcss.com/";k.categories=["Styling"];l.id="svelte";l.name="Svelte (kit)";l.description="A framework for building reactive web applications.";l.url="https://svelte.dev/";l.categories=["(Meta) Framework"];m.id="react";m.name="React";m.description="The library for web and native user interfaces.";m.url="https://react.dev/";m.categories=["(Meta) Framework"];n.id="docker";n.name="Docker";n.description="A containerization platform and developer tool.";n.url="https://www.docker.com/";n.categories=["Containerization"];o.id="tanstack-query";o.name="TanStack Query";o.description="A data fetching library for React applications.";o.url="https://tanstack.com/query";o.categories=["Query Management"];return {type:"data",data:{project:{id:"citylab-2024",title:"CityLAB Annual Review 2024",nameShort:"CityLAB 2024",description:"*Annual review report* for CityLAB Berlin for the year 2024",type:"Microsite",year:2025,pubDate:new Date(1735689600000),url:"https://2024.citylab-berlin.org/en",repo:"https://github.com/vogelino/2024-citylab-jahresbericht",links:e,collaborators:[],colleagues:[],supervisors:[{id:"jenny-huang",name:"Yi Jun Huang",url:"https://www.linkedin.com/in/yi-jun-huang/",avatarFormat:"webp"},{id:"nora-eilers",name:"Nora Eilers",url:"https://www.linkedin.com/in/nora-eilers-9677a4310",avatarFormat:"webp"}],institutions:[],supporters:[],clients:[{id:"citylab",name:"CityLAB Berlin",url:"https://citylab-berlin.org/de/start/",avatarFormat:"webp"},{id:"technologiestiftung",name:"Berlin's Tecnological Foundation",url:"https://www.technologiestiftung-berlin.de/en/",avatarFormat:"webp"}],technologies:[l,f,a,b,c,g,h,i,j,d,k],highlighted:false,media:["001-citylab-2024","002-citylab-2024","003-citylab-2024","004-citylab-2024","005-citylab-2024","006-citylab-2024"],Content:void 0,slug:"citylab-2024"},projectContent:"\u003Ch3>Insight\u003C/h3> \u003Cp>The CityLAB Berlin 2024 annual review microsite marks both a celebration of the year’s accomplishments and the lab’s 5th anniversary.\nDesigned as an engaging digital report, the site presents CityLAB’s highlights milestones, and impact in a celebrative, visually dynamic format.\nIt underscores CityLAB’s mission to connect public administration, citizens, and technology experts around sustainability, digital participation, and open innovation through interactive storytelling and distinctive visuals.\u003C/p> \u003Ch3>Process\u003C/h3> \u003Cp>The main focus was to showcase the many facets of CityLAB Berlin—the diversity of its services, projects, and programmes—in a way that feels cohesive and engaging. I designed dynamic layouts using CityLAB’s isometric shapes, with scroll-driven animations and 
128SVG masks to add visual interest and guide users through the content. The bilingual site, built with SvelteKit and vanilla JavaScript, features sections on the lab’s mission, key projects (like “Gieß den Kiez” and the Kiezlabor), events, and community initiatives. Regular feedback from the CityLAB team helped ensure the content and interactions reflected the collaborative, experimental spirit of the lab.\u003C/p> \u003Ch3>Personal role\u003C/h3> \u003Cp>I was responsible for the design and front-end development, from layout concepts to implementing animations and interactive elements. I took CityLAB’s brand identity and adapted it into a celebratory version for the anniversary, building custom visual features like animated stats, image galeries, and fun fact nuggets. This project allowed me to use playful, content-driven storytelling to make what makes CityLAB unique palpable.\u003C/p>",prevProject:{id:"ubermetrics",title:"Uber&shy;metrics",nameShort:"Ubermetrics",description:"A Compre&shy;­­­­hensive *Media Moni&shy;toring* Software as a Service",type:"Secure Cloud SaaS",year:2013,pubDate:new Date(1356998400000),links:[{url:"https://www.ubermetrics-technologies.com/en/solutions/ubermetrics-delta/",label:"Delta"},{url:"https//www.ubermetrics-technologies.com/",label:"Ubermetrics"}],collaborators:[],colleagues:[],supervisors:[],institutions:[{id:"ubermetrics-technologies",name:"Ubermetrics Technologies",url:"https://www.ubermetrics-technologies.com/",avatarFormat:"webp"}],supporters:[],clients:[],technologies:[{id:"backbone",name:"Backbone",description:"A lightweight JavaScript library for structuring web applications.",url:"https://backbonejs.org/",categories:["(Meta) Framework"]},{id:"express",name:"Express",description:"A web application framework for Node.js.",url:"https://expressjs.com/",categories:["(Meta) Framework"]},m,{id:"webpack",name:"Webpack",description:"A popular JavaScript module bundler.",url:"https://webpack.js.org/",categories:["Build Tool"]},a,b,c,{id:"sketch",name:"Sketch",description:"A vector graphics design tool for macOS.",url:"https://www.sketch.com/",categories:["Design"]},{id:"confluence",name:"Confluence",description:"A collaboration and documentation tool developed by Atlassian.",url:"https://www.atlassian.com/software/confluence",categories:["Documentation"]},d,{id:"jira",name:"Jira",description:"Atlassian's project and issue tracking tool.",url:"https://www.atlassian.com/software/jira",categories:["Project Management"]},{id:"nodejs",name:"Node.js",description:"A runtime environment for executing JavaScript on the server.",url:"https://nodejs.org/en",categories:["Runtime"]},{id:"redux",name:"Redux",description:"A predictable state container for JavaScript applications.",url:"https://redux.js.org/",categories:["State Management"]},{id:"stylus",name:"Stylus",description:"A dynamic stylesheet preprocessor.",url:"http://stylus-lang.com/",categories:["Styling"]}],highlighted:false,media:["001-ubermetrics","002-ubermetrics","003-ubermetrics","004-ubermetrics","005-ubermetrics","006-ubermetrics"],Content:void 0,slug:"ubermetrics"},nextProject:{id:"data2resilience",title:"Data&shy;2&shy;Resilience",description:"*Live Data Dashboard* showing heat stress levels in the city of Dortmund",type:"Interactive Dashboard",year:2025,pubDate:new Date(1746057600000),url:"https://dashboard.data2resilience.de/en",repo:"https://github.com/RUBclim/data-2-resilience",links:e,collaborators:[],colleagues:[{id:"alsino-skowronnek",name:"Alsino Skowronnek",url:"https://alsino.io/",avatarFormat:"webp"}],supervisors:[],institutions:[],supporters:[{id:"google-org",name:"Google.org",url:"https://www.google.org/",avatarFormat:"webp"},{id:"iclei",name:"ICLEI",url:"https://iclei.org/",avatarFormat:"webp"}],clients:[{id:"boldgeo",name:"boldgeo",url:"https://boldgeo.de/",avatarFormat:"webp"},{id:"ruhr-university-bochum",name:"Ruhr University Bochum",url:"https://www.ruhr-uni-bochum.de/en/",avatarFormat:"webp"},{id:"leibniz-university-hannover",name:"Leibniz University Hannover",url:"https://www.uni-hannover.de/",avatarFormat:"webp"}],technologies:[l,n,f,a,b,c,g,h,i,j,d,{id:"shadcn-ui-sv",name:"shadcn/ui for Svelte",description:"A collection of components and UI tools for Svelte.",url:"https://shadcn-svelte.com/",categories:["UI Components"]},o,{id:"layerchart",name:"LayerChart",description:"A large collection of visualization components and utilities for Svelte",url:"https://layerchart.com/",categories:["Datavis"]},k],highlighted:false,media:["001-data2resilience","002-data2resilience","003-data2resilience","004-data2resilience","005-data2resilience","006-data2resilience","007-data2resilience"],Content:void 0,slug:"data2resilience"},nextNextProject:{id:"media-impact-monitor",title:"Media Impact Monitor",description:"*Media monitoring dashboard* helping activist organisations to raise awareness on their campaigns",type:"Interactive Dashboard",year:2024,pubDate:new Date(1722470400000),url:"https://mediaimpactmonitor.app",repo:"https://github.com/SocialChangeLab/media-impact-monitor",links:e,collaborators:[],colleagues:[{id:"david-pomerenke",n
128ame:"David Pomerenke",url:"https://www.linkedin.com/in/davidpomerenke/",avatarFormat:"webp"},{id:"lennart-klein",name:"Lennart Klein",url:"https://www.linkedin.com/in/lennart-klein/",avatarFormat:"webp"}],supervisors:[],institutions:[],supporters:[{id:"social-change-lab",name:"Social Change Lab",url:"https://www.socialchangelab.org/",avatarFormat:"webp"},{id:"prototype-fund",name:"Prototype Fund",url:"https://prototypefund.de/",avatarFormat:"webp"},{id:"federal-ministry-of-education-and-research",name:"Federal Ministry of Education and Research",url:"https://www.bmbf.de/EN/Home/home_node.html",avatarFormat:"webp"}],clients:[],technologies:[m,{id:"nextjs",name:"Next.js",description:"A React framework for building server-rendered applications.",url:"https://nextjs.org/",categories:["(Meta) Framework"]},n,f,a,b,c,g,h,i,j,d,o,{id:"shadcn-ui-rc",name:"shadcn/ui",description:"A collection of components and UI tools for React.",url:"https://ui.shadcn.com/",categories:["UI Components"]},{id:"recharts",name:"Recharts",description:"A composable charting library built on React components.",url:"https://recharts.org/",categories:["Datavis"]},k],highlighted:false,media:["001-media-impact-monitor","002-media-impact-monitor","003-media-impact-monitor","004-media-impact-monitor","005-media-impact-monitor","006-media-impact-monitor","007-media-impact-monitor"],Content:void 0,slug:"media-impact-monitor"}},uses:{params:["slug"]}}}({},{},{},{},Array(0),{},{},{},{},{},{},{},{},{},{}))],
129									form: null,
130									error: null
131								});
132						});
133					});
134				}
135			</script>
135
136		</div>
137	</body>
138</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.