feat(web): add private company and portfolio presence
This commit is contained in:
Jan Wagner
+31
-12
@@ -1,26 +1,45 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* Tech Style Dark Theme by Default */
|
||||
--background: #020617; /* Slate 950 */
|
||||
--foreground: #f8fafc; /* Slate 50 */
|
||||
|
||||
/* Primary Action Colors (Electric Blue / Cyan) */
|
||||
--primary: #0ea5e9;
|
||||
--primary-foreground: #ffffff;
|
||||
|
||||
/* Metallic / Professional Accents */
|
||||
--accent: #334155; /* Slate 700 */
|
||||
--accent-foreground: #f8fafc;
|
||||
|
||||
--border: #1e293b; /* Slate 800 */
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-border: var(--border);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Subtle Grid Background for that "Tech" feel */
|
||||
.bg-grid-pattern {
|
||||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
+5
-6
@@ -13,17 +13,16 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Jan Wagner — Software für Prozesse, auf die man sich verlassen muss",
|
||||
description: "Jan Wagner entwickelt robuste digitale Systeme für industrielle und anspruchsvolle Geschäftsprozesse.",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: LayoutProps<"/">) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
>
|
||||
<html lang="de" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
// ponytail: Open Graph, structured data and canonical URL follow after the public domain is final.
|
||||
|
||||
+120
-64
@@ -1,69 +1,125 @@
|
||||
import Image from "next/image";
|
||||
const projects = [
|
||||
{
|
||||
label: "Industrie-Software",
|
||||
title: "W-Make Batch",
|
||||
text: "Eine durchgängige Batchmanagement-Lösung für die Behälterglas-Produktion — von Satzzettel und Gemengebuch bis Silo-Management, Schichtprotokoll und Berechnung.",
|
||||
facts: "Node.js · SQLite · Web Components · E2E-Tests",
|
||||
href: "https://batch.w-make.com",
|
||||
cta: "Produkt-Showroom öffnen",
|
||||
},
|
||||
{
|
||||
label: "Produktentwicklung",
|
||||
title: "Digitale Prozesse, die den Betrieb verstehen",
|
||||
text: "Ich verbinde Domänenwissen aus der Glasindustrie mit sauberer Softwarearchitektur. Das Ergebnis sind Systeme, die fachlich belastbar und im Alltag nutzbar sind.",
|
||||
facts: "Fachlichkeit · Datenintegrität · Wartbarkeit",
|
||||
href: "#arbeitsweise",
|
||||
cta: "Arbeitsweise ansehen",
|
||||
},
|
||||
{
|
||||
label: "Technische Systeme",
|
||||
title: "Automatisierung mit klaren Grenzen",
|
||||
text: "Von APIs und Datenmodellen bis zu Infrastruktur und Observability: Automatisierung wird dort eingesetzt, wo sie Risiken reduziert — nicht um Komplexität zu verstecken.",
|
||||
facts: "Backend · Tooling · Betrieb",
|
||||
href: "#kontakt",
|
||||
cta: "Projekt besprechen",
|
||||
},
|
||||
];
|
||||
|
||||
const principles = [
|
||||
["Fachlichkeit zuerst", "Ich beginne beim realen Prozess, nicht beim Framework. Fachliche Regeln werden sichtbar, prüfbar und nachvollziehbar umgesetzt."],
|
||||
["Verlässliche Systeme", "Datenintegrität, sichere Zustände und verständliche Fehlerbehandlung sind keine Extras — sie sind die Grundlage."],
|
||||
["Kleine, tragfähige Lösungen", "Keine Architektur um ihrer selbst willen. Erst die kleinste Lösung, die den Prozess dauerhaft besser macht."],
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert h-5 w-[100px]"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the{" "}
|
||||
<code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
|
||||
page.tsx
|
||||
</code>{" "}
|
||||
file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert h-[14px] w-4"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={14}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main className="min-h-screen bg-grid-pattern">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/90 to-background pointer-events-none" />
|
||||
<div className="relative z-10 mx-auto w-full max-w-6xl px-6 py-8 md:px-10 md:py-12">
|
||||
<nav className="flex items-center justify-between border-b border-slate-800/80 pb-6" aria-label="Hauptnavigation">
|
||||
<a href="#top" className="font-mono text-sm tracking-[0.22em] text-primary">W-MAKE</a>
|
||||
<div className="flex gap-6 text-sm text-slate-400">
|
||||
<a href="#projekte" className="hover:text-white">Projekte</a>
|
||||
<a href="#arbeitsweise" className="hover:text-white">Arbeitsweise</a>
|
||||
<a href="#kontakt" className="hover:text-white">Kontakt</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section id="top" className="grid gap-12 py-24 md:grid-cols-[1.25fr_0.75fr] md:items-end md:py-32">
|
||||
<div>
|
||||
<p className="mb-6 font-mono text-sm uppercase tracking-[0.22em] text-primary">Jan Wagner · Software Engineering</p>
|
||||
<h1 className="max-w-4xl text-5xl font-semibold tracking-tight text-white md:text-7xl">
|
||||
Software für Prozesse, auf die man sich verlassen muss.
|
||||
</h1>
|
||||
<p className="mt-8 max-w-2xl text-lg leading-8 text-slate-300 md:text-xl">
|
||||
Ich entwickle robuste digitale Systeme für industrielle und anspruchsvolle Geschäftsprozesse — mit Domänenverständnis, klarer Architektur und Verantwortung für den Betrieb.
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap gap-4">
|
||||
<a href="#projekte" className="rounded-full bg-primary px-6 py-3 font-medium text-slate-950 transition hover:bg-cyan-300">Arbeiten ansehen</a>
|
||||
<a href="#kontakt" className="rounded-full border border-slate-700 px-6 py-3 font-medium text-white transition hover:border-primary hover:text-primary">Projekt besprechen</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside className="border-l border-primary/50 pl-6 text-sm leading-7 text-slate-400">
|
||||
<p className="font-mono text-primary">POSITIONIERUNG</p>
|
||||
<p className="mt-4 text-base text-slate-200">Senior Full-Stack Engineering für Software, die reale Abläufe abbildet — vom Fachprozess bis zum produktiven System.</p>
|
||||
<p className="mt-6">Schwerpunkt: industrielle Software, Datenintegrität, Automatisierung und wartbare Plattformen.</p>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section id="projekte" className="scroll-mt-8 border-t border-slate-800 py-20">
|
||||
<div className="mb-10 flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="font-mono text-sm uppercase tracking-[0.22em] text-primary">Ausgewählte Arbeit</p>
|
||||
<h2 className="mt-3 text-3xl font-semibold text-white md:text-4xl">Nicht nur Features. Systeme.</h2>
|
||||
</div>
|
||||
<p className="max-w-md text-sm leading-6 text-slate-400">Die stärkste Referenz ist ein nachvollziehbares System mit echtem fachlichem Kontext — nicht eine lange Liste von Buzzwords.</p>
|
||||
</div>
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
{projects.map((project) => (
|
||||
<article key={project.title} className="flex flex-col rounded-2xl border border-slate-800 bg-slate-950/60 p-7 transition hover:-translate-y-1 hover:border-primary/60">
|
||||
<p className="font-mono text-xs uppercase tracking-[0.16em] text-primary">{project.label}</p>
|
||||
<h3 className="mt-5 text-2xl font-semibold text-white">{project.title}</h3>
|
||||
<p className="mt-4 flex-1 text-sm leading-7 text-slate-400">{project.text}</p>
|
||||
<p className="mt-6 border-t border-slate-800 pt-4 font-mono text-xs leading-5 text-slate-500">{project.facts}</p>
|
||||
<a href={project.href} className="mt-6 text-sm font-medium text-primary hover:text-cyan-300">{project.cta} <span aria-hidden="true">→</span></a>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="arbeitsweise" className="scroll-mt-8 border-t border-slate-800 py-20">
|
||||
<div className="grid gap-12 md:grid-cols-[0.8fr_1.2fr]">
|
||||
<div>
|
||||
<p className="font-mono text-sm uppercase tracking-[0.22em] text-primary">Arbeitsweise</p>
|
||||
<h2 className="mt-3 text-3xl font-semibold text-white md:text-4xl">Senior heißt: Entscheidungen verantworten.</h2>
|
||||
</div>
|
||||
<div className="grid gap-8">
|
||||
{principles.map(([title, text], index) => (
|
||||
<div key={title} className="grid gap-3 border-b border-slate-800 pb-7 md:grid-cols-[3rem_1fr]">
|
||||
<span className="font-mono text-sm text-primary">0{index + 1}</span>
|
||||
<div><h3 className="text-xl font-medium text-white">{title}</h3><p className="mt-2 max-w-xl leading-7 text-slate-400">{text}</p></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="kontakt" className="scroll-mt-8 border-t border-slate-800 py-20">
|
||||
<div className="rounded-3xl border border-primary/30 bg-primary/5 p-8 md:p-12">
|
||||
<p className="font-mono text-sm uppercase tracking-[0.22em] text-primary">Kontakt</p>
|
||||
<h2 className="mt-4 max-w-2xl text-3xl font-semibold text-white md:text-5xl">Sie haben einen Prozess, der bessere Software verdient?</h2>
|
||||
<p className="mt-6 max-w-2xl leading-7 text-slate-300">Lassen Sie uns klären, wo der größte Hebel liegt — in einem neuen Produkt, einer bestehenden Anwendung oder einer technischen Entscheidung.</p>
|
||||
<p className="mt-8 text-sm text-slate-400">Kontaktkanal und Impressum werden vor dem öffentlichen Launch ergänzt.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="flex flex-wrap justify-between gap-4 border-t border-slate-800 py-8 text-xs text-slate-500">
|
||||
<span>© {new Date().getFullYear()} Jan Wagner · w-make.org</span>
|
||||
<span>Software Engineering · Glass Technology · Systems Thinking</span>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
// ponytail: Kontaktadresse und rechtliche Angaben erst ergänzen, wenn die UG-/Domain-Daten feststehen.
|
||||
|
||||
Reference in New Issue
Block a user