bender/5215a643-c6b1-4ed1-9d27-bee87d97a4f5
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_8
Branches Tags
bender:main bender:version_11 bender:version_10 bender:version_9 bender:version_8 bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1
..
compare: bender:version_7
Branches Tags
bender:main bender:version_11 bender:version_10 bender:version_9 bender:version_8 bender:version_7 bender:version_6 bender:version_5 bender:version_4 bender:version_3 bender:version_2 bender:version_1

2 Commits
version_8 ... version_7

Author SHA1 Message Date
bender
29b2b38490 Update src/app/page.tsx 2026-03-04 14:44:56 +00:00
bender
49402cd23f Update src/app/layout.tsx 2026-03-04 14:44:55 +00:00
2 changed files with 41 additions and 41 deletions
Expand all files Collapse all files

48
src/app/layout.tsx
View File

@@ -6,7 +6,7 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Peter Friis - Webdesigner", description: "Professioneller Webdesigner, der atemberaubende digitale Erlebnisse schafft. Stellen Sie Ihre Website einfach mit Next.js, Vercel oder einer beliebigen Node.js-Hosting-Plattform bereit."
title: "Peter Friis - Webdesigner", description: "Professioneller Webdesigner, der atemberaubende digitale Erlebnisse schafft. Stellen Sie Ihre Website mit Next.js, Vercel oder einer beliebigen Node.js-Hosting-Plattform bereit."
};
export default function RootLayout({
@@ -24,44 +24,44 @@ export default function RootLayout({
{
name: 'Vercel',
steps: [
'1. Verschieben Sie Ihren Code zu GitHub',
'2. Gehen Sie zu vercel.com und melden Sie sich an',
'1. Schieben Sie Ihren Code zu GitHub',
'2. Gehen Sie zu vercel.com und registrieren Sie sich',
'3. Klicken Sie auf "Neues Projekt" und wählen Sie Ihr Repository',
'4. Vercel erkennt Next.js automatisch und stellt bereit',
'5. Ihre Website ist live unter der Vercel.app-Domain'
'5. Ihre Website ist live auf der vercel.app-Domain'
]
},
{
name: 'Netlify',
steps: [
'1. Verschieben Sie Ihren Code zu GitHub',
'2. Gehen Sie zu netlify.com und melden Sie sich an',
'1. Schieben Sie Ihren Code zu GitHub',
'2. Gehen Sie zu netlify.com und registrieren Sie sich',
'3. Klicken Sie auf "Neue Website aus Git" und wählen Sie Ihr Repository',
'4. Setzen Sie Build-Befehl: npm run build',
'5. Setzen Sie Veröffentlichungsverzeichnis: .next/standalone',
'6. Bereitstellen und erhalten Sie Ihre Live-Domain'
'4. Build-Befehl festlegen: npm run build',
'5. Veröffentlichungsverzeichnis festlegen: .next/standalone',
'6. Stellen Sie bereit und erhalten Sie Ihre Live-Domain'
]
},
{
name: 'Self-Hosted (Node.js)',
steps: [
'1. Rufen Sie einen Server ab (Digital Ocean, AWS, usw.)',
'1. Holen Sie sich einen Server (Digital Ocean, AWS, etc)',
'2. Klonen Sie Ihr Repository auf dem Server',
'3. Führen Sie aus: npm install && npm run build',
'4. Setzen Sie NODE_ENV=production',
'3. Ausführen: npm install && npm run build',
'4. NODE_ENV=production festlegen',
'5. Starten Sie mit: npm start oder verwenden Sie PM2',
'6. Richten Sie nginx/Apache als Reverse Proxy ein',
'7. Konfigurieren Sie Ihr Domain-DNS'
'6. Richten Sie nginx/Apache als Reverse-Proxy ein',
'7. Konfigurieren Sie Ihre Domain-DNS'
]
},
{
name: 'Docker-Bereitstellung',
steps: [
'1. Erstellen Sie eine Dockerfile im Projektstammverzeichnis',
'2. Build-Image: docker build -t myapp .',
'1. Erstellen Sie ein Dockerfile im Projektstammverzeichnis',
'2. Image erstellen: docker build -t myapp .',
'3. Container ausführen: docker run -p 3000:3000 myapp',
'4. Zu Docker Hub oder Container-Registry verschieben',
'5. In Cloud-Plattformen bereitstellen (AWS ECS, GCP usw.)'
'4. Zu Docker Hub oder Container-Registry pushen',
'5. Auf Cloud-Plattformen bereitstellen (AWS ECS, GCP, etc)'
]
}
],
@@ -71,13 +71,13 @@ export default function RootLayout({
'DATABASE_URL=your-database-url'
],
postDeploymentChecklist: [
'Testen Sie alle Navigationslinks',
'Überprüfen Sie das responsive Design auf dem Mobilgerät',
'Alle Navigationslinks testen',
'Responsives Design auf Mobilgeräten überprüfen',
'Überprüfen Sie, ob E-Mail-Formulare ordnungsgemäß funktionieren',
'Bestätigen Sie, dass Bilder korrekt geladen werden',
'Testen Sie die Übermittlung von Kontaktformularen',
'Überprüfen Sie SEO-Meta-Tags',
'Überprüfen Sie die Seitenladeleistung',
'Bestätigen Sie, dass Bilder ordnungsgemäß geladen werden',
'Kontaktformulare-Übermittlung testen',
'SEO-Meta-Tags überprüfen',
'Seitenladegeschwindigkeit überprüfen',
'SSL-Zertifikat einrichten (HTTPS)'
]
};

34
src/app/page.tsx
View File

@@ -55,10 +55,10 @@ export default function LandingPage() {
id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-stunning-modern-e-commerce-website-des-1772566668134-fb1e4245.png?_wi=1", imageAlt: "E-Commerce-Website-Design"
},
{
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=1", imageAlt: "Unternehmenswebsite-Design"
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=1", imageAlt: "Corporate-Website-Design"
},
{
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=1", imageAlt: "Website der Kreativagentur"
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=1", imageAlt: "Kreative Agentur-Website"
},
{
id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sophisticated-saas-platform-landing-pa-1772566668752-9737873c.png?_wi=1", imageAlt: "SaaS-Plattform-Design"
@@ -67,7 +67,7 @@ export default function LandingPage() {
id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-vibrant-fashion-brand-website-design-w-1772566668475-3b90a44d.png?_wi=1", imageAlt: "Modemarken-Website"
},
{
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=1", imageAlt: "Consulting-Website-Design"
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=1", imageAlt: "Beratungsfirmen-Website-Design"
}
]}
autoPlay={true}
@@ -78,7 +78,7 @@ export default function LandingPage() {
<div id="portfolio" data-section="portfolio">
<ProductCardOne
title="Ausgewählte Arbeiten"
description="Eine Auswahl meiner neuesten Webdesign-Projekte, die verschiedene Branchen und Design-Ansätze zeigen."
description="Eine Auswahl meiner jüngsten Webdesign-Projekte, die verschiedene Branchen und Designansätze zeigen."
tag="Portfolio"
tagIcon={Briefcase}
tagAnimation="slide-up"
@@ -91,10 +91,10 @@ export default function LandingPage() {
id: "1", name: "E-Commerce-Plattform", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-stunning-modern-e-commerce-website-des-1772566668134-fb1e4245.png?_wi=2", imageAlt: "E-Commerce-Plattform-Design"
},
{
id: "2", name: "Unternehmenswebsite", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=2", imageAlt: "Unternehmenswebsite-Design"
id: "2", name: "Corporate-Website", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=2", imageAlt: "Corporate-Website-Design"
},
{
id: "3", name: "Website einer Kreativagentur", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=2", imageAlt: "Website einer Kreativagentur"
id: "3", name: "Kreative Agentur-Website", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=2", imageAlt: "Kreative Agentur-Website"
},
{
id: "4", name: "SaaS-Plattform", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sophisticated-saas-platform-landing-pa-1772566668752-9737873c.png?_wi=2", imageAlt: "SaaS-Plattform-Design"
@@ -103,7 +103,7 @@ export default function LandingPage() {
id: "5", name: "Modemarke", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-vibrant-fashion-brand-website-design-w-1772566668475-3b90a44d.png?_wi=2", imageAlt: "Modemarken-Website"
},
{
id: "6", name: "Unternehmensberatung", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=2", imageAlt: "Consulting-Website-Design"
id: "6", name: "Beratungsfirma", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=2", imageAlt: "Beratungsfirmen-Website-Design"
}
]}
/>
@@ -120,15 +120,15 @@ export default function LandingPage() {
features={[
{
id: 1,
tag: "Design", title: "Webdesign", subtitle: "Schöne, intuitive Schnittstellen, die Benutzer einbeziehen.", description: "Ich erstelle maßgeschneiderte Webdesigns, die Ihre Markenidentität widerspiegeln und Ihr Publikum fesseln. Von Konzept bis Ausführung wird jedes Pixel sorgfältig für optimale Benutzererfahrung und visuellen Einfluss gestaltet.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=1", imageAlt: "Webdesign-Arbeitsplatz"
tag: "Design", title: "Webdesign", subtitle: "Schöne, intuitive Schnittstellen, die Benutzer ansprechen.", description: "Ich erstelle benutzerdefinierte Webdesigns, die Ihre Markenidentität widerspiegeln und Ihr Publikum fesseln. Von der Konzeption bis zur Ausführung ist jedes Pixel sorgfältig für optimale Benutzererfahrung und visuellen Effekt gestaltet.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=1", imageAlt: "Webdesign-Arbeitsbereich"
},
{
id: 2,
tag: "Entwicklung", title: "Responsive Entwicklung", subtitle: "Websites, die auf allen Geräten nahtlos funktionieren.", description: "Responsive Design stellt sicher, dass Ihre Website auf Desktop, Tablet und Mobilgerät perfekt aussieht und funktioniert. Ich verwende moderne Technologien und bewährte Verfahren, um schnelle, sichere und SEO-optimierte Websites bereitzustellen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Responsive Entwicklung"
tag: "Entwicklung", title: "Responsive-Entwicklung", subtitle: "Websites, die auf allen Geräten nahtlos funktionieren.", description: "Responsives Design stellt sicher, dass Ihre Website auf Desktop, Tablet und Mobilgeräten fehlerfrei aussieht und funktioniert. Ich verwende moderne Technologien und Best Practices, um schnelle, sichere und SEO-optimierte Websites bereitzustellen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Responsive-Entwicklung"
},
{
id: 3,
tag: "Optimierung", title: "Leistung & SEO", subtitle: "Optimiert für Suchmaschinen und Benutzerengagement.", description: "Ich optimiere Websites für Geschwindigkeit, Zugänglichkeit und Sichtbarkeit in Suchmaschinen. Die strategische SEO-Implementierung stellt sicher, dass Ihre Website die richtige Zielgruppe erreicht und in Suchergebnissen gut abschneidet."
tag: "Optimierung", title: "Leistung & SEO", subtitle: "Optimiert für Suchmaschinen und Benutzereinbindung.", description: "Ich optimiere Websites auf Geschwindigkeit, Barrierefreiheit und Sichtbarkeit in Suchmaschinen. Die strategische SEO-Implementierung stellt sicher, dass Ihre Website die richtige Zielgruppe erreicht und bei Suchergebnissen gut rangiert."
}
]}
/>
@@ -137,8 +137,8 @@ export default function LandingPage() {
<div id="deployment" data-section="deployment">
<FeatureCardNineteen
title="So stellen Sie Ihre Website bereit"
description="Mehrere Bereitstellungsoptionen, um Ihre Website schnell und zuverlässig online zu stellen."
tag="Bereitstellungsleitfaden"
description="Mehrere Bereitstellungsoptionen, um Ihre Website schnell und zuverlässig online zu bringen."
tag="Bereitstellungsanleitung"
tagIcon={Rocket}
tagAnimation="slide-up"
textboxLayout="default"
@@ -146,15 +146,15 @@ export default function LandingPage() {
features={[
{
id: 1,
tag: "Empfohlen", title: "Auf Vercel bereitstellen", subtitle: "Schnellste Möglichkeit, Next.js-Projekte bereitzustellen.", description: "1. Verschieben Sie Ihren Code zu GitHub\n2. Melden Sie sich auf vercel.com an\n3. Verbinden Sie Ihr Repository\n4. Vercel erkennt Next.js automatisch und stellt bereit\n5. Ihre Website ist sofort live mit automatischem SSL und CDN", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=2", imageAlt: "Vercel-Bereitstellung"
tag: "Empfohlen", title: "Auf Vercel bereitstellen", subtitle: "Der schnellste Weg, Next.js-Projekte bereitzustellen.", description: "1. Schieben Sie Ihren Code zu GitHub\n2. Registrieren Sie sich auf vercel.com\n3. Verbinden Sie Ihr Repository\n4. Vercel erkennt Next.js automatisch und stellt bereit\n5. Ihre Website ist sofort online mit automatischem SSL und CDN", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=2", imageAlt: "Vercel-Bereitstellung"
},
{
id: 2,
tag: "Alternative", title: "Auf Netlify bereitstellen", subtitle: "Großartige Alternative mit einfacher GitHub-Integration.", description: "1. Verschieben Sie Code zu GitHub\n2. Melden Sie sich auf netlify.com an\n3. Wählen Sie 'Neue Website aus Git'\n4. Build-Befehl: npm run build\n5. Veröffentlichungsverzeichnis: .next/standalone\n6. Bereitstellen und Domäne erhalten", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Netlify-Bereitstellung"
tag: "Alternative", title: "Auf Netlify bereitstellen", subtitle: "Großartige Alternative mit einfacher GitHub-Integration.", description: "1. Schieben Sie Code zu GitHub\n2. Registrieren Sie sich auf netlify.com\n3. Wählen Sie 'Neue Website aus Git'\n4. Build-Befehl: npm run build\n5. Veröffentlichungsverzeichnis: .next/standalone\n6. Stellen Sie bereit und erhalten Sie Ihre Domain", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Netlify-Bereitstellung"
},
{
id: 3,
tag: "Self-Hosted", title: "Mit Docker bereitstellen", subtitle: "Stellen Sie überall mit Containerisierung bereit.", description: "1. Erstellen Sie eine Dockerfile im Projektstammverzeichnis\n2. Build-Image: docker build -t myapp .\n3. Führen Sie aus: docker run -p 3000:3000 myapp\n4. Verschieben Sie zu Docker Hub\n5. Stellen Sie auf AWS ECS, Google Cloud oder DigitalOcean bereit"
tag: "Selbst gehostet", title: "Mit Docker bereitstellen", subtitle: "Überall mit Containerisierung bereitstellen.", description: "1. Erstellen Sie ein Dockerfile im Projektstammverzeichnis\n2. Image erstellen: docker build -t myapp .\n3. Ausführen: docker run -p 3000:3000 myapp\n4. Zu Docker Hub pushen\n5. Auf AWS ECS, Google Cloud oder DigitalOcean bereitstellen"
}
]}
/>
@@ -166,7 +166,7 @@ export default function LandingPage() {
tagIcon={Mail}
tagAnimation="slide-up"
title="Bereit, Ihre Online-Präsenz zu verbessern?"
description="Lassen Sie uns zusammenarbeiten, um eine Website zu schaffen, die nicht nur atemberaubend aussieht, sondern auch Ergebnisse liefert. Ich freue mich darauf, Ihre Vision zum Leben zu erwecken."
description="Lassen Sie uns zusammenarbeiten, um eine Website zu erstellen, die nicht nur atemberaubend aussieht, sondern auch Ergebnisse bringt. Ich freue mich, Ihre Vision zum Leben zu erwecken."
buttons={[
{ text: "Kontaktieren Sie mich", href: "mailto:friisp@gmail.com" },
{ text: "Anrufen: +49 179 2355413", href: "tel:+49176611696541" }
@@ -197,7 +197,7 @@ export default function LandingPage() {
},
{
items: [
{ label: "Datenschutzrichtlinie", href: "#" },
{ label: "Datenschutzerklärung", href: "#" },
{ label: "Nutzungsbedingungen", href: "#" },
{ label: "Impressum", href: "#" }
]