Add formation page

.changeset/little-pianos-poke.md

@@ -0,0 +1,5 @@
+---
+"openscript-ch-website": patch
+---
+
+Add formation page

package.json

@@ -11,7 +11,7 @@
     "url": "https://github.com/openscript-ch/openscript.ch/issues"
   },
   "repository": "github:openscript-ch/openscript.ch",
-  "packageManager": "pnpm@10.24.0",
+  "packageManager": "pnpm@10.25.0",
   "scripts": {
     "predev": "pnpm build:sprite",
     "prebuild": "pnpm build:sprite",
@@ -30,15 +30,15 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.6",
-    "@astrojs/mdx": "^4.3.12",
+    "@astrojs/mdx": "^4.3.13",
     "@astrojs/rss": "^4.0.14",
     "@astrojs/sitemap": "^3.6.0",
     "@fontsource/fira-mono": "^5.2.7",
     "@fontsource/pt-sans": "^5.2.8",
     "@nanostores/i18n": "^1.2.2",
-    "astro": "^5.16.3",
-    "astro-loader-i18n": "^0.9.1",
-    "astro-nanostores-i18n": "^0.2.1",
+    "astro": "^5.16.5",
+    "astro-loader-i18n": "^0.10.9",
+    "astro-nanostores-i18n": "^0.2.4",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-class-names": "^8.6.0",
@@ -57,8 +57,8 @@
     "@openscript/unplugin-favicons": "^1.1.8",
     "@types/mdast": "^4.0.4",
     "@types/node": "^24.10.1",
-    "@typescript-eslint/parser": "^8.48.0",
-    "@vitest/coverage-v8": "4.0.14",
+    "@typescript-eslint/parser": "^8.49.0",
+    "@vitest/coverage-v8": "4.0.15",
     "astro-eslint-parser": "^1.2.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
@@ -68,12 +68,12 @@
     "favicons": "^7.2.0",
     "globals": "^16.5.0",
     "jiti": "^2.6.1",
-    "prettier": "^3.7.3",
+    "prettier": "^3.7.4",
     "prettier-plugin-astro": "^0.14.1",
     "sirv": "^3.0.2",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vitest": "4.0.14"
+    "typescript-eslint": "^8.49.0",
+    "vitest": "4.0.15"
   },
   "pnpm": {
     "overrides": {

src/components/Timeline.astro

@@ -0,0 +1,73 @@
+---
+
+---
+
+<div class="timeline">
+  <ol>
+    <slot />
+  </ol>
+</div>
+
+<style>
+  .timeline {
+    position: relative;
+  }
+
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-gutter-big);
+  }
+
+  /* spine of the timeline */
+  .timeline::before {
+    content: "";
+    width: 4px;
+    height: calc(100% + var(--size-height-divider) + (3 * var(--size-gutter-massive)));
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    background: linear-gradient(
+      to bottom,
+      var(--color-primary) 0.2rem,
+      transparent 0.2rem,
+      transparent 0.4rem,
+      var(--color-primary) 0.4rem,
+      var(--color-primary) 0.6rem,
+      transparent 0.6rem,
+      transparent 0.8rem,
+      var(--color-primary) 0.8rem
+    );
+    z-index: 3; /* above potential dividers */
+  }
+
+  :global(article section:last-of-type .timeline::before) {
+    height: 100%;
+  }
+
+  @media screen and (max-width: 1025px) {
+    .timeline::before {
+      left: 90%;
+    }
+
+    .timeline::after {
+      content: "";
+      width: 20px;
+      aspect-ratio: 1;
+      clip-path: polygon(0 0, 50% 100%, 100% 0);
+      background-color: var(--color-primary);
+      left: calc(90% - 10px);
+      bottom: -5px;
+      position: absolute;
+      z-index: 3; /* above potential dividers */
+    }
+
+    .timeline::before {
+      height: 100%;
+    }
+  }
+</style>

src/components/TimelineEntry.astro

