From 6efe80362db4f85c70903941fd788eea6daf1622 Mon Sep 17 00:00:00 2001 From: "leonardo.olivo" <1leonardo.olivo@gmail.com> Date: Thu, 20 Nov 2025 13:50:21 +0000 Subject: [PATCH 1/6] feat: add base formation section --- src/components/Timeline.astro | 88 +++++++++++++++++++++ src/content.config.ts | 17 ++++ src/content/formation/founding.yaml | 11 +++ src/content/formation/office.yaml | 11 +++ src/content/pages/de/past/formation.mdx | 19 +++++ src/layouts/sections/FormationSection.astro | 41 ++++++++++ 6 files changed, 187 insertions(+) create mode 100644 src/components/Timeline.astro create mode 100644 src/content/formation/founding.yaml create mode 100644 src/content/formation/office.yaml create mode 100644 src/layouts/sections/FormationSection.astro diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro new file mode 100644 index 00000000..90c56925 --- /dev/null +++ b/src/components/Timeline.astro @@ -0,0 +1,88 @@ +--- +type Props = { + elements: { + text: string; + title: string; + }[]; +}; + +const { elements } = Astro.props; +--- + +
+
    + { + elements.map((element) => ( +
  1. +
    {element.title}
    +

    {element.text}

    +
    2. + )) + } +
+
+ + diff --git a/src/content.config.ts b/src/content.config.ts index 972a3000..904e089e 100644 --- a/src/content.config.ts +++ b/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, }; diff --git a/src/content/formation/founding.yaml b/src/content/formation/founding.yaml new file mode 100644 index 00000000..5cf1adba --- /dev/null +++ b/src/content/formation/founding.yaml @@ -0,0 +1,11 @@ +items: + de: + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + en: + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod \ No newline at end of file diff --git a/src/content/formation/office.yaml b/src/content/formation/office.yaml new file mode 100644 index 00000000..5cf1adba --- /dev/null +++ b/src/content/formation/office.yaml @@ -0,0 +1,11 @@ +items: + de: + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + en: + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + - title: Lorem + text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod \ No newline at end of file diff --git a/src/content/pages/de/past/formation.mdx b/src/content/pages/de/past/formation.mdx index c071ac02..397c6f8d 100644 --- a/src/content/pages/de/past/formation.mdx +++ b/src/content/pages/de/past/formation.mdx @@ -2,3 +2,22 @@ path: entstehung title: Entstehung --- + +import FormationSection from "../../../../layouts/sections/FormationSection.astro"; +import Divider from "../../../../components/Divider.astro"; + + +

Gründung

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + + + + + +

