diff --git a/.gitignore b/.gitignore index f1e354a..e43b0f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,33 +1 @@ -# macOS .DS_Store - -# Editor / IDE -.idea/ -.vscode/ - -# Logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* - -# Environment files -.env -.env.* -!.env.example - -# Dependencies -node_modules/ -vendor/ - -# Build output -dist/ -build/ -.next/ -coverage/ - -# Archives -*.zip -*.tar -*.gz diff --git a/index.html b/index.html new file mode 100644 index 0000000..e2869d6 --- /dev/null +++ b/index.html @@ -0,0 +1,268 @@ + + + + + + Fabienne Foehn + + + + +
+
+
+
+ Fabienne Foehn +
+ + + + +

Von der Idee zur Wirkung

+
+ +
+ +
+ Fabienne Foehn im Portrait +
+
+ +
+
+

Wie aus Ideen Ergebnisse werden

+ +
+ +
+
+ +

Ich bringe Klarheit ins Vorhaben

+
+
+ +

Ich übersetze Ideen in klare Schritte

+
+
+ +

Ich setze um, bis zum Schluss

+
+
+ +

Ich übernehme Verantwortung, nicht nur Aufgaben

+
+
+ + +
+ +
+
+

Meine Schwerpunkte

+ +
+ +
+
+
+ Innovation und Intrapreneurship +
+

Innovationen und Intrapreneurship

+

Wie aus einer neuen Business-Idee Realität wird

+
+ +
+
+ Eventprojekte +
+

Eventprojekte

+

Wirkungsvoll umgesetzt in einem Sorglospaket

+
+
+
+ +
+
+ Fabienne Foehn bei einem Vortrag +
+ +
+
+

Über mich

+ +
+ +
+

+ Begeisterung für Neues zieht sich durch alles. Innovationen + entdecken, Ideen weiterdenken und Dinge ausprobieren, die es so + noch nicht gibt. +

+

+ Erfahrungen reichen von der Entwicklung neuer Produkte, von + der ersten Idee bis zum fertigen Ergebnis, unter anderem + für Marken wie Betty Bossi, bis hin zu Intrapreneurship- und + Eventprojekten. +

+

+ Am wohlsten entsteht dort, wo etwas reizt, herausfordert + und Neugier weckt. Genau dann entsteht Bewegung. +

+

+ Getrieben von dem Anspruch, Dinge wirklich voranzubringen. + Zielstrebig, mit Energie und dem klaren Fokus, Ideen nicht nur zu + denken, sondern wirklich auch umzusetzen. +

+
+
+
+ +
+
+

So arbeite ich

+ +
+ +
+
+
+ +
+

Zielorientiert

+

Nicht Konzepte bestimmen die Zukunft, sondern Ergebnisse.

+
+ +
+
+ +
+

Pragmatisch

+

Einfach und umsetzbar.

+
+ +
+
+ +
+

Umsetzungsstark

+

Zuverlässig und bis zum Schluss, ohne wenn und aber.

