mirror of
https://github.com/IT4Change/IT4C.dev.git
synced 2025-12-13 09:25:49 +00:00
42 lines
20 KiB
HTML
42 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="de-DE" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<meta name="generator" content="VuePress 2.0.0-rc.20" />
|
||
<meta name="theme" content="VuePress Theme Hope 2.0.0-rc.74" />
|
||
<style>
|
||
:root {
|
||
--vp-c-bg: #fff;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--vp-c-bg: #1b1b1f;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
background: var(--vp-c-bg);
|
||
}
|
||
</style>
|
||
<script>
|
||
const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
|
||
const systemDarkMode =
|
||
window.matchMedia &&
|
||
window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||
|
||
if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
|
||
document.documentElement.setAttribute("data-theme", "dark");
|
||
}
|
||
</script>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1"><title>IT4C</title><meta name="description" content="IT4C.dev stellt das IT Team for Change, seine angewandte Philosophie und Projekte vor.">
|
||
<link rel="preload" href="/assets/style-QfSJ-RE3.css" as="style"><link rel="stylesheet" href="/assets/style-QfSJ-RE3.css">
|
||
<link rel="modulepreload" href="/assets/app-DFzJ4zlk.js"><link rel="modulepreload" href="/assets/index.html-CytUw73L.js">
|
||
<link rel="prefetch" href="/assets/historie.html-ooxMdhLn.js" as="script"><link rel="prefetch" href="/assets/impressum.html-CgLCWLO4.js" as="script"><link rel="prefetch" href="/assets/it4c.html-BVs7qriC.js" as="script"><link rel="prefetch" href="/assets/kontakt.html-ni-64aeI.js" as="script"><link rel="prefetch" href="/assets/democracy.app.html-BgTvwzvd.js" as="script"><link rel="prefetch" href="/assets/gradido.html-CUHh820v.js" as="script"><link rel="prefetch" href="/assets/ocelot.social.html-DvHmLRyp.js" as="script"><link rel="prefetch" href="/assets/utopia.map.html-8eIwcouy.js" as="script"><link rel="prefetch" href="/assets/alexander-friedland.html-MsQd_CJI.js" as="script"><link rel="prefetch" href="/assets/hannes-heine.html-DTUHv6XE.js" as="script"><link rel="prefetch" href="/assets/mathias-lenz.html-SbdLu3mv.js" as="script"><link rel="prefetch" href="/assets/maximilian-harz.html-Ct2dM9Rg.js" as="script"><link rel="prefetch" href="/assets/moriz-wahl.html-BaoeU4ay.js" as="script"><link rel="prefetch" href="/assets/sebastian-stein.html-Cekunqz-.js" as="script"><link rel="prefetch" href="/assets/ulf-gebhardt.html-O-yS3EkP.js" as="script"><link rel="prefetch" href="/assets/wolfgang-huss.html-DbszMcod.js" as="script"><link rel="prefetch" href="/assets/404.html-CCj6fWw_.js" as="script"><link rel="prefetch" href="/assets/index.html-BUHwOso0.js" as="script"><link rel="prefetch" href="/assets/index.html-BibaCLbd.js" as="script"><link rel="prefetch" href="/assets/photoswipe.esm-DXWKOczD.js" as="script"><link rel="prefetch" href="/assets/SearchResult-CEjH_gxA.js" as="script">
|
||
</head>
|
||
<body>
|
||
<div id="app"><!--[--><div class="theme-container blank-layout"><div><section class="full-width-section h-screen relative"><img src="/images/hero-bg-desktop.jpg" alt="Technologie für den gesellschaftlichen Wandel" class="w-full h-screen object-cover hidden md:block"><div class="absolute inset-0 bg-gradient-to-r from-[#22596c]/100 via-[#22596c]/80 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/80 dark:to-transparent hidden md:block" style="width:65%;"></div><div class="w-full h-screen md:hidden relative overflow-hidden"><img src="/images/hero-bg-mobile.jpg" alt="Technologie für den gesellschaftlichen Wandel" class="absolute top-0 left-0 w-full h-auto object-cover max-h-none" style="min-width:100%;"></div><div class="absolute left-0 right-0 bottom-0 md:hidden bg-gradient-to-t from-[#22596c]/100 via-[#22596c]/100 via-[#22596c]/90 to-transparent dark:from-[#22596c]/100 dark:via-[#22596c]/100 dark:via-[#22596c]/90 dark:to-transparent" style="height:70vh;"></div><div class="absolute left-0 right-0 bottom-0 sm:hidden" style="height:80vh;background-image:linear-gradient(to top, #22596c 70%, transparent 100%);"></div><div class="absolute inset-0 flex flex-col md:justify-start md:pt-45 justify-end pb-8 md:pb-16"><div class="content-width mx-auto px-4 md:px-6"><div class="w-full md:w-3/5 lg:w-1/2 z-10 md:mt-0 relative"><div role="heading" aria-level="1" class="text-3xl md:text-4xl lg:text-5xl mb-6 text-white text-center sm:text-left font-montserrat leading-tight text-shadow"> IT4C ‒ Technologie für den gesellschaftlichen Wandel </div><p class="text-xl md:text-2xl text-white text-center sm:text-left font-sourcesans mb-8 max-w-2xl text-shadow-sm"> Wir sind Softwareentwickler, die deine alternative Vision verstehen und umsetzen. Mit technischer Expertise und persönlicher Betreuung unterstützen wir Projekte, die Positives bewirken. </p><div class="flex flex-col sm:flex-row gap-4"><a href="#kontakt" class="hero-button hero-button-primary px-6 py-3 bg-[#ececec] !text-black rounded-full font-medium text-center shadow-md no-underline relative overflow-hidden"><span class="relative z-10">Projekt starten</span></a><a href="#leistungen" class="hero-button hero-button-secondary px-6 py-3 bg-black/20 !text-white rounded-full font-medium text-center border border-white shadow-md no-underline relative overflow-hidden"><span class="relative z-10">Unsere Leistungen</span></a></div></div></div></div></section><section id="leistungen" class="bg-white dark:bg-gray-900"><div class="content-width"><div class="py-16"><h1>Leistungen</h1><!--[--><p> In unserem <b>IT Team for Change</b> bündeln wir die Expertise engagierter Persönlichkeiten, die in den nachfolgenden Bereichen bewandert sind. </p><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8"><div class="p-6 border border-gray-300 rounded-lg"><h3 class="text-xl font-semibold mb-4">Webentwicklung</h3><ul class="space-y-2 text-gray-600 dark:text-gray-300"><!--[--><li>Frontend</li><li>Responsive Design</li><li>Barrierefreiheit</li><li>Backend</li><!--]--></ul></div><div class="p-6 border border-gray-300 rounded-lg"><h3 class="text-xl font-semibold mb-4">Hosting</h3><ul class="space-y-2 text-gray-600 dark:text-gray-300"><!--[--><li>Wordpress</li><li>Ocelot.social</li><li>Zugeschnittene Lösungen</li><li>Nachhaltige Serverinfrastrukturen</li><!--]--></ul></div><div class="p-6 border border-gray-300 rounded-lg"><h3 class="text-xl font-semibold mb-4">Mobile Anwendungen</h3><ul class="space-y-2 text-gray-600 dark:text-gray-300"><!--[--><li>Android</li><li>iOS</li><li>PWA</li><!--]--></ul></div><div class="p-6 border border-gray-300 rounded-lg"><h3 class="text-xl font-semibold mb-4">Beratung & Betreuung</h3><ul class="space-y-2 text-gray-600 dark:text-gray-300"><!--[--><li>Systemarchitektur</li><li>DevOps & Prozessbegleitung</li><li>Monitoring & Security</li><li>Technische Konzeption</li><li>Agiles Projektmanagement</li><li>Nachhaltigkeitsanalyse</li><!--]--></ul></div><div class="p-6 border border-gray-300 rounded-lg"><h3 class="text-xl font-semibold mb-4">Software-Entwicklung</h3><ul class="space-y-2 text-gray-600 dark:text-gray-300"><!--[--><li>API-Entwicklung</li><li>Datenbank-Design</li><li>Performance-Optimierung</li><li>Deployment-Automatisierung</li><li>Code-Qualität & Testing</li><!--]--></ul></div></div><!--]--></div></div></section><section id="team" class="bg-gray-50 dark:bg-gray-800"><div class="content-width"><div class="py-16"><h1>Team & Werte</h1><!--[--><p>Wir glauben an die Kraft von Technologie für positiven Wandel. Unser Team verbindet technische Expertise mit nachhaltigem Denken und sozialer Verantwortung.</p><div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-10"><a href="./team/hannes-heine.html" class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"><div class="relative w-48 h-48 mx-auto mb-4"><img src="./images/portrait/hannes-heine.jpg" alt="Hannes" class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"></div></div><h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">Hannes</h4><p class="text-sm text-gray-600 dark:text-gray-300">Backend</p></a><a href="./team/mathias-lenz.html" class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"><div class="relative w-48 h-48 mx-auto mb-4"><img src="./images/portrait/ml-portrait.jpg" alt="Mathias" class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"></div></div><h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">Mathias</h4><p class="text-sm text-gray-600 dark:text-gray-300">Testing, Entwicklung</p></a><a href="/team/maximilian-harz.html" class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"><div class="relative w-48 h-48 mx-auto mb-4"><img src="./images/portrait/max.jpg" alt="Max" class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"></div></div><h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">Max</h4><p class="text-sm text-gray-600 dark:text-gray-300">Frontend</p></a><a href="/team/moriz-wahl.html" class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"><div class="relative w-48 h-48 mx-auto mb-4"><img src="./images/portrait/moriz-wahl.jpg" alt="Moriz" class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"></div></div><h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">Moriz</h4><p class="text-sm text-gray-600 dark:text-gray-300">Backend</p></a><a href="./team/sebastian-stein.html" class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"><div class="relative w-48 h-48 mx-auto mb-4"><img src="./images/portrait/sebastian-stein.jpg" alt="Sebastian" class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"></div></div><h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">Sebastian</h4><p class="text-sm text-gray-600 dark:text-gray-300">Frontend, UX</p></a><a href="./team/ulf-gebhardt.html" class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"><div class="relative w-48 h-48 mx-auto mb-4"><img src="./images/portrait/ulf-gebhardt.jpg" alt="Ulf" class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"></div></div><h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">Ulf</h4><p class="text-sm text-gray-600 dark:text-gray-300">Entwicklung, Hosting</p></a><a href="./team/wolfgang-huss.html" class="block text-center group transition-transform duration-200 hover:-translate-y-2 active:translate-y-0"><div class="relative w-48 h-48 mx-auto mb-4"><img src="./images/portrait/Wolfgang_Huss.jpeg" alt="Wolfgang" class="rounded-full w-full h-full object-cover grayscale transition-all duration-200 transform group-hover:scale-[1.05]"><div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[115%] h-[115%] rounded-full overlay-bg opacity-0 group-hover:opacity-25 transition-opacity duration-200"></div></div><h4 class="font-semibold text-gray-900 dark:text-gray-50 transition-colors duration-200 group-hover:text-gray-600 group-hover:dark:text-gray-300">Wolfgang</h4><p class="text-sm text-gray-600 dark:text-gray-300">Kommunikation, Entwicklung</p></a></div><!--]--></div></div></section><section id="projekte" class="bg-white dark:bg-gray-900"><div class="content-width"><div class="py-16"><h1>Projekte</h1><!--[--><div class="grid md:grid-cols-2 gap-8"><a href="/projekte/ocelot.social.html"><div class="border border-gray-300 rounded-lg p-6"><img src="./images/projects/ocelot.png" alt="Ocelot.Social" class="rounded-lg mb-4 w-full h-auto object-contain"><h3 class="text-xl font-semibold mb-2">Ocelot.Social</h3><p class="text-gray-600 dark:text-gray-300 mb-4">Ocelot.social ist eine Open-Source Alternative für soziale Netzwerke wie Facebook, Instagram oder TikTok</p><div class="flex flex-wrap gap-2"><!--[--><span class="tag px-3 py-1 rounded-full text-sm">Social Media</span><!--]--></div></div></a><a href="/projekte/utopia.map.html"><div class="border border-gray-300 rounded-lg p-6"><img src="./images/projects/utopia-map-cropped.png" alt="Utopia Map" class="rounded-lg mb-4 w-full h-auto object-contain"><h3 class="text-xl font-semibold mb-2">Utopia Map</h3><p class="text-gray-600 dark:text-gray-300 mb-4">Utopia Map ist eine interaktive Karte, die echte Verbindungen stärkt und Zusammenarbeit auf Augenhöhe ermöglicht</p><div class="flex flex-wrap gap-2"><!--[--><span class="tag px-3 py-1 rounded-full text-sm">Mapping</span><span class="tag px-3 py-1 rounded-full text-sm">Gaming</span><!--]--></div></div></a></div><!--]--></div></div></section><section id="prozess" class="bg-gray-50 dark:bg-gray-800"><div class="content-width"><div class="py-16"><h1>Unser Prozess</h1><!--[--><div class="grid grid-cols-12 items-start mb-16"><div class="col-span-3 text-right pr-8"><span class="text-5xl sm:text-6xl font-bold highlight-number">01</span></div><div class="col-span-9 pt-0 sm:pt-2"><h3 class="text-xl font-semibold mb-2">Kennenlernen & Vision</h3><p class="text-gray-600 dark:text-gray-300">Persönliches Gespräch und detaillierte Bedarfsanalyse</p></div></div><div class="grid grid-cols-12 items-start mb-16"><div class="col-span-3 text-right pr-8"><span class="text-5xl sm:text-6xl font-bold highlight-number">02</span></div><div class="col-span-9 pt-0 sm:pt-2"><h3 class="text-xl font-semibold mb-2">Agile Entwicklung</h3><p class="text-gray-600 dark:text-gray-300">Technische Konzeption und iterative Umsetzung mit kontinuierlichem Feedback und automatisierten Tests</p></div></div><div class="grid grid-cols-12 items-start mb-16"><div class="col-span-3 text-right pr-8"><span class="text-5xl sm:text-6xl font-bold highlight-number">03</span></div><div class="col-span-9 pt-0 sm:pt-2"><h3 class="text-xl font-semibold mb-2">Launch</h3><p class="text-gray-600 dark:text-gray-300">Deployment und Übergabe mit ausführlicher Dokumentation</p></div></div><div class="grid grid-cols-12 items-start mb-16"><div class="col-span-3 text-right pr-8"><span class="text-5xl sm:text-6xl font-bold highlight-number">04</span></div><div class="col-span-9 pt-0 sm:pt-2"><h3 class="text-xl font-semibold mb-2">Support</h3><p class="text-gray-600 dark:text-gray-300">Langfristige Betreuung und Weiterentwicklung</p></div></div><!--]--></div></div></section><section id="kontakt" class="bg-white dark:bg-gray-900"><div class="content-width"><div class="py-16"><h1>Kontakt</h1><!--[--><!--[--><p class="text-gray-600 dark:text-gray-300 mb-8"> Wir freuen uns auf deine Nachricht. Als Ansprechpartner steht dir <strong>Ulf Gebhardt</strong> für deine Fragen gerne zur Verfügung. </p><div class="grid grid-cols-1 md:grid-cols-10 gap-8"><div class="flex flex-col items-center md:items-end md:self-start md:col-span-3 md:sticky md:top-8"><img src="/images/portrait/ulf-gebhardt.jpg" alt="Ulf Gebhardt" class="rounded-lg shadow-md w-75 h-auto mb-6"></div><div class="md:col-span-7"><h3 class="mb-4">Telefon</h3><div class="flex-col gap-2 mb-8"><p class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="phone-number h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg><a href="tel:+4915784841600" class="phone-number hover:!underline">+49 15784841600</a></p></div><h3 class="mb-4">Nachricht</h3><form><!----><!----><div class="my-4"><input id="name" value="" type="text" placeholder="Name" required minlength="2" maxlength="35" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"></div><div class="my-4"><input id="email" value="" type="email" placeholder="E-Mail" required class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"></div><div class="my-4"><input id="phone" value="" type="tel" placeholder="Telefon" minlength="8" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"></div><div class="my-4"><textarea id="message" rows="4" placeholder="Deine Nachricht" required minlength="5" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:highlight focus:border-transparent"></textarea></div><div class="my-4 flex justify-end"><button type="submit" class="text-white py-2 px-6 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:highlight focus:ring-offset-2"><span>Nachricht senden</span></button></div></form></div></div><!--]--><!--]--></div></div></section></div><footer class="bg-[#22596c] text-white py-8"><div class="content-width mx-auto px-4 md:px-6"><div class="flex flex-col md:flex-row justify-between items-center"><div class="mb-4 md:mb-0"><p class="text-sm">© 2025 CC BY IT4C.dev & Autoren</p></div><div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-6"><a href="/impressum.html" class="!text-white hover:!text-gray-300 hover:!underline text-sm transition-colors"> Impressum </a><a href="https://github.com/IT4Change" target="_blank" rel="noopener noreferrer" class="!text-white hover:!text-gray-300 hover:!underline flex items-center gap-2 text-sm transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg> GitHub </a></div></div></div></footer></div><!--[--><!----><!----><!--[--><!--]--><!--]--><!--]--></div>
|
||
<script type="module" src="/assets/app-DFzJ4zlk.js" defer></script>
|
||
</body>
|
||
</html>
|