feat(web): add private company and portfolio presence
This commit is contained in:
Jan Wagner
@@ -0,0 +1,7 @@
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
node_modules
|
||||
npm-debug.log
|
||||
README.md
|
||||
.next
|
||||
.git
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
FROM node:22-alpine AS base
|
||||
|
||||
# Install dependencies only when needed
|
||||
FROM base AS deps
|
||||
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
|
||||
RUN apk add --no-cache libc6-compat
|
||||
WORKDIR /app
|
||||
|
||||
# Install dependencies based on the preferred package manager
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm ci
|
||||
|
||||
# Rebuild the source code only when needed
|
||||
FROM base AS builder
|
||||
WORKDIR /app
|
||||
COPY --from=deps /app/node_modules ./node_modules
|
||||
COPY . .
|
||||
|
||||
# Next.js telemetry is disabled
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
RUN npm run build
|
||||
|
||||
# Production image, copy all the files and run next
|
||||
FROM base AS runner
|
||||
WORKDIR /app
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV NEXT_TELEMETRY_DISABLED=1
|
||||
|
||||
RUN addgroup --system --gid 1001 nodejs
|
||||
RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
# Copy the standalone output folder and the public folder
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
# Automatically leverage output traces to reduce image size
|
||||
# https://nextjs.org/docs/advanced-features/output-file-tracing
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
|
||||
USER nextjs
|
||||
|
||||
EXPOSE 3000
|
||||
ENV PORT=3000
|
||||
ENV HOSTNAME="0.0.0.0"
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
@@ -0,0 +1,151 @@
|
||||
# Präsenzstrategie für Jan Wagner / w-make
|
||||
|
||||
Stand: 2026-08-15
|
||||
|
||||
## 1. Ziel
|
||||
|
||||
Die Präsenz soll drei Zielgruppen in weniger als einer Minute verstehen lassen:
|
||||
|
||||
1. **Industrie- und Mittelstandskunden:** Jan löst reale Prozessprobleme mit belastbarer Software.
|
||||
2. **Technische Entscheider und Partner:** Jan kann Domäne, Architektur und Betrieb zusammen denken.
|
||||
3. **Zukünftige Arbeitgeber:** Jan ist ein Senior Engineer mit Ownership, nicht nur ein Implementierer.
|
||||
|
||||
Primäre Conversion: qualifizierter Erstkontakt. Nicht: möglichst viele Projekte oder Technologien zeigen.
|
||||
|
||||
## 2. Empfohlene Positionierung
|
||||
|
||||
> Ich entwickle robuste digitale Systeme für industrielle und anspruchsvolle Geschäftsprozesse — mit Domänenverständnis, klarer Architektur und Verantwortung für den Betrieb.
|
||||
|
||||
Die Positionierung ist stärker als „innovative Lösungen“ oder „Full-Stack-Entwicklung“, weil sie ein Problem, eine Zielgruppe und einen Qualitätsanspruch benennt.
|
||||
|
||||
## 3. Was bewusst nicht auf die öffentliche Startseite gehört
|
||||
|
||||
- Casino-Automation und Echtgeld-Workflows
|
||||
- Trading-/Prediction-Market-Projekte
|
||||
- Interne Hermes-Infrastruktur, Bot-Namen und Serverdetails
|
||||
- Unbelegte Zahlen wie Testanzahl, Verfügbarkeit oder Effizienzgewinne
|
||||
- „Enterprise-Niveau“, „24/7 verfügbar“ oder ähnliche Behauptungen ohne veröffentlichbare Nachweise
|
||||
|
||||
Diese Themen können privat als technische Lernprojekte oder auf Anfrage erscheinen. Öffentlich verwässern sie die B2B-Positionierung und können bei Kunden bzw. Arbeitgebern unnötige Risiko- und Vertrauensfragen auslösen.
|
||||
|
||||
## 4. Inhaltliche Säulen
|
||||
|
||||
### A. Industrie-Software und Domäne
|
||||
|
||||
Der stärkste Beleg ist W-Make Batch. Daraus entstehen:
|
||||
|
||||
- Case Study: „Wie aus einem Produktionsprozess ein belastbares Softwaresystem wird“
|
||||
- Architekturartikel: „Warum fachliche Buchungen nicht einfach gelöscht werden dürfen“
|
||||
- Prozessartikel: „Vom Satzzettel zum Tagesprotokoll: ein durchgängiges Produktionsmodell“
|
||||
- Produktseite: Problem → Lösung → Arbeitsweise → Demo/Kontakt
|
||||
|
||||
### B. Engineering-Entscheidungen
|
||||
|
||||
- Datenintegrität statt schneller CRUD-Logik
|
||||
- Fachliche Regeln als explizite Invarianten
|
||||
- Kleine, testbare Module statt verteilte Business-Logik
|
||||
- Migrationen, Backups, Auditierbarkeit und sichere Fehlerpfade
|
||||
|
||||
### C. Persönliche Perspektive
|
||||
|
||||
- Übergang von Glass Technology zu Software Engineering
|
||||
- Was Domänenwissen in der Produktentwicklung verändert
|
||||
- Entscheidungen, die im Betrieb wichtiger sind als im Demo-Video
|
||||
- Ehrliche technische Rückblicke mit Problem, Entscheidung, Ergebnis und offenem Rest
|
||||
|
||||
## 5. Seitenstruktur für den öffentlichen Auftritt
|
||||
|
||||
1. **Startseite:** Positionierung, 1–2 Belege, Arbeitsweise, Kontakt
|
||||
2. **Über mich:** Glas-/Industrie-Hintergrund, Senior-Engineering-Profil, Arbeitsprinzipien
|
||||
3. **W-Make Batch:** eigenständige Case Study mit Screenshots/Diagramm und klarer Abgrenzung zu vertraulichen Kundendaten
|
||||
4. **Engineering Notes:** 4–6 substanzielle Artikel statt Newsfeed
|
||||
5. **Kontakt:** E-Mail, LinkedIn/Git-Profil, Einsatzformen, Standort/remote
|
||||
6. **Impressum/Datenschutz:** vor öffentlichem Launch rechtlich vervollständigen
|
||||
|
||||
## 6. Case-Study-Template
|
||||
|
||||
Jede Referenz folgt demselben Muster:
|
||||
|
||||
- **Ausgangslage:** Welcher Prozess war schwierig oder fehleranfällig?
|
||||
- **Verantwortung:** Welche Rolle und welchen Anteil hatte Jan?
|
||||
- **Entscheidungen:** Welche Architektur-/Domänenentscheidungen waren entscheidend?
|
||||
- **Ergebnis:** Nur belegbare Resultate; vertrauliche Werte anonymisieren.
|
||||
- **Beweis:** Screenshot, vereinfachtes Modell, Teststrategie oder öffentliche Demo.
|
||||
- **Lernpunkt:** Was kann ein anderer technischer Entscheider daraus übernehmen?
|
||||
- **CTA:** Gespräch über einen ähnlichen Prozess.
|
||||
|
||||
## 7. Priorisierte 30-Tage-Roadmap
|
||||
|
||||
### Woche 1 — Vertrauen und Basis
|
||||
|
||||
- Eigene Domain-/Unternehmensbezeichnung festlegen.
|
||||
- Professionelle Kontaktadresse und LinkedIn-Profil verknüpfen.
|
||||
- W-Make Batch als Referenz auf Freigabe und Vertraulichkeit prüfen.
|
||||
- Impressum-/Datenschutz-Anforderungen vor Launch mit fachkundiger Stelle klären.
|
||||
|
||||
### Woche 2 — Belege
|
||||
|
||||
- Case Study zu W-Make Batch schreiben.
|
||||
- 3–5 aussagekräftige Screenshots oder ein anonymisiertes Prozessdiagramm erstellen.
|
||||
- Rolle, Zeitraum, Verantwortung und veröffentlichbare Ergebnisse sauber dokumentieren.
|
||||
|
||||
### Woche 3 — Auffindbarkeit
|
||||
|
||||
- LinkedIn-Headline an die Positionierung anpassen.
|
||||
- Eine Engineering Note veröffentlichen.
|
||||
- Profile konsistent verlinken: Website, LinkedIn, GitHub/Gitea nur wenn öffentlich geeignet.
|
||||
- Title, Description, Open Graph, Sitemap und Search Console ergänzen.
|
||||
|
||||
### Woche 4 — Conversion
|
||||
|
||||
- Kontaktformular oder klare E-Mail ergänzen.
|
||||
- Angebot in 2–3 konkrete Einstiege übersetzen: Prozessanalyse, technische Due Diligence, Produkt-/Backend-Entwicklung.
|
||||
- Jede Seite mit genau einem nächsten Schritt versehen.
|
||||
- Mobile, Tastaturbedienung, Ladezeit und externe Links prüfen.
|
||||
|
||||
## 8. Konkrete Angebotsformulierungen
|
||||
|
||||
### Prozessanalyse
|
||||
|
||||
> Ich analysiere einen bestehenden digitalen Prozess, identifiziere fachliche Bruchstellen und übersetze die Ergebnisse in eine priorisierte technische Roadmap.
|
||||
|
||||
### Produkt- und Backend-Entwicklung
|
||||
|
||||
> Ich entwickle oder stabilisiere Anwendungen, bei denen Datenmodell, Geschäftslogik und Betrieb wichtiger sind als ein schneller Prototyp.
|
||||
|
||||
### Technische Zusammenarbeit
|
||||
|
||||
> Ich unterstütze Teams bei Architekturentscheidungen, schwierigen Integrationen und der Überführung von gewachsenem Code in ein wartbares System.
|
||||
|
||||
## 9. Noch offen vor dem Launch
|
||||
|
||||
- Öffentlich verwendbare Kontaktadresse
|
||||
- Vollständiger Name/Firmierung nach UG-Gründung
|
||||
- Impressums- und Datenschutzhinweise
|
||||
- Freigabe zur Darstellung von W-Make Batch und verwendbaren Screenshots
|
||||
- Tatsächliche öffentliche Profile/Links
|
||||
- Messbare Ergebnisse, sofern sie veröffentlicht werden dürfen
|
||||
|
||||
## 10. Erfolgskriterien
|
||||
|
||||
Nach dem ersten Ausbau muss ein fremder Besucher beantworten können:
|
||||
|
||||
- Was macht Jan konkret?
|
||||
- Für wen ist das relevant?
|
||||
- Woran ist die Qualität erkennbar?
|
||||
- Wie kann ich Kontakt aufnehmen?
|
||||
|
||||
Wenn eine Information nicht auf eine dieser vier Fragen einzahlt, gehört sie nicht auf die Startseite.
|
||||
|
||||
## Quellen aus dem Workspace
|
||||
|
||||
- `/home/eldov-ryzen5/workspace/Coding/Batchmaker/README.md`
|
||||
- `/home/eldov-ryzen5/workspace/Coding/Batchmaker/AGENTS.md`
|
||||
- `/home/eldov-ryzen5/workspace/Server/README.md`
|
||||
- `/home/eldov-ryzen5/workspace/Coding/hermes-tools/README.md`
|
||||
- `/home/eldov-ryzen5/workspace/w-make-com/src/app/page.tsx`
|
||||
- `/home/eldov-ryzen5/workspace/w-make-com/src/app/layout.tsx`
|
||||
|
||||
Die Quellen belegen technische Substanz. Kundennamen, Resultate und Rollen dürfen nur nach Freigabe öffentlich behauptet werden.
|
||||
|
||||
<!-- ponytail: Keine Personen-, Kunden- oder Leistungsbehauptungen ergänzen, solange kein veröffentlichbarer Beleg vorliegt. -->
|
||||
@@ -0,0 +1,27 @@
|
||||
version: "3.8"
|
||||
|
||||
services:
|
||||
# Das Portfolio (Next.js)
|
||||
w-make-portfolio:
|
||||
build: .
|
||||
image: w-make-portfolio:latest
|
||||
container_name: w-make-portfolio
|
||||
restart: always
|
||||
expose:
|
||||
- "3000"
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.docker.network=proxy"
|
||||
- "traefik.http.routers.w-make.rule=Host(`w-make.com`) || Host(`www.w-make.com`)"
|
||||
- "traefik.http.routers.w-make.priority=100"
|
||||
- "traefik.http.routers.w-make.entrypoints=websecure"
|
||||
- "traefik.http.routers.w-make.tls=true"
|
||||
- "traefik.http.routers.w-make.tls.certresolver=http_resolver"
|
||||
- "traefik.http.routers.w-make.middlewares=default@file,crowdsec-bouncer-plugin@file"
|
||||
- "traefik.http.services.w-make.loadbalancer.server.port=3000"
|
||||
networks:
|
||||
- proxy
|
||||
|
||||
networks:
|
||||
proxy:
|
||||
external: true
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
output: "standalone",
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
+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