+
+
+
+ + +
+
+ + + + + + diff --git a/media/auge.svg b/media/auge.svg new file mode 100644 index 0000000..e9b2371 --- /dev/null +++ b/media/auge.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/media/fabienne_foehn1.jpg b/media/fabienne_foehn1.jpg new file mode 100644 index 0000000..e1286af Binary files /dev/null and b/media/fabienne_foehn1.jpg differ diff --git a/media/fabienne_foehn2.jpg b/media/fabienne_foehn2.jpg new file mode 100644 index 0000000..45f3d2e Binary files /dev/null and b/media/fabienne_foehn2.jpg differ diff --git a/media/globus.svg b/media/globus.svg new file mode 100644 index 0000000..b95b5e5 --- /dev/null +++ b/media/globus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/media/hand.svg b/media/hand.svg new file mode 100644 index 0000000..a2b0f90 --- /dev/null +++ b/media/hand.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/media/icon_eventprojekte.svg b/media/icon_eventprojekte.svg new file mode 100644 index 0000000..160dd69 --- /dev/null +++ b/media/icon_eventprojekte.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/icon_innovation_intrapreneurship.svg b/media/icon_innovation_intrapreneurship.svg new file mode 100644 index 0000000..dc419ac --- /dev/null +++ b/media/icon_innovation_intrapreneurship.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/icon_pragmatisch.svg b/media/icon_pragmatisch.svg new file mode 100644 index 0000000..df762e4 --- /dev/null +++ b/media/icon_pragmatisch.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/icon_umsetzungsstark.svg b/media/icon_umsetzungsstark.svg new file mode 100644 index 0000000..b6eb42e --- /dev/null +++ b/media/icon_umsetzungsstark.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/icon_zielorientiert.svg b/media/icon_zielorientiert.svg new file mode 100644 index 0000000..1f4b884 --- /dev/null +++ b/media/icon_zielorientiert.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/illu_oben_hintergrund_striche.svg b/media/illu_oben_hintergrund_striche.svg new file mode 100644 index 0000000..bd11d89 --- /dev/null +++ b/media/illu_oben_hintergrund_striche.svg @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/logo_oben.svg b/media/logo_oben.svg new file mode 100644 index 0000000..e6c97d8 --- /dev/null +++ b/media/logo_oben.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/logo_unten.svg b/media/logo_unten.svg new file mode 100644 index 0000000..84fa404 --- /dev/null +++ b/media/logo_unten.svg @@ -0,0 +1,116 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/lupe.svg b/media/lupe.svg new file mode 100644 index 0000000..32b36ac --- /dev/null +++ b/media/lupe.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/media/striche_blau_unter_wort.svg b/media/striche_blau_unter_wort.svg new file mode 100644 index 0000000..0bb7513 --- /dev/null +++ b/media/striche_blau_unter_wort.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/media/strichlein_rgruen_unter_wort.svg b/media/strichlein_rgruen_unter_wort.svg new file mode 100644 index 0000000..4c18ad1 --- /dev/null +++ b/media/strichlein_rgruen_unter_wort.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/media/strichlein_rosa_uber_wort.svg b/media/strichlein_rosa_uber_wort.svg new file mode 100644 index 0000000..7a5e759 --- /dev/null +++ b/media/strichlein_rosa_uber_wort.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9c51c6b --- /dev/null +++ b/script.js @@ -0,0 +1,51 @@ +const flyover = document.querySelector("[data-contact-flyover]"); +const openButtons = document.querySelectorAll("[data-open-contact]"); +const closeButtons = document.querySelectorAll("[data-close-contact]"); +const copyButtons = document.querySelectorAll("[data-copy-value]"); + +const openFlyover = () => { + if (!flyover) return; + flyover.hidden = false; + document.body.classList.add("is-scroll-locked"); +}; + +const closeFlyover = () => { + if (!flyover) return; + flyover.hidden = true; + document.body.classList.remove("is-scroll-locked"); +}; + +openButtons.forEach((button) => { + button.addEventListener("click", openFlyover); +}); + +closeButtons.forEach((button) => { + button.addEventListener("click", closeFlyover); +}); + +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && flyover && !flyover.hidden) { + closeFlyover(); + } +}); + +copyButtons.forEach((button) => { + button.addEventListener("click", async () => { + const value = button.dataset.copyValue; + if (!value) return; + + try { + await navigator.clipboard.writeText(value); + const label = button.querySelector("span"); + button.classList.add("is-copied"); + if (label) label.textContent = "Kopiert"; + + window.setTimeout(() => { + button.classList.remove("is-copied"); + if (label) label.textContent = "Kopieren"; + }, 1800); + } catch (error) { + console.error("Copy failed", error); + } + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..cd61854 --- /dev/null +++ b/styles.css @@ -0,0 +1,711 @@ +:root { + --bg-page: #d5de46; + --bg-light: #f8f7f2; + --bg-dark: #2f3a18; + --bg-lime: #cfdf45; + --text-dark: #364121; + --shadow-card: 0 14px 30px rgba(47, 58, 24, 0.12); + --shadow-panel: 0 24px 60px rgba(20, 22, 16, 0.22); + --font-family: "Gosha Sans", "Arial Black", "Helvetica Neue", Arial, sans-serif; + --font-weight-regular: 400; + --font-weight-bold: 700; + --font-weight-black: 900; + --radius-button: 999px; + --radius-panel: 28px; + --radius-small: 18px; + --max-width: 1440px; + --section-padding: clamp(2.5rem, 4vw, 5rem); + --grid-gap: 1.6rem; + --transition-fast: 180ms ease; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + background: linear-gradient(180deg, #dbe64a 0%, #d0e142 100%); + color: var(--text-dark); + font-family: var(--font-family); +} + +body.is-scroll-locked { + overflow: hidden; +} + +img { + display: block; + max-width: 100%; +} + +button, +a { + font: inherit; +} + +h1, +h2, +h3, +p, +a, +button { + font-family: inherit; +} + +.page-shell { + min-height: 100vh; +} + +.page { + width: min(100%, var(--max-width)); + margin: 0 auto; + background: var(--bg-light); + box-shadow: 0 0 0 1px rgba(54, 65, 33, 0.06); +} + +.section { + position: relative; +} + +.section--light { + background: var(--bg-light); + color: var(--text-dark); +} + +.section--dark { + background: var(--bg-dark); + color: var(--bg-lime); +} + +.section--accent { + background: var(--bg-lime); + color: var(--text-dark); +} + +.section__content { + padding: var(--section-padding); +} + +.hero, +.about, +.footer { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.brand { + width: clamp(200px, 22vw, 320px); +} + +.hero__content { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 2rem; + min-height: 100%; +} + +.hero__headline-wrap { + position: relative; + max-width: 34rem; + padding-top: 4.5rem; +} + +.section-title { + margin: 0; + font-weight: var(--font-weight-black); + letter-spacing: -0.04em; + line-height: 0.92; + text-transform: uppercase; +} + +.section-title--hero { + position: relative; + z-index: 2; + font-size: clamp(4rem, 6.1vw, 6.2rem); +} + +.hero__scribble { + position: absolute; + pointer-events: none; +} + +.hero__scribble--top { + width: clamp(110px, 14vw, 170px); + top: 0.2rem; + right: 0.8rem; +} + +.hero__scribble--middle { + width: clamp(280px, 29vw, 400px); + left: 6.2rem; + top: 5.3rem; + opacity: 0.95; +} + +.hero__scribble--bottom { + width: clamp(210px, 26vw, 330px); + right: 1rem; + bottom: -0.1rem; +} + +.hero__scribble--bottom-secondary { + width: clamp(190px, 23vw, 280px); + right: 2rem; + bottom: 0.2rem; +} + +.hero__media { + min-height: 760px; +} + +.hero__media img, +.about__media img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + width: fit-content; + min-width: 13rem; + padding: 1rem 1.7rem; + border: 0; + border-radius: var(--radius-button); + font-weight: var(--font-weight-bold); + cursor: pointer; + transition: transform var(--transition-fast), box-shadow var(--transition-fast), + background var(--transition-fast); +} + +.button:hover, +.button:focus-visible, +.copy-button:hover, +.copy-button:focus-visible, +.contact-flyover__close:hover, +.contact-flyover__close:focus-visible { + transform: translateY(-1px); +} + +.button:focus-visible, +.copy-button:focus-visible, +.contact-flyover__close:focus-visible { + outline: 3px solid #ef49ae; + outline-offset: 3px; +} + +.button--dark { + background: var(--bg-dark); + color: var(--bg-lime); + box-shadow: var(--shadow-card); +} + +.button--light { + margin: 0 auto; + background: var(--bg-light); + color: var(--text-dark); +} + +.process { + text-align: center; +} + +.section-head { + position: relative; + display: flex; + align-items: flex-start; + justify-content: center; + gap: 1rem; + margin-bottom: 3rem; +} + +.section-title { + font-size: clamp(2.6rem, 4.4vw, 4.3rem); + max-width: 10.5ch; + text-align: center; +} + +.section-head img { + width: clamp(70px, 9vw, 120px); + margin-top: -0.3rem; +} + +.process__grid, +.focus__grid, +.work__grid { + display: grid; + gap: var(--grid-gap); +} + +.process__grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin-bottom: 2rem; +} + +.card { + border-radius: var(--radius-small); +} + +.card-title { + margin: 0; + font-weight: var(--font-weight-black); + text-transform: uppercase; +} + +.card-copy { + margin: 0; + font-size: clamp(1rem, 1.08vw, 1.2rem); + line-height: 1.35; +} + +.card--process { + background: var(--bg-lime); + color: var(--text-dark); + border: 2px solid rgba(47, 58, 24, 0.9); + padding: 1.5rem 1rem 1.25rem; + box-shadow: var(--shadow-card); +} + +.process-card img { + width: 92px; + height: 92px; + margin: 0 auto 1.2rem; + object-fit: contain; +} + +.contact-item__value, +.footer__contact a { + margin: 0; + font-weight: var(--font-weight-black); +} + +.process-card .card-title { + font-size: clamp(1.05rem, 1.4vw, 1.5rem); + line-height: 1.08; +} + +.focus__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + max-width: 640px; + margin: 0 auto; +} + +.card--focus { + border: 1.5px solid rgba(47, 58, 24, 0.85); + padding: 1.6rem 1.4rem; + text-align: center; +} + +.focus-card__image { + display: grid; + place-items: center; + width: min(56%, 180px); + aspect-ratio: 1; + margin: 0 auto 1.4rem; +} + +.focus-card .card-title { + font-size: clamp(1.1rem, 1.35vw, 1.5rem); + line-height: 1.06; + margin-bottom: 0.55rem; +} + +.focus-card .card-copy, +.work-card .card-copy, +.about__text p, +.footer__claim p, +.contact-flyover__intro, +.contact-item__label { + margin: 0; + font-size: clamp(1rem, 1.08vw, 1.2rem); + line-height: 1.35; +} + +.about__media { + min-height: 700px; +} + +.about__content { + display: flex; + flex-direction: column; + justify-content: center; +} + +.about__content .section-head { + justify-content: flex-start; + margin-bottom: 2rem; +} + +.about__content .section-head .section-title { + text-align: left; + max-width: none; +} + +.about__content .section-head img { + width: clamp(88px, 10vw, 120px); +} + +.about__text { + display: grid; + gap: 1.6rem; + max-width: 33rem; +} + +.about__text strong { + font-weight: 900; +} + +.work__grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.work-card { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.work-card__art { + display: grid; + place-items: center; + min-height: 235px; + padding: 1.4rem; + background: var(--bg-dark); + border-radius: var(--radius-small); +} + +.work-card__art img { + max-height: 165px; + width: auto; +} + +.work-card .card-title { + font-size: clamp(1.35rem, 1.85vw, 2rem); +} + +.footer { + align-items: end; +} + +.footer__contact { + display: flex; + flex-direction: column; + gap: 1rem; + justify-content: end; +} + +.footer__contact a { + width: fit-content; + color: inherit; + text-decoration: none; + font-size: clamp(1.2rem, 1.6vw, 2rem); +} + +.footer__claim { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; +} + +.section-title--claim { + font-size: clamp(3rem, 5vw, 5.4rem); + max-width: 8.2ch; +} + +.footer__claim p { + font-weight: var(--font-weight-bold); +} + +.footer__claim span { + margin-top: 1.8rem; + font-size: 1rem; +} + +.footer__accent { + position: absolute; + right: 3rem; + bottom: 4.4rem; + width: 240px; +} + +.footer__accent img:last-child { + width: 65%; + margin: -1.1rem 0 0 auto; +} + +.contact-flyover { + position: fixed; + inset: 0; + z-index: 20; +} + +.contact-flyover__backdrop { + position: absolute; + inset: 0; + background: rgba(24, 27, 18, 0.44); + backdrop-filter: blur(3px); +} + +.contact-flyover__panel { + position: absolute; + top: 2rem; + right: max(2rem, calc((100vw - var(--max-width)) / 2 + 2rem)); + width: min(420px, calc(100vw - 2rem)); + padding: 2rem; + border-radius: var(--radius-panel); + background: var(--bg-light); + box-shadow: var(--shadow-panel); +} + +.contact-flyover__close { + position: absolute; + top: 0.9rem; + right: 0.9rem; + width: 2.4rem; + height: 2.4rem; + border: 0; + border-radius: 999px; + background: rgba(47, 58, 24, 0.08); + color: var(--text-dark); + cursor: pointer; +} + +.contact-flyover__eyebrow { + margin: 0 0 0.4rem; + font-size: 0.95rem; + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: 0.08em; + color: rgba(54, 65, 33, 0.72); +} + +.contact-flyover h2 { + margin: 0 0 0.5rem; + font-size: 2rem; + line-height: 0.96; + font-weight: var(--font-weight-black); + text-transform: uppercase; +} + +.contact-flyover__list { + display: grid; + gap: 1rem; + margin-top: 1.4rem; +} + +.contact-item { + display: grid; + grid-template-columns: 1fr auto; + gap: 0.7rem 1rem; + padding: 1rem; + border-radius: var(--radius-small); + background: #edf1cc; +} + +.contact-item__label { + color: rgba(54, 65, 33, 0.7); +} + +.contact-item__value { + font-size: 1.15rem; + line-height: 1.1; + grid-column: 1; +} + +.copy-button { + grid-column: 2; + grid-row: 1 / span 2; + display: inline-flex; + align-items: center; + gap: 0.55rem; + padding: 0.8rem 1rem; + border: 0; + border-radius: 999px; + background: var(--bg-dark); + color: var(--bg-light); + cursor: pointer; + transition: transform var(--transition-fast), background var(--transition-fast); +} + +.copy-button svg { + width: 1.15rem; + height: 1.15rem; + fill: none; + stroke: currentColor; + stroke-width: 1.8; + stroke-linecap: round; + stroke-linejoin: round; +} + +.copy-button.is-copied { + background: #ef49ae; +} + +[hidden] { + display: none !important; +} + +@media (max-width: 1024px) { + .process__grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .work__grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .page { + width: 100%; + } + + .hero, + .about, + .footer, + .focus__grid, + .process__grid { + grid-template-columns: 1fr; + } + + .section__content, + .process, + .focus, + .work { + padding: 2rem 1.5rem; + } + + .brand { + width: 260px; + } + + .hero__content { + gap: 1.4rem; + padding-bottom: 1rem; + } + + .hero__headline-wrap { + padding-top: 3rem; + max-width: none; + } + + .section-title--hero { + font-size: clamp(3rem, 14vw, 4.8rem); + } + + .hero__scribble--top { + width: 112px; + top: -0.2rem; + right: 0.2rem; + } + + .hero__scribble--middle { + width: 200px; + top: 3.6rem; + left: 3rem; + } + + .hero__scribble--bottom { + width: 160px; + right: 0; + bottom: -0.5rem; + } + + .hero__scribble--bottom-secondary { + width: 150px; + right: 1.2rem; + bottom: -0.2rem; + } + + .hero__media { + min-height: 0; + padding: 0 1.5rem 1.5rem; + } + + .section-head { + justify-content: space-between; + margin-bottom: 2rem; + } + + .section-title, + .about__content .section-head .section-title { + text-align: left; + font-size: clamp(2.2rem, 12vw, 3.8rem); + } + + .section-head img { + width: 72px; + } + + .process-card { + padding: 1.4rem 1rem 1.2rem; + } + + .process-card img { + width: 96px; + height: 96px; + } + + .focus__grid { + max-width: none; + } + + .about__media { + min-height: 0; + order: -1; + } + + .about__media img { + aspect-ratio: 4 / 5; + } + + .work-card__art { + min-height: 220px; + } + + .footer__claim { + padding-top: 0; + } + + .footer__claim h2 { + font-size: clamp(3rem, 16vw, 4.8rem); + } + + .footer__accent { + position: static; + width: 180px; + margin-top: 0.5rem; + } + + .contact-flyover__panel { + top: auto; + right: 1rem; + bottom: 1rem; + left: 1rem; + width: auto; + padding: 1.5rem; + } + + .contact-item { + grid-template-columns: 1fr; + } + + .copy-button { + grid-column: 1; + grid-row: auto; + justify-content: center; + } +}