feat(blog): complete blog experience overhaul
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Failing after 1m4s
Build & Deploy / 🏗️ Build (push) Failing after 3m51s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Failing after 1m4s
Build & Deploy / 🏗️ Build (push) Failing after 3m51s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
- Implemented minimalist vertical teaser list (MediumCard) - Consolidated and refined 20 engineering-focused blog posts - Rebuilt blog overview with narrow, centered layout (max-w-3xl) - Introduced BlogCommandBar for integrated search and tag filtering - Consolidated tags to 6-8 core technical categories - Redesigned blog detail pages with industrial 'Technical Frame' layout - Added SectionHeader component for consistent industrial titling - Optimized vertical space by removing redundant PageHeaders
This commit is contained in:
@@ -1,19 +1,11 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
import { blogPosts } from "../../../src/data/blogPosts";
|
import { blogPosts } from "../../../src/data/blogPosts";
|
||||||
import { Tag } from "../../../src/components/Tag";
|
|
||||||
import { CodeBlock } from "../../../src/components/ArticleBlockquote";
|
|
||||||
import { H2 } from "../../../src/components/ArticleHeading";
|
|
||||||
import {
|
|
||||||
Paragraph,
|
|
||||||
LeadParagraph,
|
|
||||||
} from "../../../src/components/ArticleParagraph";
|
|
||||||
import { UL, LI } from "../../../src/components/ArticleList";
|
|
||||||
import { FileExamplesList } from "../../../src/components/FileExamplesList";
|
|
||||||
import { FileExampleManager } from "../../../src/data/fileExamples";
|
|
||||||
import { BlogPostClient } from "../../../src/components/BlogPostClient";
|
|
||||||
import { PageHeader } from "../../../src/components/PageHeader";
|
import { PageHeader } from "../../../src/components/PageHeader";
|
||||||
import { Section } from "../../../src/components/Section";
|
import { Section } from "../../../src/components/Section";
|
||||||
|
import { BlogPostClient } from "../../../src/components/BlogPostClient";
|
||||||
|
import { PostComponents } from "../../../src/components/blog/posts";
|
||||||
|
import { Card } from "../../../src/components/Layout";
|
||||||
|
|
||||||
export async function generateStaticParams() {
|
export async function generateStaticParams() {
|
||||||
return blogPosts.map((post) => ({
|
return blogPosts.map((post) => ({
|
||||||
@@ -33,201 +25,78 @@ export default async function BlogPostPage({
|
|||||||
notFound();
|
notFound();
|
||||||
}
|
}
|
||||||
|
|
||||||
const formattedDate = new Date(post.date).toLocaleDateString("en-US", {
|
const formattedDate = new Date(post.date).toLocaleDateString("de-DE", {
|
||||||
month: "long",
|
month: "long",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
});
|
});
|
||||||
|
|
||||||
const wordCount = post.description.split(/\s+/).length + 100;
|
const wordCount = post.description.split(/\s+/).length + 300; // Average post length
|
||||||
const readingTime = Math.max(1, Math.ceil(wordCount / 200));
|
const readingTime = Math.max(1, Math.ceil(wordCount / 200));
|
||||||
|
|
||||||
const showFileExamples = post.tags?.some((tag) =>
|
const PostContent = PostComponents[slug];
|
||||||
[
|
|
||||||
"architecture",
|
|
||||||
"design-patterns",
|
|
||||||
"system-design",
|
|
||||||
"docker",
|
|
||||||
"deployment",
|
|
||||||
].includes(tag),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Load file examples for the post
|
|
||||||
let groups: any[] = [];
|
|
||||||
if (showFileExamples) {
|
|
||||||
const allGroups = await FileExampleManager.getAllGroups();
|
|
||||||
groups = allGroups
|
|
||||||
.map((group) => ({
|
|
||||||
...group,
|
|
||||||
files: group.files.filter((file) => {
|
|
||||||
if (file.postSlug !== slug) return false;
|
|
||||||
return true;
|
|
||||||
}),
|
|
||||||
}))
|
|
||||||
.filter((group) => group.files.length > 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-24 py-12 md:py-24 overflow-hidden">
|
<div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden">
|
||||||
<BlogPostClient readingTime={readingTime} title={post.title} />
|
<BlogPostClient readingTime={readingTime} title={post.title} />
|
||||||
|
|
||||||
<PageHeader
|
<PageHeader
|
||||||
|
variant="blog"
|
||||||
title={post.title}
|
title={post.title}
|
||||||
description={post.description}
|
description={post.description}
|
||||||
backLink={{ href: "/blog", label: "Zurück zum Blog" }}
|
backLink={{ href: "/blog", label: "Zurück zum Blog" }}
|
||||||
backgroundSymbol="B"
|
backgroundSymbol={slug.charAt(0).toUpperCase()}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<main id="post-content">
|
<main id="post-content">
|
||||||
<Section number="01" title="Inhalt">
|
<Section containerVariant="wide" className="pt-0 md:pt-0">
|
||||||
<div className="prose prose-slate max-w-none">
|
<div className="max-w-5xl mx-auto">
|
||||||
<div className="flex flex-wrap items-center gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em]">
|
<Card
|
||||||
<time dateTime={post.date}>{formattedDate}</time>
|
variant="glass"
|
||||||
<span className="text-slate-200">•</span>
|
techBorder
|
||||||
<span>{readingTime} min read</span>
|
className="relative overflow-hidden"
|
||||||
</div>
|
>
|
||||||
|
{/* Decorative background grid inside the card */}
|
||||||
|
<div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
|
||||||
|
|
||||||
{post.tags && post.tags.length > 0 && (
|
<div className="relative z-10 px-6 py-12 md:px-16 md:py-20">
|
||||||
<div className="flex flex-wrap gap-2 mb-12">
|
<div className="flex flex-wrap items-center justify-between gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
|
||||||
{post.tags.map((tag, index) => (
|
<div className="flex items-center gap-3">
|
||||||
<Tag key={tag} tag={tag} index={index} className="text-xs" />
|
<span className="w-2 h-2 rounded-full bg-slate-300" />
|
||||||
))}
|
<time dateTime={post.date}>{formattedDate}</time>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<span>{readingTime} min Lesezeit</span>
|
||||||
|
<span className="text-slate-200">|</span>
|
||||||
|
<span>
|
||||||
|
{slug.substring(0, 4).toUpperCase()}-
|
||||||
|
{Math.floor(Math.random() * 999)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{post.tags && post.tags.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 mb-12">
|
||||||
|
{post.tags.map((tag, index) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest"
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{PostContent ? (
|
||||||
|
<PostContent />
|
||||||
|
) : (
|
||||||
|
<div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
|
||||||
|
Inhalt wird bald veröffentlicht...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</Card>
|
||||||
|
|
||||||
{slug === "first-note" && (
|
|
||||||
<>
|
|
||||||
<LeadParagraph>
|
|
||||||
This blog is a public notebook. It's where I document things I
|
|
||||||
learn, problems I solve, and tools I test.
|
|
||||||
</LeadParagraph>
|
|
||||||
<H2>Why write in public?</H2>
|
|
||||||
<Paragraph>
|
|
||||||
I forget things. Writing them down helps. Making them public
|
|
||||||
helps me think more clearly and might help someone else.
|
|
||||||
</Paragraph>
|
|
||||||
<H2>What to expect</H2>
|
|
||||||
<UL>
|
|
||||||
<LI>Short entries, usually under 500 words</LI>
|
|
||||||
<LI>Practical solutions to specific problems</LI>
|
|
||||||
<LI>Notes on tools and workflows</LI>
|
|
||||||
<LI>Mistakes and what I learned</LI>
|
|
||||||
</UL>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{slug === "debugging-tips" && (
|
|
||||||
<>
|
|
||||||
<LeadParagraph>
|
|
||||||
Sometimes the simplest debugging tool is the best one. Print
|
|
||||||
statements get a bad reputation, but they're often exactly
|
|
||||||
what you need.
|
|
||||||
</LeadParagraph>
|
|
||||||
<H2>Why print statements work</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Debuggers are powerful, but they change how your code runs.
|
|
||||||
Print statements don't.
|
|
||||||
</Paragraph>
|
|
||||||
<CodeBlock language="python" showLineNumbers={true}>
|
|
||||||
{`def process_data(data):
|
|
||||||
print(f"Processing {len(data)} items")
|
|
||||||
result = expensive_operation(data)
|
|
||||||
print(f"Operation result: {result}")
|
|
||||||
return result`}
|
|
||||||
</CodeBlock>
|
|
||||||
|
|
||||||
<H2>Complete examples</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Here are some practical file examples you can copy and
|
|
||||||
download. These include proper error handling and logging.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<div className="my-8">
|
|
||||||
<FileExamplesList groups={groups} />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{slug === "architecture-patterns" && (
|
|
||||||
<>
|
|
||||||
<LeadParagraph>
|
|
||||||
Good software architecture is about making the right decisions
|
|
||||||
early. Here are some patterns I've found useful in production
|
|
||||||
systems.
|
|
||||||
</LeadParagraph>
|
|
||||||
<H2>Repository Pattern</H2>
|
|
||||||
<Paragraph>
|
|
||||||
The repository pattern provides a clean separation between
|
|
||||||
your business logic and data access layer. It makes your code
|
|
||||||
more testable and maintainable.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<H2>Service Layer</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Services orchestrate business logic and coordinate between
|
|
||||||
repositories and domain events. They keep your controllers
|
|
||||||
thin and your business rules organized.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<H2>Domain Events</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Domain events help you decouple components and react to
|
|
||||||
changes in your system. They're essential for building
|
|
||||||
scalable, event-driven architectures.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<H2>Complete examples</H2>
|
|
||||||
<Paragraph>
|
|
||||||
These TypeScript examples demonstrate modern architecture
|
|
||||||
patterns for scalable applications. You can copy them directly
|
|
||||||
into your project.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<div className="my-8">
|
|
||||||
<FileExamplesList groups={groups} />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{slug === "docker-deployment" && (
|
|
||||||
<>
|
|
||||||
<LeadParagraph>
|
|
||||||
Docker has become the standard for containerizing
|
|
||||||
applications. Here's how to set up production-ready
|
|
||||||
deployments that are secure, efficient, and maintainable.
|
|
||||||
</LeadParagraph>
|
|
||||||
<H2>Multi-stage builds</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Multi-stage builds keep your production images small and
|
|
||||||
secure by separating build and runtime environments. This
|
|
||||||
reduces attack surface and speeds up deployments.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<H2>Health checks and monitoring</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Proper health checks ensure your containers are running
|
|
||||||
correctly. Combined with restart policies, this gives you
|
|
||||||
resilient, self-healing deployments.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<H2>Orchestration with Docker Compose</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Docker Compose makes it easy to manage multi-service
|
|
||||||
applications in development and production. Define services,
|
|
||||||
networks, and volumes in a single file.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<H2>Complete examples</H2>
|
|
||||||
<Paragraph>
|
|
||||||
These Docker configurations are production-ready. Use them as
|
|
||||||
a starting point for your own deployments.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<div className="my-8">
|
|
||||||
<FileExamplesList groups={groups} />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -1,242 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Tag } from '../../../src/components/Tag';
|
|
||||||
import { H2 } from '../../../src/components/ArticleHeading';
|
|
||||||
import { Paragraph, LeadParagraph } from '../../../src/components/ArticleParagraph';
|
|
||||||
import { UL, LI } from '../../../src/components/ArticleList';
|
|
||||||
import { CodeBlock } from '../../../src/components/ArticleBlockquote';
|
|
||||||
import { YouTubeEmbed } from '../../../src/components/YouTubeEmbed';
|
|
||||||
import { TwitterEmbed } from '../../../src/components/TwitterEmbed';
|
|
||||||
import { GenericEmbed } from '../../../src/components/GenericEmbed';
|
|
||||||
import { Mermaid } from '../../../src/components/Mermaid';
|
|
||||||
import { BlogPostClient } from '../../../src/components/BlogPostClient';
|
|
||||||
|
|
||||||
export default function EmbedDemoPage() {
|
|
||||||
const post = {
|
|
||||||
title: "Rich Content Embedding Demo",
|
|
||||||
description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
|
|
||||||
date: "2024-02-15",
|
|
||||||
slug: "embed-demo",
|
|
||||||
tags: ["embeds", "components", "tutorial", "mermaid"]
|
|
||||||
};
|
|
||||||
|
|
||||||
const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
|
|
||||||
month: 'long',
|
|
||||||
day: 'numeric',
|
|
||||||
year: 'numeric'
|
|
||||||
});
|
|
||||||
|
|
||||||
const readingTime = 5;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-white">
|
|
||||||
<BlogPostClient readingTime={readingTime} title={post.title} />
|
|
||||||
|
|
||||||
<main id="post-content" className="pt-24">
|
|
||||||
<section className="py-12 md:py-16">
|
|
||||||
<div className="max-w-3xl mx-auto px-6">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="text-3xl md:text-5xl font-serif font-bold text-slate-900 mb-6 leading-tight tracking-tight">
|
|
||||||
{post.title}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap items-center justify-center gap-4 text-sm text-slate-600 mb-6 font-sans">
|
|
||||||
<time dateTime={post.date} className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
|
|
||||||
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zM4 8h12v8H4V8z"/>
|
|
||||||
</svg>
|
|
||||||
{formattedDate}
|
|
||||||
</time>
|
|
||||||
<span className="text-slate-400">•</span>
|
|
||||||
<span className="flex items-center gap-1.5 px-3 py-1 bg-slate-50 rounded-full">
|
|
||||||
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd"/>
|
|
||||||
</svg>
|
|
||||||
{readingTime} min
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-xl md:text-2xl text-slate-600 leading-relaxed font-serif italic mb-8 max-w-2xl mx-auto">
|
|
||||||
{post.description}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap justify-center gap-2 mb-8">
|
|
||||||
{post.tags.map((tag, index) => (
|
|
||||||
<Tag key={tag} tag={tag} index={index} className="text-xs" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="max-w-3xl mx-auto px-6 pb-24">
|
|
||||||
<div className="prose prose-slate max-w-none">
|
|
||||||
<LeadParagraph>
|
|
||||||
This post demonstrates our new free embed components that give you full styling control over YouTube videos, Twitter tweets, and other rich content - all generated at build time.
|
|
||||||
</LeadParagraph>
|
|
||||||
|
|
||||||
<H2>YouTube Embed Example</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Here's a YouTube video embedded with full styling control. The component uses build-time generation for optimal performance.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<div className="my-6">
|
|
||||||
<YouTubeEmbed
|
|
||||||
videoId="dQw4w9WgXcQ"
|
|
||||||
title="Demo Video"
|
|
||||||
style="minimal"
|
|
||||||
className="my-4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Paragraph>
|
|
||||||
You can customize the appearance using CSS variables or data attributes:
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<CodeBlock
|
|
||||||
language="jsx"
|
|
||||||
showLineNumbers={true}
|
|
||||||
>
|
|
||||||
{`<YouTubeEmbed
|
|
||||||
videoId="dQw4w9WgXcQ"
|
|
||||||
style="minimal" // 'default' | 'minimal' | 'rounded' | 'flat'
|
|
||||||
aspectRatio="56.25%" // Custom aspect ratio
|
|
||||||
className="my-4" // Additional classes
|
|
||||||
/>`}
|
|
||||||
</CodeBlock>
|
|
||||||
|
|
||||||
<H2>Twitter/X Embed Example</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Twitter embeds use the official Twitter iframe embed for reliable display.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<div className="my-4">
|
|
||||||
<TwitterEmbed
|
|
||||||
tweetId="20"
|
|
||||||
theme="light"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CodeBlock
|
|
||||||
language="jsx"
|
|
||||||
showLineNumbers={true}
|
|
||||||
>
|
|
||||||
{`<TwitterEmbed
|
|
||||||
tweetId="20"
|
|
||||||
theme="light" // 'light' | 'dark'
|
|
||||||
align="center" // 'left' | 'center' | 'right'
|
|
||||||
/>`}
|
|
||||||
</CodeBlock>
|
|
||||||
|
|
||||||
<H2>Generic Embed Example</H2>
|
|
||||||
<Paragraph>
|
|
||||||
The generic component supports direct embeds for Vimeo, CodePen, GitHub Gists, and other platforms.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<div className="my-6">
|
|
||||||
<GenericEmbed
|
|
||||||
url="https://vimeo.com/123456789"
|
|
||||||
type="video"
|
|
||||||
maxWidth="800px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<CodeBlock
|
|
||||||
language="jsx"
|
|
||||||
showLineNumbers={true}
|
|
||||||
>
|
|
||||||
{`<GenericEmbed
|
|
||||||
url="https://vimeo.com/123456789"
|
|
||||||
type="video" // 'video' | 'article' | 'rich'
|
|
||||||
maxWidth="800px"
|
|
||||||
/>`}
|
|
||||||
</CodeBlock>
|
|
||||||
|
|
||||||
<H2>Mermaid Diagrams</H2>
|
|
||||||
<Paragraph>
|
|
||||||
We've added support for Mermaid diagrams! You can now create flowcharts, sequence diagrams, and more using a simple text-based syntax.
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<div className="my-8">
|
|
||||||
<Mermaid
|
|
||||||
graph={`graph LR
|
|
||||||
A[Client] --> B[Load Balancer]
|
|
||||||
B --> C[App Server 1]
|
|
||||||
B --> D[App Server 2]
|
|
||||||
C --> E[(Database)]
|
|
||||||
D --> E`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Paragraph>
|
|
||||||
Usage is straightforward:
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<CodeBlock
|
|
||||||
language="jsx"
|
|
||||||
showLineNumbers={true}
|
|
||||||
>
|
|
||||||
{`<Mermaid
|
|
||||||
graph={\`graph LR
|
|
||||||
A[Client] --> B[Load Balancer]
|
|
||||||
B --> C[App Server 1]
|
|
||||||
B --> D[App Server 2]
|
|
||||||
C --> E[(Database)]
|
|
||||||
D --> E\`}
|
|
||||||
/>`}
|
|
||||||
</CodeBlock>
|
|
||||||
|
|
||||||
<H2>Styling Control</H2>
|
|
||||||
<Paragraph>
|
|
||||||
All components use CSS variables for easy customization:
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<CodeBlock
|
|
||||||
language="css"
|
|
||||||
showLineNumbers={true}
|
|
||||||
>
|
|
||||||
{`.youtube-embed {
|
|
||||||
--aspect-ratio: 56.25%;
|
|
||||||
--bg-color: #000000;
|
|
||||||
--border-radius: 12px;
|
|
||||||
--shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Data attribute variations */
|
|
||||||
.youtube-embed[data-style="minimal"] {
|
|
||||||
--border-radius: 4px;
|
|
||||||
--shadow: none;
|
|
||||||
}`}
|
|
||||||
</CodeBlock>
|
|
||||||
|
|
||||||
<H2>Benefits</H2>
|
|
||||||
<UL>
|
|
||||||
<LI><strong>Free:</strong> No paid services required</LI>
|
|
||||||
<LI><strong>Fast:</strong> Build-time generation, no runtime API calls</LI>
|
|
||||||
<LI><strong>Flexible:</strong> Full styling control via CSS variables</LI>
|
|
||||||
<LI><strong>Self-hosted:</strong> Complete ownership and privacy</LI>
|
|
||||||
<LI><strong>SEO-friendly:</strong> Static HTML content</LI>
|
|
||||||
</UL>
|
|
||||||
|
|
||||||
<H2>Integration</H2>
|
|
||||||
<Paragraph>
|
|
||||||
Simply import the components in your blog posts:
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<CodeBlock
|
|
||||||
language="jsx"
|
|
||||||
showLineNumbers={true}
|
|
||||||
>
|
|
||||||
{`import { YouTubeEmbed } from '../components/YouTubeEmbed';
|
|
||||||
import { TwitterEmbed } from '../components/TwitterEmbed';
|
|
||||||
import { GenericEmbed } from '../components/GenericEmbed';
|
|
||||||
|
|
||||||
<YouTubeEmbed videoId="abc123" style="rounded" />
|
|
||||||
<TwitterEmbed tweetId="123456789" theme="dark" />`}
|
|
||||||
</CodeBlock>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -3,19 +3,19 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { MediumCard } from "../../src/components/MediumCard";
|
import { MediumCard } from "../../src/components/MediumCard";
|
||||||
import { SearchBar } from "../../src/components/SearchBar";
|
import { BlogCommandBar } from "../../src/components/blog/BlogCommandBar";
|
||||||
import { Tag } from "../../src/components/Tag";
|
|
||||||
import { blogPosts } from "../../src/data/blogPosts";
|
import { blogPosts } from "../../src/data/blogPosts";
|
||||||
import { PageHeader } from "../../src/components/PageHeader";
|
import { PageHeader } from "../../src/components/PageHeader";
|
||||||
|
import { SectionHeader } from "../../src/components/SectionHeader";
|
||||||
import { Reveal } from "../../src/components/Reveal";
|
import { Reveal } from "../../src/components/Reveal";
|
||||||
import { Section } from "../../src/components/Section";
|
import { Section } from "../../src/components/Section";
|
||||||
import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
|
import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
|
||||||
import { Label } from "../../src/components/Typography";
|
|
||||||
|
|
||||||
export default function BlogPage() {
|
export default function BlogPage() {
|
||||||
const [searchQuery, setSearchQuery] = useState("");
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
|
const [activeTags, setActiveTags] = useState<string[]>([]);
|
||||||
|
|
||||||
// Memoize allPosts to prevent infinite re-render loop
|
// Memoize allPosts
|
||||||
const allPosts = React.useMemo(
|
const allPosts = React.useMemo(
|
||||||
() =>
|
() =>
|
||||||
[...blogPosts].sort(
|
[...blogPosts].sort(
|
||||||
@@ -32,110 +32,123 @@ export default function BlogPage() {
|
|||||||
[allPosts],
|
[allPosts],
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
const [visibleCount, setVisibleCount] = useState(8);
|
||||||
const query = searchQuery.toLowerCase().trim();
|
|
||||||
if (query.startsWith("#")) {
|
|
||||||
const tag = query.slice(1);
|
|
||||||
setFilteredPosts(
|
|
||||||
allPosts.filter((post) =>
|
|
||||||
post.tags?.some((t) => t.toLowerCase() === tag.toLowerCase()),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
setFilteredPosts(
|
|
||||||
allPosts.filter((post) => {
|
|
||||||
const title = post.title.toLowerCase();
|
|
||||||
const description = post.description.toLowerCase();
|
|
||||||
const tags = (post.tags || []).join(" ").toLowerCase();
|
|
||||||
return (
|
|
||||||
title.includes(query) ||
|
|
||||||
description.includes(query) ||
|
|
||||||
tags.includes(query)
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, [searchQuery, allPosts]);
|
|
||||||
|
|
||||||
const filterByTag = (tag: string) => {
|
const handleTagToggle = (tag: string) => {
|
||||||
setSearchQuery(`#${tag}`);
|
setActiveTags((prev) =>
|
||||||
|
prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag],
|
||||||
|
);
|
||||||
|
setVisibleCount(8); // Reset pagination on filter change
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const query = searchQuery.toLowerCase().trim();
|
||||||
|
|
||||||
|
let filtered = allPosts;
|
||||||
|
|
||||||
|
if (query) {
|
||||||
|
filtered = filtered.filter((post) => {
|
||||||
|
const title = post.title.toLowerCase();
|
||||||
|
const description = post.description.toLowerCase();
|
||||||
|
const pTagString = (post.tags || []).join(" ").toLowerCase();
|
||||||
|
return (
|
||||||
|
title.includes(query) ||
|
||||||
|
description.includes(query) ||
|
||||||
|
pTagString.includes(query)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (activeTags.length > 0) {
|
||||||
|
filtered = filtered.filter((post) =>
|
||||||
|
post.tags?.some((tag) => activeTags.includes(tag)),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilteredPosts(filtered);
|
||||||
|
}, [searchQuery, activeTags, allPosts]);
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
setVisibleCount((prev) => prev + 6);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasMore = visibleCount < filteredPosts.length;
|
||||||
|
const postsToShow = filteredPosts.slice(0, visibleCount);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col bg-white overflow-hidden relative min-h-screen">
|
<div className="flex flex-col bg-slate-50/30 overflow-hidden relative min-h-screen">
|
||||||
<AbstractCircuit />
|
<AbstractCircuit />
|
||||||
|
|
||||||
<PageHeader
|
|
||||||
title={
|
|
||||||
<>
|
|
||||||
Blog <br />
|
|
||||||
<span className="text-slate-400">& Notes.</span>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
description="Ein technisches Notizbuch über Lösungen, Fehler und Werkzeuge."
|
|
||||||
backLink={{ href: "/", label: "Zurück" }}
|
|
||||||
backgroundSymbol="B"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Section
|
<Section
|
||||||
number="01"
|
effects={<GradientMesh variant="metallic" className="opacity-40" />}
|
||||||
title="Journal"
|
className="pb-32 pt-12 md:pt-20"
|
||||||
borderTop
|
containerVariant="wide"
|
||||||
effects={<GradientMesh variant="metallic" className="opacity-50" />}
|
|
||||||
>
|
>
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
<div className="max-w-[calc(100vw-2rem)] md:max-w-7xl mx-auto space-y-12">
|
||||||
{/* Sidebar / Filter area */}
|
{/* Section Header & Filters - Centered & Compact */}
|
||||||
<div className="lg:col-span-4 lg:order-2">
|
<div className="relative z-20 space-y-12 flex flex-col items-center text-center">
|
||||||
<div className="sticky top-32 space-y-16">
|
<SectionHeader
|
||||||
<Reveal>
|
title="Alle Artikel"
|
||||||
<div className="space-y-6">
|
subtitle="Index"
|
||||||
<Label className="text-slate-400 uppercase tracking-[0.3em]">
|
align="center"
|
||||||
Suchen
|
className="py-0 md:py-0"
|
||||||
</Label>
|
/>
|
||||||
<SearchBar value={searchQuery} onChange={setSearchQuery} />
|
<Reveal width="100%" className="max-w-2xl mx-auto">
|
||||||
</div>
|
<BlogCommandBar
|
||||||
</Reveal>
|
searchQuery={searchQuery}
|
||||||
|
onSearchChange={setSearchQuery}
|
||||||
{allTags.length > 0 && (
|
tags={allTags}
|
||||||
<Reveal delay={0.2}>
|
activeTags={activeTags}
|
||||||
<div className="space-y-8">
|
onTagToggle={handleTagToggle}
|
||||||
<Label className="text-slate-400 uppercase tracking-[0.3em]">
|
/>
|
||||||
Themen
|
</Reveal>
|
||||||
</Label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{allTags.map((tag, index) => (
|
|
||||||
<button
|
|
||||||
key={tag}
|
|
||||||
onClick={() => filterByTag(tag)}
|
|
||||||
className="text-left group"
|
|
||||||
>
|
|
||||||
<Tag tag={tag} index={index} />
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Posts area */}
|
{/* Posts List (Vertical & Minimal) */}
|
||||||
<div className="lg:col-span-8 lg:order-1">
|
<div id="posts-container" className="space-y-12">
|
||||||
<div id="posts-container" className="flex flex-col gap-12">
|
{postsToShow.length === 0 ? (
|
||||||
{filteredPosts.length === 0 ? (
|
<div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl bg-white/50">
|
||||||
<div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl">
|
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
|
||||||
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
|
Keine Beiträge gefunden.
|
||||||
Keine Beiträge gefunden.
|
</p>
|
||||||
</p>
|
<button
|
||||||
</div>
|
onClick={() => {
|
||||||
) : (
|
setSearchQuery("");
|
||||||
filteredPosts.map((post, i) => (
|
setActiveTags([]);
|
||||||
<Reveal key={post.slug} delay={0.1 * i} width="100%">
|
}}
|
||||||
|
className="mt-4 text-xs font-bold text-slate-900 underline underline-offset-4 hover:text-slate-600"
|
||||||
|
>
|
||||||
|
Filter zurücksetzen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto w-full">
|
||||||
|
{postsToShow.map((post, i) => (
|
||||||
|
<Reveal key={post.slug} delay={0.05 * (i % 6)} width="100%">
|
||||||
<MediumCard post={post} />
|
<MediumCard post={post} />
|
||||||
</Reveal>
|
</Reveal>
|
||||||
))
|
))}
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{hasMore && (
|
||||||
|
<div className="flex justify-center pt-8">
|
||||||
|
<Reveal delay={0.1}>
|
||||||
|
<button
|
||||||
|
onClick={loadMore}
|
||||||
|
className="group relative px-8 py-4 bg-white border border-slate-200 text-slate-600 rounded-full overflow-hidden transition-all hover:border-slate-400 hover:text-slate-900 hover:shadow-lg"
|
||||||
|
>
|
||||||
|
<span className="relative z-10 font-mono text-xs uppercase tracking-widest flex items-center gap-3">
|
||||||
|
Mehr laden
|
||||||
|
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors" />
|
||||||
|
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-75" />
|
||||||
|
<div className="w-1 h-1 bg-slate-300 rounded-full group-hover:bg-slate-900 transition-colors delay-150" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
|
|||||||
@@ -1,24 +1,30 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
|
|
||||||
interface HeadingProps {
|
interface HeadingProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const H1: React.FC<HeadingProps> = ({ children, className = '' }) => (
|
export const H1: React.FC<HeadingProps> = ({ children, className = "" }) => (
|
||||||
<h1 className={`text-4xl md:text-5xl font-bold text-slate-900 mb-8 mt-12 leading-[1.1] tracking-tight ${className}`}>
|
<h1
|
||||||
|
className={`text-4xl md:text-5xl font-bold text-slate-900 mb-6 mt-8 leading-[1.1] tracking-tight ${className}`}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</h1>
|
</h1>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const H2: React.FC<HeadingProps> = ({ children, className = '' }) => (
|
export const H2: React.FC<HeadingProps> = ({ children, className = "" }) => (
|
||||||
<h2 className={`text-3xl md:text-4xl font-bold text-slate-900 mb-6 mt-10 leading-[1.2] tracking-tight ${className}`}>
|
<h2
|
||||||
|
className={`text-3xl md:text-4xl font-bold text-slate-900 mb-4 mt-10 leading-[1.2] tracking-tight ${className}`}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</h2>
|
</h2>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const H3: React.FC<HeadingProps> = ({ children, className = '' }) => (
|
export const H3: React.FC<HeadingProps> = ({ children, className = "" }) => (
|
||||||
<h3 className={`text-2xl md:text-3xl font-bold text-slate-900 mb-4 mt-8 leading-[1.3] tracking-tight ${className}`}>
|
<h3
|
||||||
|
className={`text-2xl md:text-3xl font-bold text-slate-900 mb-3 mt-8 leading-[1.3] tracking-tight ${className}`}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</h3>
|
</h3>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,18 +1,28 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
|
|
||||||
interface ParagraphProps {
|
interface ParagraphProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Paragraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
|
export const Paragraph: React.FC<ParagraphProps> = ({
|
||||||
<p className={`text-slate-700 font-serif text-lg md:text-xl leading-relaxed mb-6 ${className}`}>
|
children,
|
||||||
|
className = "",
|
||||||
|
}) => (
|
||||||
|
<p
|
||||||
|
className={`text-slate-700 font-serif text-lg md:text-xl leading-[1.6] mb-4 ${className}`}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const LeadParagraph: React.FC<ParagraphProps> = ({ children, className = '' }) => (
|
export const LeadParagraph: React.FC<ParagraphProps> = ({
|
||||||
<p className={`text-xl md:text-2xl text-slate-700 font-serif italic leading-relaxed mb-8 ${className}`}>
|
children,
|
||||||
|
className = "",
|
||||||
|
}) => (
|
||||||
|
<p
|
||||||
|
className={`text-xl md:text-2xl text-slate-700 font-serif italic leading-snug mb-6 ${className}`}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -2,8 +2,10 @@ import * as React from "react";
|
|||||||
import { ArrowRight } from "lucide-react";
|
import { ArrowRight } from "lucide-react";
|
||||||
import { Reveal } from "../Reveal";
|
import { Reveal } from "../Reveal";
|
||||||
import { Label, H3, LeadText } from "../Typography";
|
import { Label, H3, LeadText } from "../Typography";
|
||||||
|
import { cn } from "../../utils/cn";
|
||||||
|
|
||||||
interface ComparisonRowProps {
|
interface ComparisonRowProps {
|
||||||
|
description?: string;
|
||||||
negativeLabel: string;
|
negativeLabel: string;
|
||||||
negativeText: React.ReactNode;
|
negativeText: React.ReactNode;
|
||||||
positiveLabel: string;
|
positiveLabel: string;
|
||||||
@@ -13,6 +15,7 @@ interface ComparisonRowProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const ComparisonRow: React.FC<ComparisonRowProps> = ({
|
export const ComparisonRow: React.FC<ComparisonRowProps> = ({
|
||||||
|
description,
|
||||||
negativeLabel,
|
negativeLabel,
|
||||||
negativeText,
|
negativeText,
|
||||||
positiveLabel,
|
positiveLabel,
|
||||||
@@ -22,27 +25,40 @@ export const ComparisonRow: React.FC<ComparisonRowProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<Reveal delay={delay}>
|
<Reveal delay={delay}>
|
||||||
<div
|
<div className="space-y-4">
|
||||||
className={`flex flex-col ${reverse ? "md:flex-row-reverse" : "md:flex-row"} gap-8 md:gap-12 items-center`}
|
{description && (
|
||||||
>
|
<Label className="text-slate-400 text-[10px] tracking-[0.2em] uppercase">
|
||||||
<div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
|
{description}
|
||||||
<Label className="mb-4 line-through decoration-red-500">
|
|
||||||
{negativeLabel}
|
|
||||||
</Label>
|
</Label>
|
||||||
<LeadText className="line-through decoration-red-500 leading-snug">
|
)}
|
||||||
{negativeText}
|
<div
|
||||||
</LeadText>
|
className={cn(
|
||||||
</div>
|
"flex flex-col gap-8 md:gap-12 items-center",
|
||||||
|
reverse ? "md:flex-row-reverse" : "md:flex-row",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
|
||||||
|
<Label className="mb-4 line-through decoration-red-500">
|
||||||
|
{negativeLabel}
|
||||||
|
</Label>
|
||||||
|
<LeadText className="line-through decoration-red-500 leading-snug">
|
||||||
|
{negativeText}
|
||||||
|
</LeadText>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="shrink-0">
|
<div className="shrink-0">
|
||||||
<ArrowRight
|
<ArrowRight
|
||||||
className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? "rotate-180" : ""}`}
|
className={cn(
|
||||||
/>
|
"w-6 h-6 text-slate-200 hidden md:block",
|
||||||
</div>
|
reverse ? "rotate-180" : "",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
|
<div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
|
||||||
<Label className="text-slate-900 mb-4">{positiveLabel}</Label>
|
<Label className="text-slate-900 mb-4">{positiveLabel}</Label>
|
||||||
<H3 className="text-2xl md:text-3xl">{positiveText}</H3>
|
<H3 className="text-2xl md:text-3xl">{positiveText}</H3>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from "react";
|
||||||
import Link from 'next/link';
|
import Link from "next/link";
|
||||||
|
import { Card } from "./Layout";
|
||||||
|
import { ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
interface Post {
|
interface Post {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -14,34 +16,53 @@ interface MediumCardProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
|
export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
|
||||||
const { title, description, date, slug } = post;
|
const { title, description, date, slug, tags } = post;
|
||||||
|
|
||||||
const formattedDate = new Date(date).toLocaleDateString('en-US', {
|
const formattedDate = new Date(date).toLocaleDateString("de-DE", {
|
||||||
month: 'short',
|
month: "long",
|
||||||
day: 'numeric',
|
year: "numeric",
|
||||||
year: 'numeric',
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link href={`/blog/${slug}`} className="group block">
|
<Link href={`/blog/${slug}`} className="group block w-full">
|
||||||
<article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
|
<Card
|
||||||
<time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
|
variant="glass"
|
||||||
{formattedDate}
|
padding="normal"
|
||||||
</time>
|
techBorder={false}
|
||||||
|
className="relative overflow-hidden transition-all duration-300 border-slate-100 hover:border-slate-300 bg-white/30 backdrop-blur-sm"
|
||||||
<h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
|
>
|
||||||
{title}
|
<div className="space-y-4">
|
||||||
</h3>
|
<div className="flex items-center justify-between">
|
||||||
|
<time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">
|
||||||
<p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
|
{formattedDate}
|
||||||
{description}
|
</time>
|
||||||
</p>
|
<div className="flex gap-2">
|
||||||
|
{tags?.slice(0, 2).map((tag) => (
|
||||||
<div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
|
<span
|
||||||
Lesen
|
key={tag}
|
||||||
<div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
|
className="text-[9px] font-mono text-slate-300 uppercase"
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h3 className="text-2xl font-bold text-slate-900 tracking-tight leading-tight group-hover:text-black transition-colors">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-base text-slate-500 font-serif italic leading-relaxed line-clamp-2">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-all">
|
||||||
|
<span>Beitrag öffnen</span>
|
||||||
|
<ArrowRight className="w-3 h-3 translate-x-0 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</Card>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -8,8 +8,6 @@ interface MermaidProps {
|
|||||||
id?: string;
|
id?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
import { CodeWindow } from "./Effects/CodeWindow";
|
|
||||||
|
|
||||||
export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
|
export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
|
||||||
const [id, setId] = useState<string | null>(null);
|
const [id, setId] = useState<string | null>(null);
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
@@ -60,24 +58,22 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
|
|||||||
if (!id) return null;
|
if (!id) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mermaid-wrapper my-8 not-prose">
|
<div className="mermaid-wrapper my-12 not-prose w-full overflow-hidden">
|
||||||
<CodeWindow title="Diagram" className="max-w-4xl" minHeight="300px">
|
<div className="flex justify-center w-full">
|
||||||
<div className="flex justify-center bg-white p-4">
|
<div
|
||||||
<div
|
ref={containerRef}
|
||||||
ref={containerRef}
|
className={`mermaid transition-opacity duration-500 w-full flex justify-center ${isRendered ? "opacity-100" : "opacity-0"}`}
|
||||||
className={`mermaid transition-opacity duration-500 w-full max-w-4xl ${isRendered ? "opacity-100" : "opacity-0"}`}
|
id={id}
|
||||||
id={id}
|
>
|
||||||
>
|
{error ? (
|
||||||
{error ? (
|
<div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
|
||||||
<div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
|
{error}
|
||||||
{error}
|
</div>
|
||||||
</div>
|
) : (
|
||||||
) : (
|
graph
|
||||||
graph
|
)}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</CodeWindow>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ interface PageHeaderProps {
|
|||||||
};
|
};
|
||||||
backgroundSymbol?: string;
|
backgroundSymbol?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
variant?: "default" | "blog";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const PageHeader: React.FC<PageHeaderProps> = ({
|
export const PageHeader: React.FC<PageHeaderProps> = ({
|
||||||
@@ -22,42 +23,88 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
|
|||||||
backLink,
|
backLink,
|
||||||
backgroundSymbol,
|
backgroundSymbol,
|
||||||
className = "",
|
className = "",
|
||||||
|
variant = "default",
|
||||||
}) => {
|
}) => {
|
||||||
|
const isBlog = variant === "blog";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
className={cn(
|
className={cn(
|
||||||
"narrow-container relative pt-24 pb-16 md:pt-40 md:pb-24",
|
"narrow-container relative",
|
||||||
|
isBlog
|
||||||
|
? "pt-32 pb-12 md:pt-48 md:pb-16"
|
||||||
|
: "pt-24 pb-16 md:pt-40 md:pb-24",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{backgroundSymbol && (
|
{backgroundSymbol && (
|
||||||
<div className="absolute -left-24 -top-12 text-[20rem] md:text-[24rem] font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none">
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute font-bold text-slate-50 select-none -z-10 opacity-40 tracking-tighter leading-none",
|
||||||
|
isBlog
|
||||||
|
? "-left-8 top-12 text-[12rem] md:text-[16rem]"
|
||||||
|
: "-left-24 -top-12 text-[20rem] md:text-[24rem]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
{backgroundSymbol}
|
{backgroundSymbol}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{isBlog && (
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-32 w-px h-12 bg-slate-200"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{backLink && (
|
{backLink && (
|
||||||
<Link
|
<Link
|
||||||
href={backLink.href}
|
href={backLink.href}
|
||||||
className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
|
className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-8 md:mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
|
||||||
>
|
>
|
||||||
<ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
|
<ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
|
||||||
{backLink.label}
|
{backLink.label}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="space-y-8 relative">
|
<div
|
||||||
|
className={cn("space-y-6 md:space-y-8 relative", isBlog && "max-w-7xl")}
|
||||||
|
>
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<H1 className="max-w-4xl">{title}</H1>
|
<h1
|
||||||
|
className={cn(
|
||||||
|
"font-bold text-slate-900 tracking-tighter leading-[1.1]",
|
||||||
|
isBlog ? "text-4xl md:text-6xl" : "text-5xl md:text-7xl",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
|
|
||||||
{description && (
|
{description && (
|
||||||
<Reveal delay={0.2}>
|
<Reveal delay={0.2}>
|
||||||
<LeadText className="text-xl md:text-2xl text-slate-400 leading-relaxed max-w-2xl font-serif italic">
|
<p
|
||||||
|
className={cn(
|
||||||
|
"font-serif italic text-slate-400 leading-relaxed",
|
||||||
|
isBlog
|
||||||
|
? "text-lg md:text-xl max-w-xl"
|
||||||
|
: "text-xl md:text-2xl max-w-2xl",
|
||||||
|
)}
|
||||||
|
>
|
||||||
{description}
|
{description}
|
||||||
</LeadText>
|
</p>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{isBlog && (
|
||||||
|
<div className="pt-4 flex items-center gap-4">
|
||||||
|
<div className="h-px flex-1 bg-slate-100" />
|
||||||
|
<span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
|
||||||
|
Technical ID:{" "}
|
||||||
|
{Math.random().toString(36).substring(7).toUpperCase()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,16 +1,20 @@
|
|||||||
'use client';
|
"use client";
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from "react";
|
||||||
import { useState, useRef } from 'react';
|
import { useState, useRef } from "react";
|
||||||
|
|
||||||
interface SearchBarProps {
|
interface SearchBarProps {
|
||||||
value?: string;
|
value?: string;
|
||||||
onChange?: (value: string) => void;
|
onChange?: (value: string) => void;
|
||||||
size?: 'small' | 'large';
|
size?: "small" | "large";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange, size = 'small' }) => {
|
export const SearchBar: React.FC<SearchBarProps> = ({
|
||||||
const [internalValue, setInternalValue] = useState('');
|
value: propValue,
|
||||||
|
onChange,
|
||||||
|
size = "small",
|
||||||
|
}) => {
|
||||||
|
const [internalValue, setInternalValue] = useState("");
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
const [isFocused, setIsFocused] = useState(false);
|
const [isFocused, setIsFocused] = useState(false);
|
||||||
|
|
||||||
@@ -27,9 +31,9 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
|
|||||||
|
|
||||||
const clearSearch = () => {
|
const clearSearch = () => {
|
||||||
if (onChange) {
|
if (onChange) {
|
||||||
onChange('');
|
onChange("");
|
||||||
} else {
|
} else {
|
||||||
setInternalValue('');
|
setInternalValue("");
|
||||||
}
|
}
|
||||||
if (inputRef.current) {
|
if (inputRef.current) {
|
||||||
inputRef.current.focus();
|
inputRef.current.focus();
|
||||||
@@ -37,24 +41,24 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
if (e.key === 'Escape') {
|
if (e.key === "Escape") {
|
||||||
clearSearch();
|
clearSearch();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full">
|
<div className="relative w-full max-w-full">
|
||||||
<div className="relative flex items-center">
|
<div className="relative flex items-center w-full">
|
||||||
<input
|
<input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Suchen..."
|
placeholder="Suchen..."
|
||||||
value={value}
|
value={value}
|
||||||
className={`w-full px-8 py-4 font-bold text-slate-900 bg-white rounded-2xl border transition-all focus:outline-none placeholder:text-slate-300 ${
|
className={`w-full max-w-full px-8 py-4 font-bold text-slate-900 bg-white rounded-2xl border transition-all focus:outline-none placeholder:text-slate-300 ${
|
||||||
size === 'large' ? 'text-2xl md:text-4xl py-6 rounded-3xl' : 'text-lg'
|
size === "large"
|
||||||
} ${
|
? "text-2xl md:text-4xl py-6 rounded-3xl"
|
||||||
isFocused ? 'border-slate-400' : 'border-slate-200'
|
: "text-lg"
|
||||||
}`}
|
} ${isFocused ? "border-slate-400" : "border-slate-200"}`}
|
||||||
onChange={handleInput}
|
onChange={handleInput}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
onFocus={() => setIsFocused(true)}
|
onFocus={() => setIsFocused(true)}
|
||||||
|
|||||||
@@ -82,48 +82,58 @@ export const Section: React.FC<SectionProps> = ({
|
|||||||
|
|
||||||
<div className={cn("relative z-10", containerClass)}>
|
<div className={cn("relative z-10", containerClass)}>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
|
||||||
{/* Sidebar: Number & Title */}
|
{/* Sidebar: Number & Title (Only if provided) */}
|
||||||
<div className="md:col-span-3">
|
{(number || title || illustration) && (
|
||||||
<div className="md:sticky md:top-40 space-y-8">
|
<div className="md:col-span-3">
|
||||||
{number && (
|
<div className="md:sticky md:top-40 space-y-8">
|
||||||
<Reveal delay={delay}>
|
{number && (
|
||||||
<span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
|
<Reveal delay={delay}>
|
||||||
{number}
|
<span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
|
||||||
{/* Subtle binary overlay on number */}
|
{number}
|
||||||
<span
|
{/* Subtle binary overlay on number */}
|
||||||
className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
|
<span
|
||||||
aria-hidden="true"
|
className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
|
||||||
>
|
aria-hidden="true"
|
||||||
{parseInt(number || "0")
|
>
|
||||||
.toString(2)
|
{parseInt(number || "0")
|
||||||
.padStart(8, "0")}
|
.toString(2)
|
||||||
|
.padStart(8, "0")}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</Reveal>
|
||||||
</Reveal>
|
)}
|
||||||
)}
|
{title && (
|
||||||
{title && (
|
<Reveal delay={delay + 0.1}>
|
||||||
<Reveal delay={delay + 0.1}>
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-center gap-4">
|
{/* Animated dot indicator */}
|
||||||
{/* Animated dot indicator */}
|
<div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
|
||||||
<div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
|
<Label className="text-slate-900 text-[10px] tracking-[0.4em]">
|
||||||
<Label className="text-slate-900 text-[10px] tracking-[0.4em]">
|
{title}
|
||||||
{title}
|
</Label>
|
||||||
</Label>
|
</div>
|
||||||
</div>
|
</Reveal>
|
||||||
</Reveal>
|
)}
|
||||||
)}
|
{illustration && (
|
||||||
{illustration && (
|
<Reveal delay={delay + 0.2}>
|
||||||
<Reveal delay={delay + 0.2}>
|
<div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
|
||||||
<div className="pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
|
{illustration}
|
||||||
{illustration}
|
</div>
|
||||||
</div>
|
</Reveal>
|
||||||
</Reveal>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="md:col-span-9">{children}</div>
|
<div
|
||||||
|
className={cn(
|
||||||
|
number || title || illustration
|
||||||
|
? "md:col-span-9"
|
||||||
|
: "md:col-span-12",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
55
apps/web/src/components/SectionHeader.tsx
Normal file
55
apps/web/src/components/SectionHeader.tsx
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { Reveal } from "./Reveal";
|
||||||
|
import { cn } from "../utils/cn";
|
||||||
|
|
||||||
|
interface SectionHeaderProps {
|
||||||
|
title: string;
|
||||||
|
subtitle?: string;
|
||||||
|
className?: string;
|
||||||
|
align?: "left" | "center" | "right";
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SectionHeader: React.FC<SectionHeaderProps> = ({
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
className = "",
|
||||||
|
align = "left",
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative",
|
||||||
|
align === "center" ? "text-center" : "text-left",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Reveal width="100%">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative inline-block",
|
||||||
|
align === "center" ? "mx-auto" : "",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* Industrial Overline */}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-4 mb-2 text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400",
|
||||||
|
align === "center" ? "justify-center" : "justify-start",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="w-6 h-px bg-slate-200" />
|
||||||
|
<span>{subtitle || "Section"}</span>
|
||||||
|
<div className="w-12 h-px bg-slate-100" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tighter leading-none">
|
||||||
|
{title}
|
||||||
|
<span className="text-slate-200">.</span>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</Reveal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
80
apps/web/src/components/blog/BlogCommandBar.tsx
Normal file
80
apps/web/src/components/blog/BlogCommandBar.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { cn } from "../../utils/cn";
|
||||||
|
import { Search } from "lucide-react";
|
||||||
|
|
||||||
|
interface BlogCommandBarProps {
|
||||||
|
searchQuery: string;
|
||||||
|
onSearchChange: (value: string) => void;
|
||||||
|
tags: string[];
|
||||||
|
activeTags: string[];
|
||||||
|
onTagToggle: (tag: string) => void;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
|
||||||
|
searchQuery,
|
||||||
|
onSearchChange,
|
||||||
|
tags,
|
||||||
|
activeTags,
|
||||||
|
onTagToggle,
|
||||||
|
className = "",
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"w-full max-w-2xl mx-auto flex flex-col items-center space-y-6 px-4 md:px-0",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* Command Input Area */}
|
||||||
|
<div className="relative group w-full">
|
||||||
|
{/* Glow Effect */}
|
||||||
|
<div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-30 group-hover:opacity-100 transition duration-500" />
|
||||||
|
|
||||||
|
<div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
|
||||||
|
<div className="pl-4 text-slate-400">
|
||||||
|
<Search className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => onSearchChange(e.target.value)}
|
||||||
|
placeholder="Search posts..."
|
||||||
|
className="w-full bg-transparent px-4 py-3 text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<button
|
||||||
|
onClick={() => onSearchChange("")}
|
||||||
|
className="mr-2 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tag Command Row */}
|
||||||
|
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||||
|
{tags.map((tag) => {
|
||||||
|
const isActive = activeTags.includes(tag);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => onTagToggle(tag)}
|
||||||
|
className={cn(
|
||||||
|
"px-3 py-1.5 rounded-lg text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
|
||||||
|
isActive
|
||||||
|
? "bg-slate-900 text-white border-slate-900 shadow-md transform scale-105"
|
||||||
|
: "bg-white text-slate-500 border-slate-200 hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
69
apps/web/src/components/blog/BlogFilterBar.tsx
Normal file
69
apps/web/src/components/blog/BlogFilterBar.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import { SearchBar } from "../SearchBar";
|
||||||
|
import { cn } from "../../utils/cn";
|
||||||
|
|
||||||
|
interface BlogFilterBarProps {
|
||||||
|
searchQuery: string;
|
||||||
|
onSearchChange: (value: string) => void;
|
||||||
|
tags: string[];
|
||||||
|
activeTags: string[];
|
||||||
|
onTagToggle: (tag: string) => void;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BlogFilterBar: React.FC<BlogFilterBarProps> = ({
|
||||||
|
searchQuery,
|
||||||
|
onSearchChange,
|
||||||
|
tags,
|
||||||
|
activeTags,
|
||||||
|
onTagToggle,
|
||||||
|
className = "",
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"w-full max-w-full glass rounded-3xl border border-slate-200/50 p-2 md:p-3 flex flex-col md:flex-row gap-4 md:items-center shadow-lg shadow-slate-100/50 backdrop-blur-md relative overflow-hidden group",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{/* Decorative gradient bleed */}
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-indigo-500/5 to-transparent blur-2xl -z-10 pointer-events-none" />
|
||||||
|
|
||||||
|
{/* Search Area */}
|
||||||
|
<div className="w-full md:w-1/3 min-w-[280px]">
|
||||||
|
<SearchBar value={searchQuery} onChange={onSearchChange} size="small" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Vertical Divider (Desktop) */}
|
||||||
|
<div className="hidden md:block w-px h-8 bg-slate-100" />
|
||||||
|
|
||||||
|
{/* Tags Scroll Area */}
|
||||||
|
<div className="flex-1 min-w-0 overflow-x-auto no-scrollbar mask-gradient-right">
|
||||||
|
<div className="flex items-center gap-2 pr-8">
|
||||||
|
<span className="text-[10px] font-mono text-slate-300 uppercase tracking-widest shrink-0 mr-2">
|
||||||
|
Filter:
|
||||||
|
</span>
|
||||||
|
{tags.map((tag) => {
|
||||||
|
const isActive = activeTags.includes(tag);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => onTagToggle(tag)}
|
||||||
|
className={cn(
|
||||||
|
"px-3 py-1.5 rounded text-[9px] font-mono uppercase tracking-wider border transition-all duration-300 whitespace-nowrap",
|
||||||
|
isActive
|
||||||
|
? "bg-slate-900 text-white border-slate-900 shadow-md"
|
||||||
|
: "bg-white/50 text-slate-500 border-slate-100 hover:border-slate-300 hover:text-slate-800",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
#{tag}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
191
apps/web/src/components/blog/posts/Group1/AgencySlowdown.tsx
Normal file
191
apps/web/src/components/blog/posts/Group1/AgencySlowdown.tsx
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const AgencySlowdown: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Haben Sie sich schon einmal gefragt, warum eine einfache Textänderung bei
|
||||||
|
Ihrer Agentur oft zwei Wochen dauert?
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich kenne die Antwort aus meiner jahrelangen Erfahrung: Es liegt an
|
||||||
|
veralteten Hierarchien und einem technologischen Overhead, der Innovation
|
||||||
|
im Keim erstickt.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
<Marker>Mein Modell radikaler Direktheit</Marker> beschleunigt Ihr
|
||||||
|
Business, indem es unnötige Schnittstellen eliminiert. Wir lenken den
|
||||||
|
Fokus zurück auf das fertige Produkt.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die "stille Post" der Agentur-Hierarchien</H2>
|
||||||
|
<Paragraph>
|
||||||
|
In einer klassischen Full-Service-Agentur landet Ihr Wunsch zuerst beim
|
||||||
|
Account Manager.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Dieser gibt ihn an den Projektleiter weiter, der ein Ticket erstellt,
|
||||||
|
welches schließlich einem oft überarbeiteten Junior-Entwickler zugewiesen
|
||||||
|
wird.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Jede dieser Stationen ist nicht nur ein potenzieller Flaschenhals, sondern
|
||||||
|
auch eine Fehlerquelle.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Informationen gehen verloren, die Umsetzung dauert ewig und am Ende
|
||||||
|
bezahlen Sie für Meetings und Ticket-Management statt für Output.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nenne das die <Marker>"Agentur-Steuer"</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Während dort noch über Prioritäten diskutiert wird, könnte Ihre neue
|
||||||
|
Lösung schon live sein und ersten Umsatz für Ihr Unternehmen generieren.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph LR
|
||||||
|
Request["Ihr Wunsch"] --> AM["Account Manager"]
|
||||||
|
AM --> PM["Projektleiter (Meetings)"]
|
||||||
|
PM --> Ticket["Veraltetes Ticketsystem"]
|
||||||
|
Ticket --> Dev["Junior Entwickler"]
|
||||||
|
Dev --> Review["Code Review (Wartezeit)"]
|
||||||
|
Review --> QA["Manuelle QA"]
|
||||||
|
QA --> Approval["Kundenseitige Freigabe"]
|
||||||
|
Approval --> Prod["Mühsamer Live-Gang"]
|
||||||
|
style AM fill:#fca5a5,stroke:#333
|
||||||
|
style PM fill:#fca5a5,stroke:#333
|
||||||
|
style Ticket fill:#fca5a5,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Die traditionelle 'Stille Post': Jede Schnittstelle kostet Sie Zeit,
|
||||||
|
Präzision und bares Geld.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Der systemische Interessenkonflikt</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Es gibt einen tieferen Grund für die Trägheit vieler Agenturen: Das
|
||||||
|
Geschäftsmodell.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Agenturen nach abrechenbaren Stunden arbeiten und große Teams
|
||||||
|
finanzieren müssen, fehlt oft der ökonomische Anreiz zur radikalen
|
||||||
|
Vereinfachung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Langsame Prozesse bedeuten oft mehr abrechenbare Projektmanagement-Zeit.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich hingegen habe mein gesamtes Business auf{" "}
|
||||||
|
<Marker>Effizienz und technologische Souveränität</Marker> optimiert.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Ziel ist die Maximierung Ihres Outputs, nicht die der Stunden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich investiere massiv in meine eigene Toolchain, um Aufgaben, die
|
||||||
|
Agenturen Tage kosten, in Minuten zu erledigen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Handwerk statt Fließband: Mein Boutique-Ansatz</H2>
|
||||||
|
<Paragraph>
|
||||||
|
In meiner Welt gibt es keine Junioren, an die Arbeit "durchgereicht" wird.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie mit mir arbeiten, sprechen Sie direkt mit dem Experten, der die
|
||||||
|
Architektur entwirft und den Code schreibt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich betrachte Softwareentwicklung nicht als anonymen Fließband-Job,
|
||||||
|
sondern als <Marker>digitales Kunsthandwerk</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Dieser Boutique-Ansatz erlaubt es mir, auf eine Weise flexibel zu sein,
|
||||||
|
die für große, starre Strukturen unmöglich ist.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich kann Ideen sofort auf ihre technische Machbarkeit prüfen und
|
||||||
|
prototypisieren, ohne erst eine interne Freigabewelle abwarten zu müssen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Zwei Welten der digitalen Umsetzung"
|
||||||
|
negativeLabel="Struktur-Agentur"
|
||||||
|
negativeText="Unnötige Meetings, langsame Kommunikationskanäle, personeller 'Verschleiß' Ihres Briefings"
|
||||||
|
positiveLabel="Mintel Boutique Architect"
|
||||||
|
positiveText="Direkter Experten-Draht, automatisierte Workflows, Fokus auf Pure Output"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Mein Modell: Radikale Direktheit</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nutze Technologien, die darauf ausgelegt sind, Reibung zu eliminieren.
|
||||||
|
Statt mühsam "Tickets" zu schreiben, bauen wir sofort an Lösungen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Hier sind die drei Hebel, mit denen ich das Tempo Ihres Projekts
|
||||||
|
verdopple:
|
||||||
|
</Paragraph>
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Preview-Deployments in Echtzeit:</strong> Jede Änderung wird
|
||||||
|
sofort auf einer geheimen URL visualisiert. Sie sehen den Fortschritt
|
||||||
|
live.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Komponentengestützte Evolution:</strong> Ich baue ein
|
||||||
|
Design-System für Sie, das mitwächst. Neue Seiten entstehen in Stunden.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Automatisierte Schutzschilde:</strong> Statt fehleranfälliger
|
||||||
|
manueller QA nutze ich automatisierte Tests.{" "}
|
||||||
|
<Marker>Technik schützt Technik.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<H2>Für wen ich die Bremse löse</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Angebot richtet sich an Gründer und Entscheider, die{" "}
|
||||||
|
<Marker>Ergebnisse über Hochglanz-Reports</Marker> stellen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Suchen Sie einen Partner, der so schnell denkt wie Ihr Business es
|
||||||
|
erfordert? Dann passen wir zusammen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Unternehmen, die primär nach maximaler personeller Skalierung suchen, sind
|
||||||
|
bei klassischen Großagenturen besser aufgehoben.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für die Macher, die{" "}
|
||||||
|
<Marker>Qualität und Geschwindigkeit durch Intelligenz</Marker> erreichen
|
||||||
|
wollen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Ihre Zeit ist ein knappes Gut</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Technologische Exzellenz bedeutet für mich auch, Ihnen keine Zeit zu
|
||||||
|
stehlen. Ich baue Systeme, die fließen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie heute eine Vision haben, möchte ich, dass wir sie übermorgen
|
||||||
|
bereits am Markt testen können.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen Sie uns die Agentur-Steuer streichen und direkt in Ihren Erfolg
|
||||||
|
investieren.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Echte Geschwindigkeit beginnt dort, wo Hierarchie endet.</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
182
apps/web/src/components/blog/posts/Group1/PageSpeedFails.tsx
Normal file
182
apps/web/src/components/blog/posts/Group1/PageSpeedFails.tsx
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const PageSpeedFails: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Unternehmen investieren oft Unsummen in glänzende Oberflächen, während das
|
||||||
|
technische Fundament einer digitalen Ruine gleicht.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Wenn Ihre Website bei Google PageSpeed scheitert, verlieren Sie Kunden –{" "}
|
||||||
|
<Marker>bevor diese Ihre Botschaft überhaupt wahrnehmen können</Marker>.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit als Digital Architect ist die Geschwindigkeit der
|
||||||
|
architektonische Gradmesser für Professionalität.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Der unsichtbare Umsatz-Verschleiß</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Stellen Sie sich vor, Sie eröffnen ein Luxus-Geschäft in der besten Lage,
|
||||||
|
aber die Eingangstür klemmt massiv.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Kunden müssen 10 Sekunden lang drücken, um einzutreten. Genau das passiert
|
||||||
|
täglich auf tausenden Websites.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Millisekunden sind im digitalen Zeitalter die härteste Währung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Eine Verzögerung von nur einer Sekunde kann die{" "}
|
||||||
|
<Marker>Conversion-Rate um bis zu 20 % senken</Marker>. Das ist kein
|
||||||
|
technisches Detail, sondern ein unternehmerisches Risiko.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich betrachte Performance nicht als IT-Kennzahl, sondern als ökonomischen
|
||||||
|
Hebel.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Google bewertet Websites heute primär nach den "Core Web Vitals". Das sind
|
||||||
|
präzise Messgrößen für die Frustrationstoleranz Ihrer Nutzer.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer hier rote Zahlen schreibt, wird vom Algorithmus unsichtbar gemacht –
|
||||||
|
eine digitale Strafe für technische Nachlässigkeit.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der Impact von Geschwindigkeit auf Ihre Bilanz"
|
||||||
|
negativeLabel="Langsames Legacy-System"
|
||||||
|
negativeText="Hohe Absprungraten, sinkendes Markenvertrauen, teure Akquise ohne Ertrag"
|
||||||
|
positiveLabel="Mintel High-Performance"
|
||||||
|
positiveText="Maximale Conversion, SEO-Vorsprung ab Tag 1, begeisterte Nutzer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Warum klassische Lösungen scheitern</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Die Ursache liegt oft in der Verwendung von "All-in-One"-Lösungen wie
|
||||||
|
WordPress oder überladenen Baukästen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Diese Systeme versuchen, alles für jeden zu sein. Das Ergebnis ist ein
|
||||||
|
gigantischer "Ballast an Code".
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Jedes Byte muss durch das Nadelöhr der Internetverbindung gepresst werden,
|
||||||
|
bevor das erste Bild erscheint.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In einer mobilen Welt mit oft instabilen Verbindungen ist das ein{" "}
|
||||||
|
<Marker>architektonisches Todesurteil</Marker>. Wer hier spart, zahlt
|
||||||
|
später doppelt durch verlorene Kunden.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
A["Anfrage des Browsers"] --> B["Server muss 'nachdenken' (PHP/DB)"]
|
||||||
|
B --> C["Hunderte Datenbank-Abfragen"]
|
||||||
|
C --> D["HTML wird mühsam live konstruiert"]
|
||||||
|
D --> E["Veraltetes Asset-Management lädt alles"]
|
||||||
|
E --> F["Render-Blocking Code (Browser stoppt)"]
|
||||||
|
F --> G["Seite endlich sichtbar (nach 3-5 Sek)"]
|
||||||
|
style B fill:#fca5a5,stroke:#333
|
||||||
|
style F fill:#fca5a5,stroke:#333
|
||||||
|
style G fill:#fca5a5,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Der Flaschenhals der Standard-Systeme: Rechenzeit am Server raubt Ihnen
|
||||||
|
wertvolle Kundenzeit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Meine Architektur der Geschwindigkeit</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich verfolge einen radikal anderen Ansatz. Statt die Seite erst mühsam
|
||||||
|
zusammenzubauen, wenn der Kunde sie anfragt, liefere ich fertig optimierte
|
||||||
|
"digitale Objekte" aus.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mein "Static-First" Framework sorgt dafür, dass die Antwortzeit Ihres
|
||||||
|
Servers nahezu bei Null liegt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Völlig egal, ob gerade 10 oder 10.000 Menschen gleichzeitig auf Ihre Seite
|
||||||
|
zugreifen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>Skalierbarkeit durch Design</Marker>, nicht durch bloße
|
||||||
|
Server-Power.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H3>Die drei Säulen meiner Umsetzung</H3>
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Zero-Computation am Edge:</strong> Durch Static Site Generation
|
||||||
|
(SSG) liegen alle Inhalte fertig auf globalen CDNs. Keine Wartezeit.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Präzises Asset-Engineering:</strong> Ich nutze Tree-Shaking. Ihr
|
||||||
|
Kunde lädt exakt nur den Code, den er wirklich benötigt.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Next-Gen Media-Handling:</strong> Bilder werden automatisch in
|
||||||
|
Formaten wie AVIF ausgeliefert. Qualität bleibt, Dateigröße schmilzt.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<H2>Der wirtschaftliche Case</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Baukästen wirken "auf den ersten Blick" günstiger. Doch das ist eine
|
||||||
|
riskante Milchmädchenrechnung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie monatlich 5.000 € in Marketing investieren, aber 30 % Ihrer Leads
|
||||||
|
durch Ladezeiten verlieren, verbrennen Sie jedes Jahr 18.000 €.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mein System ist kein Kostenfaktor, sondern ein{" "}
|
||||||
|
<Marker>ROI-Beschleuniger</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wir senken die Kosten pro Lead, indem wir die Reibungsverluste minimieren.
|
||||||
|
Ein technisch überlegenes System ist immer die rentablere Wahl.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann meine Architektur für Sie Sinn macht</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich bin Partner für Unternehmen, die über die "digitale Visitenkarte"
|
||||||
|
hinausgewachsen sind.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ist Ihre Website ein geschäftskritisches Werkzeug für die Lead-Gen? Dann
|
||||||
|
ist mein Ansatz alternativlos.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich steige dort ein, wo technologische{" "}
|
||||||
|
<Marker>Exzellenz zum entscheidenden Wettbewerbsvorteil</Marker> wird.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Respekt vor der Zeit Ihrer Nutzer</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Geschwindigkeit ist letztlich Ausdruck von Wertschätzung. Sie
|
||||||
|
signalisieren Ihrem Kunden: "Ich respektiere deine Zeit."
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen Sie uns Ihre Website in eine hochpräzise Wachstums-Maschine
|
||||||
|
verwandeln.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Qualität zahlt sich aus</Marker> – in Millisekunden und in Euro.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
184
apps/web/src/components/blog/posts/Group1/SlowLoadingDebt.tsx
Normal file
184
apps/web/src/components/blog/posts/Group1/SlowLoadingDebt.tsx
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
|
||||||
|
export const SlowLoadingDebt: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Zeit ist im modernen Web die härteste Währung.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Laufbahn als Digital Architect habe ich miterlebt, wie
|
||||||
|
Millisekunden über den Erfolg von Geschäftsmodellen entscheiden.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Wer technische Altlasten ignoriert, zahlt Zinsen in Form von massiven
|
||||||
|
Kundenverlusten.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
<Marker>
|
||||||
|
Bis das digitale Business schließlich an technischer Zahlungsunfähigkeit
|
||||||
|
scheitert
|
||||||
|
</Marker>
|
||||||
|
.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Zinsen auf schlechte technische Entscheidungen</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Technik-Schulden (Technical Debt) entstehen oft schleichend.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Man wählt heute die schnelle, unsaubere Lösung, um vermeintlich Zeit zu
|
||||||
|
sparen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Doch diese Entscheidung ist ein digitaler Kredit mit extrem hohen Zinsen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Bei der Performance äußert sich das in trägen Ladezeiten, die sich wie
|
||||||
|
Blei auf Ihre Conversion-Rate legen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Jede Sekunde Verzögerung senkt die Abschlussquote im Schnitt um 20 %.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist kein bloßes IT-Thema – das ist ein{" "}
|
||||||
|
<Marker>massives betriebswirtschaftliches Risiko</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich helfe Ihnen, diese Performance-Killer aufzuspüren und systematisch zu
|
||||||
|
eliminieren.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Oft sind es kleine Versäumnisse, die in der Summe ein System unrettbar
|
||||||
|
schwerfällig machen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph LR
|
||||||
|
Slow["Träge Website"] --> Frust["Nutzer-Frustration (Subliminal)"]
|
||||||
|
Frust --> Bounce["Hohe Absprungrate"]
|
||||||
|
Bounce --> Rank["Ranking-Verlust bei Google"]
|
||||||
|
Rank --> Loss["Umsatz- & Reputationsverlust"]
|
||||||
|
Loss --> Debt["Explodierende Akquisekosten"]
|
||||||
|
style Loss fill:#ef4444,color:#fff
|
||||||
|
style Debt fill:#ef4444,color:#fff`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Der fatale Teufelskreis der Ladezeit: Technische Schulden führen zu
|
||||||
|
immer höheren Opportunitätskosten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Die Psychologie des digitalen Wartens</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Wussten Sie, dass die menschliche Wahrnehmung von Zeit im Internet völlig
|
||||||
|
verzerrt ist?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Eine Sekunde Wartezeit fühlt sich digital wie eine kleine Ewigkeit an.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn eine Seite nicht sofort reagiert, sendet dies ein Signal von{" "}
|
||||||
|
<Marker>Unzuverlässigkeit und Inkompetenz</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Der Nutzer fragt sich unbewusst: "Wenn sie schon ihre Website nicht im
|
||||||
|
Griff haben, wie gehen sie dann mit meinen Daten um?"
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich sorge für eine "Instant-Feel" Erfahrung durch intelligentes
|
||||||
|
Pre-Loading.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das schafft Vertrauen, noch bevor das erste Wort gelesen wurde.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wo die Schulden in Ihrem System wirklich lauern</H2>
|
||||||
|
<Paragraph>
|
||||||
|
In meiner Analyse begegnen mir immer wieder die gleichen drei Quellen für
|
||||||
|
technische Altlasten.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Diese zu bereinigen ist der Hebel für Ihre digitale Rendite:
|
||||||
|
</Paragraph>
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Legacy Script Bloat:</strong> Veraltete Tracker, die den Browser
|
||||||
|
bei jedem Aufruf blockieren. Wir entfernen den Ballast radikal.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Architektonische Trägheit:</strong> Dynamische Abfragen, wo
|
||||||
|
statische Antworten möglich wären. Wir liefern Antworten in
|
||||||
|
Lichtgeschwindigkeit.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Die mobile Vernachlässigung:</strong> Eine Seite, die im
|
||||||
|
4G-Funkloch zur Qual wird.{" "}
|
||||||
|
<Marker>Hier findet oft der Erstkontakt statt.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12 space-y-8">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Status Quo (Altlasten) vs. Mintel Standard"
|
||||||
|
negativeLabel="Historisch gewachsene Last"
|
||||||
|
negativeText="8s Ladezeit, instabiles Layout (Lighthouse 30), hohe Wartungs-Sorgen"
|
||||||
|
positiveLabel="Strategisches Refactoring"
|
||||||
|
positiveText="< 1s Ladezeit, felsenfeste Architektur (Lighthouse 100), absolute Ruhe im Betrieb"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Refactoring als Rendite-Beschleuniger</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich flicke nicht an Symptomen herum, ich optimiere die DNA Ihres Systems.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein strategisches Refactoring ist der mutige Schritt weg von
|
||||||
|
schwerfälligen Datenbank-Monolithen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Dies ist kein technisches Selbstverwirklichungsprojekt, sondern eine
|
||||||
|
Investition mit knallhartem ROI.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer schneller ist als der Wettbewerb, gewinnt die Aufmerksamkeit zuerst.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In einem gesättigten Markt ist{" "}
|
||||||
|
<Marker>Geschwindigkeit ein entscheidender Wettbewerbsvorteil</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann ist es Zeit für eine Schuldenbereinigung?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie spüren, dass Ihre aktuelle Technik Ihre Ambitionen ausbremst, bin
|
||||||
|
ich Ihr Architekt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich verstehe, dass für junge Projekte ein pragmatischer Ansatz oft
|
||||||
|
sinnvoll ist.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie jedoch an einem Punkt stehen, an dem Professionalität und
|
||||||
|
Skalierung zählen, gießen wir das{" "}
|
||||||
|
<Marker>technologische Fundament</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Befreien Sie Ihr Business</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Technische Schulden sind eine unsichtbare Bremse für Ihr Wachstum.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Ihnen ein System, das durch{" "}
|
||||||
|
<Marker>Effizienz und Klarheit</Marker> überzeugt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ihr Business verdient es, unbeschwert und frei von Altlasten zu skalieren.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
159
apps/web/src/components/blog/posts/Group1/WebsiteStability.tsx
Normal file
159
apps/web/src/components/blog/posts/Group1/WebsiteStability.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const WebsiteStability: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
"Nach dem letzten Update war plötzlich das halbe Layout kaputt."
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Das ist der Satz, den ich am häufigsten von Neukunden höre.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Für mich ist eine Website ein technisches Präzisionswerkzeug. Es darf
|
||||||
|
niemals einfach "auseinanderfallen".
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
<Marker>Stabilität ist kein glücklicher Zufall</Marker>, sondern das
|
||||||
|
Ergebnis eines kompromisslosen Engineering-Systems.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die Entropie des Webs</H2>
|
||||||
|
<Paragraph>Das Internet ist eine extrem dynamische Umgebung.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Browser-Updates und neue Sicherheitsstandards nagen permanent an der
|
||||||
|
Integrität Ihrer Website.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In herkömmlichen Systemen sind die Komponenten oft wie ein wackeliger
|
||||||
|
Stapel Lego-Steine angeordnet.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Zieht man einen Stein heraus – etwa durch ein Plugin-Update –, gerät das
|
||||||
|
gesamte Konstrukt ins Wanken.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Ich nenne das den schleichenden "Software-Zerfall".</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Architektur, die diesem Zerfall <Marker>aktiv widersteht</Marker>
|
||||||
|
.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Update["Technische Änderung / Update"] --> Test["Automatisierte Qualitäts-Tests"]
|
||||||
|
Test -->|OK| Deploy["Automatischer, sicherer Live-Gang"]
|
||||||
|
Test -->|Fehler| Alert["Sofortiger Stopp & Fehler-Isolation"]
|
||||||
|
Alert --> Fix["Manuelle Korrektur durch mich (Dev)"]
|
||||||
|
Deploy --> Stable["Website bleibt 100% konsistent"]
|
||||||
|
style Stable fill:#4ade80,stroke:#333
|
||||||
|
style Alert fill:#ef4444,color:#fff
|
||||||
|
style Deploy fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Mein defensives Sicherheitsnetz: Keine Änderung erreicht den Nutzer,
|
||||||
|
ohne maschinell zertifiziert zu sein.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Die Kosten des menschlichen Versagens eliminieren</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Die meisten Fehler entstehen durch manuelle Eingriffe oder das Übersehen
|
||||||
|
von Seiteneffekten.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein Entwickler ändert das Design auf einer Unterseite und merkt nicht,
|
||||||
|
dass dadurch das Kontaktformular bricht.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In meiner Welt gibt es solche Fehler nicht. Ich investiere in{" "}
|
||||||
|
<Marker>automatisierte Wächtern</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Bevor eine Änderung live geht, prüft eine künstliche Instanz jedes Detail
|
||||||
|
Ihrer gesamten Website.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Technik schützt hier den Menschen vor Flüchtigkeitsfehlern.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Die "Fortress-Mentalität": Drei Schichten der Sicherheit</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Sorgen Sie sich nie wieder darum, ob Ihre Seite "das Wochenende überlebt
|
||||||
|
hat".
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Stabilitäts-System umfasst drei entscheidende Schutzschichten:
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Visual Regression Testing:</strong> Mein System vergleicht nach
|
||||||
|
jeder Änderung tausende Bildpunkte. Die Maschine sieht Fehler sofort.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Immutable Deployments:</strong> Ich überschreibe niemals
|
||||||
|
Live-Dateien. Wir können in Millisekunden auf eine saubere Kopie
|
||||||
|
zurückrollen.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Entkoppelte Modul-Logik:</strong> Ich baue in isolierten
|
||||||
|
Komponenten. Änderung an Punkt A gefährden niemals Punkt B.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Hobby-Ansatz vs. Industrial-Grade Reliability"
|
||||||
|
negativeLabel="Standard Agentur-Service"
|
||||||
|
negativeText="Updates auf 'Gut Glück', Hotfixes am Live-System, schleichender Qualitätsverlust"
|
||||||
|
positiveLabel="Mintel Engineering"
|
||||||
|
positiveText="0 % Risiko-Deployments, proaktive Überwachung, technologische Sorgenfreiheit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Warum Stabilität die beste Wachstums-Strategie ist</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ein stabiles System ist kein technischer Selbstzweck. Es ist die
|
||||||
|
Grundvoraussetzung für Skalierung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Nur wenn Sie blind auf Ihr technologisches Rückgrat vertrauen können,
|
||||||
|
können Sie mit voller Kraft investieren.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue keine "Schönwetter-Websites", sondern{" "}
|
||||||
|
<Marker>industrielle Software-Systeme</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Stabilität bedeutet für Sie Fokus auf Ihr Business.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ist meine 'Fortress-Architektur' richtig?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Gefährden optische Defekte oder Ausfälle direkt Ihren Ruf? Dann brauchen
|
||||||
|
Sie eine ernsthafte Architektur.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich werde aktiv, wenn{" "}
|
||||||
|
<Marker>Professionalität und Zuverlässigkeit</Marker> für Sie nicht
|
||||||
|
verhandelbar sind.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Ihre digitale Ruhe ist mein Auftrag</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Souveränität im Netz beginnt bei der Verlässlichkeit der eigenen
|
||||||
|
Werkzeuge.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir die Zeit der "kaputten Layouts" ein für alle Mal beenden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Stabilität ist die Basis für Vertrauen.</Marker> Ihr Erfolg
|
||||||
|
verdient dieses solide Fundament.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
164
apps/web/src/components/blog/posts/Group1/WordPressPlugins.tsx
Normal file
164
apps/web/src/components/blog/posts/Group1/WordPressPlugins.tsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const WordPressPlugins: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
WordPress-Plugins werden oft als die ultimative Abkürzung zum Erfolg
|
||||||
|
verkauft.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner täglichen Praxis als Digital Architect sehe ich jedoch meist das
|
||||||
|
Gegenteil: Sie sind eine teure Umleitung in eine technische Sackgasse.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Die vermeintlich "schnelle Lösung" ist am Ende{" "}
|
||||||
|
<Marker>oft die teuerste Entscheidung Ihrer digitalen Strategie</Marker>.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die "Frankenstein-Architektur" der Plugins</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Die Versuchung ist menschlich: Ein Klick, und das neue Feature ist da.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Doch was Sie wirklich tun, ist fremden Code ungefiltert in Ihr
|
||||||
|
geschäftskritisches System zu lassen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich sehe oft Instanzen, die unter der Last von 40+ Plugins förmlich
|
||||||
|
zermalmt werden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Jedes Plugin verfolgt eine eigene Logik und kämpft mit anderen Komponenten
|
||||||
|
um knappe Ressourcen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Es entsteht eine instabile <Marker>"Frankenstein-Architektur"</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie geben die Kontrolle über Ihre Plattform ab und hängen von der Roadmap
|
||||||
|
Dritter ab.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Verliert ein Plugin-Entwickler das Interesse, stehen Sie mit einer
|
||||||
|
Sicherheitslücke da.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
P1["Plugin A (Slider)"] --> Core["WordPress Core"]
|
||||||
|
P2["Plugin B (SEO)"] --> Core
|
||||||
|
P3["Plugin C (Forms)"] --> Core
|
||||||
|
Core --> Bloat["Asset-Overload (CSS/JS)"]
|
||||||
|
Bloat --> Slow["Ladezeit > 4 Sek."]
|
||||||
|
P1 -.-> P2["Konfliktmöglichkeit"]
|
||||||
|
P2 -.-> P3["Konfliktmöglichkeit"]
|
||||||
|
Slow --> Bounce["Besucher springen ab"]
|
||||||
|
style Slow fill:#fca5a5,stroke:#333
|
||||||
|
style Bounce fill:#ef4444,color:#fff`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Das Plugin-Paradoxon: Jedes 'Feature' erhöht die Wahrscheinlichkeit
|
||||||
|
eines Systemkollapses.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Die versteckten Kosten der "Gratis"-Features</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Man sagt oft, WordPress-Plugins seien kostenlos. Das ist eine gefährliche
|
||||||
|
Illusion.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Die wahren Kosten entstehen bei der Wartung.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In klassischen Agenturen zahlt ein Kunde meist hunderte Euro monatlich für
|
||||||
|
"Updates installieren".
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>reaktives Hoffen statt proaktivem Engineering</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Echter, sauberer Code altert viel langsamer als zusammengeklickte
|
||||||
|
Plugin-Konstrukte.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Technische und betriebswirtschaftliche Risiken</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Aus meiner architektonischen Sicht gibt es drei kritische Hebel:
|
||||||
|
</Paragraph>
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Die Sicherheitsfalle:</strong> Über 90 % der Angriffe auf
|
||||||
|
WordPress erfolgen über unsichere Plugins. Jede Erweiterung vergrößert
|
||||||
|
Ihre Angriffsfläche.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Die Performance-Erosion:</strong> Viele Plugins laden ihre
|
||||||
|
Scripte global – auch wenn sie gar nicht gebraucht werden.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Die technologische Sackgasse:</strong> Je mehr Plugins Sie
|
||||||
|
nutzen, desto schwerer wird ein Wechsel.{" "}
|
||||||
|
<Marker>Datenhoheit beginnt bei der Codehoheit.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der architektonische Vergleich"
|
||||||
|
negativeLabel="Plugin-Chaos"
|
||||||
|
negativeText="Abhängigkeit von Unbekannten, instabile Update-Zyklen, massiver Performance-Leck"
|
||||||
|
positiveLabel="Bespoke Architecture"
|
||||||
|
positiveText="100 % eigene Codebasis, maximale Kontrolle, Performance als Kernmerkmal"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Mein Weg: Präziser Code statt Blackbox-Plugins</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Anstatt ein tonnenschweres Plugin für eine einfache Funktion zu
|
||||||
|
installieren, schreibe ich Ihnen diese Funktion direkt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis ist ein System, das exakt das tut, was Sie brauchen – und
|
||||||
|
kein Byte mehr.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Kein Ballast, kein Sicherheitsrisiko, keine Abhängigkeit.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue keine digitalen Kartenhäuser, sondern{" "}
|
||||||
|
<Marker>echte digitale Assets</Marker>, die für Profis arbeiten.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann ist dieser Premium-Ansatz für Sie richtig?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für die Wenigen, die{" "}
|
||||||
|
<Marker>technische Brillanz zum entscheidenden Marktvorteil</Marker>{" "}
|
||||||
|
machen wollen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Planen Sie, Ihre Marke über Jahre stabil im Netz zu führen? Dann sind wir
|
||||||
|
Partner.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Investieren Sie in Ihr Fundament</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Plugins sind wie billige Anbauwände: Sie wirken im Katalog gut, aber nach
|
||||||
|
dem ersten Umzug wackeln sie.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam eine Plattform schaffen, die Ihr Business auch in
|
||||||
|
fünf Jahren noch zuverlässig trägt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>
|
||||||
|
Qualität ist die einzige Abkürzung, die wirklich funktioniert.
|
||||||
|
</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
176
apps/web/src/components/blog/posts/Group2/CookieFreeDesign.tsx
Normal file
176
apps/web/src/components/blog/posts/Group2/CookieFreeDesign.tsx
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const CookieFreeDesign: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich halte Cookie-Banner für eine der größten Design-Sünden und
|
||||||
|
Vertrauenskiller des modernen Webs.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Sie stören den Lesefluss und suggerieren eine Pseudo-Sicherheit.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Vor allem signalisieren sie eines: Ein mangelhaftes technisches Konzept.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, wie wir{" "}
|
||||||
|
<Marker>vollständig ohne Banner auskommen</Marker> – bei 100 %
|
||||||
|
DSGVO-Konformität.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Das Banner-Paradoxon: Warum wir uns das antun</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Klassische Websites laden oft ungefragt Scripte von Drittanbietern – meist
|
||||||
|
US-Konzerne.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Diese Tracker setzen Cookies, um Nutzer über verschiedene Seiten hinweg zu
|
||||||
|
verfolgen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis ist das tägliche Banner-Chaos, das den Inhalt überdeckt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Viele Besucher klicken frustriert auf "Alle akzeptieren" oder verlassen
|
||||||
|
die Seite sofort wieder.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich verfolge eine radikal andere Philosophie:{" "}
|
||||||
|
<Marker>
|
||||||
|
Wenn wir keine Daten abfließen lassen, brauchen wir auch keine
|
||||||
|
Erlaubnis.
|
||||||
|
</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Es ist eine Frage der technischen Souveränität und des digitalen Anstands.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
User["Nutzer besucht Website"] --> Logic["Mintel Privacy Engine"]
|
||||||
|
Logic --> Assets["Lokale Assets (Fonts/Scripts)"]
|
||||||
|
Logic --> Analytics["Aggregierte, anonyme Metriken"]
|
||||||
|
Assets --> NoBanner["Kein Cookie-Banner nötig"]
|
||||||
|
Analytics --> NoBanner
|
||||||
|
NoBanner --> Experience["Sofortige Experience & Vertrauen"]
|
||||||
|
style NoBanner fill:#4ade80,stroke:#333
|
||||||
|
style Experience fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Privacy by Design: Wenn die Architektur den Schutz bereits garantiert,
|
||||||
|
entfallen die rechtlichen Krücken.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Die unsichtbare Transaktion des Vertrauens</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Jedes Mal, wenn ein Nutzer Ihre Seite ohne Banner betreten kann, findet
|
||||||
|
eine unsichtbare Transaktion statt: Vertrauensaufbau.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie signalisieren Ihrem Besucher: "Ich brauche deine persönlichen Daten
|
||||||
|
nicht, um dich zu überzeugen."
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Privatsphäre ist heute ein <Marker>High-End Feature</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Systeme, die diesen Respekt technisch erzwingen und so die
|
||||||
|
Markenbindung stärken.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wir verzichten konsequent auf invasive Tracker und gewinnen dafür loyale
|
||||||
|
Nutzer.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Mein Weg zu 100 % technischer Souveränität</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Privacy-first bedeutet für mich nicht Verzicht, sondern intelligenteres
|
||||||
|
Engineering.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wir messen Ihren Erfolg – aber wir brauchen keine personenbezogenen
|
||||||
|
Profile.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Full Local Hosting:</strong> Google Fonts und sämtliche Scripte
|
||||||
|
liegen direkt auf Ihrer Infrastruktur. Kein Datentransfer zu US-Servern.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Ethische Telemetrie:</strong> Analysetools, die Nutzerwege
|
||||||
|
messen, ohne Cookies zu setzen.{" "}
|
||||||
|
<Marker>Volle Transparenz, ohne Verfolgung.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Zero-Tracking Default:</strong> Mein Framework ist so ausgelegt,
|
||||||
|
dass "Consent-Einforderung" technisch gar nicht notwendig wird.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Nutzererfahrung im harten Fakten-Check"
|
||||||
|
negativeLabel="Tracking-fokussierte Seite"
|
||||||
|
negativeText="Banner-Dschungel, rechtliche Grauzonen, Performance-Verlust durch Tracker"
|
||||||
|
positiveLabel="Cookie-Free Architecture"
|
||||||
|
positiveText="Direkter Zugang zum Content, 100 % DSGVO-Safe, Premium-Look & Feel"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Der ökonomische Vorteil von 'Banner-Freiheit'</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Consent-Management-Tools verschlechtern oft selbst die Ladezeit Ihrer
|
||||||
|
Website.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie laden schwere JavaScript-Dateien, noch bevor Ihre Botschaft erscheint.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Indem wir diese Tools eliminieren, verbessern wir die UX und Ihre
|
||||||
|
PageSpeed-Werte.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Zudem vermeiden Sie Abo-Kosten und das Risiko von Abmahnungen durch
|
||||||
|
falsche Skripte.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein <Marker>sauberes System ist wartungsarm und rechtssicher</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann macht dieser radikale Ansatz für Sie Sinn?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich verstehe mich als Partner für Marken, die Haltung zeigen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Datenschutz für Sie ein echtes Qualitätsmerkmal ist, ist dies mein
|
||||||
|
absoluter Standard.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für Unternehmen, die{" "}
|
||||||
|
<Marker>durch Überzeugung und Relevanz</Marker> verkaufen, nicht durch
|
||||||
|
Verfolgung.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Befreien Sie Ihre Inhalte</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Eine Website ohne Banner wirkt sofort aufgeräumter, ehrlicher und
|
||||||
|
wertiger.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Es ist ein klares Statement für digitale Professionalität und Respekt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Ihnen die Brücke in eine{" "}
|
||||||
|
<Marker>bannerfreie, souveräne Zukunft</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
178
apps/web/src/components/blog/posts/Group2/GDPRSystem.tsx
Normal file
178
apps/web/src/components/blog/posts/Group2/GDPRSystem.tsx
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const GDPRSystem: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
DSGVO-Konformität wird oft als lästiges bürokratisches Hindernis
|
||||||
|
wahrgenommen.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit sehe ich sie jedoch als{" "}
|
||||||
|
<Marker>das ultimative Qualitätsmerkmal für sauberes Engineering</Marker>.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ein System, das Daten schützt, ist ein gesundes System.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, wie ich Datenschutz architektonisch löse, statt ihn nur
|
||||||
|
mit Bannern zu "flicken".
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Gegen das Abmahnrisiko – mit Systemarchitektur</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Die meisten versuchen, die Anforderungen durch rechtliche Dokumente und
|
||||||
|
nachträglich installierte Banner zu lösen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist so, als würde man ein brennendes Haus mit einer neuen
|
||||||
|
Versicherungspolice löschen wollen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Es schafft eine Schein-Sicherheit, bekämpft aber nicht die Ursache des
|
||||||
|
Risikos.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Datenschutz muss bereits in der DNA des Codes verankert sein (Privacy by
|
||||||
|
Design).
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn ein System keine unnötigen Daten sammelt,{" "}
|
||||||
|
<Marker>verschwinden die Einfallstore für Probleme von selbst</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Wahre Compliance ist technisch erzwungen.</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Collection["Frontend Datenerhebung"] --> Minimize["Strikte Datenminimierung (SSO)"]
|
||||||
|
Minimize --> Encrypt["End-to-End Verschlüsselung (TLS 1.3)"]
|
||||||
|
Encrypt --> Access["Rollenbasierte Zugriffskontrolle (RBAC)"]
|
||||||
|
Access --> Audit["Automatisches Compliance-Logging"]
|
||||||
|
Audit --> Safe["Rechtssicheres & Robustes System"]
|
||||||
|
style Safe fill:#4ade80,stroke:#333
|
||||||
|
style Minimize fill:#4ade80,stroke:#333
|
||||||
|
style Encrypt fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Der Kreislauf der systemischen Sicherheit: Jede Stufe schützt Ihre
|
||||||
|
Daten, Ihren Ruf und Ihren langfristigen Business-Value.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Die ökonomische Logik des Datenschutz-Management</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Wussten Sie, dass unsaubere Datensparsamkeit ein echtes finanzielles
|
||||||
|
Risiko darstellt?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Daten, die Sie nicht besitzen, können nicht gestohlen werden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich helfe Ihnen, Ihre Prozesse so zu verschlanken, dass nur das{" "}
|
||||||
|
<Marker>geschäftskritische Minimum</Marker> fließt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Dies spart Speicher- und Rechenkapazitäten und reduziert Haftungsrisiken
|
||||||
|
massiv.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Ein schlankes Datensystem ist ein agiles System.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Compliance ist kein Kostenfaktor, sondern eine Versicherung für Ihre
|
||||||
|
digitale Zukunft.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Mein Prinzip: Privacy by Infrastructure</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich betrachte Datenschutz nicht als Text auf der Unterseite "Impressum",
|
||||||
|
sondern als Eigenschaft der Infrastruktur.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Ziel ist ein System, bei dem die Einhaltung der Regeln{" "}
|
||||||
|
<Marker>technisch unvermeidbar</Marker> ist.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Echtzeit-Anonymisierung:</strong> Logfiles und IPs werden am
|
||||||
|
Punkt des Eingangs anonymisiert. Was technisch unkenntlich ist, fällt
|
||||||
|
nicht unter die DSGVO-Strenge.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Geschlossene Datenkreisläufe:</strong> Wir vermeiden
|
||||||
|
Blackbox-Server von Drittanbietern. Jedes Formular nutzt dedizierte
|
||||||
|
Kanäle.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Compliance-as-Code:</strong> Automatisierte Tests prüfen bei
|
||||||
|
jeder Änderung, ob neue Abhängigkeiten Ihre Richtlinien gefährden.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Zwei Ansätze der digitalen Compliance"
|
||||||
|
negativeLabel="Reaktive Notlösung"
|
||||||
|
negativeText="Nachträgliche Banner-Hacks, unsichere US-Dienste, permanente Angst vor der nächsten Abmahnwelle"
|
||||||
|
positiveLabel="Proaktives Mintel Engineering"
|
||||||
|
positiveText="Technisch verankerter Schutz, volle Datenhoheit, absolute rechtliche Sorgenfreiheit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Vertrauen als härteste Währung am Markt</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Nutzer und Kunden sind heute sensibilisierter als jemals zuvor.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Eine Website, die respektvoll und ohne Banner-Nötigung mit Daten umgeht,
|
||||||
|
schafft sofortiges Vertrauen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In einer Welt voller "Dark Patterns" ist Transparenz Ihr stärkstes
|
||||||
|
Verkaufsargument.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schaffe <Marker>souveräne digitale Räume</Marker>, die für Ihre Marke
|
||||||
|
und Ihre Werte sprechen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein sauberes DSGVO-Konzept ist ein Investment in die Reputation Ihres
|
||||||
|
Unternehmens.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ich 'Sicherheits-Festungen' baue</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Mein architektonischer Ansatz ist ideal für Unternehmen in regulierten
|
||||||
|
Branchen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Begreifen Sie{" "}
|
||||||
|
<Marker>technische Exzellenz als Teil Ihrer Verantwortung</Marker>? Dann
|
||||||
|
sind wir Partner.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich werde aktiv, wenn Sicherheit für Sie nicht verhandelbar ist.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Souveränität durch saubere Technik</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Schaffen wir die Angst vor rechtlichen Fehltritten ab.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Ihnen ein System, das durch seine innere Ordnung besticht und den
|
||||||
|
Schutz technically garantiert.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen Sie uns Ihre digitale Basis für die{" "}
|
||||||
|
<Marker>nächste Stufe der Professionalität</Marker> gemeinsam gießen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Seriosität ist planbar.</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
161
apps/web/src/components/blog/posts/Group2/LocalCloud.tsx
Normal file
161
apps/web/src/components/blog/posts/Group2/LocalCloud.tsx
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const LocalCloud: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
"Die Daten liegen sicher in der Cloud." – Dieser Satz ist heute oft eine
|
||||||
|
gefährliche Halbwahrheit.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit als Digital Architect begegne ich unzähligen Unternehmen,
|
||||||
|
die die Kontrolle über ihre wichtigsten Assets verloren haben.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Sie sind abhängig von US-Infrastrukturen und rechtlichen Grauzonen.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum <Marker>lokale Datenhoheit</Marker> der wahre Hebel
|
||||||
|
für Sicherheit und Geschwindigkeit ist.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Das Märchen von der sorglosen US-Cloud</H2>
|
||||||
|
<Paragraph>Die großen Hyper-Scaler bieten Bequemlichkeit.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Doch diese Bequemlichkeit hat einen Preis: Ihre Souveränität.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Durch Gesetze wie den Cloud Act können US-Behörden theoretisch Zugriff auf
|
||||||
|
Daten verlangen, die auf US-Servern liegen – völlig egal, wo diese
|
||||||
|
physisch stehen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Für europäische Unternehmen mit sensiblen Kunden- oder Prozessdaten ist
|
||||||
|
das ein <Marker>untragbares strategisches Risiko</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer seine Datenhoheit aufgibt, macht sein Business erpressbar.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Data["Ihre geschäftskritischen Daten"] --> Hosting["Strategische Hosting-Wahl"]
|
||||||
|
Hosting --> US["US Hyper-Scaler (Abhängigkeit)"]
|
||||||
|
Hosting --> Local["European Local Cloud (Souveränität)"]
|
||||||
|
US --> Risk["Rechtliche Unsicherheit & Cloud Act"]
|
||||||
|
Local --> Compliance["DSGVO-Safe & Daten-Immunität"]
|
||||||
|
Compliance --> Speed["Niedrige Latenz & Absolute Kontrolle"]
|
||||||
|
style Local fill:#4ade80,stroke:#333
|
||||||
|
style Risk fill:#fca5a5,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Architektonische Entscheidung: Geopolitische Risiken minimieren durch
|
||||||
|
bewusste Standort-Wahl.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Technologie ist niemals neutral</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Hinter jedem Server steht eine politische und rechtliche Realität.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Indem wir auf spezialisierte europäische Infrastrukturen setzen, gewinnen
|
||||||
|
wir Immunität gegen fremde Gesetzgebungen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>digitaler Selbstschutz</Marker> auf höchstem Niveau.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Gleichzeitig profitieren wir von extrem niedrigen Latenzen und einer
|
||||||
|
Performance, die US-Systeme oft nicht liefern können.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Nähe zum Kunden bedeutet hier auch messbare Geschwindigkeit.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Mein Ansatz: Die "High-Fidelity" Infrastruktur</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Systeme, die nicht nur technisch brillant, sondern auch
|
||||||
|
strategisch unangreifbar sind.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lokalität ist bei mir kein Rückschritt, sondern{" "}
|
||||||
|
<Marker>Premium-Protection</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Physische Souveränität:</strong> Wir nutzen Rechenzentren unter
|
||||||
|
europäischem Recht. Ihre Daten verlassen niemals diesen Rechtsraum.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Entkoppelte Dienste:</strong> Ich vermeide proprietäre
|
||||||
|
US-Schnittstellen. Wir nutzen offene Standards für maximale
|
||||||
|
Architektur-Freiheit.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Sovereign Operations:</strong> Wir kontrollieren jeden Layer –
|
||||||
|
vom OS bis zur Applikation.{" "}
|
||||||
|
<Marker>Keine Blackboxes, keine Hintertüren.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der strategische Impact Ihrer Standortwahl"
|
||||||
|
negativeLabel="Standard US-Hosting"
|
||||||
|
negativeText="Rechtliche Unsicherheit, Datenexport-Risiken, schleichende Abhängigkeit"
|
||||||
|
positiveLabel="European Local Cloud"
|
||||||
|
positiveText="Volle Compliance, geopolitische Sicherheit, maximale Geschwindigkeit vor Ort"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Souveränität als Wettbewerbsvorteil</H2>
|
||||||
|
<Paragraph>
|
||||||
|
In einer Welt, die immer instabiler wird, ist "Daten-Sicherheit am
|
||||||
|
Standort" ein echtes Verkaufsargument.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Zeigen Sie Ihren Kunden, dass Sie ihre Informationen ernst nehmen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer heute proaktiv auf <Marker>lokale Cloud-Lösungen</Marker> setzt, spart
|
||||||
|
sich morgen teure und hektische Migrationswellen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schaffe Ihnen ein digitales Fundament, das politisch und rechtlich
|
||||||
|
stabil steht.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Investieren Sie in Immunität, nicht in Abhängigkeit.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann macht lokale Exzellenz für Sie Sinn?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Suchen Sie nach maximaler Unabhängigkeit von globalen Playern?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich bin der richtige Partner für Unternehmen, die{" "}
|
||||||
|
<Marker>eigene digitale Assets als Kern ihres Erfolgs</Marker> begreifen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Für Projekte "ohne Anspruch" gibt es Massenangebote. Ich baue für die, die
|
||||||
|
keine Kompromisse machen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Ihr Business, Ihre Regeln</H2>
|
||||||
|
<Paragraph>Holen Sie sich die Kontrolle über Ihre Daten zurück.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich begleite Sie beim Aufbau einer Architektur, die so unabhängig ist wie
|
||||||
|
Ihre unternehmerische Vision.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir Ihre Daten dort, wo sie sicher sind:{" "}
|
||||||
|
<Marker>In Ihrem Einflussbereich.</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
155
apps/web/src/components/blog/posts/Group2/PrivacyAnalytics.tsx
Normal file
155
apps/web/src/components/blog/posts/Group2/PrivacyAnalytics.tsx
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const PrivacyAnalytics: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
"Ich brauche Google Analytics, um zu wissen, was meine Nutzer tun." – Das
|
||||||
|
ist eine weit verbreitete Fehlannahme.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner täglichen Arbeit als Digital Architect beweise ich das
|
||||||
|
Gegenteil:{" "}
|
||||||
|
<Marker>Maximale Erkenntnis erfordert keine maximale Überwachung.</Marker>
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, wie wir Erfolg präzise messen, ohne die Privatsphäre
|
||||||
|
Ihrer Kunden an US-Konzerne zu verkaufen.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Analytics ohne den Beigeschmack der Überwachung</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Klassische Analytics-Tools funktionieren wie ein Trojaner.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie sammeln riesige Mengen an persönlichen Daten, um daraus Profile zu
|
||||||
|
bilden, die weit über Ihre Website hinausgehen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Dies zwingt Sie rechtlich in die Knie – Sie brauchen Banner, Consent-Tools
|
||||||
|
und riskieren Abmahnungen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Paradoxon:{" "}
|
||||||
|
<Marker>Die meisten dieser Daten brauchen Sie gar nicht.</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie wollen wissen, welche Inhalte funktionieren, nicht wie der Nutzer in
|
||||||
|
seiner Freizeit heißt.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph LR
|
||||||
|
Traffic["Besucherstrom"] --> Filter["Privacy-Proxy"]
|
||||||
|
Filter --> Metrics["Aggregate Metriken (Trends)"]
|
||||||
|
Filter --> Zero["Zero PII (No Personal Info)"]
|
||||||
|
Metrics --> Insights["Optimierung Ihres Business"]
|
||||||
|
Zero --> Compliance["100% DSGVO & Banner-Frei"]
|
||||||
|
style Insights fill:#4ade80,stroke:#333
|
||||||
|
style Compliance fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Ethisches Tracking: Wir gewinnen wertvolle Business-Insights, während
|
||||||
|
die Identität der Nutzer absolut geschützt bleibt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Qualität der Daten vor Quantität der Profile</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Ansatz basiert auf aggregierten Trends statt auf individueller
|
||||||
|
Verfolgung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wir messen Seitenaufrufe, Verweildauer und Conversions – aber wir tun es{" "}
|
||||||
|
<Marker>anonym und am Edge</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis ist statistisch genauso wertvoll für Ihr Marketing, aber
|
||||||
|
moralisch und rechtlich weit überlegen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wahre Souveränität bedeutet, Insights zu generieren, ohne sich von
|
||||||
|
GA4-Komplexität abhängig zu machen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Architektur für ethische Insights</H2>
|
||||||
|
<Paragraph>Ich integriere Analytics direkt in Ihre Plattform.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Keine externen Scripte bedeutet auch: Mehr Performance für Ihre Nutzer.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Cookieless Tracking:</strong> Wir erkennen wiederkehrende Nutzer
|
||||||
|
über kurzlebige, anonyme Hashes. Keine Speicherung am Endgerät nötig.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>First-Party Data:</strong> Die Daten bleiben auf Ihrem Server.
|
||||||
|
Kein Abfluss an Drittanbieter-Netzwerke zur Werbeoptimierung.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Lightweight Implementation:</strong> Statt 100KB
|
||||||
|
Analytics-Ballast nutzen wir Lösungen, die weniger als 1KB wiegen.{" "}
|
||||||
|
<Marker>Geschwindigkeit trifft auf Erkenntnis.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der strategische Vergleich im Lead-Tracking"
|
||||||
|
negativeLabel="Google Analytics / GA4"
|
||||||
|
negativeText="Abhängigkeit von Consent-Raten, Daten-Leakage, komplexe & träge Interfaces"
|
||||||
|
positiveLabel="Mintel Privacy Analytics"
|
||||||
|
positiveText="Volle Lead-Transparenz, Banner-Freiheit, blitzschnelle Auswertung"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Der unternehmerische Hebel: Banner-freie Leads</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie kein Banner brauchen, messen Sie 100 % Ihres Traffics.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Bei Google Analytics verlieren Sie oft 40-60 % der Daten, weil Nutzer den
|
||||||
|
Consent ablehnen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mein System liefert Ihnen <Marker>die echten Zahlen</Marker>, weil die
|
||||||
|
Hürde der Zustimmung technisch entfällt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ehrlichkeit zahlt sich hier direkt in der Genauigkeit Ihrer
|
||||||
|
Marketing-Planung aus.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Gute Entscheidungen brauchen ein solides Fundament – keine lückenhaften
|
||||||
|
Statistiken.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann sollten Sie umstellen?</H2>
|
||||||
|
<Paragraph>Haben Sie genug von rechtlichen Grauzonen?</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue für Entscheider, die{" "}
|
||||||
|
<Marker>Datenschutz als Teil ihres Markenversprechens</Marker> begreifen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen Sie uns Analytics von einer Last zu einer Stärke machen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Wissen ist Macht, Respekt ist Zukunft</H2>
|
||||||
|
<Paragraph>Messen Sie, was zählt – und schützen Sie, wer zählt.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich begleite Sie bei der Installation einer Lösung, die Professionalität
|
||||||
|
und Ethik brillant vereint.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Insights ohne Reue.</Marker> Das ist modernes digitales
|
||||||
|
Management.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
157
apps/web/src/components/blog/posts/Group2/VendorLockIn.tsx
Normal file
157
apps/web/src/components/blog/posts/Group2/VendorLockIn.tsx
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const VendorLockIn: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
"Wir können nicht wechseln, das wäre zu teuer."
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit als Digital Architect ist das der Anfang vom Ende jeder
|
||||||
|
technologischen Innovation.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Vendor Lock-In ist die <Marker>digitale Version einer Geiselnahme</Marker>
|
||||||
|
.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, wie wir Systeme bauen, die Ihnen jederzeit die volle
|
||||||
|
Freiheit lassen – technologisch und wirtschaftlich.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die unsichtbaren Ketten proprietärer Systeme</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Viele Unternehmen lassen sich von der Bequemlichkeit großer
|
||||||
|
SaaS-Plattformen oder Baukästen blenden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Man bekommt ein schnelles Feature, gibt aber dafür die Kontrolle über
|
||||||
|
seine Daten und seine Codebasis ab.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Nach zwei Jahren sind Sie so tief im Ökosystem eines Anbieters verstrickt,
|
||||||
|
dass ein Auszug unmöglich scheint.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Der Anbieter weiß das – und diktiert fortan die Preise und das Tempo Ihrer
|
||||||
|
Entwicklung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nenne das <Marker>technologische Erpressbarkeit</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wahre Unabhängigkeit beginnt bei der strategischen Wahl der Architektur.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Prop["Proprietäre Blackbox"] --> Lock["Steigende Kosten & Starre Features"]
|
||||||
|
Open["Open-Source-Kern & Offene Standards"] --> Flex["Volle Kontrolle & Anbieter-Freiheit"]
|
||||||
|
Lock --> Crisis["Digitale Sackgasse"]
|
||||||
|
Flex --> Evolution["Permanente Innovation"]
|
||||||
|
style Open fill:#4ade80,stroke:#333
|
||||||
|
style Crisis fill:#fca5a5,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Die Gabelung der digitalen Strategie: Wählen Sie Freiheit durch
|
||||||
|
Architektur, statt Komfort durch Abhängigkeit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Technologische Souveränität als Asset</H3>
|
||||||
|
<Paragraph>Software sollte für Sie arbeiten, nicht umgekehrt.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Indem wir auf offene Standards und portable Architekturen setzen,
|
||||||
|
verwandeln wir Code in ein echtes Firmen-Asset.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie können den Cloud-Anbieter wechseln, die Agentur tauschen oder das Team
|
||||||
|
skalieren – <Marker>ohne jemals bei Null anfangen zu müssen</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Das ist das Privileg der technologischen Elite.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Portabilität ist kein technisches Gimmick, sondern eine unternehmerische
|
||||||
|
Notwendigkeit.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Architektur der Ungebundenheit</H2>
|
||||||
|
<Paragraph>Ich baue keine "Käfige" aus fertigen Plugins.</Paragraph>
|
||||||
|
<Paragraph>Mein Framework basiert auf Modularität und Klarheit.</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Standard-basiertes Engineering:</strong> Wir nutzen
|
||||||
|
Technologien, die weltweit verstanden werden. Keine geheimen
|
||||||
|
"Spezial-Module" eines einzelnen Anbieters.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Daten-Portabilität:</strong> Ihre Daten gehören Ihnen. Zu jeder
|
||||||
|
Zeit. Wir bauen Schnittstellen, die den Export so einfach machen wie den
|
||||||
|
Import.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Cloud-agnostisches Hosting:</strong> Wir nutzen
|
||||||
|
Container-Technologie. Ob AWS, Azure oder lokale Anbieter –{" "}
|
||||||
|
<Marker>Ihr Code läuft überall gleich perfekt.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der ökonomische Vergleich Ihrer Unabhängigkeit"
|
||||||
|
negativeLabel="Closed Ecosystem (Walled Garden)"
|
||||||
|
negativeText="Diktierte Preise, starre Roadmap des Anbieters, Datenverlust bei Wechsel"
|
||||||
|
positiveLabel="Bespoke Open-Core System"
|
||||||
|
positiveText="Totale Preis-Kontrolle, unbegrenzte Features, volle Exit-Option ab Tag 1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Der strategische Hebel für langfristige Rendite</H2>
|
||||||
|
<Paragraph>Systeme ohne Lock-In altern besser.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie lassen sich schrittweise modernisieren, statt alle fünf Jahre komplett
|
||||||
|
neu gebaut werden zu müssen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das spart Millionen an Opportunitätskosten und Fehl-Investitionen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Seien Sie der Herr über Ihr digitales Schicksal.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Investieren Sie in <Marker>intelligente Unabhängigkeit</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ich 'Freiheits-Systeme' erstelle</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für Gründer, die ihr Unternehmen langfristig wertvoll
|
||||||
|
aufstellen wollen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ist digitale Exzellenz Teil Ihrer Exit-Strategie oder Ihres Erbes? Dann
|
||||||
|
brauchen Sie meine Architektur.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue keine Provisorien, sondern <Marker>nachhaltige Werte</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Freiheit ist eine Wahl</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Technologie sollte Ihnen Flügel verleihen, keine Fesseln anlegen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen Sie uns gemeinsam ein System schaffen, das so flexibel ist wie Ihr
|
||||||
|
Business.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>
|
||||||
|
Werden Sie unersetzbar durch Qualität, nicht durch Abhängigkeit.
|
||||||
|
</Marker>{" "}
|
||||||
|
Ihr Erfolg verdient absolute Freiheit.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
179
apps/web/src/components/blog/posts/Group3/BuildFirst.tsx
Normal file
179
apps/web/src/components/blog/posts/Group3/BuildFirst.tsx
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const BuildFirst: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
"Gekauft ist schneller als gebaut." – In der digitalen Welt ist das oft
|
||||||
|
der teuerste Irrtum, den ein Unternehmen begehen kann.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit als Digital Architect sehe ich täglich, wie
|
||||||
|
Standard-SaaS-Lösungen Innovationen im Keim ersticken.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Sie bezahlen für Features, die Sie nicht brauchen, während Ihnen die
|
||||||
|
entscheidenden 5 % fehlen.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum <Marker>Bauen die neue Form der Effizienz</Marker>{" "}
|
||||||
|
ist und wie Sie sich echte Marktvorteile sichern.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die Sackgasse der Generic-Software</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Standard-Software ist darauf ausgelegt, dem kleinsten gemeinsamen Nenner
|
||||||
|
zu gefallen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Man bekommt ein schnelles Resultat, läuft aber sofort gegen eine Wand,
|
||||||
|
wenn man Prozesse wirklich optimieren will.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ihre Wettbewerber nutzen wahrscheinlich exakt die gleiche Software wie
|
||||||
|
Sie.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wo bleibt da der <Marker>technologische Vorsprung</Marker>?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer nur mietet, wird niemals Marktführer. Wahre Überlegenheit entsteht
|
||||||
|
durch maßgeschneiderte Systeme.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Need["Individuelles Business-Bedürfnis"] --> Path["Strategische Entscheidung"]
|
||||||
|
Path --> Buy["Software-Abo (SaaS)"]
|
||||||
|
Path --> Build["Bespoke Architecture (Mintel)"]
|
||||||
|
Buy --> Compromise["Kompromisse & Monatliche Fixkosten"]
|
||||||
|
Build --> Competitive["Wettbewerbsvorteil & Unendliche Freiheit"]
|
||||||
|
Compromise --> Stagnation["Digitaler Stillstand"]
|
||||||
|
Competitive --> Growth["Skalierung ohne Grenzen"]
|
||||||
|
style Build fill:#4ade80,stroke:#333
|
||||||
|
style Growth fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Build vs. Buy: Investieren Sie in Ihr eigenes geistiges Eigentum statt
|
||||||
|
in die monatliche Miete von Fremdprodukten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Bauen bedeutet heute: Strategisches Kombinieren</H3>
|
||||||
|
<Paragraph>
|
||||||
|
"Bauen" heißt heute nicht mehr, jedes Rad neu zu erfinden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nutze moderne Frameworks und spezialisierte Microservices, um Ihr
|
||||||
|
individuelles System zu komponieren.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis ist so flexibel wie eine Eigenentwicklung, aber so schnell
|
||||||
|
einsatzbereit wie ein Standardprodukt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Dabei besitzen Sie den Code und kontrollieren die Roadmap.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>digitale Handwerkskunst am Puls der Zeit</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Der wirtschaftliche Case von 'Build-First'</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Die initialen Kosten für Individualsoftware wirken oft höher als eine
|
||||||
|
monatliche Lizenzgebühr.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Doch bei SaaS-Modellen steigen die Kosten linear mit Ihrem Wachstum.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Maßgeschneiderte Software amortisiert sich oft nach 12-18 Monaten – durch
|
||||||
|
wegfallende Lizenzen und massiv gesteigerte Effizienz.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie investieren in ein <Marker>Firmen-Asset</Marker>, das den Wert Ihres
|
||||||
|
Unternehmens steigert.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Software-Miete ist ein Kostenblock, Software-Bau ist eine Investition.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Exakter Prozess-Match:</strong> Das System passt sich Ihren
|
||||||
|
Abläufen an, nicht umgekehrt. Keine unnötigen Klicks mehr.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Skalierung nach Ihren Regeln:</strong> Keine künstlichen Limits
|
||||||
|
durch Nutzerzahlen oder Datenvolumen.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Sicherheits-Vorsprung:</strong> Ihr System ist kein Ziel für
|
||||||
|
Massen-Exploits, die Standard-Systeme täglich bedrohen.{" "}
|
||||||
|
<Marker>Individualität ist Schutz.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der Impact auf Ihr unternehmerisches Wachstum"
|
||||||
|
negativeLabel="Software as a Service (SaaS)"
|
||||||
|
negativeText="Abhängigkeit von Anbieter-Preisen, starre Features, kein Kapitalwertaufbau"
|
||||||
|
positiveLabel="Bespoke Asset (Mintel)"
|
||||||
|
positiveText="0 € Lizenzkosten, unbegrenzte Features, Steigerung des Firmenwerts"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Digitales Eigentum als strategischer Hebel</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Wer den Code besitzt, besitzt die Zukunft seines Unternehmens.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie jemals an einen Exit oder eine Fusion denken, ist technische
|
||||||
|
Unabhängigkeit ein entscheidender Faktor.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schaffe Ihnen eine Architektur, die{" "}
|
||||||
|
<Marker>frei von technologischen Altlasten</Marker> ist.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Bauen wir Systeme, die so einzigartig sind wie Ihre Vision.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ich 'Unikate' erschaffe</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich bin der Architekt für Gründer, die keine Lust mehr auf "geht technisch
|
||||||
|
leider nicht" haben.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ist Ihr Business-Modell am Markt einzigartig? Dann sollte es Ihre Software
|
||||||
|
auch sein.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich steige dort ein, wo{" "}
|
||||||
|
<Marker>technische Brillanz zur strategischen Waffe</Marker> wird.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Hören Sie auf zu mieten, fangen Sie an zu bauen</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Wahrer Reichtum im Digitalen entsteht durch Eigentum und Souveränität.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam ein System erschaffen, das genau so hart arbeitet wie
|
||||||
|
Sie.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>
|
||||||
|
Qualität ist kein Zufallsprodukt, sondern eine bewusste Entscheidung für
|
||||||
|
den Bau.
|
||||||
|
</Marker>{" "}
|
||||||
|
Ihr Erfolg verdient ein Original.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
167
apps/web/src/components/blog/posts/Group3/FixedPrice.tsx
Normal file
167
apps/web/src/components/blog/posts/Group3/FixedPrice.tsx
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const FixedPrice: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Sicherheitsdenken ist tief in der menschlichen Natur verwurzelt.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Am Ende eines Projekts wollen wir wissen, worauf wir uns eingelassen haben
|
||||||
|
– finanziell und zeitlich.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit als Digital Architect baue ich{" "}
|
||||||
|
<Marker>Sicherheit durch Transparenz</Marker>.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum ein intelligenter Festpreis der fairste Weg zu
|
||||||
|
exzellenten Ergebnissen ist.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die Falle der unendlichen Stunden</H2>
|
||||||
|
<Paragraph>
|
||||||
|
In der klassischen Softwareentwicklung ist Abrechnung nach Stunden (Time &
|
||||||
|
Material) der Standard.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Doch das setzt einen völlig falschen Anreiz: Je länger ein Entwickler
|
||||||
|
braucht, desto mehr verdient er.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Effizienz wird ökonomisch bestraft.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich hingegen habe mein gesamtes Business auf Geschwindigkeit und Klarheit
|
||||||
|
optimiert.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mit einem Festpreis drehen wir den Spieß um:{" "}
|
||||||
|
<Marker>Mein Anreiz ist Ihre schnellstmögliche Zufriedenheit.</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
So entsteht echte Partnerschaft statt eines Interessenkonflikts.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph LR
|
||||||
|
Goal["Ihr Projektziel"] --> Model["Wirtschaftliches Modell"]
|
||||||
|
Model --> TnM["Abrechnung nach Stunden"]
|
||||||
|
Model --> Fixed["Strategischer Festpreis (Mintel)"]
|
||||||
|
TnM --> Risk["Uferlose Kosten & Zeitdruck"]
|
||||||
|
Fixed --> Safety["Kalkulations-Sicherheit & Fokus"]
|
||||||
|
Safety --> Quality["Maximale Qualität durch Effizienz"]
|
||||||
|
style Fixed fill:#4ade80,stroke:#333
|
||||||
|
style Quality fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Das Modell des Vertrauens: Fixe Budgets schaffen den Raum für
|
||||||
|
kompromisslose inhaltliche Qualität.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Planung ist das halbe Fundament</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Ein Festpreis funktioniert nur, wenn die Vision klar ist.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Deshalb investiere ich zu Beginn massiv Zeit in die Analyse und das
|
||||||
|
"Blueprint-Design".
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn wir das Fundament präzise geplant haben, gibt es im Bauprozess keine
|
||||||
|
bösen Überraschungen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>digitales Engineering mit norddeutscher Klarheit</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie bezahlen nicht für mein Ausprobieren, sondern für die punktgenaue
|
||||||
|
Umsetzung meiner Erfahrung.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Warum meine Kalkulation hält</H2>
|
||||||
|
<Paragraph>Ich arbeite nicht mit Schätzungen, sondern mit Daten.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Durch meine automatisierte Toolchain weiß ich exakt, wie lange bestimmte
|
||||||
|
Architekturschritte dauern.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Integrierte Risiko-Abdeckung:</strong> Unvorhergesehenes ist in
|
||||||
|
meinem Preis bereits einkalkuliert. Sie tragen kein finanzielles Risiko.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Klare Deliverables:</strong> Wir definieren präzise
|
||||||
|
Meilensteine. Sie wissen zu jedem Zeitpunkt, was Sie für Ihr Investment
|
||||||
|
erhalten.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>0 % Budget-Overrun:</strong> Mein Wort gilt.{" "}
|
||||||
|
<Marker>
|
||||||
|
Zusatzkosten entstehen nur, wenn Sie den Scope aktiv erweitern.
|
||||||
|
</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der ökonomische Vergleich Ihrer Projektsicherheit"
|
||||||
|
negativeLabel="Schätzpreis nach Stunden"
|
||||||
|
negativeText="Kosten-Explosion möglich, fehlender Anreiz zur schnellen Fertigstellung"
|
||||||
|
positiveLabel="Strategischer Festpreis"
|
||||||
|
positiveText="Absolute Budgetsicherheit, Fokus auf Pure Output, maximale Effizienz"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Ihr Investment in Sicherheit</H2>
|
||||||
|
<Paragraph>Ein Festpreis befreit den Kopf.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Statt bei jedem Meeting die Uhr hämmern zu hören, konzentrieren wir uns
|
||||||
|
auf das Wesentliche: Ihren Markterfolg.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das schafft eine Atmosphäre von{" "}
|
||||||
|
<Marker>Kreativität und technologischem Mut</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer keine Angst vor dem Budget hat, baut die besseren Lösungen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Ich schaffe Ihnen den Rahmen für diese Exzellenz.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann ist ein Festpreis der richtige Weg?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Modell ist ideal für Entscheider, die unternehmerische Verantwortung
|
||||||
|
für Budgets tragen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ist Ihnen ein{" "}
|
||||||
|
<Marker>planbares Ergebnis wichtiger als vage Hoffnungen</Marker>? Dann
|
||||||
|
passen wir zusammen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für die Profis, die Qualität zum festen Preis wertschätzen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Klarheit ist kein Luxus</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir das Rätselraten bei der Preisgestaltung hinter uns.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich biete Ihnen eine Zusammenarbeit auf Augenhöhe, bei der das Ergebnis im
|
||||||
|
Mittelpunkt steht.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen Sie uns gemeinsam Ihr Projekt auf ein{" "}
|
||||||
|
<Marker>solides finanzielles Fundament</Marker> stellen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Pünktlich. Präzise. Zum vereinbarten Preis.</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
161
apps/web/src/components/blog/posts/Group3/GreenIT.tsx
Normal file
161
apps/web/src/components/blog/posts/Group3/GreenIT.tsx
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const GreenIT: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Das Internet verbraucht mehr Energie als der weltweite Flugverkehr.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Rolle als Digital Architect sehe ich Nachhaltigkeit nicht als
|
||||||
|
"Nice-to-Have", sondern als Ausdruck technischer Reife.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Effizienter Code ist grüner Code.{" "}
|
||||||
|
<Marker>
|
||||||
|
Schlanke Systeme sparen nicht nur CO2, sondern auch bares Geld.
|
||||||
|
</Marker>
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum ökologische Verantwortung und ökonomische
|
||||||
|
Profitabilität Hand in Hand gehen.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Der ökologische Fußabdruck von schlechtem Code</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Jedes unnötige Kilobyte, das durch das Netz geschickt wird, frisst Strom –
|
||||||
|
im Rechenzentrum, in den Leitungen und am Endgerät des Nutzers.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Viele moderne Websites sind heute "Adipös". Sie schleppen Megabytes an
|
||||||
|
Ballast mit sich herum.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das führt zu erhitzten Smartphones und überlasteten Servern.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nenne das <Marker>digitale Verschwendung</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Durch radikale Optimierung senken wir die CPU-Last um bis zu 80 %. Das
|
||||||
|
schont die Umwelt und beschleunigt Ihre UX.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Code["Schlanke Code-Architektur"] --> Compute["Weniger CPU-Zyklen am Server"]
|
||||||
|
Code --> Bytes["Weniger Traffic (CDN)"]
|
||||||
|
Compute --> Energy["Niedrigerer Stromverbrauch"]
|
||||||
|
Bytes --> Impact["Schnellere UX & Weniger CO2"]
|
||||||
|
Energy --> Profit["Geringere Hosting-Kosten"]
|
||||||
|
style Profit fill:#4ade80,stroke:#333
|
||||||
|
style Impact fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Die grüne Rendite: Effizienz in der Software führt direkt zu
|
||||||
|
ökologischen und finanziellen Einsparungen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Boutique-Engineering als Klimaschutz</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Standard-Agenturen greifen oft zu überladenen Baukästen, um Zeit zu
|
||||||
|
sparen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Der Preis dafür ist eine gigantische technische Ineffizienz.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Ich investiere lieber Zeit in präzises Handwerk.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein maßgeschneidertes System verbraucht nur einen Bruchteil der Ressourcen
|
||||||
|
eines WordPress-Monolithen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>Nachhaltigkeit durch technologische Brillanz</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Hebel für eine nachhaltige Infrastruktur</H2>
|
||||||
|
<Paragraph>Grüne IT beginnt bei der Wahl der Waffen.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Hier sind drei Wege, wie ich Ihren digitalen Fußabdruck minimiere:
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Static-First Architektur:</strong> Wir berechnen Seiten nicht
|
||||||
|
bei jedem Aufruf neu. Einmal generiert, tausende Male effizient
|
||||||
|
ausgeliefert.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Intelligentes Asset-Management:</strong> Keine unnötigen Fonts
|
||||||
|
oder Tracking-Skripte. Wir senden nur das absolute Minimum an Daten an
|
||||||
|
den Browser.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Grünes Server-Partnering:</strong> Ich wähle Hostinganbieter,
|
||||||
|
die zu 100 % mit erneuerbaren Energien arbeiten.{" "}
|
||||||
|
<Marker>Nachhaltigkeit über den gesamten Stack.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der Impact Ihres technologischen Fußabdrucks"
|
||||||
|
negativeLabel="Standard Legacy-Website"
|
||||||
|
negativeText="Hohe Serverlast, überladene Scripte, unnötiger CO2-Ausstoß"
|
||||||
|
positiveLabel="Eco-Performance Architecture"
|
||||||
|
positiveText="Minimale CPU-Last, schlanke Datenübertragung, 100% Green Hosting"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Wirtschaftliche Vorteile von Green IT</H2>
|
||||||
|
<Paragraph>Effizienz zahlt sich aus.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Weniger Datentransfer und geringere Serverlast bedeuten niedrigere
|
||||||
|
laufende Kosten.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Gleichzeitig belohnt Google schnelle, schlanke Seiten mit besseren
|
||||||
|
Rankings.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Nachhaltigkeit ist also kein Verzicht, sondern ein{" "}
|
||||||
|
<Marker>Wettbewerbsvorteil</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Positionieren Sie Ihr Unternehmen als Vorreiter einer neuen, bewussten
|
||||||
|
digitalen Ära.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann macht Green IT für Sie Sinn?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue für Marken, die <Marker>Werte über kurzfristige Trends</Marker>{" "}
|
||||||
|
stellen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie Ihre CSR-Ziele auch digital ernst nehmen, bin ich Ihr Architekt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Schaffen wir Systeme, die auch für die nächste Generation noch vorbildlich
|
||||||
|
sind.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Weniger ist mehr Zukunft</H2>
|
||||||
|
<Paragraph>Gutes Design ist immer auch sparsames Design.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam Ihren digitalen Ballast abwerfen und stattdessen in
|
||||||
|
echte Effizienz investieren.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Purer Output bei minimalem Input.</Marker> Das ist das Ziel meines
|
||||||
|
Boutique-Ansatzes.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Für Ihr Business und unseren Planeten.</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
157
apps/web/src/components/blog/posts/Group3/Longevity.tsx
Normal file
157
apps/web/src/components/blog/posts/Group3/Longevity.tsx
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const Longevity: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
In der schnelllebigen Tech-Welt gilt Software oft schon nach zwei Jahren
|
||||||
|
als veraltet.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich halte das für eine massive Verschwendung von Kapital und Energie.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Wahre Qualität zeigt sich darin, wie ein System altert.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, wie wir <Marker>digitale Werte für Jahrzehnte</Marker>{" "}
|
||||||
|
schaffen – durch vorausschauende Architektur und zeitlose Standards.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Gegen die Wegwerf-Mentalität im Code</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Viele Agenturen bauen "Schönwetter-Lösungen", die nur bis zur nächsten
|
||||||
|
Trend-Welle halten.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Man setzt auf kurzlebige Frameworks oder proprietäre Blackboxes, die nach
|
||||||
|
kurzer Zeit nicht mehr unterstützt werden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis: Alle drei Jahre ist ein teurer Relaunch fällig.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nenne das <Marker>geplante Obsoleszenz der Software</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Boutique-Ansatz ist das Gegenteil davon: Ich baue Systeme, die durch
|
||||||
|
ihre innere Ordnung und Robustheit bestechen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Guter Code ist wie eine solide Immobilie – er braucht Pflege, aber keine
|
||||||
|
Abrissbirne.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Logic["Zukunftsfähige Kern-Logik"] --> Standards["Offene Web-Standards"]
|
||||||
|
Logic --> Modular["Modulare Komponenten"]
|
||||||
|
Standards --> Decade["Lebensdauer > 10 Jahre"]
|
||||||
|
Modular --> Update["Einfache Teil-Modernisierung"]
|
||||||
|
Decade --> ROI["Maximaler Return on Investment"]
|
||||||
|
Update --> ROI
|
||||||
|
style ROI fill:#4ade80,stroke:#333
|
||||||
|
style Decade fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Architektur der Langlebigkeit: Durch die Trennung von Logik und Trends
|
||||||
|
sichern wir den Wert Ihrer digitalen Investition über Generationen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Die Ästhetik der Zeitlosigkeit</H3>
|
||||||
|
<Paragraph>Langlebigkeit hat auch eine visuelle Komponente.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich vermeide "modische" Spielereien, die morgen schon peinlich wirken
|
||||||
|
könnten.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wahre technische Eleganz ist schlicht, funktional und hochpräzise.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein <Marker>industrieller, klarer Look</Marker> altert langsamer als jede
|
||||||
|
verspielte Grafik.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schaffe Designs, die heute beeindrucken und in fünf Jahren noch immer
|
||||||
|
souverän wirken.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Prinzipien für ewige Systeme</H2>
|
||||||
|
<Paragraph>Wie baut man Software, die nicht veraltet?</Paragraph>
|
||||||
|
<Paragraph>Durch die kompromisslose Auswahl der Fundamente:</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Bohrmaschinen statt Spielzeug:</strong> Ich nutze nur
|
||||||
|
Technologien mit breitem industriellem Rückhalt. Keine "Hype"-Tools ohne
|
||||||
|
Langzeit-Sicherheit.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Strict Separation of Concerns:</strong> Wir trennen Design,
|
||||||
|
Daten und Logik so sauber, dass man Einzelteile austauschen kann, ohne
|
||||||
|
das Ganze zu gefährden.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Automatisierte Evolution:</strong> Mein System prüft sich
|
||||||
|
selbst. Wir erkennen frühzeitig, wenn externe Standards sich ändern und
|
||||||
|
passen uns proaktiv an.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der wirtschaftliche Impact der Halbwertszeit"
|
||||||
|
negativeLabel="Trend-fokussierte Agentur"
|
||||||
|
negativeText="Relaunch alle 3 Jahre nötig, technologische Schulden, hohe Lizenz-Abhängigkeit"
|
||||||
|
positiveLabel="Mintel Longevity Standard"
|
||||||
|
positiveText="Laufzeit von 10+ Jahren möglich, Code als bleibendes Asset, volle Souveränität"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Rendite durch technologische Beständigkeit</H2>
|
||||||
|
<Paragraph>Wahrer ROI entsteht erst über die Zeit.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer nicht ständig neu bauen muss, hat mehr Kapital für echtes Wachstum zur
|
||||||
|
Verfügung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Langlebige Software ist zudem das{" "}
|
||||||
|
<Marker>nachhaltigste digitale Werkzeug</Marker>, das Sie besitzen können.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Investieren Sie in Substanz, nicht in flüchtige Effekte.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Vorsprung hat der, dessen Fundament felsenfest steht.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann ist 'Ewigkeit' Ihr Ziel?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Suchen Sie einen Partner für den Aufbau einer digitalen Marke, die Bestand
|
||||||
|
hat?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für Gründer, die <Marker>Generationen-Projekte</Marker>{" "}
|
||||||
|
führen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie technologische Stabilität als Teil Ihres Vermächtnisses
|
||||||
|
begreifen, bin ich Ihr Architekt.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Werte schaffen, die bleiben</H2>
|
||||||
|
<Paragraph>Digitale Exzellenz misst sich am Erfolg von morgen.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam ein System gießen, das die Zeit überdauert.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Qualität ist Beständigkeit.</Marker> Ihr Erfolg verdient eine
|
||||||
|
Architektur ohne Verfallsdatum.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
162
apps/web/src/components/blog/posts/Group3/MaintenanceNoCMS.tsx
Normal file
162
apps/web/src/components/blog/posts/Group3/MaintenanceNoCMS.tsx
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const MaintenanceNoCMS: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ein CMS wird oft als Befreiung verkauft. In der Realität ist es oft der
|
||||||
|
Anfang einer teuren Abhängigkeit.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Praxis sehe ich, wie Unternehmen hunderte Stunden in die Pflege
|
||||||
|
von Systemen investieren, die sie eigentlich entlasten sollten.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum <Marker>Content-Management ohne Ballast</Marker>{" "}
|
||||||
|
der wahre Hebel für Geschwindigkeit und Fokus ist.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Der CMS-Wartungs-Albtraum</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Klassische CMS-Lösungen (wie WordPress oder Typo3) sind komplexe
|
||||||
|
Software-Monster.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie müssen ständig aktualisiert werden, weil wöchentlich neue
|
||||||
|
Sicherheitslücken auftauchen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Diese Wartung frisst Zeit und Geld, ohne einen einzigen Cent Mehrwert für
|
||||||
|
Ihr Business zu generieren.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nenne das <Marker>technische Sisyphusarbeit</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Warum ein ganzes Kraftwerk betreiben, wenn Sie nur eine Glühbirne zum
|
||||||
|
Leuchten bringen wollen?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wahre Effizienz bedeutet, Komplexität radikal zu streichen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Need["Änderung am Inhalt"] --> Path["Update-Prozess"]
|
||||||
|
Path --> CMS["Klassisches CMS (Update/Backup/DB)"]
|
||||||
|
Path --> Git["Git-based Workflow (Mintel)"]
|
||||||
|
CMS --> Risk["Sicherheitslücken & Träge Ladezeit"]
|
||||||
|
Git --> Speed["Instant Go-Live & Maximale Sicherheit"]
|
||||||
|
Speed --> Focus["Fokus auf Kunden & Strategie"]
|
||||||
|
style Git fill:#4ade80,stroke:#333
|
||||||
|
style Focus fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Der schlanke Workflow: Wir eliminieren die Datenbank-Ebene, um
|
||||||
|
Angriffsflächen zu schließen und das Tempo zu verdoppeln.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Content as Code: Die Architektur der Profis</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Anstatt sich mit unübersichtlichen Admin-Backends herumzuschlagen,
|
||||||
|
integrieren wir Inhalte direkt in den Deployment-Prozess.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das bedeutet: Wenn Sie etwas ändern wollen, geschieht das in einer
|
||||||
|
sauberen, versionierten Umgebung.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Keine Datenbanken, die korrumpieren können. Kein Backend, das gehackt
|
||||||
|
werden kann.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>Sicherheit durch Simplizität</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Inhalte werden so stabil wie die Architektur selbst.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Warum "Kein CMS" die beste CMS-Strategie ist</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Vermeintlich "einfache" Editoren führen oft zu zerstückelten Layouts und
|
||||||
|
inkonsistentem Design.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Durch meinen Code-basierten Ansatz bleibt Ihre Markenidentität zu 100 %
|
||||||
|
geschützt.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>0 % Sicherheitsrisiko:</strong> Ohne Datenbank-Schnittstelle
|
||||||
|
gibt es keine Login-Bereiche für Hacker. Ihre Seite ist faktisch immun.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Blitzschnelle Änderungen:</strong> Wir nutzen automatisierte
|
||||||
|
Pipelines. Eine Textänderung ist in Sekunden weltweit live.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Reduzierte Fixkosten:</strong> Sie sparen sich teure
|
||||||
|
Wartungsverträge für "Backend-Security".{" "}
|
||||||
|
<Marker>Geld, das produktiver in Marketing fließen kann.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der ökonomische Vergleich Ihres Betriebsaufwands"
|
||||||
|
negativeLabel="Standard CMS-Betrieb"
|
||||||
|
negativeText="Wöchentliche Sicherheits-Updates, monatliche Hosting-Hacks, träge Performance"
|
||||||
|
positiveLabel="Mintel Low-Maintenance"
|
||||||
|
positiveText="0 Wartungs-Minuten pro Monat, felsenfeste Stabilität, Höchstgeschwindigkeit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Fokus auf das, was zählt: Ihre Botschaft</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Die wertvollste Ressource in Ihrem Unternehmen ist Aufmerksamkeit.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Verschwenden Sie diese nicht mit technischen Nebenschauplätzen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Ihnen ein System, das einfach funktioniert – im Hintergrund,
|
||||||
|
lautlos und effizient.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Investieren Sie in <Marker>Inhaltliche Exzellenz</Marker> statt in
|
||||||
|
technische Reparaturen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Befreien Sie Ihr Business von der CMS-Last.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Wann ist dieser minimalistische Weg für Sie richtig?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für Entscheider, deren Kerngeschäft nicht das Betreiben einer
|
||||||
|
IT-Infrastruktur ist.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wollen Sie eine Website, die einfach{" "}
|
||||||
|
<Marker>immer online und immer schnell</Marker> ist?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich bin der Architekt für alle, die Klarheit und Ergebnisorientierung über
|
||||||
|
Feature-Listen stellen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Simplizität ist das neue High-End</H2>
|
||||||
|
<Paragraph>Die besten Systeme sind die, die man nicht spürt.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam den Ballast abwerfen und uns auf Ihren Erfolg
|
||||||
|
konzentrieren.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Maximale Wirkung bei minimalem technischem Overhead.</Marker> Ihr
|
||||||
|
Erfolg verdient dieses effiziente Fundament.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
164
apps/web/src/components/blog/posts/Group4/CRMSync.tsx
Normal file
164
apps/web/src/components/blog/posts/Group4/CRMSync.tsx
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const CRMSync: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Die wertvollsten Daten Ihres Unternehmens liegen oft in Silos versteckt.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ihre Website sammelt Leads, aber Ihr CRM "weiß" nichts davon – oder erst
|
||||||
|
nach manueller Übertragung.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>Ich beende das Zeitalter der Daten-Inseln.</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, wie <Marker>nahtlose CRM-Integration</Marker> Ihre
|
||||||
|
Marketing-Effizienz verdoppelt und menschliche Fehler eliminiert.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Das Problem der manuellen Daten-Brücke</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Viele Unternehmen nutzen Kontaktformulare, die lediglich E-Mails
|
||||||
|
versenden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein Mitarbeiter muss diese E-Mails lesen und die Daten händisch in
|
||||||
|
Salesforce, HubSpot oder Pipedrive übertragen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist nicht nur zeitfressend, sondern auch eine Riskante Fehlerquelle.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Leads gehen verloren, die Reaktionszeit sinkt und die Datenqualität
|
||||||
|
leidet.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In einer digitalen Welt ist{" "}
|
||||||
|
<Marker>manuelle Datenpflege ein Anachronismus</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wahre Professionalität bedeutet: Die Software erledigt die Arbeit im
|
||||||
|
Hintergrund.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph LR
|
||||||
|
Lead["Besucher sendet Formular"] --> Edge["Mintel Validation Layer"]
|
||||||
|
Edge --> Transform["Intelligente Daten-Aufbereitung"]
|
||||||
|
Transform --> CRM["CRM (Salesforce/HubSpot/etc.)"]
|
||||||
|
CRM --> Notify["Instat Sales-Benachrichtigung"]
|
||||||
|
CRM --> AutoResp["Personalisierte Auto-Antwort"]
|
||||||
|
style CRM fill:#4ade80,stroke:#333
|
||||||
|
style Notify fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Der automatisierte Lead-Fluss: Von der ersten Interaktion bis zum
|
||||||
|
CRM-Eintrag in Millisekunden – ohne menschliches Eingreifen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Echtzeit-Synchronität als Wettbewerbsvorteil</H3>
|
||||||
|
<Paragraph>Kunden erwarten heute sofortige Reaktionen.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ein Lead, der erst nach 24 Stunden kontaktiert wird, ist oft schon beim
|
||||||
|
Wettbewerber gelandet.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Meine Architektur sorgt dafür, dass Ihre Sales-Teams{" "}
|
||||||
|
<Marker>Sekunden nach dem Klick</Marker> arbeitsfähig sind.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wir automatisieren die Qualifizierung und Zuweisung, damit keine Zeit
|
||||||
|
verloren geht.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Geschwindigkeit ist im Digitalvertrieb der entscheidende Faktor.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Hebel für Ihre Daten-Souveränität</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Integration bedeutet für mich mehr als nur das Verbinden von APIs.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Es geht um die Schaffung eines <Marker>Single Source of Truth</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Resiliente API-Anbindung:</strong> Wir bauen Puffer-Systeme.
|
||||||
|
Sollte Ihr CRM kurzzeitig offline sein, gehen keine Leads verloren.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Smart Data Enrichment:</strong> Wir bereiten die Daten so auf,
|
||||||
|
dass Ihr Sales-Team sofort alle Kontext-Infos hat.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>DSGVO-konforme Übertragung:</strong> Alle Daten fließen
|
||||||
|
Ende-zu-Ende verschlüsselt und nach strengsten europäischen Standards.{" "}
|
||||||
|
<Marker>Sicherheit trifft auf Komfort.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der Impact auf Ihre Sales-Performance"
|
||||||
|
negativeLabel="Manuelle E-Mail-Übertragung"
|
||||||
|
negativeText="Hohe Fehlerquote, langsame Response-Time, lückenhafte Daten-Historie"
|
||||||
|
positiveLabel="Automatisierte CRM-Sync"
|
||||||
|
positiveText="0 % Datenverlust, Echtzeit-Benachrichtigung, perfekte Lead-Transparenz"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Warum die 'Billig-Lösung' hier teuer wird</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Einfache Plugins für CRM-Anbindungen sind oft instabil und unflexibel.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sie brechen bei Updates oder können individuelle Felder nicht korrekt
|
||||||
|
abbilden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Ihnen eine <Marker>robuste Brücke</Marker>, die mit Ihren
|
||||||
|
Anforderungen mitwächst.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Verlässlichkeit ist in der Lead-Generierung die wichtigste Eigenschaft.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Vermeiden Sie das Risiko von Daten-Silos durch professionelles
|
||||||
|
Engineering.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ich 'Daten-Autobahnen' baue</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Fokus liegt auf Unternehmen, deren Erfolg von der Qualität ihrer
|
||||||
|
Leads abhängt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Begreifen Sie Ihr <Marker>CRM als Herzstück Ihrer Wertschöpfung</Marker>?
|
||||||
|
Dann bin ich Ihr Architekt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schlage die Brücke zwischen Ihrer Website und Ihrem Erfolg.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Lassen Sie Ihre Daten fließen</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Technologie sollte Reibung eliminieren, nicht neue Hürden schaffen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam Ihre Website zu einem integralen Bestandteil Ihres
|
||||||
|
Sales-Motors machen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Präzision in der Schnittstelle, Klarheit im Ergebnis.</Marker> Ihr
|
||||||
|
Business verdient einen reibungslosen Datenfluss.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
159
apps/web/src/components/blog/posts/Group4/CleanCode.tsx
Normal file
159
apps/web/src/components/blog/posts/Group4/CleanCode.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const CleanCode: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Code ist nicht nur eine Anweisung für Maschinen. Es ist das Fundament
|
||||||
|
Ihres digitalen Unternehmenswertes.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit als Digital Architect sehe ich oft "historisch
|
||||||
|
gewachsenen" Code, der eher einem verfilzten Knäuel gleicht als einer
|
||||||
|
Architektur.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum <Marker>Clean Code kein Luxus</Marker> ist, sondern
|
||||||
|
die harte Währung für Ihre Zukunftsfähigkeit.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die versteckten Kosten von 'Quick-and-Dirty'</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Softwareentwicklung unter Zeitdruck führt oft zu unsauberen Abkürzungen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Kurzfristig spart das Stunden, langfristig erstickt es jede Innovation.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Unsauberer Code wird mit jedem Monat schwerer zu warten und zu erweitern.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nenne das <Marker>technologische Verstopfung</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ihre Entwickler verbringen dann 80 % ihrer Zeit mit Bugfixing, statt neue
|
||||||
|
Features zu bauen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Clean Code hingegen ist eine Investition in die Geschwindigkeit von
|
||||||
|
morgen.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Clean["Clean Code Architektur"] --> Easy["Einfache Wartbarkeit"]
|
||||||
|
Clean --> Scalable["Schnelle Erweiterbarkeit"]
|
||||||
|
Easy --> LowCost["Geringe langfristige Kosten"]
|
||||||
|
Scalable --> Market["Schnellerer Markteintritt (Time-to-Market)"]
|
||||||
|
LowCost --> Profit["Höherer ROI für Ihr Business"]
|
||||||
|
Market --> Profit
|
||||||
|
style Profit fill:#4ade80,stroke:#333
|
||||||
|
style Clean fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Die Logik der Qualität: Sauberer Code zahlt sich durch sinkende
|
||||||
|
Betriebskosten und steigendes Innovationstempo aus.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Code als Kommunikationsmittel</H3>
|
||||||
|
<Paragraph>Code wird viel öfter gelesen als geschrieben.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Deshalb ist Klarheit mein oberstes Gebot. Ein gut strukturiertes System
|
||||||
|
"erklärt" sich selbst.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das macht Sie unabhängig von einzelnen Personen. Jedes neue Teammitglied
|
||||||
|
findet sich sofort zurecht.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>Souveränität durch Transparenz</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schreibe Code für Menschen, nicht nur für den Compiler.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Prinzipien für eine glasklare Architektur</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Wie unterscheidet sich meine Arbeit von Standard-Agentur-Code?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Durch die kompromisslose Anwendung von Engineering-Prinzipien:
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Single Responsibility:</strong> Jede Komponente tut genau eine
|
||||||
|
Sache – und die perfekt. Das macht Fehlerbehebungen zum Kinderspiel.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Automatisierte Selbstkontrolle:</strong> Bevor eine Änderung
|
||||||
|
live geht, wird sie von hunderten automatischen Tests geprüft.{" "}
|
||||||
|
<Marker>Qualität ist bei mir systemimmanent.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Dokumentation im Design:</strong> Ich baue Systeme, deren
|
||||||
|
Struktur so logisch ist, dass Handbücher überflüssig werden.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der wirtschaftliche Vergleich der Codequalität"
|
||||||
|
negativeLabel="Agentur-Standard (Spaghetti)"
|
||||||
|
negativeText="Chaos-Abhängigkeit, expontentiell steigende Wartungskosten, Angst vor jedem Update"
|
||||||
|
positiveLabel="Mintel Boutique Standard"
|
||||||
|
positiveText="Lineares Wachstum, sinkende technische Schulden, volle Kontrolle ab Tag 1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Wahrer Profit durch technische Brillanz</H2>
|
||||||
|
<Paragraph>Clean Code senkt Ihre Betriebskosten massiv.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Es ist die Basis für Skalierbarkeit. Nur ein sauberes Fundament trägt ein
|
||||||
|
Hochhaus.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie planen, Ihr digitales Business über Jahre zu führen, ist{" "}
|
||||||
|
<Marker>Codequalität Ihre wichtigste Versicherung</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Software sollte ein Vermögenswert sein, keine Verbindlichkeit.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Gießen wir ein Fundament, das Stand hält.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ich 'Pures Gold' schreibe</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich bin der Architekt für Entscheider, die den Wert ihrer digitalen Assets
|
||||||
|
langfristig maximieren wollen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Haben Sie genug von Systemen, die bei jeder Änderung zusammenbrechen? Dann
|
||||||
|
passen wir zusammen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schaffe <Marker>Ruhe im Maschinenraum</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Qualität gewinnt immer</H2>
|
||||||
|
<Paragraph>Es gibt keine Abkürzung zu exzellenter Software.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam den Ballast von unsauberem Code hinter uns.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Ihnen eine Architektur, die nicht nur heute funktioniert, sondern
|
||||||
|
auch in vielen Jahren noch durch ihre{" "}
|
||||||
|
<Marker>Eleganz und Klarheit</Marker> besticht.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Purer Code. Purere Ergebnisse.</Marker> Ihr Erfolg verdient dieses
|
||||||
|
Niveau.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
165
apps/web/src/components/blog/posts/Group4/HostingOps.tsx
Normal file
165
apps/web/src/components/blog/posts/Group4/HostingOps.tsx
Normal file
@@ -0,0 +1,165 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const HostingOps: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ein brillanter Webauftritt ist wertlos, wenn er im entscheidenden Moment
|
||||||
|
nicht erreichbar ist.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Hosting ist für mich kein notwendiges Übel, sondern das schlagende Herz
|
||||||
|
Ihrer digitalen Präsenz.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, wie <Marker>Industrial-Grade Operations</Marker> dafür
|
||||||
|
sorgen, dass Sie auch bei massiven Traffic-Spitzen ruhig schlafen können.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Das Märchen vom 'Billig-Hosting'</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Viele Unternehmen sparen am falschen Ende und wählen Shared-Hosting für
|
||||||
|
wenige Euro.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Der Preis dafür ist eine geteilte Performance und ein erhöhtes
|
||||||
|
Sicherheitsrisiko.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ist Ihr Nachbar auf dem Server Ziel einer Attacke, geht Ihre Seite mit
|
||||||
|
unter.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist kein vernünftiges Geschäftsmodell, sondern ein digitales
|
||||||
|
Glücksspiel.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In meiner Welt gibt es keine Kompromisse bei der Erreichbarkeit.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Ihre Marke verdient eine eigene Umlaufbahn.</Marker>
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Deploy["Automatisches Deployment (Git Push)"] --> Build["Isolierte Container-Builds"]
|
||||||
|
Build --> Global["Global CDN Verteilung"]
|
||||||
|
Global --> User["Nutzer (Weltweit blitzschnell)"]
|
||||||
|
Global --> Failover["Automatisches Failover (Sicherheit)"]
|
||||||
|
style Global fill:#4ade80,stroke:#333
|
||||||
|
style Failover fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Die Cloud-Native Architektur: Skalierung per Knopfdruck und
|
||||||
|
Ausfallsicherheit durch globale Redundanz.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Infrastruktur als Code: Die moderne Festung</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Ich konfiguriere Server nicht manuell durch Klicken in irgendwelchen
|
||||||
|
Web-Interfaces.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schreibe die Infrastruktur als Code (IaC). Das bedeutet absolute
|
||||||
|
Reproduzierbarkeit und Fehlerfreiheit.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Sollte ein Rechenzentrum ausfallen, "erwacht" Ihr System an einem anderen
|
||||||
|
Ort in Minuten wieder zum Leben.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist das Niveau von <Marker>Hochverfügbarkeit</Marker>, das ich für
|
||||||
|
meine Kunden realisiere.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ihre Website wird zu einem unverwüstlichen digitalen Asset.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Prinzipien für reibungslose Operations</H2>
|
||||||
|
<Paragraph>Was macht eine professionelle Hosting-Strategie aus?</Paragraph>
|
||||||
|
<Paragraph>Es sind die unsichtbaren Schutzschilde:</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Edge Computing & Caching:</strong> Ihre Seite wird direkt dort
|
||||||
|
ausgeliefert, wo der Nutzer ist. Ob in New York oder Berlin – Ladezeiten
|
||||||
|
unter 1 Sekunde sind der Standard.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Automatisierte Backups & Rollbacks:</strong> Mit einem Klick
|
||||||
|
können wir jede Version der Vergangenheit wiederherstellen.{" "}
|
||||||
|
<Marker>Keine Angst vor Fehlern.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Echtzeit-Monitoring:</strong> Ich sehe Probleme, bevor Ihre
|
||||||
|
Kunden sie bemerken. Proaktives Handeln ist besser als reaktives
|
||||||
|
Flicken.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der Impact auf Ihre Betriebssicherheit"
|
||||||
|
negativeLabel="Standard Shared-Hosting"
|
||||||
|
negativeText="Träge Ladezeiten bei Last, unsichere Nachbarschaft, manuelle Wartung"
|
||||||
|
positiveLabel="Bespoke Managed Infra"
|
||||||
|
positiveText="Unbegrenzte Skalierung, maximale Isolation, 100 % automatisierte Sicherheit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Warum Sorgenfreiheit ein Investment ist</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Was kostet Sie eine Stunde Website-Ausfall während einer wichtigen
|
||||||
|
Kampagne?
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Meist ist dieser Schaden weitaus höher als die Investition in eine solide
|
||||||
|
Architektur.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schlage die Brücke zwischen Hochleistungstechnologie und
|
||||||
|
geschäftlichem Erfolg.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen Sie uns Ihre Plattform auf ein{" "}
|
||||||
|
<Marker>industrielles Fundament</Marker> stellen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ruhe im Betrieb ist das Ergebnis von erstklassiger Planung.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ich 'Unverwüstlichkeit' baue</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für Gründer, die über das Stadium von "es läuft irgendwie"
|
||||||
|
hinaus sind.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ist Ihre Website das Schaufenster Ihres Erfolgs? Dann sollte sie auf dem
|
||||||
|
besten Fundament stehen, das die Technik bietet.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich bin der Architekt für <Marker>kompromisslose Verfügbarkeit</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Ihre Plattform verdient das Beste</H2>
|
||||||
|
<Paragraph>Lassen wir das Basteln im Maschinenraum hinter uns.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Ihnen eine Umgebung, die mit Ihren Ambitionen mitwächst.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Sicher. Schnell. Skalierbar.</Marker> Das ist modernes Hosting auf
|
||||||
|
Boutique-Niveau.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Gönnen Sie Ihrem Business die technologische Souveränität, die es
|
||||||
|
verdient.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
147
apps/web/src/components/blog/posts/Group4/NoTemplates.tsx
Normal file
147
apps/web/src/components/blog/posts/Group4/NoTemplates.tsx
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const NoTemplates: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
Vorlagen sind die Fast-Food-Lösung des Web-Designs: Schnell verfügbar,
|
||||||
|
aber auf Dauer ungesund für Ihre Marke.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Arbeit als Digital Architect begegne ich ständig Unternehmen,
|
||||||
|
die in der Beliebigkeit von Standard-Templates versinken.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum <Marker>Zero-Template-Architektur</Marker> der
|
||||||
|
einzige Weg zu echter digitaler Distinktion ist.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Die Falle der visuellen Gleichschaltung</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Sie ein Template nutzen, nutzen Sie die gleiche Basis wie tausende
|
||||||
|
andere Unternehmen weltweit.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis ist eine "digitale Uniform", die Ihre Einzigartigkeit im Keim
|
||||||
|
erstickt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Kunden spüren unbewusst, wenn eine Seite "von der Stange" kommt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Es signalisiert fehlende Investitionsbereitschaft und mangelnde Vision.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich nenne das <Marker>ästhetische Kapitulation</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wahre Markenbildung braucht Raum zum Atmen und ein Fundament, das nur für
|
||||||
|
Sie gegossen wurde.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Need["Individuelle Marken-Botschaft"] --> Path["Design-Entscheidung"]
|
||||||
|
Path --> Temp["Fertig-Template (Masse)"]
|
||||||
|
Path --> Custom["Bespoke Component Design (Mintel)"]
|
||||||
|
Temp --> Bland["Visuelle Beliebigkeit & Hoher Ballast"]
|
||||||
|
Custom --> Distinct["Maximale Unterscheidbarkeit & Pure Performance"]
|
||||||
|
Bland --> NoTrust["Vertrauensverlust"]
|
||||||
|
Distinct --> Authority["Marken-Autorität"]
|
||||||
|
style Custom fill:#4ade80,stroke:#333
|
||||||
|
style Authority fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Bespoke vs. Template: Investieren Sie in ein digitales Unikat, das Ihre
|
||||||
|
Marktposition untermauert statt sie zu verwässern.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Boutique-Design: Jedes Pixel hat einen Zweck</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Templates enthalten Code für hunderte Optionen, die Sie nie nutzen werden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Dieser Ballast verlangsamt Ihre Seite und verwässert Ihre Botschaft.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In meinem Boutique-Ansatz entwickeln wir jede Komponente von Grund auf.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis ist eine <Marker>hochpräzise Maschine</Marker>, die exakt auf
|
||||||
|
Ihre Ziele ausgerichtet ist.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>Schlank. Schnell. Unverwechselbar.</Paragraph>
|
||||||
|
|
||||||
|
<H2>Warum technisches Maßwerk rentabler ist</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Templates sind starr. Wenn Ihr Business wächst, wird das Template schnell
|
||||||
|
zur Wachstumsbremse.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Anpassungen am Standard-Code sind oft teurer als ein kompletter Neubau.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich baue Systeme, die <Marker>evolutionär</Marker> sind.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Unbegrenzte Design-Freiheit:</strong> Wir biegen den Code nach
|
||||||
|
Ihrer Vision, nicht umgekehrt. Jede Interaktion folgt Ihrer Marken-DNA.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Zukunftssicheres Asset:</strong> Da wir keine
|
||||||
|
Drittanbieter-Themen nutzen, gibt es keine Abhängigkeiten von deren
|
||||||
|
Update-Zyklen.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Maximale Konversions-Rate:</strong> Wir optimieren Layouts exakt
|
||||||
|
nach dem Nutzerverhalten Ihres Zielmarktes.{" "}
|
||||||
|
<Marker>Keine Kompromisse.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der Impact auf Ihre digitale Reputation"
|
||||||
|
negativeLabel="Premium Template-Kauf"
|
||||||
|
negativeText="Gefahr der Verwechslung, technischer Overhead, eingeschränkte Flexibilität"
|
||||||
|
positiveLabel="Bespoke Digital Object"
|
||||||
|
positiveText="Absolut einzigartig, 100 % performant, unendlich skalierbar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Wann ist 'Bespoke' der einzige Weg?</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Ist Ihr Unternehmen Marktführer oder auf dem Weg dorthin? Dann darf Ihre
|
||||||
|
Website nicht nach "Durchschnitt" aussehen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich arbeite für Entscheider, die{" "}
|
||||||
|
<Marker>Qualität als Wettbewerbsvorteil</Marker> begreifen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wenn Differenzierung über Ihren Erfolg entscheidet, bin ich Ihr Architekt.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Ein Unikat für Ihren Erfolg</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Hören Sie auf, sich in fremde Formen pressen zu lassen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam ein digitales Denkmal setzen, das so unverwechselbar
|
||||||
|
ist wie Ihr unternehmerischer Fingerabdruck.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Pures Handwerk. Maximale Distinktion.</Marker> Ihr Erfolg verdient
|
||||||
|
dieses Niveau.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
147
apps/web/src/components/blog/posts/Group4/ResponsiveDesign.tsx
Normal file
147
apps/web/src/components/blog/posts/Group4/ResponsiveDesign.tsx
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { H2, H3 } from "../../../ArticleHeading";
|
||||||
|
import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
|
||||||
|
import { IconList, IconListItem } from "../../../IconList";
|
||||||
|
import { Mermaid } from "../../../Mermaid";
|
||||||
|
import { Marker } from "../../../Marker";
|
||||||
|
import { ComparisonRow } from "../../../Landing/ComparisonRow";
|
||||||
|
|
||||||
|
export const ResponsiveDesign: React.FC = () => (
|
||||||
|
<>
|
||||||
|
<LeadParagraph>
|
||||||
|
"Responsive" bedeutet heute viel mehr als nur das Nebeneinander-Rücken von
|
||||||
|
Boxen.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
In meiner Welt als Digital Architect ist jedes Endgerät eine eigene Bühne
|
||||||
|
mit eigenen Regeln.
|
||||||
|
</LeadParagraph>
|
||||||
|
<LeadParagraph>
|
||||||
|
Ich zeige Ihnen, warum <Marker>Responsive-Exzellenz</Marker> der Hebel für
|
||||||
|
Ihre globale Conversion-Rate ist.
|
||||||
|
</LeadParagraph>
|
||||||
|
|
||||||
|
<H2>Jenseits der Standard-Breakpoints</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Die meisten Agenturen nutzen simple Raster, die auf dem Desktop gut
|
||||||
|
aussehen und auf dem Smartphone "irgendwie funktionieren".
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das Ergebnis ist oft frustrierend: Zu kleine Texte, unbedienbare Buttons
|
||||||
|
und Bilder, die das Layout sprengen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich betrachte Responsive Design als{" "}
|
||||||
|
<Marker>architektonische Präzisionsleistung</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wir gestalten die Experience für den Nutzer im Zug ebenso perfekt wie für
|
||||||
|
den Entscheider am 4K-Monitor.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Fokus und Hierarchie müssen auf jedem Screen neu definiert werden.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<Mermaid
|
||||||
|
graph={`graph TD
|
||||||
|
Logic["Zentrales Design-System"] --> Mobile["Mobile (Daumen-Optimiert)"]
|
||||||
|
Logic --> Tablet["Tablet (Touch & Swipe)"]
|
||||||
|
Logic --> Desktop["Desktop (Maus & Tastatur)"]
|
||||||
|
Mobile --> UX["Perfekte UX auf jedem Gerät"]
|
||||||
|
Tablet --> UX
|
||||||
|
Desktop --> UX
|
||||||
|
style UX fill:#4ade80,stroke:#333
|
||||||
|
style Logic fill:#4ade80,stroke:#333`}
|
||||||
|
/>
|
||||||
|
<p className="text-center text-xs text-slate-400 mt-4 italic">
|
||||||
|
Plattformübergreifende Brillanz: Ein System, das sich nicht nur anpasst,
|
||||||
|
sondern für jedes Endgerät optimiert wird.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H3>Kontextsensitive Ergonomie</H3>
|
||||||
|
<Paragraph>
|
||||||
|
Ein mobiler Nutzer hat andere Bedürfnisse als ein Desktop-Nutzer.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
In meiner Architektur passen wir nicht nur das Layout an, sondern oft auch
|
||||||
|
die Interaktionslogik.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Das ist <Marker>digitale Ergonomie auf Boutique-Niveau</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Informationen müssen dort fließen, wo sie gebraucht werden – ohne
|
||||||
|
Reibungsverluste durch das Endgerät.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Meine Hebel für ein grenzenloses Web</H2>
|
||||||
|
<Paragraph>Wie erreichen wir diese technische Perfektion?</Paragraph>
|
||||||
|
<Paragraph>Durch den Einsatz modernster Engineering-Methoden:</Paragraph>
|
||||||
|
|
||||||
|
<IconList>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Fluid Typography & Spacing:</strong> Wir nutzen keine starren
|
||||||
|
Pixel-Werte. Alles atmet und skaliert harmonisch mit der Viewport-Größe.
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Adaptive Media:</strong> Bilder und Videos werden exakt in der
|
||||||
|
Größe ausgeladen, die das Display erfordert.{" "}
|
||||||
|
<Marker>Kein Byte wird verschwendet.</Marker>
|
||||||
|
</IconListItem>
|
||||||
|
<IconListItem check>
|
||||||
|
<strong>Intelligente Touch-Targets:</strong> Wir optimieren alle
|
||||||
|
interaktiven Elemente für die menschliche Anatomie – auf jedem Gerät.
|
||||||
|
</IconListItem>
|
||||||
|
</IconList>
|
||||||
|
|
||||||
|
<div className="my-12">
|
||||||
|
<ComparisonRow
|
||||||
|
description="Der Impact auf Ihre globale Marktdurchdringung"
|
||||||
|
negativeLabel="Standard Grid-Responsive"
|
||||||
|
negativeText="Verlust an Übersichtlichkeit auf kleinen Screens, langsame Ladezeiten, 'Bastel'-Look"
|
||||||
|
positiveLabel="Bespoke Multi-Screen Engine"
|
||||||
|
positiveText="Perfekte Ergonomie überall, blitzschneller Content, konsistentes Markenbild"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<H2>Wirtschaftlicher Hebel: Mobiler Erfolg</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Über 60 % des Web-Traffics findet heute auf mobilen Endgeräten statt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Wer hier patzt, verliert die Mehrheit seiner potenziellen Kunden.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schaffe Ihnen ein System, das <Marker>Zukunftssicherheit</Marker>{" "}
|
||||||
|
garantiert – egal welche Geräte morgen auf den Markt kommen.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ihre Website wird zu einem universellen Werkzeug Ihres Erfolgs.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Für wen ich 'grenzenlose' Welten baue</H2>
|
||||||
|
<Paragraph>
|
||||||
|
Mein Fokus liegt auf Marken mit einem internationalen, mobilen Publikum.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Verlangen Ihre Kunden Perfektion in jedem Moment? Dann bin ich Ihr
|
||||||
|
Architekt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Ich schaffe <Marker>Barrierefreiheit durch Qualität</Marker>.
|
||||||
|
</Paragraph>
|
||||||
|
|
||||||
|
<H2>Fazit: Konsistenz ist die halbe Miete</H2>
|
||||||
|
<Paragraph>Ihre Marke muss sich überall gleich wertig anfühlen.</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
Lassen wir gemeinsam ein digitales Ökosystem erschaffen, das auf jedem
|
||||||
|
Screen glänzt.
|
||||||
|
</Paragraph>
|
||||||
|
<Paragraph>
|
||||||
|
<Marker>Präzision im Detail, Harmonie im Ganzen.</Marker> Ihr Erfolg
|
||||||
|
verdient diese nahtlose Integration.
|
||||||
|
</Paragraph>
|
||||||
|
</>
|
||||||
|
);
|
||||||
49
apps/web/src/components/blog/posts/index.ts
Normal file
49
apps/web/src/components/blog/posts/index.ts
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { PageSpeedFails } from "./Group1/PageSpeedFails";
|
||||||
|
import { SlowLoadingDebt } from "./Group1/SlowLoadingDebt";
|
||||||
|
import { AgencySlowdown } from "./Group1/AgencySlowdown";
|
||||||
|
import { WordPressPlugins } from "./Group1/WordPressPlugins";
|
||||||
|
import { WebsiteStability } from "./Group1/WebsiteStability";
|
||||||
|
|
||||||
|
import { CookieFreeDesign } from "./Group2/CookieFreeDesign";
|
||||||
|
import { LocalCloud } from "./Group2/LocalCloud";
|
||||||
|
import { GDPRSystem } from "./Group2/GDPRSystem";
|
||||||
|
import { VendorLockIn } from "./Group2/VendorLockIn";
|
||||||
|
import { PrivacyAnalytics } from "./Group2/PrivacyAnalytics";
|
||||||
|
|
||||||
|
import { GreenIT } from "./Group3/GreenIT";
|
||||||
|
import { FixedPrice } from "./Group3/FixedPrice";
|
||||||
|
import { BuildFirst } from "./Group3/BuildFirst";
|
||||||
|
import { MaintenanceNoCMS } from "./Group3/MaintenanceNoCMS";
|
||||||
|
import { Longevity } from "./Group3/Longevity";
|
||||||
|
|
||||||
|
import { CleanCode } from "./Group4/CleanCode";
|
||||||
|
import { ResponsiveDesign } from "./Group4/ResponsiveDesign";
|
||||||
|
import { HostingOps } from "./Group4/HostingOps";
|
||||||
|
import { NoTemplates } from "./Group4/NoTemplates";
|
||||||
|
import { CRMSync } from "./Group4/CRMSync";
|
||||||
|
|
||||||
|
export const PostComponents: Record<string, React.FC> = {
|
||||||
|
"why-pagespeed-fails": PageSpeedFails,
|
||||||
|
"slow-loading-costs-customers": SlowLoadingDebt,
|
||||||
|
"why-agencies-are-slow": AgencySlowdown,
|
||||||
|
"hidden-costs-of-wordpress-plugins": WordPressPlugins,
|
||||||
|
"why-websites-break-after-updates": WebsiteStability,
|
||||||
|
|
||||||
|
"website-without-cookie-banners": CookieFreeDesign,
|
||||||
|
"no-us-cloud-platforms": LocalCloud,
|
||||||
|
"gdpr-conformity-system-approach": GDPRSystem,
|
||||||
|
"builder-systems-threaten-independence": VendorLockIn,
|
||||||
|
"analytics-without-tracking": PrivacyAnalytics,
|
||||||
|
|
||||||
|
"fast-website-carbon-footprint": GreenIT,
|
||||||
|
"fixed-price-vs-hourly-rate": FixedPrice,
|
||||||
|
"build-first-talk-later": BuildFirst,
|
||||||
|
"maintenance-without-cms": MaintenanceNoCMS,
|
||||||
|
"timeless-websites": Longevity,
|
||||||
|
|
||||||
|
"clean-code-success": CleanCode,
|
||||||
|
"responsive-design-scaling": ResponsiveDesign,
|
||||||
|
"hosting-and-operation": HostingOps,
|
||||||
|
"no-ready-made-templates": NoTemplates,
|
||||||
|
"seamless-crm-sync": CRMSync,
|
||||||
|
};
|
||||||
@@ -7,39 +7,174 @@ export interface BlogPost {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const blogPosts: BlogPost[] = [
|
export const blogPosts: BlogPost[] = [
|
||||||
|
// Gruppe 1: Schmerzpunkte & Fehlerbehebung
|
||||||
{
|
{
|
||||||
title: "Starting this blog",
|
title: "Warum Ihre Website bei Google PageSpeed scheitert",
|
||||||
description: "Why I'm writing things down in public",
|
description:
|
||||||
date: "2024-01-15",
|
"Technische Optimierung ist heute kein Luxus mehr, sondern überlebenswichtig für Ihre Sichtbarkeit.",
|
||||||
slug: "first-note",
|
date: "2026-02-15",
|
||||||
tags: ["meta", "learning"]
|
slug: "why-pagespeed-fails",
|
||||||
|
tags: ["performance", "engineering"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Debugging with print statements",
|
title: "Langsame Ladezeiten: Diese technischen Altlasten kosten Sie Kunden",
|
||||||
description: "When printf debugging is actually the right tool",
|
description:
|
||||||
date: "2024-01-20",
|
"Wie Sie versteckte Performance-Killer identifizieren und eliminieren, bevor sie Ihren Umsatz gefährden.",
|
||||||
slug: "debugging-tips",
|
date: "2026-02-14",
|
||||||
tags: ["debugging", "tools"]
|
slug: "slow-loading-costs-customers",
|
||||||
|
tags: ["performance", "business"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Software Architecture Patterns",
|
title: "Warum Ihre Agentur für kleine Änderungen Wochen braucht",
|
||||||
description: "Exploring common architectural patterns for scalable systems",
|
description:
|
||||||
date: "2024-02-01",
|
"Starre Prozesse vs. flexible Architektur: So brechen Sie den Flaschenhals in Ihrer Entwicklung auf.",
|
||||||
slug: "architecture-patterns",
|
date: "2026-02-13",
|
||||||
tags: ["architecture", "design-patterns", "system-design"]
|
slug: "why-agencies-are-slow",
|
||||||
|
tags: ["architecture", "engineering"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Docker Deployment Best Practices",
|
title: "Die versteckten Kosten von WordPress-Plugins",
|
||||||
description: "Production-ready Docker configurations and workflows",
|
description:
|
||||||
date: "2024-02-10",
|
"Warum die 'einfache Lösung' oft zur teuren Wartungsfalle wird und wie Sie echte Unabhängigkeit gewinnen.",
|
||||||
slug: "docker-deployment",
|
date: "2026-02-12",
|
||||||
tags: ["docker", "deployment", "architecture"]
|
slug: "hidden-costs-of-wordpress-plugins",
|
||||||
|
tags: ["architecture", "business"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Rich Content Embedding Demo",
|
title: "Warum Ihre Website nach jedem Update kaputtgeht",
|
||||||
description: "Testing our new free embed components for YouTube, Twitter, Mermaid diagrams, and other platforms",
|
description:
|
||||||
date: "2024-02-15",
|
"Systematische Stabilität vs. Flickschusterei: Warum Test-Automatisierung Ihr wichtigstes Investment ist.",
|
||||||
slug: "embed-demo",
|
date: "2026-02-11",
|
||||||
tags: ["embeds", "components", "tutorial", "mermaid"]
|
slug: "why-websites-break-after-updates",
|
||||||
}
|
tags: ["engineering", "architecture"],
|
||||||
];
|
},
|
||||||
|
|
||||||
|
// Gruppe 2: Souveränität & Recht
|
||||||
|
{
|
||||||
|
title:
|
||||||
|
"Website ohne Cookie-Banner: So funktioniert datenschutzkonformes Design",
|
||||||
|
description:
|
||||||
|
"Nutzererfahrung ohne nervige Popups: Wie Sie Vertrauen gewinnen und DSGVO-konform bleiben.",
|
||||||
|
date: "2026-02-10",
|
||||||
|
slug: "website-without-cookie-banners",
|
||||||
|
tags: ["privacy", "ux-design"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Warum ich keine US-Cloud-Plattformen für Ihre Daten nutze",
|
||||||
|
description:
|
||||||
|
"Souveränität durch lokale Infrastruktur: Warum Ihre Daten in Europa am sichersten sind.",
|
||||||
|
date: "2026-02-09",
|
||||||
|
slug: "no-us-cloud-platforms",
|
||||||
|
tags: ["privacy", "architecture"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "DSGVO-Konformität ohne Abmahnrisiko: Der System-Ansatz",
|
||||||
|
description:
|
||||||
|
"Rechtssicherheit ist kein Zufall, sondern das Ergebnis eines klaren technischen Konzepts.",
|
||||||
|
date: "2026-02-08",
|
||||||
|
slug: "gdpr-conformity-system-approach",
|
||||||
|
tags: ["privacy", "architecture"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Warum Baukasten-Systeme Ihre digitale Unabhängigkeit gefährden",
|
||||||
|
description:
|
||||||
|
"Vendor Lock-in vermeiden: Warum Sie die volle Kontrolle über Ihren Code und Ihre Daten behalten müssen.",
|
||||||
|
date: "2026-02-07",
|
||||||
|
slug: "builder-systems-threaten-independence",
|
||||||
|
tags: ["architecture", "business"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Analytics ohne Tracking: Erfolg messen, ohne Kunden zu nerven",
|
||||||
|
description:
|
||||||
|
"Privacy-first Metriken: Wie Sie wertvolle Insights gewinnen, ohne die Privatsphäre Ihrer Nutzer zu verletzen.",
|
||||||
|
date: "2026-02-06",
|
||||||
|
slug: "analytics-without-tracking",
|
||||||
|
tags: ["privacy", "ux-design"],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Gruppe 3: Effizienz & Investment
|
||||||
|
{
|
||||||
|
title: "Warum eine schnelle Website Ihren CO₂-Fußabdruck halbiert",
|
||||||
|
description:
|
||||||
|
"Digitale Nachhaltigkeit: Wie effizienter Code nicht nur Kunden, sondern auch das Klima schont.",
|
||||||
|
date: "2026-02-05",
|
||||||
|
slug: "fast-website-carbon-footprint",
|
||||||
|
tags: ["performance", "engineering"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:
|
||||||
|
"Fixpreis statt Stundensatz: Warum ich keine Kostenvoranschläge schätze",
|
||||||
|
description:
|
||||||
|
"Transparenz und Ergebnisfokus: Warum klassische Schätzungen oft am Ziel vorbeischießen.",
|
||||||
|
date: "2026-02-04",
|
||||||
|
slug: "fixed-price-vs-hourly-rate",
|
||||||
|
tags: ["business", "engineering"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Warum ich erst baue und wir dann darüber reden",
|
||||||
|
description:
|
||||||
|
"Prototyping-first: Warum echte Interaktion wertvoller ist als hundert Mockups.",
|
||||||
|
date: "2026-02-03",
|
||||||
|
slug: "build-first-talk-later",
|
||||||
|
tags: ["engineering", "ux-design"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Website-Pflege: Warum Sie kein CMS brauchen, um Inhalte zu ändern",
|
||||||
|
description:
|
||||||
|
"Modernes Content Management: Effizienz durch Entkopplung von Design und Redaktion.",
|
||||||
|
date: "2026-02-02",
|
||||||
|
slug: "maintenance-without-cms",
|
||||||
|
tags: ["architecture", "business"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Warum meine Websites auch nach fünf Jahren nicht veralten",
|
||||||
|
description:
|
||||||
|
"Invesitionssicherheit durch zukunftssichere Technologie-Stacks und zeitloses Design.",
|
||||||
|
date: "2026-02-01",
|
||||||
|
slug: "timeless-websites",
|
||||||
|
tags: ["business", "architecture"],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Gruppe 4: Technik & Handwerk
|
||||||
|
{
|
||||||
|
title:
|
||||||
|
"Clean Code: Warum die Struktur hinter der Oberfläche über Ihren Erfolg entscheidet",
|
||||||
|
description:
|
||||||
|
"Wartbarkeit als Wettbewerbsvorteil: Warum Qualität im Verborgenen beginnt.",
|
||||||
|
date: "2026-01-31",
|
||||||
|
slug: "clean-code-success",
|
||||||
|
tags: ["engineering", "architecture"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Responsives Design: Warum Skalieren allein nicht ausreicht",
|
||||||
|
description:
|
||||||
|
"Echte Adaptivität vs. einfache Größenanpassung: UX über alle Viewports hinweg.",
|
||||||
|
date: "2026-01-30",
|
||||||
|
slug: "responsive-design-scaling",
|
||||||
|
tags: ["ux-design", "engineering"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Hosting und Betrieb: Was hinter einem stabilen System steckt",
|
||||||
|
description:
|
||||||
|
"Managed Infrastructure: Warum die Wahl der Umgebung entscheidend für die Performance ist.",
|
||||||
|
date: "2026-01-29",
|
||||||
|
slug: "hosting-and-operation",
|
||||||
|
tags: ["architecture", "performance"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Warum ich keine fertigen Templates verwende",
|
||||||
|
description:
|
||||||
|
"Individualität als Standard: Warum 'von der Stange' oft teure Anpassungen nach sich zieht.",
|
||||||
|
date: "2026-01-28",
|
||||||
|
slug: "no-ready-made-templates",
|
||||||
|
tags: ["ux-design", "performance"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Schnittstellen ohne Stress: So gelingt der Daten-Sync zu Ihrem CRM",
|
||||||
|
description:
|
||||||
|
"Automatisierung durch Integration: Wie Sie manuelle Arbeit durch saubere APIs eliminieren.",
|
||||||
|
date: "2026-01-27",
|
||||||
|
slug: "seamless-crm-sync",
|
||||||
|
tags: ["architecture", "engineering"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user