Erstes Büro

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + \ No newline at end of file diff --git a/src/layouts/sections/FormationSection.astro b/src/layouts/sections/FormationSection.astro new file mode 100644 index 00000000..0dc6f20e --- /dev/null +++ b/src/layouts/sections/FormationSection.astro @@ -0,0 +1,41 @@ +--- +import { currentLocale } from "astro-nanostores-i18n:runtime"; +import Timeline from "../../components/Timeline.astro"; +import { getCollection } from "astro:content"; + +type Props = { + key: string; + class?: string; +}; + +const { key, class: className } = Astro.props; + +const locale = currentLocale.get(); + +const timelineCollection = await getCollection("formation", (entry) => entry.data.locale === locale); + +const formationData = timelineCollection + .filter((t) => t.id.includes(key)) + .flatMap((t) => { + if (Array.isArray(t.data.items)) { + return t.data.items.map((item) => ({ ...item })); + } + return []; + }); +--- + +
+
+ + +
+ +
+ + From 8b8244bc08ee182f7055606b01bf001a3f3e4e9b Mon Sep 17 00:00:00 2001 From: "leonardo.olivo" <1leonardo.olivo@gmail.com> Date: Thu, 20 Nov 2025 16:30:09 +0000 Subject: [PATCH 2/6] feat: timeline fine tuning, added en formation --- src/components/Timeline.astro | 14 ++++++---- src/content/formation/evolution.yaml | 15 +++++++++++ src/content/formation/founding.yaml | 16 ++++++------ src/content/formation/office.yaml | 20 ++++++++------ src/content/pages/de/past/formation.mdx | 11 +++++++- src/content/pages/en/past/formation.mdx | 29 +++++++++++++++++++++ src/layouts/Shell.css | 1 + src/layouts/sections/FormationSection.astro | 5 ++-- 8 files changed, 87 insertions(+), 24 deletions(-) create mode 100644 src/content/formation/evolution.yaml diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro index 90c56925..51b52bc8 100644 --- a/src/components/Timeline.astro +++ b/src/components/Timeline.astro @@ -4,9 +4,12 @@ type Props = { text: string; title: string; }[]; + shortSpine?: boolean; }; -const { elements } = Astro.props; +const { elements, shortSpine = false } = Astro.props; + +const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider) + (2 * var(--size-gutter-massive)))"; ---
@@ -22,7 +25,7 @@ const { elements } = Astro.props;
- diff --git a/src/layouts/sections/FormationSection.astro b/src/layouts/sections/FormationSection.astro index 96f6e838..641e6a16 100644 --- a/src/layouts/sections/FormationSection.astro +++ b/src/layouts/sections/FormationSection.astro @@ -39,4 +39,11 @@ const formationData = timelineCollection column-gap: 1.5rem; grid-template-columns: 60% 40%; } + + @media screen and (max-width: 1025px) { + section { + grid-template-columns: 100%; + row-gap: 1rem; + } + } From 985e6f339187722c5899f942a0bb87c942bf407a Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 1 Dec 2025 09:08:39 +0000 Subject: [PATCH 4/6] chore: add changeset --- .changeset/little-pianos-poke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/little-pianos-poke.md diff --git a/.changeset/little-pianos-poke.md b/.changeset/little-pianos-poke.md new file mode 100644 index 00000000..71579cf7 --- /dev/null +++ b/.changeset/little-pianos-poke.md @@ -0,0 +1,5 @@ +--- +"openscript-ch-website": patch +--- + +Add formation page From 4729b1b41203490b0f7e9ae3fcd2842707b0071f Mon Sep 17 00:00:00 2001 From: Robin Date: Mon, 1 Dec 2025 10:12:51 +0000 Subject: [PATCH 5/6] docs: add formation content --- src/content/formation/founding.yaml | 16 +++++++------- src/content/pages/de/past/formation.mdx | 26 ++++++++++++++--------- src/content/pages/en/past/formation.mdx | 28 +++++++++++++++---------- 3 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/content/formation/founding.yaml b/src/content/formation/founding.yaml index 0d1a8b95..d7178403 100644 --- a/src/content/formation/founding.yaml +++ b/src/content/formation/founding.yaml @@ -1,11 +1,11 @@ items: de: - - title: Lorem - text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - - title: Lorem - text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + - 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: Lorem - text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - - title: Lorem - text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + - 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. diff --git a/src/content/pages/de/past/formation.mdx b/src/content/pages/de/past/formation.mdx index 05f5e192..bf778dc8 100644 --- a/src/content/pages/de/past/formation.mdx +++ b/src/content/pages/de/past/formation.mdx @@ -8,25 +8,31 @@ import Divider from "../../../../components/Divider.astro";

Gründung

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + + 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 zweiten Mitgründer dazugestossen. Fortan arbeiteten die beiden daran, die ersten Softwareprojekte umzusetzen. + -

Erstes Büro

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum +

Büro und Mitarbeiter

+ + 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, welche uns bei der Umsetzung unserer Projekte unterstützen. +

Entwicklung

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + + 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! + diff --git a/src/content/pages/en/past/formation.mdx b/src/content/pages/en/past/formation.mdx index 8c6dbeed..5e9b34a1 100644 --- a/src/content/pages/en/past/formation.mdx +++ b/src/content/pages/en/past/formation.mdx @@ -9,25 +9,31 @@ import Divider from "../../../../components/Divider.astro";

Founding

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + + 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. + -

First Office

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum +

Office and employees

+ + 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. +

