denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dev (#50)

Browse Source 
* update

* cleanup

* fixing linting and tests errors

* Refactor API Parameter Handling and Update Email Transport

✅ Updated API Route Parameters:
- Changed parameter type from `{ id: string }` to `Promise<{ id: string }>` in PUT and DELETE methods for better async handling.

✅ Fixed Email Transport Creation:
- Updated `nodemailer.createTransporter` to `nodemailer.createTransport` for correct transport configuration.

✅ Refactored AnalyticsDashboard Component:
- Changed export from default to named export for better modularity.

✅ Enhanced Email Responder Toast:
- Updated toast structure to include additional properties for better user feedback.

🎯 Overall Improvements:
- Improved async handling in API routes.
- Ensured correct usage of nodemailer.
- Enhanced component exports and user notifications.
This commit is contained in:
denshooter
2025-09-08 08:36:16 +02:00
committed by GitHub
parent 7e603c7c54
commit a842cb04f3
36 changed files with 2591 additions and 2830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/__tests__/api/email.test.tsx
View File

@@ -18,7 +18,7 @@ afterAll(() => {
beforeEach(() => {
nodemailermock.mock.reset();
process.env.MY_EMAIL = 'test@dki.one';
process.env.MY_EMAIL = 'test@dk0.dev';
process.env.MY_PASSWORD = 'test-password';
});
@@ -42,7 +42,7 @@ describe('POST /api/email', () => {
const sentEmails = nodemailermock.mock.getSentMail();
expect(sentEmails.length).toBe(1);
expect(sentEmails[0].to).toBe('contact@dki.one');
expect(sentEmails[0].to).toBe('contact@dk0.dev');
expect(sentEmails[0].text).toContain('Hello! This is a test message.');
});

3
app/__tests__/components/Header.test.tsx
View File

@@ -5,7 +5,8 @@ import '@testing-library/jest-dom';
describe('Header', () => {
it('renders the header', () => {
render(<Header />);
expect(screen.getByText('DK')).toBeInTheDocument();
expect(screen.getByText('dk')).toBeInTheDocument();
expect(screen.getByText('0')).toBeInTheDocument();
const aboutButtons = screen.getAllByText('About');
expect(aboutButtons.length).toBeGreaterThan(0);

1574
app/admin/page.tsx
View File

File diff suppressed because it is too large Load Diff

76
app/api/contacts/[id]/route.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { type NextRequest, NextResponse } from "next/server";
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function PUT(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const resolvedParams = await params;
const id = parseInt(resolvedParams.id);
const body = await request.json();
const { responded, responseTemplate } = body;
if (isNaN(id)) {
return NextResponse.json(
{ error: 'Invalid contact ID' },
{ status: 400 }
);
}
const contact = await prisma.contact.update({
where: { id },
data: {
responded: responded !== undefined ? responded : undefined,
responseTemplate: responseTemplate || undefined,
updatedAt: new Date()
}
});
return NextResponse.json({
message: 'Contact updated successfully',
contact
});
} catch (error) {
console.error('Error updating contact:', error);
return NextResponse.json(
{ error: 'Failed to update contact' },
{ status: 500 }
);
}
}
export async function DELETE(
request: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const resolvedParams = await params;
const id = parseInt(resolvedParams.id);
if (isNaN(id)) {
return NextResponse.json(
{ error: 'Invalid contact ID' },
{ status: 400 }
);
}
await prisma.contact.delete({
where: { id }
});
return NextResponse.json({
message: 'Contact deleted successfully'
});
} catch (error) {
console.error('Error deleting contact:', error);
return NextResponse.json(
{ error: 'Failed to delete contact' },
{ status: 500 }
);
}
}

95
app/api/contacts/route.tsx Normal file
View File

@@ -0,0 +1,95 @@
import { type NextRequest, NextResponse } from "next/server";
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function GET(request: NextRequest) {
try {
const { searchParams } = new URL(request.url);
const filter = searchParams.get('filter') || 'all';
const limit = parseInt(searchParams.get('limit') || '50');
const offset = parseInt(searchParams.get('offset') || '0');
let whereClause = {};
switch (filter) {
case 'unread':
whereClause = { responded: false };
break;
case 'responded':
whereClause = { responded: true };
break;
default:
whereClause = {};
}
const [contacts, total] = await Promise.all([
prisma.contact.findMany({
where: whereClause,
orderBy: { createdAt: 'desc' },
take: limit,
skip: offset,
}),
prisma.contact.count({ where: whereClause })
]);
return NextResponse.json({
contacts,
total,
hasMore: offset + contacts.length < total
});
} catch (error) {
console.error('Error fetching contacts:', error);
return NextResponse.json(
{ error: 'Failed to fetch contacts' },
{ status: 500 }
);
}
}
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const { name, email, subject, message } = body;
// Validate required fields
if (!name || !email || !subject || !message) {
return NextResponse.json(
{ error: 'All fields are required' },
{ status: 400 }
);
}
// Validate email format
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
return NextResponse.json(
{ error: 'Invalid email format' },
{ status: 400 }
);
}
const contact = await prisma.contact.create({
data: {
name,
email,
subject,
message,
responded: false
}
});
return NextResponse.json({
message: 'Contact created successfully',
contact
}, { status: 201 });
} catch (error) {
console.error('Error creating contact:', error);
return NextResponse.json(
{ error: 'Failed to create contact' },
{ status: 500 }
);
}
}

464
app/api/email/respond/route.tsx Normal file
View File

@@ -0,0 +1,464 @@
import { type NextRequest, NextResponse } from "next/server";
import nodemailer from "nodemailer";
import SMTPTransport from "nodemailer/lib/smtp-transport";
import Mail from "nodemailer/lib/mailer";
// Email templates with beautiful designs
const emailTemplates = {
welcome: {
subject: "Vielen Dank für deine Nachricht! 👋",
template: (name: string, originalMessage: string) => `
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Willkommen - Dennis Konkol</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<!-- Header -->
<div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px 30px; text-align: center;">
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
👋 Hallo ${name}!
</h1>
<p style="color: #d1fae5; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
Vielen Dank für deine Nachricht
</p>
</div>
<!-- Content -->
<div style="padding: 40px 30px;">
<!-- Welcome Message -->
<div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #bbf7d0;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<span style="color: #ffffff; font-size: 24px;">✓</span>
</div>
<h2 style="color: #065f46; margin: 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
</div>
<p style="color: #047857; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
Vielen Dank für deine Nachricht! Ich habe sie erhalten und werde mich so schnell wie möglich bei dir melden.
</p>
</div>
<!-- Original Message Reference -->
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
<span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
Deine ursprüngliche Nachricht
</h3>
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
</div>
</div>
<!-- Next Steps -->
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
<h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
🚀 Was passiert als nächstes?
</h3>
<div style="display: grid; gap: 15px;">
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
<span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">📧</span>
<div>
<h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Schnelle Antwort</h4>
<p style="color: #4b5563; margin: 0; font-size: 14px;">Ich antworte normalerweise innerhalb von 24 Stunden</p>
</div>
</div>
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
<span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">💼</span>
<div>
<h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Projekt-Diskussion</h4>
<p style="color: #4b5563; margin: 0; font-size: 14px;">Gerne besprechen wir dein Projekt im Detail</p>
</div>
</div>
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
<span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🤝</span>
<div>
<h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Zusammenarbeit</h4>
<p style="color: #4b5563; margin: 0; font-size: 14px;">Lass uns gemeinsam etwas Großartiges schaffen!</p>
</div>
</div>
</div>
</div>
<!-- Portfolio Links -->
<div style="text-align: center; margin-top: 30px;">
<h3 style="color: #374151; margin: 0 0 20px 0; font-size: 18px; font-weight: 600;">Entdecke mehr von mir</h3>
<div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
<a href="https://dk0.dev" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
🌐 Portfolio
</a>
<a href="https://github.com/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #374151 0%, #111827 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
💻 GitHub
</a>
<a href="https://linkedin.com/in/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #0077b5 0%, #005885 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
💼 LinkedIn
</a>
</div>
</div>
</div>
<!-- Footer -->
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
<div style="margin-bottom: 15px;">
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 1px;"></span>
</div>
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
<a href="https://dk0.dev" style="color: #10b981; text-decoration: none; font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-weight: bold;">dk<span style="color: #ef4444;">0</span>.dev</a> •
<a href="mailto:contact@dk0.dev" style="color: #10b981; text-decoration: none;">contact@dk0.dev</a>
</p>
<p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
${new Date().toLocaleString('de-DE', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})}
</p>
</div>
</div>
</body>
</html>
`
},
project: {
subject: "Projekt-Anfrage erhalten! 🚀",
template: (name: string, originalMessage: string) => `
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projekt-Anfrage - Dennis Konkol</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<!-- Header -->
<div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 40px 30px; text-align: center;">
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
🚀 Projekt-Anfrage erhalten!
</h1>
<p style="color: #e9d5ff; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
Hallo ${name}, lass uns etwas Großartiges schaffen!
</p>
</div>
<!-- Content -->
<div style="padding: 40px 30px;">
<!-- Project Message -->
<div style="background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e9d5ff;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<span style="color: #ffffff; font-size: 24px;">💼</span>
</div>
<h2 style="color: #6b21a8; margin: 0; font-size: 22px; font-weight: 600;">Bereit für dein Projekt!</h2>
</div>
<p style="color: #7c2d12; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
Vielen Dank für deine Projekt-Anfrage! Ich bin gespannt darauf, mehr über deine Ideen zu erfahren und wie wir sie gemeinsam umsetzen können.
</p>
</div>
<!-- Original Message -->
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
<span style="width: 6px; height: 6px; background: #8b5cf6; border-radius: 50%; margin-right: 10px;"></span>
Deine Projekt-Nachricht
</h3>
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #8b5cf6;">
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
</div>
</div>
<!-- Process Steps -->
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
<h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
🎯 Mein Arbeitsprozess
</h3>
<div style="display: grid; gap: 15px;">
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
<span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">💬</span>
<div>
<h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">1. Erstgespräch</h4>
<p style="color: #4b5563; margin: 0; font-size: 14px;">Wir besprechen deine Anforderungen im Detail</p>
</div>
</div>
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
<span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">📋</span>
<div>
<h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">2. Konzept & Planung</h4>
<p style="color: #4b5563; margin: 0; font-size: 14px;">Ich erstelle ein detailliertes Konzept für dein Projekt</p>
</div>
</div>
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #10b981;">
<span style="color: #10b981; font-size: 20px; margin-right: 15px;">⚡</span>
<div>
<h4 style="color: #059669; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">3. Entwicklung</h4>
<p style="color: #4b5563; margin: 0; font-size: 14px;">Agile Entwicklung mit regelmäßigen Updates</p>
</div>
</div>
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
<span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🎉</span>
<div>
<h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">4. Launch & Support</h4>
<p style="color: #4b5563; margin: 0; font-size: 14px;">Deployment und kontinuierlicher Support</p>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div style="text-align: center; margin-top: 30px;">
<a href="mailto:contact@dk0.dev?subject=Projekt-Diskussion mit ${name}" style="display: inline-block; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
💬 Projekt besprechen
</a>
</div>
</div>
<!-- Footer -->
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
<div style="margin-bottom: 15px;">
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 1px;"></span>
</div>
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
<a href="https://dki.one" style="color: #8b5cf6; text-decoration: none;">dki.one</a> •
<a href="mailto:contact@dk0.dev" style="color: #8b5cf6; text-decoration: none;">contact@dk0.dev</a>
</p>
</div>
</div>
</body>
</html>
`
},
quick: {
subject: "Danke für deine Nachricht! ⚡",
template: (name: string, originalMessage: string) => `
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Response - Dennis Konkol</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<!-- Header -->
<div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 40px 30px; text-align: center;">
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
⚡ Schnelle Antwort!
</h1>
<p style="color: #fef3c7; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
Hallo ${name}, danke für deine Nachricht!
</p>
</div>
<!-- Content -->
<div style="padding: 40px 30px;">
<!-- Quick Response -->
<div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #fde68a;">
<div style="text-align: center;">
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<span style="color: #ffffff; font-size: 24px;">⚡</span>
</div>
<h2 style="color: #92400e; margin: 0 0 15px 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
<p style="color: #a16207; margin: 0; line-height: 1.6; font-size: 16px;">
Vielen Dank für deine Nachricht! Ich werde mich so schnell wie möglich bei dir melden.
</p>
</div>
</div>
<!-- Original Message -->
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
<span style="width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; margin-right: 10px;"></span>
Deine Nachricht
</h3>
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #f59e0b;">
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
</div>
</div>
<!-- Quick Info -->
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 25px; border-radius: 12px; border: 1px solid #bfdbfe;">
<h3 style="color: #1e40af; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; text-align: center;">
📞 Kontakt
</h3>
<p style="color: #1e40af; margin: 0; text-align: center; line-height: 1.6; font-size: 14px;">
<strong>E-Mail:</strong> <a href="mailto:contact@dk0.dev" style="color: #1e40af; text-decoration: none;">contact@dk0.dev</a><br>
<strong>Portfolio:</strong> <a href="https://dki.one" style="color: #1e40af; text-decoration: none;">dki.one</a>
</p>
</div>
</div>
<!-- Footer -->
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
<div style="margin-bottom: 15px;">
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 1px;"></span>
</div>
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
<a href="https://dki.one" style="color: #f59e0b; text-decoration: none;">dki.one</a>
</p>
</div>
</div>
</body>
</html>
`
}
};
export async function POST(request: NextRequest) {
try {
const body = (await request.json()) as {
to: string;
name: string;
template: 'welcome' | 'project' | 'quick';
originalMessage: string;
};
const { to, name, template, originalMessage } = body;
console.log('📧 Email response request:', { to, name, template, messageLength: originalMessage.length });
// Validate input
if (!to || !name || !template || !originalMessage) {
console.error('❌ Validation failed: Missing required fields');
return NextResponse.json(
{ error: "Alle Felder sind erforderlich" },
{ status: 400 },
);
}
// Validate email format
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(to)) {
console.error('❌ Validation failed: Invalid email format');
return NextResponse.json(
{ error: "Ungültige E-Mail-Adresse" },
{ status: 400 },
);
}
// Check if template exists
if (!emailTemplates[template]) {
console.error('❌ Validation failed: Invalid template');
return NextResponse.json(
{ error: "Ungültiges Template" },
{ status: 400 },
);
}
const user = process.env.MY_EMAIL ?? "";
const pass = process.env.MY_PASSWORD ?? "";
if (!user || !pass) {
console.error("❌ Missing email/password environment variables");
return NextResponse.json(
{ error: "E-Mail-Server nicht konfiguriert" },
{ status: 500 },
);
}
const transportOptions: SMTPTransport.Options = {
host: "mail.dk0.dev",
port: 587,
secure: false,
requireTLS: true,
auth: {
type: "login",
user,
pass,
},
connectionTimeout: 30000,
greetingTimeout: 30000,
socketTimeout: 60000,
tls: {
rejectUnauthorized: false,
ciphers: 'SSLv3'
}
};
const transport = nodemailer.createTransport(transportOptions);
// Verify transport configuration
try {
await transport.verify();
console.log('✅ SMTP connection verified successfully');
} catch (verifyError) {
console.error('❌ SMTP verification failed:', verifyError);
return NextResponse.json(
{ error: "E-Mail-Server-Verbindung fehlgeschlagen" },
{ status: 500 },
);
}
const selectedTemplate = emailTemplates[template];
const mailOptions: Mail.Options = {
from: `"Dennis Konkol" <${user}>`,
to: to,
replyTo: "contact@dk0.dev",
subject: selectedTemplate.subject,
html: selectedTemplate.template(name, originalMessage),
text: `
Hallo ${name}!
Vielen Dank für deine Nachricht:
${originalMessage}
Ich werde mich so schnell wie möglich bei dir melden.
Beste Grüße,
Dennis Konkol
Software Engineer & Student
https://dki.one
contact@dk0.dev
`,
};
console.log('📤 Sending templated email...');
const sendMailPromise = () =>
new Promise<string>((resolve, reject) => {
transport.sendMail(mailOptions, function (err, info) {
if (!err) {
console.log('✅ Templated email sent successfully:', info.response);
resolve(info.response);
} else {
console.error("❌ Error sending templated email:", err);
reject(err.message);
}
});
});
const result = await sendMailPromise();
console.log('🎉 Templated email process completed successfully');
return NextResponse.json({
message: "Template-E-Mail erfolgreich gesendet",
template: template,
messageId: result
});
} catch (err) {
console.error("❌ Unexpected error in templated email API:", err);
return NextResponse.json({
error: "Fehler beim Senden der Template-E-Mail",
details: err instanceof Error ? err.message : 'Unbekannter Fehler'
}, { status: 500 });
}
}

214
app/api/email/route.tsx
View File

@@ -61,19 +61,24 @@ export async function POST(request: NextRequest) {
}
const transportOptions: SMTPTransport.Options = {
host: "smtp.ionos.de",
host: "mail.dk0.dev",
port: 587,
secure: false,
secure: false, // Port 587 uses STARTTLS, not SSL/TLS
requireTLS: true,
auth: {
type: "login",
user,
pass,
},
// Add timeout and debug options
connectionTimeout: 10000,
greetingTimeout: 10000,
socketTimeout: 10000,
// Increased timeout settings for better reliability
connectionTimeout: 30000, // 30 seconds
greetingTimeout: 30000, // 30 seconds
socketTimeout: 60000, // 60 seconds
// Additional TLS options for better compatibility
tls: {
rejectUnauthorized: false, // Allow self-signed certificates
ciphers: 'SSLv3'
}
};
console.log('🚀 Creating transport with options:', {
@@ -85,44 +90,129 @@ export async function POST(request: NextRequest) {
const transport = nodemailer.createTransport(transportOptions);
// Verify transport configuration
try {
await transport.verify();
console.log('✅ SMTP connection verified successfully');
} catch (verifyError) {
console.error('❌ SMTP verification failed:', verifyError);
return NextResponse.json(
{ error: "E-Mail-Server-Verbindung fehlgeschlagen" },
{ status: 500 },
);
// Verify transport configuration with retry logic
let verificationAttempts = 0;
const maxVerificationAttempts = 3;
let verificationSuccess = false;
while (verificationAttempts < maxVerificationAttempts && !verificationSuccess) {
try {
verificationAttempts++;
console.log(`🔍 SMTP verification attempt ${verificationAttempts}/${maxVerificationAttempts}`);
await transport.verify();
console.log('✅ SMTP connection verified successfully');
verificationSuccess = true;
} catch (verifyError) {
console.error(`❌ SMTP verification attempt ${verificationAttempts} failed:`, verifyError);
if (verificationAttempts >= maxVerificationAttempts) {
console.error('❌ All SMTP verification attempts failed');
return NextResponse.json(
{ error: "E-Mail-Server-Verbindung fehlgeschlagen" },
{ status: 500 },
);
}
// Wait before retry
await new Promise(resolve => setTimeout(resolve, 2000));
}
}
const mailOptions: Mail.Options = {
from: `"Portfolio Contact" <${user}>`,
to: "contact@dki.one", // Send to your contact email
to: "contact@dk0.dev", // Send to your contact email
replyTo: email,
subject: `Portfolio Kontakt: ${subject}`,
html: `
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
<h2 style="color: #3b82f6;">Neue Kontaktanfrage von deinem Portfolio</h2>
<div style="background: #f8fafc; padding: 20px; border-radius: 8px; margin: 20px 0;">
<h3 style="color: #1e293b; margin-top: 0;">Nachricht von ${name}</h3>
<p style="color: #475569; margin: 8px 0;"><strong>E-Mail:</strong> ${email}</p>
<p style="color: #475569; margin: 8px 0;"><strong>Betreff:</strong> ${subject}</p>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neue Kontaktanfrage - Portfolio</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
<!-- Header -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
📧 Neue Kontaktanfrage
</h1>
<p style="color: #e2e8f0; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
Von deinem Portfolio
</p>
</div>
<!-- Content -->
<div style="padding: 40px 30px;">
<!-- Contact Info Card -->
<div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
<div style="display: flex; align-items: center; margin-bottom: 20px;">
<div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
<span style="color: #ffffff; font-size: 20px; font-weight: bold;">${name.charAt(0).toUpperCase()}</span>
</div>
<div>
<h2 style="color: #1e293b; margin: 0; font-size: 24px; font-weight: 600;">${name}</h2>
<p style="color: #64748b; margin: 4px 0 0 0; font-size: 14px;">Kontaktanfrage</p>
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
<h4 style="color: #059669; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">E-Mail</h4>
<p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${email}</p>
</div>
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
<h4 style="color: #2563eb; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Betreff</h4>
<p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${subject}</p>
</div>
</div>
</div>
<!-- Message Card -->
<div style="background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);">
<div style="display: flex; align-items: center; margin-bottom: 20px;">
<div style="width: 8px; height: 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin-right: 12px;"></div>
<h3 style="color: #1e293b; margin: 0; font-size: 18px; font-weight: 600;">Nachricht</h3>
</div>
<div style="background: #f8fafc; padding: 25px; border-radius: 8px; border-left: 4px solid #667eea;">
<p style="color: #374151; margin: 0; line-height: 1.7; font-size: 16px; white-space: pre-wrap;">${message}</p>
</div>
</div>
<!-- Action Button -->
<div style="text-align: center; margin-top: 30px;">
<a href="mailto:${email}?subject=Re: ${subject}" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.2s;">
📬 Antworten
</a>
</div>
</div>
<!-- Footer -->
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
<div style="margin-bottom: 15px;">
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px;"></span>
</div>
<p style="color: #64748b; margin: 0; font-size: 14px; line-height: 1.5;">
Diese E-Mail wurde automatisch von deinem Portfolio generiert.<br>
<strong>Dennis Konkol Portfolio</strong> • <a href="https://dki.one" style="color: #667eea; text-decoration: none;">dki.one</a>
</p>
<p style="color: #94a3b8; margin: 10px 0 0 0; font-size: 12px;">
${new Date().toLocaleString('de-DE', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})}
</p>
</div>
</div>
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
<h4 style="color: #1e293b; margin-top: 0;">Nachricht:</h4>
<p style="color: #374151; line-height: 1.6; white-space: pre-wrap;">${message}</p>
</div>
<div style="text-align: center; margin-top: 30px; padding: 20px; background: #f1f5f9; border-radius: 8px;">
<p style="color: #64748b; margin: 0; font-size: 14px;">
Diese E-Mail wurde automatisch von deinem Portfolio generiert.
</p>
</div>
</div>
</body>
</html>
`,
text: `
Neue Kontaktanfrage von deinem Portfolio
@@ -140,21 +230,45 @@ Diese E-Mail wurde automatisch von deinem Portfolio generiert.
console.log('📤 Sending email...');
const sendMailPromise = () =>
new Promise<string>((resolve, reject) => {
transport.sendMail(mailOptions, function (err, info) {
if (!err) {
console.log('✅ Email sent successfully:', info.response);
resolve(info.response);
} else {
console.error("❌ Error sending email:", err);
reject(err.message);
}
});
});
// Email sending with retry logic
let sendAttempts = 0;
const maxSendAttempts = 3;
let sendSuccess = false;
let result = '';
const result = await sendMailPromise();
console.log('🎉 Email process completed successfully');
while (sendAttempts < maxSendAttempts && !sendSuccess) {
try {
sendAttempts++;
console.log(`📤 Email send attempt ${sendAttempts}/${maxSendAttempts}`);
const sendMailPromise = () =>
new Promise<string>((resolve, reject) => {
transport.sendMail(mailOptions, function (err, info) {
if (!err) {
console.log('✅ Email sent successfully:', info.response);
resolve(info.response);
} else {
console.error("❌ Error sending email:", err);
reject(err.message);
}
});
});
result = await sendMailPromise();
sendSuccess = true;
console.log('🎉 Email process completed successfully');
} catch (sendError) {
console.error(`❌ Email send attempt ${sendAttempts} failed:`, sendError);
if (sendAttempts >= maxSendAttempts) {
console.error('❌ All email send attempts failed');
throw new Error(`Failed to send email after ${maxSendAttempts} attempts: ${sendError}`);
}
// Wait before retry
await new Promise(resolve => setTimeout(resolve, 3000));
}
}
return NextResponse.json({
message: "E-Mail erfolgreich gesendet",

35
app/components/Contact.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Mail, Phone, MapPin, Send, Github, Linkedin, Twitter } from 'lucide-react';
import { Mail, Phone, MapPin, Send } from 'lucide-react';
import { useToast } from '@/components/Toast';
const Contact = () => {
@@ -66,28 +66,22 @@ const Contact = () => {
{
icon: Mail,
title: 'Email',
value: 'contact@dki.one',
href: 'mailto:contact@dki.one'
value: 'contact@dk0.dev',
href: 'mailto:contact@dk0.dev'
},
{
icon: Phone,
title: 'Phone',
value: '+49 123 456 789',
href: 'tel:+49123456789'
value: '+49 176 12669990',
href: 'tel:+4917612669990'
},
{
icon: MapPin,
title: 'Location',
value: 'Osnabrück, Germany',
href: '#'
}
];
const socialLinks = [
{ icon: Github, href: 'https://github.com/Denshooter', label: 'GitHub' },
{ icon: Linkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
{ icon: Twitter, href: 'https://twitter.com/dkonkol', label: 'Twitter' }
];
if (!mounted) {
return null;
@@ -155,25 +149,6 @@ const Contact = () => {
))}
</div>
{/* Social Links */}
<div>
<h4 className="text-lg font-semibold text-white mb-4">Follow Me</h4>
<div className="flex space-x-4">
{socialLinks.map((social) => (
<motion.a
key={social.label}
href={social.href}
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.1, y: -2 }}
whileTap={{ scale: 0.95 }}
className="p-3 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg text-gray-300 hover:text-white transition-colors"
>
<social.icon size={20} />
</motion.a>
))}
</div>
</div>
</motion.div>
{/* Contact Form */}

177
app/components/Footer.tsx
View File

@@ -2,7 +2,8 @@
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Github, Linkedin, Mail, Heart } from 'lucide-react';
import { Heart, Code } from 'lucide-react';
import { SiGithub, SiLinkedin } from 'react-icons/si';
import Link from 'next/link';
const Footer = () => {
@@ -15,16 +16,8 @@ const Footer = () => {
}, []);
const socialLinks = [
{ icon: Github, href: 'https://github.com/Denshooter', label: 'GitHub' },
{ icon: Linkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
{ icon: Mail, href: 'mailto:contact@dki.one', label: 'Email' }
];
const quickLinks = [
{ name: 'Home', href: '/' },
{ name: 'Projects', href: '/projects' },
{ name: 'About', href: '#about' },
{ name: 'Contact', href: '#contact' }
{ icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
{ icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' }
];
if (!mounted) {
@@ -32,129 +25,95 @@ const Footer = () => {
}
return (
<footer className="relative py-16 px-4 border-t border-gray-800">
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
<div className="relative z-10 max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div className="md:col-span-2">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<Link href="/" className="text-3xl font-bold gradient-text mb-4 inline-block">
Dennis Konkol
<footer className="relative py-12 px-4 bg-black border-t border-gray-800/50">
<div className="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0">
{/* Brand */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="flex items-center space-x-3"
>
<div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center">
<Code className="w-5 h-5 text-white" />
</div>
<div>
<Link href="/" className="text-xl font-bold font-mono text-white">
dk<span className="text-red-500">0</span>
</Link>
<p className="text-gray-400 mb-6 max-w-md leading-relaxed">
A passionate software engineer and student based in Osnabrück, Germany.
Creating innovative solutions that make a difference in the digital world.
</p>
<div className="flex space-x-4">
{socialLinks.map((social) => (
<motion.a
key={social.label}
href={social.href}
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.1, y: -2 }}
whileTap={{ scale: 0.95 }}
className="p-3 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg text-gray-300 hover:text-white transition-all duration-200"
>
<social.icon size={20} />
</motion.a>
))}
</div>
</motion.div>
</div>
<p className="text-xs text-gray-500">Software Engineer</p>
</div>
</motion.div>
{/* Social Links */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.1 }}
className="flex space-x-4"
>
<h3 className="text-lg font-semibold text-white mb-4">Quick Links</h3>
<ul className="space-y-2">
{quickLinks.map((link) => (
<li key={link.name}>
<Link
href={link.href}
className="text-gray-400 hover:text-white transition-colors duration-200"
>
{link.name}
</Link>
</li>
))}
</ul>
{socialLinks.map((social) => (
<motion.a
key={social.label}
href={social.href}
target="_blank"
rel="noopener noreferrer"
whileHover={{ scale: 1.1, y: -2 }}
whileTap={{ scale: 0.95 }}
className="p-3 bg-gray-800/50 hover:bg-gray-700/50 rounded-lg text-gray-300 hover:text-white transition-all duration-200"
>
<social.icon size={18} />
</motion.a>
))}
</motion.div>
{/* Copyright */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="flex items-center space-x-2 text-gray-400 text-sm"
>
<h3 className="text-lg font-semibold text-white mb-4">Legal</h3>
<ul className="space-y-2">
<li>
<Link
href="/legal-notice"
className="text-gray-400 hover:text-white transition-colors duration-200"
>
Impressum
</Link>
</li>
<li>
<Link
href="/privacy-policy"
className="text-gray-400 hover:text-white transition-colors duration-200"
>
Privacy Policy
</Link>
</li>
</ul>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<h3 className="text-lg font-semibold text-white mb-4">Contact</h3>
<div className="space-y-2 text-gray-400">
<p>Osnabrück, Germany</p>
<p>contact@dki.one</p>
<p>+49 123 456 789</p>
</div>
<span>© {currentYear}</span>
<motion.div
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 1.5, repeat: Infinity }}
>
<Heart size={14} className="text-red-500" />
</motion.div>
<span>Made in Germany</span>
</motion.div>
</div>
{/* Legal Links */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.3 }}
className="pt-8 border-t border-gray-800 text-center"
className="mt-8 pt-6 border-t border-gray-800/50 flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
>
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<p className="text-gray-400">
© {currentYear} Dennis Konkol. All rights reserved.
</p>
<div className="flex items-center space-x-2 text-gray-400">
<span>Made with</span>
<motion.div
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 1.5, repeat: Infinity }}
>
<Heart size={16} className="text-red-500" />
</motion.div>
<span>in Germany</span>
</div>
<div className="flex space-x-6 text-sm">
<Link
href="/legal-notice"
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
>
Impressum
</Link>
<Link
href="/privacy-policy"
className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
>
Privacy Policy
</Link>
</div>
<div className="text-xs text-gray-600">
Built with Next.js, TypeScript & Tailwind CSS
</div>
</motion.div>
</div>

79
app/components/Footer_Back.tsx
View File

@@ -1,79 +0,0 @@
import Link from "next/link";
import { useEffect, useState } from "react";
export default function Footer_Back() {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsVisible(true);
}, 450); // Delay to start the animation
}, []);
return (
<footer
className={`p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
>
<div className={`flex flex-col md:flex-row items-center justify-between`}>
<div className={`flex-col items-center`}>
<p className="md:mt-1 text-lg">
Connect with me on social platforms:
</p>
<div className="flex justify-center items-center space-x-4 mt-4">
<Link
aria-label={"Dennis Github"}
href="https://github.com/Denshooter"
target="_blank"
>
<svg
className="w-10 h-10"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
</svg>
</Link>
<Link
aria-label={"Dennis Linked In"}
href="https://linkedin.com/in/dkonkol"
target="_blank"
>
<svg
className="w-10 h-10"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z" />
</svg>
</Link>
</div>
</div>
<div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
<Link
href={"/"}
className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
>
Back to main page
</Link>
</div>
<div className="flex-col">
<div className="mt-4">
<Link
href="/privacy-policy"
className="text-blue-800 transition-underline"
>
Privacy Policy
</Link>
<Link
href="/legal-notice"
className="ml-4 text-blue-800 transition-underline"
>
Legal Notice
</Link>
</div>
<p className="md:mt-4">© Dennis Konkol 2025</p>
</div>
</div>
</footer>
);
}

13
app/components/Header.tsx
View File

@@ -2,7 +2,8 @@
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X, Github, Linkedin, Mail } from 'lucide-react';
import { Menu, X, Mail } from 'lucide-react';
import { SiGithub, SiLinkedin } from 'react-icons/si';
import Link from 'next/link';
const Header = () => {
@@ -31,9 +32,9 @@ const Header = () => {
];
const socialLinks = [
{ icon: Github, href: 'https://github.com/Denshooter', label: 'GitHub' },
{ icon: Linkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
{ icon: Mail, href: 'mailto:contact@dki.one', label: 'Email' },
{ icon: SiGithub, href: 'https://github.com/Denshooter', label: 'GitHub' },
{ icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' },
{ icon: Mail, href: 'mailto:contact@dk0.dev', label: 'Email' },
];
if (!mounted) {
@@ -70,8 +71,8 @@ const Header = () => {
whileHover={{ scale: 1.05 }}
className="flex items-center space-x-2"
>
<Link href="/" className="text-2xl font-bold gradient-text">
DK
<Link href="/" className="text-2xl font-bold font-mono text-white">
dk<span className="text-red-500">0</span>
</Link>
</motion.div>

31
app/components/Hero.tsx
View File

@@ -23,7 +23,7 @@ const Hero = () => {
}
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
<section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 pb-8">
{/* Animated Background */}
<div className="absolute inset-0 animated-bg"></div>
@@ -71,17 +71,26 @@ const Hero = () => {
</div>
<div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
{/* Domain - über dem Profilbild */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
className="mb-8"
>
<div className="domain-text text-white/95 text-center">
dk<span className="text-red-500">0</span>.dev
</div>
</motion.div>
{/* Profile Image */}
<motion.div
initial={{ opacity: 0, scale: 0.8, rotateY: -15 }}
animate={{ opacity: 1, scale: 1, rotateY: 0 }}
transition={{ duration: 1, delay: 0.1, ease: "easeOut" }}
transition={{ duration: 1, delay: 0.7, ease: "easeOut" }}
className="mb-8 flex justify-center"
>
<div className="relative group">
{/* Glowing border effect */}
<div className="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-600 to-cyan-600 rounded-full blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse"></div>
{/* Profile image container */}
<div className="relative bg-gray-900 rounded-full p-1">
<motion.div
@@ -137,7 +146,7 @@ const Hero = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
className="text-5xl md:text-7xl font-bold mb-6"
className="text-5xl md:text-7xl font-bold mb-4"
>
<span className="gradient-text">Dennis Konkol</span>
</motion.h1>
@@ -146,7 +155,7 @@ const Hero = () => {
<motion.p
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.0 }}
transition={{ duration: 0.8, delay: 1.1 }}
className="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto"
>
Student & Software Engineer based in Osnabrück, Germany
@@ -216,15 +225,15 @@ const Hero = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1.5 }}
className="mt-16 text-center"
className="mt-12 md:mt-16 text-center relative z-20"
>
<motion.div
animate={{ y: [0, 10, 0] }}
transition={{ duration: 2, repeat: Infinity }}
className="flex flex-col items-center text-gray-400"
className="flex flex-col items-center text-white/90 bg-black/30 backdrop-blur-md px-6 py-3 rounded-full border border-white/20 shadow-lg"
>
<span className="text-sm mb-2">Scroll Down</span>
<ArrowDown className="w-5 h-5" />
<span className="text-sm md:text-base mb-2 font-medium">Scroll Down</span>
<ArrowDown className="w-5 h-5 md:w-6 md:h-6" />
</motion.div>
</motion.div>
</div>

91
app/globals.css
View File

@@ -4,6 +4,15 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* Monaco Font for Domain */
@font-face {
font-family: 'Monaco';
src: url('https://fonts.gstatic.com/s/monaco/v1/Monaco-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--background: #0a0a0a;
--foreground: #fafafa;
@@ -83,6 +92,27 @@ body {
background-clip: text;
}
/* Domain Text with Monaco Font */
.domain-text {
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
font-size: 2.5rem;
font-weight: bold;
letter-spacing: 0.1em;
position: relative;
}
@media (min-width: 768px) {
.domain-text {
font-size: 3.5rem;
}
}
@media (min-width: 1024px) {
.domain-text {
font-size: 4rem;
}
}
.gradient-text-blue {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-webkit-background-clip: text;
@@ -92,9 +122,64 @@ body {
/* Animated Background */
.animated-bg {
background: linear-gradient(-45deg, #0f0f0f, #1a1a1a, #0f0f0f, #1a1a1a);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
background:
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.04) 0%, transparent 50%),
linear-gradient(-45deg, #0a0a0a, #111111, #0d0d0d, #151515);
background-size: 400% 400%, 400% 400%, 400% 400%, 400% 400%;
animation: gradientShift 25s ease infinite;
}
/* Film Grain / TV Noise Effect */
.animated-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 2px 2px, rgba(255,255,255,0.08) 2px, transparent 0),
radial-gradient(circle at 4px 4px, rgba(0,0,0,0.04) 2px, transparent 0),
radial-gradient(circle at 6px 6px, rgba(255,255,255,0.06) 2px, transparent 0),
radial-gradient(circle at 8px 8px, rgba(0,0,0,0.03) 2px, transparent 0);
background-size: 4px 4px, 6px 6px, 8px 8px, 10px 10px;
pointer-events: none;
opacity: 0.7;
}
@keyframes filmGrain {
0%, 100% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
10% {
background-position: -1px -1px, 1px 1px, -1px 1px;
}
20% {
background-position: 1px -1px, -1px 1px, 1px -1px;
}
30% {
background-position: -1px 1px, 1px -1px, -1px -1px;
}
40% {
background-position: 1px 1px, -1px -1px, 1px 1px;
}
50% {
background-position: -1px -1px, 1px 1px, -1px 1px;
}
60% {
background-position: 1px -1px, -1px 1px, 1px -1px;
}
70% {
background-position: -1px 1px, 1px -1px, -1px -1px;
}
80% {
background-position: 1px 1px, -1px -1px, 1px 1px;
}
90% {
background-position: -1px -1px, 1px 1px, -1px 1px;
}
}
@keyframes gradientShift {

8
app/layout.tsx
View File

@@ -39,15 +39,15 @@ export const metadata: Metadata = {
title: "Dennis Konkol | Portfolio",
description: "Portfolio of Dennis Konkol, a student and software engineer based in Osnabrück, Germany. Passionate about technology, coding, and solving real-world problems.",
keywords: ["Dennis Konkol", "Software Engineer", "Portfolio", "Student"],
authors: [{name: "Dennis Konkol", url: "https://dki.one"}],
authors: [{name: "Dennis Konkol", url: "https://dk0.dev"}],
openGraph: {
title: "Dennis Konkol | Portfolio",
description: "Explore my projects and get in touch!",
url: "https://dki.one",
url: "https://dk0.dev",
siteName: "Dennis Konkol Portfolio",
images: [
{
url: "https://dki.one/api/og",
url: "https://dk0.dev/api/og",
width: 1200,
height: 630,
alt: "Dennis Konkol Portfolio",
@@ -59,6 +59,6 @@ export const metadata: Metadata = {
card: "summary_large_image",
title: "Dennis Konkol | Portfolio",
description: "Student & Software Engineer based in Osnabrück, Germany.",
images: ["https://dki.one/api/og"],
images: ["https://dk0.dev/api/og"],
},
};

10
app/page.tsx
View File

@@ -9,7 +9,7 @@ import Script from "next/script";
export default function Home() {
return (
<div className="min-h-screen animated-bg">
<div className="min-h-screen">
<Script
id={"structured-data"}
type="application/ld+json"
@@ -18,7 +18,7 @@ export default function Home() {
"@context": "https://schema.org",
"@type": "Person",
name: "Dennis Konkol",
url: "https://dki.one",
url: "https://dk0.dev",
jobTitle: "Software Engineer",
address: {
"@type": "PostalAddress",
@@ -35,8 +35,10 @@ export default function Home() {
<Header />
<main>
<Hero />
<Projects />
<Contact />
<div className="bg-gradient-to-b from-gray-900 to-black">
<Projects />
<Contact />
</div>
</main>
<Footer />
</div>