@@ -0,0 +1,58 @@
+---
+
+---
+
+<li>
+  <slot />
+</li>
+
+<style>
+  li {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 1rem;
+    background: var(--color-overlay);
+    width: 45%;
+    font-size: 1.2rem;
+  }
+
+  li::after {
+    content: "";
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 4px solid var(--color-primary);
+    background: var(--color-white);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 5; /* above spine */
+  }
+
+  li :global(*:last-child) {
+    margin-block-end: 0;
+  }
+
+  @media screen and (min-width: 1025px) {
+    li:nth-child(even) {
+      align-self: flex-end;
+    }
+  }
+
+  @media screen and (max-width: 1025px) {
+    li::after {
+      width: 17px;
+      height: 17px;
+      left: 90%;
+    }
+
+    li {
+      width: 85%;
+    }
+
+    li:not(:last-child) {
+      margin-bottom: 4rem;
+    }
+  }
+</style>

src/content.config.ts

@@ -138,6 +138,22 @@ const galleriesCollection = defineCollection({
     ),
 });
 
+const formationCollection = defineCollection({
+  loader: i18nContentLoader({ pattern: "**/[^_]*.yaml", base: "./src/content/formation" }),
+  schema: extendI18nLoaderSchema(
+    z.object({
+      items: localized(
+        z.array(
+          z.object({
+            title: z.string(),
+            text: z.string(),
+          }),
+        ),
+      ),
+    }),
+  ),
+});
+
 export const collections = {
   navigation: navigationCollection,
   pages: pagesCollection,
@@ -148,4 +164,5 @@ export const collections = {
   technologies: technologiesCollection,
   team: teamCollection,
   galleries: galleriesCollection,
+  formation: formationCollection,
 };

src/content/formation/evolution.yaml

@@ -0,0 +1,11 @@
+items:
+  de:
+    - title: Praktikumsplatz
+      text: Im Jahr 2023 absolvierte Micael sein einjähriges Praktikum bei uns.
+    - title: Weitere Unterstützung
+      text: Seit Anfang 2025 programmiert Leonardo bei uns fleissig mit.
+  en:
+    - title: Internship Position
+      text: In 2023, Micael completed his one-year internship with us.
+    - title: Further Support
+      text: Since early 2025, Leonardo has been programming diligently with us.

src/content/formation/founding.yaml

@@ -0,0 +1,11 @@
+items:
+  de:
+    - title: Web-Domain
+      text: Bereits am 24. April 2007 wurde die Domain openscript.ch registriert.
+    - title: Handelsregistereintrag
+      text: Seit dem 23. Januar 2020 sind wir im Handelsregister eingetragen.
+  en:
+    - title: Web Domain
+      text: The domain openscript.ch was already registered on April 24, 2007.
+    - title: Commercial Register Entry
+      text: We have been registered in the commercial register since January 23, 2020.

src/content/formation/office.yaml

@@ -0,0 +1,15 @@
+items:
+  de:
+    - title: Temporäres Büro
+      text: Im Februar 2021 sind wir in ein temporäres Büro im ehemaligen Swissôtel Zürich gezogen.
+    - title: Unterstützung
+      text: Ab Frühjahr 2021 unterstützte uns Aaron als Softwareentwickler.
+    - title: Zweites Büro
+      text: Seit Anfang 2022 mieten wir ein Büro in Glattbrugg.
+  en:
+    - title: Temporary Office
+      text: In February 2021, we moved into a temporary office in the former Swissôtel Zürich.
+    - title: Support
+      text: From spring 2021, Aaron supported us as a software developer.
+    - title: Second Office
+      text: Since early 2022, we have been renting an office in Glattbrugg.

src/content/pages/de/past/formation.mdx

@@ -2,3 +2,37 @@
 path: entstehung
 title: Entstehung
 ---
+
+import FormationSection from "../../../../layouts/sections/FormationSection.astro";
+import Divider from "../../../../components/Divider.astro";
+
+<FormationSection class="spotlight" key="founding">
+  <h2>Gründung</h2>
+
+  Obwohl die Idee und der Name schon einige Zeit zuvor existierten, wurde die Firma offiziell im Januar 2020 von Robin gegründet. Bald nach der Gründung ist Diego als zweiter Mitgründer dazugestossen. Fortan arbeiteten die beiden daran, die ersten Softwareprojekte umzusetzen.
+
+</FormationSection>
+
+<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
+
+<FormationSection class="white-background" key="office">
+  <h2>Büro und Mitarbeiter</h2>
+
+  Zuerst dachten wir, dass wir einfach von zu Hause aus arbeiten. Doch als wir davon erfuhren, dass in Oerlikon das ehemalige Swissôtel in eine WG für Studenten und Startups umgewandelt wird, haben wir uns sofort beworben und Glück gehabt. Die Geschichte kann [hier](https://www.srf.ch/news/schweiz/mit-rund-300-mitbewohnern-dieser-ehemalige-hotelturm-wird-zur-mega-wg) nachgelesen werden. Somit hatten wir von Februar 2021 bis Ende Jahr unser erstes Büro mitten in Oerlikon.
+
+  Dabei haben wir festgestellt, dass es uns sehr hilft, wenn wir uns regelmässig persönlich austauschen können. Deshalb haben wir uns entschieden, auch nach der Zwischennutzung des Swissôtels ein Büro zu mieten. Schnell haben wir ein passendes Büro in Glattbrugg gefunden, welches wir seit Anfang 2022 nutzen.
+
+  In der Zwischenzeit sind auch weitere Mitarbeiter zu uns gestossen, die uns bei der Umsetzung der Projekte unterstützen.
+
+</FormationSection>
+
+<Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
+
+<FormationSection class="dark-background" key="evolution">
+  <h2>Entwicklung</h2>
+
+  Seither haben wir uns stetig weiterentwickelt und neue Projekte realisiert, die unsere Vision und Mission unterstützen. Wir freuen uns auf die kommenden Herausforderungen und Chancen, die vor uns liegen.
+
+  Möchtest du auch Teil unserer Reise werden? Schau dir unsere [Jobs-Seite](../zukunft/jobs) an oder nimm Kontakt auf, falls du dein Projekt mit uns umsetzen möchtest!
+
+</FormationSection>

src/content/pages/en/past/formation.mdx

@@ -2,3 +2,37 @@
 path: formation
 title: Formation
 ---
+
+import FormationSection from "../../../../layouts/sections/FormationSection.astro";
+import Divider from "../../../../components/Divider.astro";
+
+<FormationSection class="spotlight" key="founding">
+  <h2>Founding</h2>
+
+  Although the idea and name had existed for some time before, the company was officially founded by Robin in January 2020. Shortly after the founding, Diego joined as the second co-founder. From then on, the two worked together to implement the first software projects.
+
+</FormationSection>
+
+<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
+
+<FormationSection class="white-background" key="office">
+  <h2>Office and employees</h2>
+
+  At first, we thought we would simply work from home. But when we learned that the former Swissôtel in Oerlikon was being converted into shared accommodation for students and startups, we applied immediately and were lucky. The story can be read [here](https://www.srf.ch/news/schweiz/mit-rund-300-mitbewohnern-dieser-ehemalige-hotelturm-wird-zur-mega-wg). Thus, we had our first office in the heart of Oerlikon from February 2021 until the end of the year.
+
+  In doing so, we realized that it helps us greatly when we can exchange ideas in person regularly. Therefore, we decided to rent an office even after the interim use of the Swissôtel. We quickly found a suitable office in Glattbrugg, which we have been using since early 2022.
+
+  In the meantime, additional employees have joined us, supporting us in the implementation of our projects.
+
+</FormationSection>
+
+<Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
+
+<FormationSection class="dark-background" key="evolution">
+  <h2>Evolution</h2>
+
+  Since then, we have continuously evolved and realized new projects that support our vision and mission. We look forward to the upcoming challenges and opportunities that lie ahead.
+
+  Would you like to become part of our journey? Check out our [jobs page](../future/jobs) or get in touch if you want to realize your project with us!
+
+</FormationSection>

src/layouts/Shell.css

@@ -28,8 +28,10 @@
   --color-background: #ede9df;
   --color-black: #231f20;
   --color-white: #fbfffb;
+  --color-overlay: #f7f9f3;
 
   --size-gutter: 1rem;
+  --size-gutter-medium: 1.5rem;
   --size-gutter-big: 2rem;
   --size-gutter-huge: 4rem;
   --size-gutter-massive: 8rem;
@@ -38,6 +40,8 @@
   --size-burger: 2rem;
   --size-carousel-buttons: 2rem;
 
+  --heading-margin: 2.2em;
+
   --font-size: 16px;
   --font-text: "PT Sans", sans-serif;
   --font-mono: "Fira Mono", monospace;
@@ -175,7 +179,7 @@ h5,
 h6 {
   font-family: var(--font-heading);
   font-weight: 900;
-  margin-top: 2.2em;
+  margin-top: var(--heading-margin);
 }
 
 h1 {