Evolution

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum - \ No newline at end of file + + 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! + + From 1c7f72b08d7be718ee6d05bad3f2b81596ee4e22 Mon Sep 17 00:00:00 2001 From: "leonardo.olivo" <1leonardo.olivo@gmail.com> Date: Wed, 3 Dec 2025 09:11:10 +0000 Subject: [PATCH 6/6] feat: add dot at beginning of spine. Add TimelineEntry. --- src/components/Timeline.astro | 91 +++++++-------------- src/components/TimelineEntry.astro | 59 +++++++++++++ src/content/pages/de/past/formation.mdx | 6 +- src/content/pages/en/past/formation.mdx | 7 +- src/layouts/sections/FormationSection.astro | 29 ++++++- 5 files changed, 120 insertions(+), 72 deletions(-) create mode 100644 src/components/TimelineEntry.astro diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro index 8615b1e3..0cd45bae 100644 --- a/src/components/Timeline.astro +++ b/src/components/Timeline.astro @@ -1,42 +1,24 @@ --- type Props = { - elements: { - text: string; - title: string; - }[]; shortSpine?: boolean; }; -const { elements, shortSpine = false } = Astro.props; +const { shortSpine = false } = Astro.props; -const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider) + (2 * var(--size-gutter-massive)))"; const displayTriangle = shortSpine ? "none" : "absolute"; --- -
+
+
    - { - elements.map((element) => ( -
  1. -
    {element.title}
    -

    {element.text}

    -
    2. - )) - } +
- diff --git a/src/components/TimelineEntry.astro b/src/components/TimelineEntry.astro new file mode 100644 index 00000000..ab31ae66 --- /dev/null +++ b/src/components/TimelineEntry.astro @@ -0,0 +1,59 @@ +--- + +--- + +
  • + +
    • + + diff --git a/src/content/pages/de/past/formation.mdx b/src/content/pages/de/past/formation.mdx index bf778dc8..1d95b4a7 100644 --- a/src/content/pages/de/past/formation.mdx +++ b/src/content/pages/de/past/formation.mdx @@ -7,7 +7,7 @@ import FormationSection from "../../../../layouts/sections/FormationSection.astr import Divider from "../../../../components/Divider.astro"; -

    Gründung

    +

    Gründung

    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 zweiten Mitgründer dazugestossen. Fortan arbeiteten die beiden daran, die ersten Softwareprojekte umzusetzen. @@ -16,7 +16,7 @@ import Divider from "../../../../components/Divider.astro"; -

    Büro und Mitarbeiter

    +

    Büro und Mitarbeiter

    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. @@ -29,7 +29,7 @@ import Divider from "../../../../components/Divider.astro"; -

    Entwicklung

    +

    Entwicklung

    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. diff --git a/src/content/pages/en/past/formation.mdx b/src/content/pages/en/past/formation.mdx index 5e9b34a1..4b1ec9c5 100644 --- a/src/content/pages/en/past/formation.mdx +++ b/src/content/pages/en/past/formation.mdx @@ -3,12 +3,11 @@ path: formation title: Formation --- - import FormationSection from "../../../../layouts/sections/FormationSection.astro"; import Divider from "../../../../components/Divider.astro"; -

    Founding

    +

    Founding

    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. @@ -17,7 +16,7 @@ import Divider from "../../../../components/Divider.astro"; -

    Office and employees

    +

    Office and employees

    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. @@ -30,7 +29,7 @@ import Divider from "../../../../components/Divider.astro"; -

    Evolution

    +

    Evolution

    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. diff --git a/src/layouts/sections/FormationSection.astro b/src/layouts/sections/FormationSection.astro index 641e6a16..e77d415b 100644 --- a/src/layouts/sections/FormationSection.astro +++ b/src/layouts/sections/FormationSection.astro @@ -2,11 +2,13 @@ import { currentLocale } from "astro-nanostores-i18n:runtime"; import Timeline from "../../components/Timeline.astro"; import { getCollection } from "astro:content"; +import TimelineEntry from "../../components/TimelineEntry.astro"; type Props = { key: string; class?: string; last?: boolean; + start?: boolean; }; const { key, class: className, last } = Astro.props; @@ -27,17 +29,27 @@ const formationData = timelineCollection
    -
    - +
    + + { + formationData.map((element) => ( + +
    {element.title}
    +

    {element.text}

    +     + )) + } +     +