Migrate from Vite to Next.js 15 with SSR

- Replace Vite + React Router with Next.js 15 App Router
- Implement i18n with next-intl (URL-based: /de, /en, /sr)
- Add SSR/SSG for all pages (48 static pages generated)
- Setup Supabase SSR client for auth
- Migrate all pages: Home, About, Portfolio, Blog, Contact, Login, Dashboard, Imprint, Privacy, Terms
- Add Docker support with standalone output
- Replace i18next with next-intl JSON translations
- Use next/image for optimized images

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-17 01:00:33 +01:00
co-authored by Claude Opus 4.5
parent a66f51b9a2
commit b1ec7b4d61
281 changed files with 8024 additions and 8901 deletions
+175
View File
@@ -0,0 +1,175 @@
// src/i18n/locales/de/blog/index.ts
export const blog = {
meta: {
title: 'Blog von Damjan Savić - JTL Integration & Digital Solutions',
description: 'Insights und Best Practices von Damjan Savić zu JTL-WaWi, E-Commerce und digitaler Transformation. Damjan Savić teilt seine Expertise als Fullstack Entwickler.',
header: {
title: 'Insights & Best Practices von Damjan Savić',
subtitle: 'Damjan Savić teilt Insights und Best Practices zu JTL-WaWi, E-Commerce und digitaler Transformation'
}
},
posts: {
'erp-integration-breuninger': {
title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
date: '2024-02-09',
excerpt: 'Detaillierte Analyse einer E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
category: 'System Integration',
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
content: {
intro: {
title: 'Apparel Magic meets Breuninger: Eine technische Analyse der TradeByte-Integration von Damjan Savić',
description: 'Die Integration von E-Commerce-Systemen mit etablierten Marktplätzen stellt Unternehmen vor besondere Herausforderungen. In diesem Artikel teilt Damjan Savić seine Erfahrungen aus einem komplexen Integrationsprojekt zwischen Apparel Magic als ERP-System und der Breuninger-Plattform über TradeByte.'
},
background: {
title: 'Projekthintergrund',
systems: {
erp: 'Apparel Magic als ERP-System für Produktdaten und Bestandsmanagement',
middleware: 'TradeByte als Middleware für die Breuninger-Plattform'
},
challenges: {
sync: 'Bidirektionale Synchronisation von Bestellungen',
customers: 'Automatisierte Kundenanlage',
delivery: 'Verwaltung von Lieferscheinen',
inventory: 'Bestandsmanagement in Echtzeit'
}
},
tech: {
title: 'Technische Architektur',
components: {
title: 'Zentrale Komponenten'
},
database: {
title: 'Middleware-Datenbank',
description: 'Die MariaDB-Datenbank fungiert als zentraler Datenspeicher für die Integration:'
}
},
api: {
title: 'API-Integrationen',
apparel_magic: {
title: 'Apparel Magic API',
description: 'Die REST-API von Apparel Magic wird für Kundenanlage und Bestandsmanagement verwendet:'
},
tradebyte: {
title: 'TradeByte Integration',
description: 'Die TradeByte-API verwendet eine Kombination aus REST und XML:'
}
},
order_process: {
title: 'Bestellprozess',
steps: {
fetch: 'Regelmäßiger Abruf neuer Bestellungen von TradeByte',
customers: 'Automatische Kundenanlage in Apparel Magic',
process: 'Bestellverarbeitung und Statusaktualisierung',
delivery: 'Generierung und Speicherung von Lieferscheinen'
},
delivery_notes: {
title: 'Lieferschein-Management'
}
},
challenges: {
title: 'Herausforderungen und Lösungen',
status: {
title: '1. Status-Management',
description: 'Eine besondere Herausforderung war das Management von Bestellstatus:'
},
error_handling: {
title: '2. Fehlerbehandlung und Monitoring',
description: 'Robuste Fehlerbehandlung war essentiell für den Produktivbetrieb:'
}
},
best_practices: {
title: 'Best Practices',
api: {
title: '1. API-Kommunikation',
items: {
retry: 'Implementierung von Retry-Mechanismen',
errors: 'Sorgfältiges Error Handling',
logging: 'Ausführliches Logging aller Kommunikation'
}
},
data: {
title: '2. Datenmanagement',
items: {
storage: 'Zentrale Datenhaltung in MariaDB',
transactions: 'Transaktionssicherheit bei kritischen Operationen',
validation: 'Regelmäßige Datenvalidierung'
}
},
automation: {
title: '3. Prozessautomatisierung',
items: {
customers: 'Automatisierte Kundenanlage',
status: 'Automatische Statusaktualisierungen',
delivery: 'Systematisches Lieferschein-Management'
}
}
},
lessons: {
title: 'Lessons Learned',
api: {
title: '1. API-Design',
items: {
docs: 'Gründliche API-Dokumentation ist essentiell',
auth: 'Verständnis der verschiedenen Authentifizierungsmethoden',
limits: 'Berücksichtigung von Rate Limits'
}
},
validation: {
title: '2. Datenvalidierung',
items: {
rules: 'Implementierung strenger Validierungsregeln',
edge_cases: 'Sorgfältige Handhabung von Sonderfällen',
cleanup: 'Automatische Datenbereinigung'
}
},
optimization: {
title: '3. Prozessoptimierung',
items: {
automation: 'Kontinuierliche Verbesserung der Automatisierung',
performance: 'Regelmäßige Performance-Überprüfungen',
monitoring: 'Proaktives Monitoring'
}
}
},
conclusion: {
title: 'Fazit',
requirements: {
understanding: 'Tiefes Verständnis beider Systeme',
implementation: 'Sorgfältige Implementierung der API-Kommunikation',
error_handling: 'Robuste Fehlerbehandlung',
monitoring: 'Kontinuierliches Monitoring'
},
results: 'Die von Damjan Savić entwickelte Lösung verarbeitet erfolgreich Bestellungen und ermöglicht eine nahtlose Integration zwischen den Systemen. Besonders die von Damjan Savić implementierte automatisierte Kundenanlage und das Lieferschein-Management haben sich als effizienzsteigernd erwiesen.'
}
}
},
},
ui: {
readMore: 'Weiterlesen',
loading: {
posts: 'Blogbeiträge werden geladen...',
post: 'Blogbeitrag wird geladen...'
},
errors: {
posts: 'Fehler beim Laden der Blogbeiträge',
post: 'Der gesuchte Blogbeitrag existiert nicht oder wurde verschoben.'
},
backToBlog: 'Zurück zum Blog',
publishedOn: 'Veröffentlicht am',
category: 'Kategorie',
tags: 'Tags',
notFound: {
title: 'Beitrag nicht gefunden',
message: 'Der gesuchte Blogbeitrag existiert nicht oder wurde verschoben.'
}
},
categories: {
'Integration': 'Integration',
'Entwicklung': 'Entwicklung',
'Automatisierung': 'Automatisierung'
}
} as const;
export type BlogConfig = typeof blog;
export type BlogPost = BlogConfig['posts'][keyof BlogConfig['posts']];
@@ -0,0 +1,138 @@
// src/i18n/locales/de/blog/posts/erp-integration-breuninger.ts
export const erpIntegrationBreuninger = {
posts: {
erp_integration: {
title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen von Damjan Savić',
date: '2024-02-09',
excerpt: 'Detaillierte Analyse von Damjan Savić zur E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
category: 'System Integration',
tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
intro: {
title: 'Apparel Magic meets Breuninger: Eine technische Analyse der TradeByte-Integration von Damjan Savić',
description: 'Die Integration von E-Commerce-Systemen mit etablierten Marktplätzen stellt Unternehmen vor besondere Herausforderungen. In diesem Artikel teilt Damjan Savić seine Erfahrungen aus einem komplexen Integrationsprojekt zwischen Apparel Magic als ERP-System und der Breuninger-Plattform über TradeByte. Damjan Savić zeigt die technischen Herausforderungen und Lösungsansätze auf.'
},
background: {
title: 'Projekthintergrund',
systems: {
erp: 'Apparel Magic als ERP-System für Produktdaten und Bestandsmanagement',
middleware: 'TradeByte als Middleware für die Breuninger-Plattform'
},
challenges: {
sync: 'Bidirektionale Synchronisation von Bestellungen',
customers: 'Automatisierte Kundenanlage',
delivery: 'Verwaltung von Lieferscheinen',
inventory: 'Bestandsmanagement in Echtzeit'
}
},
tech: {
title: 'Technische Architektur',
components: {
title: 'Zentrale Komponenten'
},
database: {
title: 'Middleware-Datenbank',
description: 'Die MariaDB-Datenbank fungiert als zentraler Datenspeicher für die Integration:'
}
},
api: {
title: 'API-Integrationen',
apparel_magic: {
title: 'Apparel Magic API',
description: 'Die REST-API von Apparel Magic wird für Kundenanlage und Bestandsmanagement verwendet:'
},
tradebyte: {
title: 'TradeByte Integration',
description: 'Die TradeByte-API verwendet eine Kombination aus REST und XML:'
}
},
order_process: {
title: 'Bestellprozess',
steps: {
fetch: 'Regelmäßiger Abruf neuer Bestellungen von TradeByte',
customers: 'Automatische Kundenanlage in Apparel Magic',
process: 'Bestellverarbeitung und Statusaktualisierung',
delivery: 'Generierung und Speicherung von Lieferscheinen'
},
delivery_notes: {
title: 'Lieferschein-Management'
}
},
challenges: {
title: 'Herausforderungen und Lösungen',
status: {
title: '1. Status-Management',
description: 'Eine besondere Herausforderung war das Management von Bestellstatus:'
},
error_handling: {
title: '2. Fehlerbehandlung und Monitoring',
description: 'Robuste Fehlerbehandlung war essentiell für den Produktivbetrieb:'
}
},
best_practices: {
title: 'Best Practices',
api: {
title: '1. API-Kommunikation',
items: {
retry: 'Implementierung von Retry-Mechanismen',
errors: 'Sorgfältiges Error Handling',
logging: 'Ausführliches Logging aller Kommunikation'
}
},
data: {
title: '2. Datenmanagement',
items: {
storage: 'Zentrale Datenhaltung in MariaDB',
transactions: 'Transaktionssicherheit bei kritischen Operationen',
validation: 'Regelmäßige Datenvalidierung'
}
},
automation: {
title: '3. Prozessautomatisierung',
items: {
customers: 'Automatisierte Kundenanlage',
status: 'Automatische Statusaktualisierungen',
delivery: 'Systematisches Lieferschein-Management'
}
}
},
lessons: {
title: 'Lessons Learned',
api: {
title: '1. API-Design',
items: {
docs: 'Gründliche API-Dokumentation ist essentiell',
auth: 'Verständnis der verschiedenen Authentifizierungsmethoden',
limits: 'Berücksichtigung von Rate Limits'
}
},
validation: {
title: '2. Datenvalidierung',
items: {
rules: 'Implementierung strenger Validierungsregeln',
edge_cases: 'Sorgfältige Handhabung von Sonderfällen',
cleanup: 'Automatische Datenbereinigung'
}
},
optimization: {
title: '3. Prozessoptimierung',
items: {
automation: 'Kontinuierliche Verbesserung der Automatisierung',
performance: 'Regelmäßige Performance-Überprüfungen',
monitoring: 'Proaktives Monitoring'
}
}
},
conclusion: {
title: 'Fazit',
requirements: {
understanding: 'Tiefes Verständnis beider Systeme',
implementation: 'Sorgfältige Implementierung der API-Kommunikation',
error_handling: 'Robuste Fehlerbehandlung',
monitoring: 'Kontinuierliches Monitoring'
},
results: 'Die von Damjan Savić entwickelte Lösung verarbeitet erfolgreich Bestellungen und ermöglicht eine nahtlose Integration zwischen den Systemen. Besonders die von Damjan Savić implementierte automatisierte Kundenanlage und das Lieferschein-Management haben sich als effizienzsteigernd erwiesen. Dieses Projekt zeigt die Expertise von Damjan Savić im Bereich der Systemintegration.'
}
}
}
};
@@ -0,0 +1,253 @@
// src/i18n/locales/de/blog/posts/fullstack-development-timetracking.ts
export const fullstackDevelopmentTimetracking = {
meta: {
title: 'Fullstack-Entwicklung mit Python und React: Architektur unserer Zeiterfassungslösung',
date: '2024-02-09',
excerpt: 'Eine technische Deep-Dive in die Implementierung einer modernen Zeiterfassungslösung',
category: 'System Architecture',
coverImage: '/images/posts/fullstack-development-timetracking/cover.jpg',
tags: ['Python', 'React', 'TypeScript', 'MSSQL', 'System Design']
},
content: {
intro: {
title: 'Fullstack-Entwicklung mit Python und React: Architektur unserer Zeiterfassungslösung',
description: 'Die Entwicklung einer robusten Zeiterfassungslösung erfordert nicht nur technisches Know-how, sondern auch ein tiefes Verständnis für komplexe Geschäftsregeln und Benutzeranforderungen. In diesem Artikel teile ich unsere Erfahrungen bei der Implementierung einer modernen Fullstack-Zeiterfassungslösung mit Python und React.'
},
systemArchitecture: {
title: 'Systemarchitektur',
frontend: {
title: 'Frontend (Next.js + TypeScript)',
description: 'Die Frontend-Architektur basiert auf Next.js mit TypeScript und folgt einem komponenten-basierten Ansatz:',
code: {
types: `// types/TimeEntry.ts
interface TimeEntry {
id: number;
date: string;
checkIn: string;
checkOut: string | null;
userId: number;
status: 'complete' | 'incomplete';
}`,
component: `// components/TimeEntryForm.tsx
const TimeEntryForm: React.FC<TimeEntryFormProps> = ({ onSubmit }) => {
const [entry, setEntry] = useState<TimeEntry>({
date: new Date().toISOString().split('T')[0],
checkIn: new Date().toLocaleTimeString(),
checkOut: null,
status: 'incomplete'
});
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateTimeEntry(entry)) return;
try {
await onSubmit(entry);
} catch (error) {
console.error('Error submitting time entry:', error);
}
};
return (
<form onSubmit={handleSubmit} className='space-y-4'>
<DateInput
value={entry.date}
onChange={(date) => setEntry({ ...entry, date })}
/>
<TimeInput
value={entry.checkIn}
onChange={(time) => setEntry({ ...entry, checkIn: time })}
/>
{/* Additional form elements */}
</form>
);
};`
}
},
backend: {
title: 'Backend (Flask + MSSQL)',
description: 'Das Backend verwendet Flask für die API und MSSQL für die Datenpersistenz:',
code: {
models: `# models/time_entry.py
class TimeEntry(db.Model):
__tablename__ = 'Stundenzettel'
id = db.Column('ID', db.Decimal, primary_key=True)
personal_id = db.Column('Personal_ID', db.Decimal)
datum = db.Column('Datum', db.Date)
kommen = db.Column('Kommen', db.Time)
gehen = db.Column('Gehen', db.Time)
@validates('gehen')
def validate_checkout(self, key, value):
if value and value < self.kommen:
raise ValueError('Checkout time cannot be before checkin time')
return value`,
routes: `# routes/time_entries.py
@app.route('/api/time-entries', methods=['POST'])
@jwt_required
def create_time_entry():
data = request.get_json()
user_id = get_jwt_identity()
try:
validate_time_entry_creation(data, user_id)
entry = TimeEntry(
personal_id=user_id,
datum=data['date'],
kommen=data['checkIn'],
gehen=data.get('checkOut')
)
db.session.add(entry)
db.session.commit()
return jsonify(entry.to_dict()), 201
except ValidationError as e:
return jsonify({'error': str(e)}), 400`
}
}
},
businessLogic: {
title: 'Geschäftslogik-Implementierung',
validation: {
title: 'Validierung von Zeiteinträgen',
description: 'Die Validierungslogik stellt sicher, dass alle Geschäftsregeln eingehalten werden:',
code: `def validate_time_entry_creation(data: dict, user_id: int) -> None:
'''Validates a new time entry according to business rules.'''
# Check for existing incomplete entries
incomplete_entry = TimeEntry.query.filter_by(
personal_id=user_id,
gehen=None,
datum=data['date']
).first()
if incomplete_entry:
raise ValidationError('Cannot create new entry while incomplete entry exists')
# Check for time overlap with existing entries
overlapping_entry = TimeEntry.query.filter(
TimeEntry.personal_id == user_id,
TimeEntry.datum == data['date'],
TimeEntry.kommen <= data['checkIn'],
TimeEntry.gehen >= data['checkIn']
).first()
if overlapping_entry:
raise ValidationError('Time entry overlaps with existing entry')`
}
},
databaseDesign: {
title: 'Datenbankdesign',
description: 'Das MSSQL-Datenbankschema ist auf Effizienz und Integrität ausgelegt:',
code: `CREATE TABLE dbo.Stundenzettel (
ID decimal NOT NULL PRIMARY KEY,
Personal_ID decimal,
Datum date,
Kommen time,
Gehen time,
xStatus int,
xBenutzer nvarchar(15),
xDatum datetime,
xVersion timestamp
);
CREATE INDEX idx_personal_datum
ON dbo.Stundenzettel(Personal_ID, Datum);`
},
security: {
title: 'Sicherheitsimplementierung',
authentication: {
title: 'JWT-Authentifizierung',
code: `# auth/jwt_handler.py
from flask_jwt_extended import create_access_token
def authenticate_user(username: str, password: str) -> str:
user = Personal.query.filter_by(
Benutzername=username,
Passwort=password # In production, use proper password hashing
).first()
if not user:
raise AuthenticationError('Invalid credentials')
return create_access_token(identity=user.ID)`
}
},
bestPractices: {
title: 'Best Practices und Learnings',
points: [
{
title: 'Datenvalidierung auf mehreren Ebenen',
items: [
'Frontend-Validierung für sofortiges Feedback',
'Backend-Validierung für Geschäftsregeln',
'Datenbankconstraints für Datenintegrität'
]
},
{
title: 'Fehlerbehandlung',
items: [
'Strukturierte Fehlermeldungen',
'Benutzerfreundliche Fehlermeldungen im Frontend',
'Detailliertes Logging im Backend'
]
},
{
title: 'Performance-Optimierung',
items: [
'Indexierung kritischer Datenbankfelder',
'Frontend-Caching von Zeiteinträgen',
'Lazy Loading für historische Daten'
]
}
]
},
challenges: {
title: 'Herausforderungen und Lösungen',
timezones: {
title: '1. Zeitzonen-Handling',
description: 'Eine besondere Herausforderung war die korrekte Behandlung von Zeitzonen:',
code: `// utils/dateTime.ts
export const formatTimeForDisplay = (time: string): string => {
return new Date(\`1970-01-01T\${time}\`).toLocaleTimeString('de-DE', {
hour: '2-digit',
minute: '2-digit'
});
};
export const formatTimeForAPI = (time: string): string => {
return new Date(\`1970-01-01T\${time}\`).toISOString().split('T')[1];
};`
},
concurrency: {
title: '2. Concurrent Updates',
description: 'Die Behandlung gleichzeitiger Updates erforderte spezielle Aufmerksamkeit:',
code: `from sqlalchemy import and_, or_
def update_time_entry(entry_id: int, data: dict) -> TimeEntry:
entry = TimeEntry.query.filter_by(id=entry_id).with_for_update().first()
if not entry:
raise NotFoundError('Time entry not found')
# Optimistic locking using version field
if entry.xVersion != data['version']:
raise ConcurrencyError('Entry was modified by another user')
entry.gehen = data.get('checkOut')
db.session.commit()
return entry`
},
offline: {
title: '3. Offline-Fähigkeit',
description: 'Für die Offline-Funktionalität implementierten wir eine Service Worker-Strategie:',
code: `// service-worker.ts
const CACHE_NAME = 'timetracking-v1';
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).then(response => {
return caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});`
}
},
conclusion: {
title: 'Fazit',
description: 'Die Entwicklung einer Zeiterfassungslösung erfordert sorgfältige Planung und Berücksichtigung zahlreicher Geschäftsregeln. Durch den Einsatz moderner Technologien wie Next.js, TypeScript und Flask konnten wir eine robuste und benutzerfreundliche Lösung implementieren.',
keyPoints: [
'Strikte Typisierung mit TypeScript',
'Umfassende Validierungslogik',
'Effizientes Datenbankdesign',
'Benutzerfreundliche Fehlerbehandlung'
],
results: 'Die Lösung ist seit mehreren Monaten erfolgreich im Einsatz und verarbeitet täglich hunderte von Zeiteinträgen zuverlässig.'
}
}
};
@@ -0,0 +1,204 @@
// src/i18n/locales/de/blog/posts/rfid-automation.ts
export const rfidAutomation = {
meta: {
title: 'RFID-Etiketten-Automatisierung: Von Datenbank zum Drucker',
date: '2024-02-09',
excerpt: 'Eine detaillierte technische Analyse der Implementierung eines automatisierten RFID-Etikettendruck-Systems mit Python',
category: 'System Integration',
coverImage: '/images/posts/rfid-automation/cover.jpg',
tags: ['RFID', 'Python', 'ZPL', 'Automation', 'Zebra Printer', 'EPC']
},
content: {
intro: {
title: 'RFID-Etiketten-Automatisierung: Von Datenbank zum Drucker',
description: 'In modernen Logistik- und Retail-Umgebungen ist die effiziente und fehlerfreie Etikettierung von Produkten mit RFID-Tags von entscheidender Bedeutung. In diesem Artikel teile ich meine Erfahrungen bei der Implementierung einer automatisierten Lösung für die Generierung und den Druck von RFID-Etiketten mit Chipkodierung.'
},
requirements: {
title: 'Projekthintergrund',
points: [
'Automatische Generierung von EPC-Codes (Electronic Product Code)',
'Erstellung von ZPL-Code für Zebra-Drucker',
'Direkte Netzwerkkommunikation mit dem Drucker',
'Integration mit bestehenden Produktdaten',
'Fehlerbehandlung und Logging'
]
},
implementation: {
title: 'Technische Umsetzung',
epcGeneration: {
title: 'EPC-Code Generierung',
description: 'Die EPC-Codes werden nach dem SGTIN-Standard (Serialized Global Trade Item Number) generiert:',
code: `def generate_encoded_epc(company_prefix, indicator, item_ref, serial):
sgtin = SGTIN(company_prefix, indicator, item_ref, serial)
return sgtin.encode()`
},
zplTemplates: {
title: 'ZPL-Template Management',
description: 'Für die unterschiedlichen Etikettentypen wurden ZPL-Templates implementiert:',
code: `def generate_zpl_code(artikelnr, description, ean, price, material, water_resistance, glass_type, encoded_epc):
formatted_price = f'{price:.2f}'
return f'''
CT~~CD,~CC^~CT~
^XA
~TA000
~JSN
^LT35
^MNW
^MTT
^PON
^PMN
^LH0,0
^JMA
^PR2,2
~SD23
^JUS
^LRN
^CI27
^PA0,1,1,0
^RS8,,,3
^XZ
^XA
^MMT
^PW413
^LL531
^LS-24
^FT150,57^A0N,33,33^FH\\^CI27^FD{artikelnr}^FS^CI27
^FT44,86^A0N,21,20^FH\\^CI27^FD{description}^FS^CI27
^FT130,141^A0N,50,51^FH\\^CI27^FD{formatted_price} €^FS^CI27
^FT167,175^A0N,21,20^FH\\^CI27^FD{material}^FS^CI27
^FT185,201^A0N,21,20^FH\\^CI27^FD{water_resistance}^FS^CI27
^FT155,227^A0N,21,20^FH\\^CI27^FD{glass_type}^FS^CI27
^BY3,2,113^FT73,420^BEN,,Y,N
^FH\\^FD{ean}^FS
^RFW,H,1,2,1^FD3000^FS
^RFW,H,2,12,1^FD{encoded_epc}^FS
^PQ1,0,1,Y
^XZ'''`
},
printerCommunication: {
title: 'Netzwerkkommunikation mit dem Drucker',
description: 'Die Kommunikation mit dem Zebra-Drucker erfolgt über TCP/IP:',
code: `def send_to_printer(data, printer_ip='192.168.68.50', printer_port=9100):
try:
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as sock:
sock.connect((printer_ip, printer_port))
sock.sendall(data.encode('utf-8'))
logger.info('Daten erfolgreich an den Drucker gesendet')
except Exception as e:
logger.error(f'Fehler beim Senden der Daten an den Drucker: {e}')`
},
serialNumberManagement: {
title: 'Datenprozessierung und Seriennummernverwaltung',
description: 'Die Verwaltung von Seriennummern ist kritisch für die Eindeutigkeit der EPC-Codes:',
code: `def initialize_serial_number():
global current_serial_number
try:
serial_log_content = SERIAL_NUMBER_LOG_PATH.read_text().strip()
current_serial_number = int(serial_log_content)
except (FileNotFoundError, ValueError):
current_serial_number = START_SERIAL_NUMBER
def get_next_serial_number():
global current_serial_number
current_serial_number += 1
return current_serial_number
def finalize_serial_number():
SERIAL_NUMBER_LOG_PATH.write_text(str(current_serial_number))`
}
},
features: {
title: 'Implementierte Features',
errorHandling: {
title: '1. Robuste Fehlerbehandlung',
points: [
'Validierung der Eingabedaten',
'Überprüfung der Netzwerkverbindung',
'Persistenz von Seriennummern',
'Detailliertes Logging aller Operationen'
]
},
configurability: {
title: '2. Konfigurierbarkeit',
points: [
'Drucker-IP und Port einstellbar',
'Anpassbare ZPL-Templates',
'Flexible EPC-Code-Generierung',
'Konfigurierbare Seriennummernbereiche'
]
},
scalability: {
title: '3. Skalierbarkeit',
points: [
'Batch-Verarbeitung von Produktdaten',
'Parallele Druckaufträge möglich',
'Effizientes Ressourcenmanagement',
'Modularer Code für einfache Erweiterbarkeit'
]
}
},
bestPractices: {
title: 'Best Practices',
dataValidation: {
title: '1. Datenvalidierung',
points: [
'Strict typing für kritische Datenfelder',
'Überprüfung von Pflichtfeldern',
'Format- und Plausibilitätsprüfungen'
]
},
faultTolerance: {
title: '2. Fehlertoleranz',
points: [
'Automatische Wiederholungsversuche',
'Graceful Degradation',
'Detaillierte Fehlerprotokolle'
]
},
maintainability: {
title: '3. Wartbarkeit',
points: [
'Modularer Code-Aufbau',
'Ausführliche Dokumentation',
'Klare Trennung von Konfiguration und Code'
]
}
},
lessonsLearned: {
title: 'Lessons Learned',
zplSpecifics: {
title: '1. ZPL-Spezifika',
points: [
'Genaue Kenntnis der ZPL-Spezifikationen notwendig',
'Sorgfältige Validierung der generierten ZPL-Codes',
'Regelmäßige Tests mit verschiedenen Druckermodellen'
]
},
rfidStandards: {
title: '2. RFID-Standards',
points: [
'Einhaltung der EPC-Standards kritisch',
'Sorgfältige Verwaltung von Seriennummern',
'Validierung der generierten EPC-Codes'
]
},
networkCommunication: {
title: '3. Netzwerkkommunikation',
points: [
'Robuste Fehlerbehandlung bei Netzwerkproblemen',
'Timeouts und Wiederholungsversuche',
'Pufferung von Druckaufträgen'
]
}
},
conclusion: {
title: 'Fazit',
description: 'Die implementierte Lösung ermöglicht eine effiziente und zuverlässige Automatisierung des RFID-Etikettierungsprozesses. Durch die Kombination von EPC-Code-Generierung, ZPL-Template-Management und direkter Druckerkommunikation wurde ein robustes System geschaffen, das sich in der Praxis bewährt hat.',
keyPoints: [
'Gründliche Planung der Systemarchitektur',
'Umfassende Fehlerbehandlung',
'Sorgfältige Dokumentation',
'Regelmäßige Tests und Validierung'
],
results: 'Die Lösung läuft seit mehreren Monaten stabil im Produktivbetrieb und verarbeitet täglich hunderte von Etiketten.'
}
}
};
+99
View File
@@ -0,0 +1,99 @@
export const common = {
// SEO & Meta
siteTitle: 'Damjan Savić - Digital Solutions & JTL Integration',
siteDescription: 'Entwickler individueller Lösungen zur Automatisierung von Prozessen',
// Navigation
nav: {
home: 'Start',
about: 'Über mich',
services: 'Leistungen',
portfolio: 'Portfolio',
blog: 'Blog',
contact: 'Kontakt'
},
// Common Actions
actions: {
readMore: 'Weiterlesen',
viewMore: 'Mehr anzeigen',
viewAll: 'Alle anzeigen',
back: 'Zurück',
close: 'Schließen',
submit: 'Absenden',
loading: 'Lädt...'
},
// UI Components
ui: {
published: 'Veröffentlicht am',
lastUpdated: 'Zuletzt aktualisiert am',
category: 'Kategorie',
categories: 'Kategorien',
tag: 'Tag',
tags: 'Tags',
author: 'Autor',
minuteRead: 'Minuten Lesezeit',
tableOfContents: 'Inhaltsverzeichnis'
},
// Error Messages
errors: {
generic: 'Ein Fehler ist aufgetreten',
notFound: 'Seite nicht gefunden',
loading: 'Fehler beim Laden',
return: 'Zurück zur Startseite'
},
// Loading States
loading: {
content: 'Inhalt wird geladen',
page: 'Seite wird geladen',
processing: 'Wird verarbeitet'
},
// Dates
dates: {
months: {
long: [
'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
],
short: [
'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'
]
},
weekdays: {
long: [
'Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
'Donnerstag', 'Freitag', 'Samstag'
],
short: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
}
},
// Social Media
social: {
followMe: 'Folgen Sie mir auf',
shareOn: 'Teilen auf',
linkedin: 'LinkedIn',
github: 'GitHub',
email: 'E-Mail'
},
// Contact Form
contact: {
title: 'Kontakt',
name: 'Name',
email: 'E-Mail',
message: 'Nachricht',
submit: 'Nachricht senden',
success: 'Ihre Nachricht wurde erfolgreich gesendet',
error: 'Es gab einen Fehler beim Senden Ihrer Nachricht'
},
// Accessibility
a11y: {
skipToContent: 'Zum Hauptinhalt springen',
menuOpen: 'Menü öffnen',
menuClose: 'Menü schließen',
darkMode: 'Dark Mode umschalten',
carousel: {
next: 'Nächstes Bild',
previous: 'Vorheriges Bild'
}
}
} as const;
export type CommonTranslations = typeof common;
+14
View File
@@ -0,0 +1,14 @@
const cookiebanner = {
cookies: {
message: "Diese Website verwendet Cookies, um Ihr Browsing-Erlebnis zu verbessern. Die Daten werden nicht an Dritte weitergegeben.",
accept: "Cookies akzeptieren",
decline: "Ablehnen",
necessary: "Notwendige Cookies",
necessaryDesc: "Für grundlegende Funktionen der Website",
analytics: "Analyse-Cookies",
analyticsDesc: "Für Analysen zur Verbesserung der Website",
learnMore: "Mehr erfahren"
}
};
export default cookiebanner;
+37
View File
@@ -0,0 +1,37 @@
export const faq = {
title: 'Häufig gestellte Fragen',
moreQuestions: 'Haben Sie weitere Fragen?',
contactUs: 'Kontaktieren Sie uns',
questions: [
{
question: "Wie kann ich Python für Prozessautomatisierung einsetzen?",
answer: "Python eignet sich hervorragend für Prozessautomatisierung durch Libraries wie Selenium für Web-Automation, Pandas für Datenverarbeitung und Schedule für zeitgesteuerte Aufgaben. Ich entwickle maßgeschneiderte Automatisierungslösungen für Ihre Geschäftsprozesse.",
category: "python"
},
{
question: "Was macht OLLAMA ideal für lokale KI-Entwicklung?",
answer: "OLLAMA ermöglicht das Ausführen großer Sprachmodelle lokal, was Datenschutz gewährleistet und API-Kosten reduziert. Ich spezialisiere mich auf die Integration von OLLAMA in Anwendungen für individuelle KI-Lösungen ohne Cloud-Abhängigkeiten.",
category: "ai"
},
{
question: "Welche Vorteile bieten Electron Desktop Apps?",
answer: "Electron ermöglicht die Entwicklung plattformübergreifender Desktop-Anwendungen mit Web-Technologien. Sie erhalten eine native App für Windows, Mac und Linux aus einer einzigen Codebasis. Ideal für Tools mit komplexer UI und Offline-Funktionalität.",
category: "electron"
},
{
question: "Wie lange dauert die Entwicklung einer Web-Anwendung?",
answer: "Die Entwicklungsdauer hängt vom Umfang ab. Ein MVP kann in 4-8 Wochen entwickelt werden, während komplexe Enterprise-Anwendungen 3-6 Monate benötigen. Ich arbeite agil und liefere in 2-Wochen-Sprints nutzbare Zwischenergebnisse.",
category: "general"
},
{
question: "Können Sie bestehende Python-Skripte in Web-Apps umwandeln?",
answer: "Ja, ich kann Ihre Python-Skripte in moderne Web-Anwendungen mit FastAPI oder Django Backend und React Frontend transformieren. Dies ermöglicht Multi-User-Zugriff, bessere UI/UX und zentrale Datenverwaltung.",
category: "python"
},
{
question: "Wie integrieren Sie KI in bestehende Geschäftsprozesse?",
answer: "Ich analysiere Ihre Workflows und identifiziere Automatisierungspotenziale. Mit OLLAMA oder anderen KI-Modellen entwickle ich Lösungen für Textanalyse, Dokumentenverarbeitung, Kundenservice-Automation oder Datenextraktion - alles datenschutzkonform on-premise.",
category: "ai"
}
]
};
+41
View File
@@ -0,0 +1,41 @@
// src/i18n/locales/de/footer.ts
const footer = {
sections: {
contact: {
title: "Kontakt",
email: "info@damjan-savic.com",
location: "Köln, Deutschland",
aria: {
emailLink: "E-Mail senden",
locationText: "Standort"
}
},
navigation: {
title: "Navigation",
links: {
portfolio: "Portfolio",
blog: "Blog",
about: "Über mich",
contact: "Kontakt"
}
},
social: {
title: "Social Media",
aria: {
linkedin: "Besuchen Sie mein LinkedIn Profil",
github: "Besuchen Sie mein GitHub Profil"
}
}
},
legal: {
copyright: "Alle Rechte vorbehalten",
links: {
privacy: "Datenschutz",
imprint: "Impressum",
terms: "AGB"
}
}
} as const;
export default footer;
export type FooterTranslations = typeof footer;
+119
View File
@@ -0,0 +1,119 @@
// src/i18n/locales/de/index.ts
// Blog post translations
import { erpIntegrationBreuninger } from './blog/posts/erp-integration-breuninger';
import { fullstackDevelopmentTimetracking } from './blog/posts/fullstack-development-timetracking';
import { rfidAutomation as blogRfidAutomation } from './blog/posts/rfid-automation';
import { blog } from './blog/index';
// Page translations
import { about } from './pages/about/index';
import { contact } from './pages/contact/index';
import { dashboard } from './pages/dashboard';
import { home } from './pages/home';
import { login } from './pages/login';
import { notfound } from './pages/notfound';
import { portfolio as portfolioPage } from './pages/portfolio';
import { privacy } from './pages/privacy';
import { terms } from './pages/terms';
// Portfolio project translations
import { aiDataReader } from './portfolio/projects/ai-data-reader';
import { portfolio } from './portfolio/index';
// Common translations and configurations
import { common } from './common';
import { meta } from './meta';
import { navigation } from './navigation';
// Footer translations
import footer from './footer';
// FAQ translations
import { faq } from './faq';
// Zusammenführung aller Übersetzungsobjekte
const translations = {
// Pages
pages: {
about,
contact,
dashboard,
home,
login,
notfound,
portfolio: portfolioPage,
privacy,
terms,
},
// Blog
blog: {
...blog,
posts: {
erpIntegrationBreuninger,
fullstackDevelopmentTimetracking,
rfidAutomation: blogRfidAutomation,
},
},
// Portfolio
portfolio: {
...portfolio,
projects: {
aiDataReader,
},
},
// Footer
footer,
// Gemeinsame Konfigurationen
common: {
...common,
cookies: {
message: "Diese Website verwendet Cookies, um Ihr Browsing-Erlebnis zu verbessern. Die Daten werden nicht an Dritte weitergegeben.",
accept: "Cookies akzeptieren",
decline: "Ablehnen",
necessary: "Notwendige Cookies",
necessaryDesc: "Für grundlegende Funktionen der Website",
analytics: "Analyse-Cookies",
analyticsDesc: "Für Analysen zur Verbesserung der Website",
learnMore: "Mehr erfahren"
}
},
meta,
navigation,
faq,
} as const;
// Default-Export: komplettes Übersetzungsobjekt
export default translations;
// Typdefinition der Übersetzungen
export type Translations = typeof translations;
// Re-Exports für den direkten Zugriff auf einzelne Module
export {
// Pages
about,
contact,
dashboard,
home,
login,
notfound,
portfolioPage as portfolioPageTranslations,
privacy,
terms,
// Blog
blog,
erpIntegrationBreuninger,
fullstackDevelopmentTimetracking,
blogRfidAutomation as blogRfidAutomationPost,
// Portfolio
portfolio,
aiDataReader,
// Footer
footer,
// Common
common,
meta,
navigation,
faq,
};
+195
View File
@@ -0,0 +1,195 @@
export const meta = {
site: {
name: 'Damjan Savić',
title: 'Damjan Savić | Fullstack-, IoT- & KI-Entwickler',
subtitle: 'Skalierbare Softwarelösungen mit IoT- und KI-Integration',
description: 'Als Fullstack-Entwickler aus Köln spezialisiert sich Damjan Savić auf die Entwicklung skalierbarer Softwarelösungen mit IoT- und KI-Integration.',
keywords: [
// Name & Branding
'Damjan Savić',
'Damjan Savic',
'CoderConda',
// Voice AI & Agenten
'Voice AI Entwickler Deutschland',
'VAPI Integration Entwickler',
'Voice AI Recruiting',
'Sprachassistent Entwicklung',
'Conversational AI Entwickler',
'AI Voice Agent Entwicklung',
'Autonome KI Agenten',
'n8n Automatisierung Entwickler',
'AI Workflow Automatisierung',
// KI & LLM Integration (NEU - Claude/GPT)
'Claude API Integration',
'Anthropic Developer',
'GPT-4 Integration Entwickler',
'LLM Entwickler Deutschland',
'KI Automatisierung Köln',
'AI Agent Development',
'Prompt Engineering',
'RAG Entwicklung',
'OLLAMA KI Integration Entwickler',
// HR-Tech & Recruiting
'Recruiting Automatisierung',
'HR Software Entwicklung',
'Bewerbungsgespräch KI',
'HR Tech Entwickler',
'Talent Acquisition Software',
// Fullstack & Core Skills
'Senior Fullstack Entwickler Köln',
'Digital Solutions Consultant Köln',
'Software Architect Köln',
'Fullstack Entwickler Köln',
'Python Entwickler Köln',
'React Entwickler Köln',
'Next.js Entwickler Deutschland',
'TypeScript React Entwickler',
'Full Stack Developer Köln',
// Backend & API
'API Entwicklung Python FastAPI',
'Microservices Entwickler',
'Backend Entwickler Köln',
'Node.js Entwickler Köln',
'Django Entwickler Deutschland',
'FastAPI Entwicklung',
// Frontend
'Frontend Entwickler Köln',
'JavaScript Entwickler Köln',
'React Native Entwickler',
'Progressive Web App Entwicklung',
// Automatisierung & Integration
'Prozessautomatisierung Python Köln',
'Python Automatisierung Entwickler Köln',
'ERP System Integration Köln',
'E-Commerce Integration Spezialist',
'Workflow Automatisierung',
'RPA Entwickler Köln',
// Enterprise & B2B
'B2B Software Entwicklung',
'Enterprise Software Developer',
'Custom Software Entwicklung Köln',
'Freelance Developer Köln',
'Software Entwickler Köln',
// DevOps & Cloud
'Cloud Developer AWS',
'DevOps Engineer Köln',
'Software Architekt Köln',
'Electron Desktop App Entwicklung'
].join(', ')
},
company: {
name: 'CoderConda',
shortName: 'CoderConda',
description: 'Damjan Savić und CoderConda - Ihr Partner für Enterprise Software Development, digitale Transformation und innovative IT-Lösungen.',
address: 'Rotdornallee',
city: 'Köln',
postalCode: '50999',
country: 'Deutschland',
phone: '+49 175 695 0979',
email: 'info@damjan-savic.com',
website: 'www.damjan-savic.com'
},
author: {
name: 'Damjan Savić',
role: 'Senior Fullstack Developer & Digital Solutions Consultant',
company: 'CoderConda',
location: 'Köln, Deutschland',
email: 'info@damjan-savic.com',
website: 'https://www.damjan-savic.com',
languages: [
{ code: 'en', level: 'C2', name: 'Englisch' },
{ code: 'sr', level: 'C2', name: 'Serbisch' },
{ code: 'de', level: 'C2', name: 'Deutsch' },
{ code: 'fr', level: 'B2', name: 'Französisch' },
{ code: 'es', level: 'B2', name: 'Spanisch' },
{ code: 'ru', level: 'A1', name: 'Russisch' }
]
},
social: {
linkedin: 'https://www.linkedin.com/in/damjansavic/',
github: 'https://github.com/damjansavic',
email: 'info@damjan-savic.com'
},
expertise: {
areas: [
// Voice AI & Agenten (Priorität)
'Voice AI Entwicklung mit VAPI',
'Autonome KI-Agenten',
'n8n Workflow Automatisierung',
'Conversational AI & Chatbots',
// LLM & KI Integration
'Claude API Integration',
'GPT-4 & OpenAI Integration',
'OLLAMA & lokale LLMs',
'RAG & Prompt Engineering',
// Fullstack Development
'Enterprise Software Development',
'Python Backend Entwicklung',
'React & Next.js Frontend',
'TypeScript & JavaScript',
// Integration & Automatisierung
'ERP System Integration',
'E-Commerce Plattformen',
'Business Process Automation',
'Microservices & API Development'
],
technologies: [
// AI & LLM
'Claude AI',
'GPT-4',
'VAPI',
'OLLAMA',
'n8n',
'LangChain',
// Languages & Frameworks
'Python',
'TypeScript',
'React',
'Next.js',
'Node.js',
'FastAPI',
// Infrastructure
'Docker',
'AWS',
'PostgreSQL',
'MongoDB'
]
},
seo: {
defaultLanguage: 'de',
alternateLanguages: ['en', 'sr'],
robots: 'index, follow',
googleSiteVerification: '', // Falls benötigt
og: {
type: 'website',
locale: 'de_DE',
siteName: 'Damjan Savić - Senior Developer & IT Consultant Portfolio',
images: {
url: '/images/og-image.jpg',
width: 1200,
height: 630,
alt: 'Damjan Savić - Senior Fullstack Developer & Digital Solutions Consultant | Enterprise Software, KI-Integration, Cloud Architecture'
}
},
twitter: {
card: 'summary_large_image',
site: '@damjansavic',
creator: '@damjansavic'
}
}
} as const;
export type MetaConfig = typeof meta;
+79
View File
@@ -0,0 +1,79 @@
// C:\Development\Damjan Savic\Portfolio\src\i18n\locales\de\navigation.ts
export const navigation = {
// Hauptnavigation
main: {
home: 'Startseite',
about: 'Über mich',
portfolio: 'Portfolio',
blog: 'Blog',
contact: 'Kontakt'
},
// Dashboard und Admin
admin: {
login: 'Anmelden',
dashboard: 'Dashboard',
logout: 'Abmelden'
},
// Footer Navigation
footer: {
legal: {
privacy: 'Datenschutz',
terms: 'AGB',
imprint: 'Impressum'
},
sections: {
portfolio: 'Portfolio',
blog: 'Blog',
contact: 'Kontakt'
}
},
// Seitennavigation
sections: {
experience: 'Erfahrung',
skills: 'Fähigkeiten',
projects: 'Projekte',
about: 'Über mich'
},
// Breadcrumbs und zurück-Navigation
navigation: {
backTo: {
home: 'Zurück zur Startseite',
portfolio: 'Zurück zum Portfolio',
blog: 'Zurück zum Blog'
},
breadcrumbs: {
home: 'Startseite',
portfolio: 'Portfolio',
blog: 'Blog',
about: 'Über mich',
contact: 'Kontakt'
}
},
// Mobile Navigation
mobile: {
menu: 'Menü',
close: 'Schließen',
open: 'Menü öffnen'
},
// URLs (für dynamische Route-Generierung)
urls: {
home: '/',
about: '/about',
portfolio: '/portfolio',
blog: '/blog',
contact: '/contact',
login: '/login',
dashboard: '/dashboard',
privacy: '/privacy',
terms: '/terms'
},
// Meta-Informationen für Navigation
meta: {
main: 'Hauptnavigation',
footer: 'Footer Navigation',
social: 'Social Media Navigation',
legal: 'Rechtliche Navigation'
}
} as const;
export type NavigationConfig = typeof navigation;
@@ -0,0 +1,33 @@
export const hero = {
// Navigation/Header
aboutMe: 'FULLSTACK ENTWICKLER KÖLN - DAMJAN SAVIĆ',
// Main Section
title: 'Python Entwickler Köln & React Developer - Damjan Savić',
description: 'Als Fullstack Entwickler Köln ist Damjan Savić Ihr Freelance Developer für Python Automatisierung und React Entwicklung. Mit Expertise in OLLAMA KI Integration, ERP System Integration Köln und E-Commerce Entwicklung bietet Software Entwickler Köln Damjan Savić Custom Software Entwicklung für B2B Enterprise Kunden. Von API Entwicklung Python FastAPI bis zu Microservices - Ihr Backend Entwickler Köln.',
// Expertise Areas
expertise: {
processAutomation: {
title: 'Python Automatisierung Köln',
description: 'Prozessautomatisierung Python für B2B Unternehmen'
},
systemIntegration: {
title: 'ERP System Integration Köln',
description: 'Enterprise Software Integration & API Entwicklung'
},
customDevelopment: {
title: 'Custom Software Entwicklung Köln',
description: 'Freelance Developer für individuelle Lösungen'
}
},
// Languages
languages: {
english: 'Englisch',
serbian: 'Serbisch',
german: 'Deutsch',
french: 'Französisch',
spanish: 'Spanisch',
russian: 'Russisch'
}
} as const;
// Type für Typsicherheit
export type HeroTranslations = typeof hero;
@@ -0,0 +1,28 @@
import { hero } from './hero';
import { journey } from './journey';
import { schema } from './schema';
import { skillbar } from './skillbar';
import { skillgroup } from './skillgroup';
import { skills } from './skills';
import { workflow } from './workflow';
export const about = {
seo: {
title: 'Über Mich - Damjan Savić | Fullstack Entwickler & KI-Spezialist',
description: 'Erfahren Sie mehr über Damjan Savić - AI & Automation Specialist mit Fokus auf Voice AI, autonome Agenten und Prozessautomatisierung aus Köln.'
},
hero,
journey,
schema,
skillbar,
skillgroup,
skills,
workflow
} as const;
// Typen exportieren
export type { HeroTranslations } from './hero';
export type { JourneyTranslations } from './journey';
export type { SchemaTranslations } from './schema';
export type { SkillBarTranslations } from './skillbar';
export type { SkillGroupTranslations } from './skillgroup';
export type { SkillsTranslations } from './skills';
export type { WorkflowTranslations } from './workflow';
@@ -0,0 +1,95 @@
export const journey = {
// Header
title: 'Beruflicher Werdegang',
subtitle: 'Von digitalen Medien zu Unternehmenslösungen',
// Education Section
education: {
title: 'Ausbildung',
degrees: {
masters: {
degree: 'M.A. Softwareentwicklung',
university: 'Middlesex University, London',
period: '2020 - 2022'
},
bachelors: {
degree: 'B.A. Cross-Media Produktion',
university: 'Middlesex University, London',
period: '2018 - 2020'
}
}
},
// Languages Section
languages: {
title: 'Sprachen',
items: {
english: {
name: 'Englisch',
level: 'C2'
},
serbian: {
name: 'Serbisch',
level: 'C2'
},
german: {
name: 'Deutsch',
level: 'C2'
},
french: {
name: 'Französisch',
level: 'B2'
},
spanish: {
name: 'Spanisch',
level: 'B2'
},
russian: {
name: 'Russisch',
level: 'A1'
}
}
},
// Work History
work: {
positions: [
{
period: '08/2023 - Heute',
company: 'Ritter Digital GmbH',
title: 'Digital Solutions Consultant',
location: 'Oberhausen',
highlights: [
'ERP-Beratung und -Implementierung (JTL WaWi)',
'Prozessautomatisierung & Full-Stack-Entwicklung',
'RFID-Technologie & Automatisierung',
'Lead-Generierung & -Management',
'KI-gestütztes Content-Management'
]
},
{
period: '02/2023 - 08/2023',
company: 'Joyce & Girls Co AG',
title: 'ERP Integration Specialist',
location: 'Köln',
highlights: [
'Komplexe Systemintegration (Apparel Magic, TradeByte)',
'Server-Administration und Automatisierung',
'Datenbank- und API-Entwicklung',
'Digitales Marketing und Kampagnenanalyse'
]
},
{
period: '08/2022 - 01/2023',
company: 'Magnarius',
title: 'RPA Developer & E-Commerce Manager',
location: 'Bergisch Gladbach',
highlights: [
'Shopware 6 Entwicklung und JTL-Integration',
'Google Ads Automatisierung',
'CMS-Management und -Optimierung',
'SEO-Strategieumsetzung'
]
}
]
}
} as const;
// Type für Typsicherheit
export type JourneyTranslations = typeof journey;
@@ -0,0 +1,31 @@
export const schema = {
page: {
name: 'Über Damjan Savić',
description: 'Erfahren Sie mehr über Damjan Savić, einen zertifizierten JTL-Experten mit umfassender Erfahrung in E-Commerce und Warenwirtschaftslösungen.'
},
person: {
jobTitle: 'JTL Integrations-Experte',
description: 'Mit umfangreicher Erfahrung in der Integration und Optimierung von E-Commerce-Systemen unterstütze ich Unternehmen bei der digitalen Transformation ihrer Geschäftsprozesse.',
languages: {
english: 'Englisch',
serbian: 'Serbisch',
german: 'Deutsch',
french: 'Französisch',
spanish: 'Spanisch',
russian: 'Russisch'
},
skills: {
python: 'Python',
googleAds: 'Google Ads',
metaAds: 'Meta Ads',
shopware: 'Shopware',
shopify: 'Shopify',
wooCommerce: 'WooCommerce',
jtlWawi: 'JTL WAWI',
serverAdmin: 'Server-Administration',
airflow: 'AirFlow'
}
}
} as const;
// Type für Typsicherheit
export type SchemaTranslations = typeof schema;
@@ -0,0 +1,13 @@
export const skillbar = {
// Accessibility labels
ariaLabel: {
skillLevel: 'Fähigkeitsniveau',
progressBar: 'Fortschrittsbalken'
},
// Screen reader text
screenReader: {
progress: '{{level}} Prozent Fortschritt für {{skill}}'
}
} as const;
// Type für Typsicherheit
export type SkillBarTranslations = typeof skillbar;
@@ -0,0 +1,63 @@
export const skillgroup = {
// Kategorien
categories: {
development: 'Entwicklung',
ecommerce: 'E-Commerce',
marketing: 'Marketing',
automation: 'Automatisierung',
languages: 'Programmiersprachen',
databases: 'Datenbanken'
},
// Skills nach Kategorien
skills: {
development: {
frontend: 'Frontend-Entwicklung',
backend: 'Backend-Entwicklung',
fullstack: 'Full-Stack-Entwicklung',
api: 'API-Entwicklung',
testing: 'Software-Testing'
},
ecommerce: {
jtl: 'JTL WaWi',
shopware: 'Shopware',
shopify: 'Shopify',
woocommerce: 'WooCommerce',
magento: 'Magento'
},
marketing: {
seo: 'Suchmaschinenoptimierung',
sea: 'Suchmaschinenwerbung',
analytics: 'Web-Analyse',
googleAds: 'Google Ads',
metaAds: 'Meta Ads'
},
automation: {
rpa: 'Robotergestützte Prozessautomatisierung',
workflow: 'Workflow-Automatisierung',
cicd: 'CI/CD',
testing: 'Test-Automatisierung',
deployment: 'Deployment-Automatisierung'
},
languages: {
python: 'Python',
javascript: 'JavaScript',
typescript: 'TypeScript',
php: 'PHP',
sql: 'SQL'
},
databases: {
mysql: 'MySQL',
postgresql: 'PostgreSQL',
mongodb: 'MongoDB',
redis: 'Redis',
elasticsearch: 'Elasticsearch'
}
},
// Accessibility
ariaLabels: {
skillGroup: 'Fähigkeitsgruppe',
skillList: 'Liste der Fähigkeiten in dieser Kategorie'
}
} as const;
// Type für Typsicherheit
export type SkillGroupTranslations = typeof skillgroup;
@@ -0,0 +1,46 @@
// de/pages/about/skills.ts
export const skills = {
title: 'Fähigkeiten',
skillGroups: [
{
category: 'Entwicklung',
items: [
{ name: 'Python', level: 90 },
{ name: 'Google Ads', level: 85 },
{ name: 'Meta Ads', level: 85 }
]
},
{
category: 'E-Commerce',
items: [
{ name: 'Shopware', level: 85 },
{ name: 'Shopify', level: 85 },
{ name: 'WooCommerce', level: 85 }
]
},
{
category: 'Systemadministration',
items: [
{ name: 'JTL WAWI', level: 85 },
{ name: 'Server', level: 75 },
{ name: 'AirFlow', level: 60 }
]
}
],
ui: {
percentage: 'Prozent',
levelLabel: 'Niveau',
skillLevel: '{{level}}% Beherrschung in {{skill}}'
},
aria: {
skillGroup: 'Fähigkeitsgruppe für {{category}}',
skillBar: 'Fortschrittsbalken für {{skill}}',
skillIcon: 'Symbol für {{category}}',
selectSkill: 'Fähigkeit auswählen'
},
screenReader: {
skillProgress: '{{skill}} mit einem Niveau von {{level}} Prozent'
}
} as const;
export type SkillsTranslations = typeof skills;
@@ -0,0 +1,44 @@
export const workflow = {
// Seitentitel
title: 'MEIN WORKFLOW',
description: 'Systematischer Ansatz zur Softwareentwicklung durch definierte Schritte',
// Workflow-Schritte
steps: [
{
number: '01',
title: 'ANFORDERUNGSANALYSE'
},
{
number: '02',
title: 'ABFRAGE VON DEADLINES UND EINSCHRÄNKUNGEN'
},
{
number: '03',
title: 'EINRICHTUNG DER ENTWICKLUNGSUMGEBUNG'
},
{
number: '04',
title: 'PROGRAMMIERUNG'
},
{
number: '05',
title: 'TESTEN DER ERGEBNISSE'
},
{
number: '06',
title: 'SUPPORT UND SKALIERUNG DES CODES'
}
],
// Aria Labels für Barrierefreiheit
aria: {
workflowSection: 'Workflow-Prozess',
stepNumber: 'Schritt {{number}}',
stepDescription: 'Workflow-Schritt: {{title}}'
},
// Screen Reader Texte
screenReader: {
stepProgress: 'Schritt {{number}} von {{total}}: {{title}}'
}
} as const;
// Type für Typsicherheit
export type WorkflowTranslations = typeof workflow;
@@ -0,0 +1,39 @@
export const contactform = {
// Formular Header
title: 'Kontaktieren Sie mich',
description: 'Haben Sie Fragen oder möchten Sie zusammenarbeiten? Schreiben Sie mir eine Nachricht.',
// Formularfelder
name: {
label: 'Name',
placeholder: 'Ihr vollständiger Name'
},
email: {
label: 'E-Mail',
placeholder: 'ihre.email@beispiel.de'
},
message: {
label: 'Nachricht',
placeholder: 'Ihre Nachricht an mich...'
},
// Button
submit: 'Nachricht senden',
// Statusmeldungen
successMessage: 'Vielen Dank für Ihre Nachricht! Ich werde mich so schnell wie möglich bei Ihnen melden.',
errorMessage: 'Entschuldigung, beim Senden Ihrer Nachricht ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.',
// Fehlermeldungen
errors: {
nameRequired: 'Bitte geben Sie Ihren Namen ein',
emailRequired: 'Bitte geben Sie Ihre E-Mail-Adresse ein',
emailInvalid: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
messageRequired: 'Bitte geben Sie eine Nachricht ein'
},
// Aria Labels
aria: {
form: 'Kontaktformular',
submitting: 'Formular wird gesendet',
successAlert: 'Erfolgsmeldung',
errorAlert: 'Fehlermeldung'
}
} as const;
// Type für Typsicherheit
export type ContactFormTranslations = typeof contactform;
@@ -0,0 +1,25 @@
export const contactinfo = {
// Header
title: 'Kontaktinformationen',
description: 'Sie können mich über folgende Wege erreichen',
// Kontaktmethoden Labels
addressLabel: 'Bürostandort',
phoneLabel: 'Telefon',
emailLabel: 'E-Mail',
// Kontaktinformationen
address: 'Rotdornallee, Köln',
phone: '+49 175 695 0979',
email: 'info@damjan-savic.com',
// Zusätzliche Informationen
availabilityNote: 'Geschäftszeiten: Montag bis Freitag, 9:00 - 17:00 Uhr',
// Aria Labels
aria: {
contactCard: 'Kontaktinformationskarte',
addressLink: 'Öffne Standort in Google Maps',
phoneLink: 'Anrufen',
emailLink: 'E-Mail senden',
externalLink: 'Öffnet in neuem Tab'
}
} as const;
// Type für Typsicherheit
export type ContactInfoTranslations = typeof contactinfo;
@@ -0,0 +1,71 @@
// src/i18n/locales/de/pages/contact/index.ts
export const contact = {
breadcrumb: "KONTAKT",
hero: {
title: "Lassen Sie uns zusammenarbeiten",
subtitle: "Sie haben ein Projekt im Sinn? Lassen Sie uns besprechen, wie wir Ihnen bei der Erreichung Ihrer Ziele helfen können."
},
contactInfo: {
title: "Kontaktinformationen",
description: "Sie können mich über folgende Wege erreichen",
address: {
label: "Bürostandort",
value: "Rotdornallee, Köln"
},
phone: {
label: "Telefon",
value: "+49 175 695 0979"
},
email: {
label: "E-Mail",
value: "info@damjan-savic.com"
},
availabilityNote: "Geschäftszeiten: Montag bis Freitag, 9:00 - 17:00 Uhr",
aria: {
contactCard: "Kontaktinformationskarte",
addressLink: "Öffne Standort in Google Maps",
phoneLink: "Anrufen",
emailLink: "E-Mail senden",
externalLink: "Öffnet in neuem Tab"
}
},
contactForm: {
title: "Kontaktieren Sie mich",
description: "Haben Sie Fragen oder möchten Sie zusammenarbeiten? Schreiben Sie mir eine Nachricht.",
name: {
label: "Name",
placeholder: "Ihr vollständiger Name"
},
email: {
label: "E-Mail",
placeholder: "ihre.email@beispiel.de"
},
message: {
label: "Nachricht",
placeholder: "Ihre Nachricht an mich..."
},
submit: "Nachricht senden",
successMessage: "Vielen Dank für Ihre Nachricht! Ich werde mich so schnell wie möglich bei Ihnen melden.",
errorMessage: "Entschuldigung, beim Senden Ihrer Nachricht ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
errors: {
nameRequired: "Bitte geben Sie Ihren Namen ein",
emailRequired: "Bitte geben Sie Ihre E-Mail-Adresse ein",
emailInvalid: "Bitte geben Sie eine gültige E-Mail-Adresse ein",
messageRequired: "Bitte geben Sie eine Nachricht ein"
},
aria: {
form: "Kontaktformular",
submitting: "Formular wird gesendet",
successAlert: "Erfolgsmeldung",
errorAlert: "Fehlermeldung"
}
}
} as const;
export type ContactTranslations = typeof contact;
export default {
pages: {
contact: contact
}
};
@@ -0,0 +1,76 @@
// src/i18n/locales/de/pages/dashboard.ts
export const dashboard = {
// SEO
seo: {
title: 'Analytics Dashboard',
description: 'Website-Analysedashboard'
},
// Hauptüberschriften
header: {
title: 'Analytics Dashboard',
activeUsers: 'aktive Nutzer'
},
// Metrikkarten
metrics: {
pageViews: {
title: 'Seitenaufrufe',
perMinute: 'pro Minute'
},
uniqueVisitors: {
title: 'Eindeutige Besucher',
currentlyActive: 'aktuell aktiv'
},
conversions: {
title: 'Konversionen',
rate: 'Konversionsrate'
},
timeOnSite: {
title: 'Durchschn. Besuchszeit',
bounceRate: 'Absprungrate'
}
},
// Top-Seiten Bereich
topPages: {
title: 'Top-Seiten',
columns: {
path: 'Pfad',
views: 'Aufrufe',
change: 'Änderung'
}
},
// Event-Tracking Bereich
events: {
title: 'Event-Tracking',
types: {
contactForm: 'Kontaktformular Absendung',
portfolioView: 'Portfolio Ansicht',
cvDownload: 'Lebenslauf Download',
blogRead: 'Blog Gelesen'
}
},
// Statusmeldungen
status: {
loading: 'Lade Dashboard...',
error: 'Fehler beim Laden der Daten',
notAuthenticated: 'Bitte melden Sie sich an'
},
// Sonstiges
misc: {
viewMore: 'Mehr anzeigen',
refresh: 'Aktualisieren',
period: {
today: 'Heute',
yesterday: 'Gestern',
last7Days: 'Letzte 7 Tage',
last30Days: 'Letzte 30 Tage',
thisMonth: 'Dieser Monat',
lastMonth: 'Letzter Monat'
}
},
// Trends und Änderungen
trends: {
increase: 'Zunahme',
decrease: 'Abnahme',
noChange: 'Keine Änderung'
}
};
@@ -0,0 +1,15 @@
// src/i18n/locales/de/pages/home/about.ts
export const about = {
title: 'Über Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant',
content: 'Damjan Savić ist AI & Automation Specialist mit Fokus auf Voice AI, autonome Agenten und Prozessautomatisierung. Mit einem M.A. in Software Development und über 7 Jahren Erfahrung in der Entwicklung digitaler Lösungen verbindet er technische Expertise mit strategischem Geschäftsverständnis.\n' +
'Aktuell entwickelt er bei Everlast Consulting GmbH KI-Agenten mit n8n und Voice-AI-Lösungen.\n' +
'Seine Spezialisierung umfasst die Integration von GPT-4 und Claude API in Produktions-Workflows, Middleware-Entwicklung für ERP-Systeme wie Apparel Magic und JTL, sowie RFID/IoT-Automatisierung mit Zebra-Hardware. Von der Systemintegration über API-Entwicklung bis zur Fullstack-Implementierung mit Python, TypeScript und React/Next.js liefert er pragmatische Lösungen für komplexe Geschäftsanforderungen.',
image: {
alt: 'Damjan Savić - Senior Fullstack Entwickler & Digital Solutions Consultant Köln | Software Architect | Cloud Expert | KI-Spezialist'
},
buttons: {
learnMore: 'Mehr erfahren',
downloadCV: 'CV herunterladen'
}
} as const;
export type AboutTranslations = typeof about;
@@ -0,0 +1,86 @@
// src/i18n/locales/de/pages/home/experience.ts
export const experience = {
title: 'Berufserfahrung',
navigation: {
prev: '←',
next: '→'
},
positions: [
{
role: 'Process Automation Specialist',
company: 'Everlast Consulting GmbH',
period: '12/2024 - HEUTE',
highlights: [
'Entwicklung von KI-Agenten mit n8n und Zapier',
'Aufbau von Web-Scraping-Lösungen',
'Migration von Power Automate zu n8n'
]
},
{
role: 'Consultant Digital Solutions',
company: 'Ritter Digital GmbH',
period: '08/2023 - 11/2024',
highlights: [
'Backend-Services auf dedizierten Servern',
'KI-Integration via Power Automate',
'RFID/IoT-Lösungen mit Zebra-Hardware'
]
},
{
role: 'ERP-Integrationsspezialist & E-Commerce-Entwickler',
company: 'Joyce & Girls',
period: '01/2023 - 08/2023',
highlights: [
'ApparelMagic & TradeByte Integration',
'MariaDB Middleware-Entwicklung',
'Windows Server Administration',
'Shopify-Optimierung'
]
},
{
role: 'RPA Developer & E-Commerce Manager',
company: 'C&S Marketing',
period: '08/2022 - 01/2023',
highlights: [
'Shopware 6 & JTL Integration',
'Python Automatisierung',
'Google Ads Optimierung',
'CMS Management'
]
},
{
role: 'E-Commerce Developer',
company: 'Brands Club GmbH',
period: '08/2021 - 07/2022',
highlights: [
'Shopify & JTL Integration',
'Server Administration',
'Content Production',
'Marketing Automation'
]
},
{
role: 'E-Commerce Developer',
company: 'Feine Uhren Eupen',
period: '01/2021 - 08/2021',
highlights: [
'Shopware 5 Development',
'Produktfotografie',
'Sales im Luxusuhrensegment',
'E-Commerce Management'
]
},
{
role: 'Online Marketing Manager',
company: 'Ufer8, Ambis, Teatro & Die Halle Tor 2',
period: '01/2018 - 12/2020',
highlights: [
'Social Media Content',
'Event Marketing',
'Veranstaltungsorganisation',
'Marketing Automation'
]
}
]
} as const;
export type ExperienceTranslations = typeof experience;
@@ -0,0 +1,27 @@
// src/i18n/locales/de/pages/home/expertise.ts
export const expertise = {
title: 'Bereiche meiner Expertise',
areas: [
{
title: 'ERP Integration',
description: 'Expert für JTL-Wawi Implementierung, Konfiguration und Optimierung. Spezialisiert auf Warenwirtschaftssysteme und POS-Integration.',
skills: ['JTL-Wawi', 'JTL-WMS', 'JTL-POS', 'Apparel Magic']
},
{
title: 'Entwicklung',
description: 'Full-Stack Entwicklung mit Fokus auf Python-Automatisierung, React Frontends und Datenbankdesign.',
skills: ['Python', 'React/Next.js', 'MariaDB', 'Docker']
},
{
title: 'E-Commerce',
description: 'Umfangreiche Erfahrung mit verschiedenen E-Commerce-Plattformen und Marktplatz-Integrationen.',
skills: ['Shopify', 'Shopware', 'WooCommerce', 'API Integration']
},
{
title: 'Digitales Marketing',
description: 'Strategischer Ansatz im digitalen Marketing mit Fokus auf Automatisierung und Analyse.',
skills: ['Google Ads', 'Meta Ads', 'SEO', 'Analytics']
}
]
} as const;
export type ExpertiseTranslations = typeof expertise;
@@ -0,0 +1,32 @@
// src/i18n/locales/de/pages/home/hero.ts
export const hero = {
title: 'AI & AUTOMATION SPECIALIST',
name: 'DAMJAN SAVIĆ',
subtitle: 'KI-AGENTEN | VOICE AI | PROZESSAUTOMATISIERUNG',
description: 'Entwicklung von KI-Agenten und Automatisierungslösungen. Von Voice-AI-Plattformen bis zu autonomen Web-Agenten.',
currentRole: 'Aktuell @ Everlast Consulting GmbH',
cta: 'KONTAKT AUFNEHMEN',
image: {
alt: 'Damjan Savić - AI & Automation Specialist | KI-Agenten, Voice AI & Prozessautomatisierung'
},
social: {
getInTouch: 'Kontaktieren Sie Damjan Savić',
linkedin: {
title: 'LinkedIn Profil von Damjan Savić besuchen'
},
github: {
title: 'GitHub Profil von Damjan Savić besuchen'
},
email: {
title: 'E-Mail an Damjan Savić senden'
}
},
navigation: {
experience: 'ERFAHRUNG',
skills: 'FÄHIGKEITEN',
projects: 'PROJEKTE',
about: 'ÜBER MICH'
}
} as const;
export type HeroTranslations = typeof hero;
@@ -0,0 +1,18 @@
// src/i18n/locales/de/pages/home/index.ts
import { hero } from './hero';
import { about } from './about';
import { experience } from './experience';
import { expertise } from './expertise';
import { skills } from './skills';
import { projects } from './projects';
export const home = {
hero,
about,
experience,
expertise,
skills,
projects
} as const;
export type HomeTranslations = typeof home;
@@ -0,0 +1,10 @@
// src/i18n/locales/de/pages/home/projects.ts
export const projects = {
title: 'Portfolio',
viewAll: 'Alle Projekte →',
loading: 'Projekte werden geladen...',
error: {
loading: 'Fehler beim Laden der Projekte'
}
} as const;
export type ProjectsTranslations = typeof projects;
@@ -0,0 +1,41 @@
// src/i18n/locales/de/pages/home/skills.ts
export const skills = {
title: 'Fähigkeiten',
skills: [
{
name: 'AI & LLMs',
level: 90,
description: 'GPT-4, Claude API, Vapi Voice AI'
},
{
name: 'Automation',
level: 85,
description: 'n8n, Zapier, Power Automate'
},
{
name: 'Python',
level: 90,
description: 'Backend, APIs, Automation'
},
{
name: 'TypeScript',
level: 85,
description: 'React, Next.js, Node.js'
},
{
name: 'Datenbank',
level: 85,
description: 'PostgreSQL, Supabase, MariaDB'
},
{
name: 'DevOps',
level: 75,
description: 'Docker, Vercel, Dedicated Servers'
}
],
aria: {
skillLevel: 'Fähigkeitsniveau',
selectSkill: 'Fähigkeit auswählen'
}
} as const;
export type SkillsTranslations = typeof skills;
+54
View File
@@ -0,0 +1,54 @@
// src/i18n/locales/de/pages/login.ts
export const login = {
// SEO
seo: {
title: 'Login',
description: 'Anmelden für Zugriff auf das Dashboard'
},
// Hauptüberschrift
header: {
title: 'Im Dashboard anmelden'
},
// Formular
form: {
// Felder
email: {
label: 'E-Mail-Adresse',
placeholder: 'ihre.email@beispiel.de'
},
password: {
label: 'Passwort',
placeholder: 'Ihr Passwort'
},
// Buttons
submit: {
default: 'Anmelden',
loading: 'Anmeldung läuft...'
},
// Fehlermeldungen
errors: {
default: 'Ein Fehler ist aufgetreten',
invalidCredentials: 'Ungültige Anmeldedaten',
emailRequired: 'Bitte geben Sie Ihre E-Mail-Adresse ein',
passwordRequired: 'Bitte geben Sie Ihr Passwort ein',
emailInvalid: 'Bitte geben Sie eine gültige E-Mail-Adresse ein'
}
},
// Links und Hilfe
help: {
forgotPassword: 'Passwort vergessen?',
needHelp: 'Benötigen Sie Hilfe?',
contactSupport: 'Support kontaktieren'
},
// Statusmeldungen
status: {
authenticating: 'Authentifizierung...',
success: 'Erfolgreich angemeldet',
redirecting: 'Weiterleitung zum Dashboard...'
},
// Sicherheitshinweise
security: {
secureConnection: 'Sichere Verbindung',
privacyNote: 'Ihre Daten werden verschlüsselt übertragen'
}
};
+19
View File
@@ -0,0 +1,19 @@
// src/i18n/locales/de/pages/notfound.ts
export const notfound = {
// SEO
seo: {
title: '404 - Seite nicht gefunden',
description: 'Die gesuchte Seite existiert nicht.'
},
// Hauptinhalt
content: {
errorCode: '404',
title: 'Seite nicht gefunden',
description: 'Die gesuchte Seite existiert nicht oder wurde verschoben.',
},
// Aktionsbuttons
actions: {
goBack: 'Zurück',
homePage: 'Startseite'
}
};
+117
View File
@@ -0,0 +1,117 @@
// src/i18n/locales/de/pages/portfolio.ts
export const portfolio = {
// SEO und Meta-Informationen
seo: {
title: 'Portfolio - Damjan Savić',
description: 'Entdecken Sie meine Projekte im Bereich JTL-Integration, E-Commerce und Digitale Transformation.'
},
// Hauptseite
main: {
title: 'Portfolio',
loading: 'Projekte werden geladen...',
error: 'Fehler beim Laden der Projekte',
noProjects: {
title: 'Keine Projekte gefunden',
description: 'Aktuell sind keine Projekte verfügbar. Schauen Sie später wieder vorbei.'
}
},
// Projekt-Karten
projectCard: {
date: 'Datum',
technologies: 'Technologien',
moreCount: 'weitere', // für '+X weitere'
readMore: 'Mehr erfahren'
},
// Projekt-Details
project: {
loading: 'Projekt wird geladen...',
backToPortfolio: 'Zurück zum Portfolio',
notFound: {
title: 'Projekt nicht gefunden',
description: 'Das angeforderte Projekt konnte nicht gefunden werden.'
},
navigation: {
back: 'Zurück zum Portfolio',
projectDetails: 'PROJEKT DETAILS'
},
metadata: {
date: 'Datum',
client: 'Kunde',
duration: 'Dauer',
repository: 'Repository',
documentation: 'Dokumentation',
technologies: 'Technologien',
live: 'Live-Version'
},
sections: {
overview: 'Überblick',
challenge: 'Herausforderung',
solution: 'Lösung',
results: 'Ergebnisse',
systemArchitecture: 'Systemarchitektur',
implementation: 'Implementierung',
technologies: 'Verwendete Technologien'
}
},
// Kategorien und Filter
categories: {
all: 'Alle',
'Data Science': 'Data Science',
'AI Development': 'KI-Entwicklung',
'Integration': 'Integration',
'Full-Stack Development': 'Full-Stack Entwicklung',
'Data Processing': 'Datenverarbeitung',
'Content Production': 'Content-Produktion',
'Machine Learning': 'Machine Learning',
'Automation': 'Automatisierung'
},
// Spezifische Projekte
projects: {
'ai-data-reader': {
title: 'KI-basierte Produktdatenpflege aus PDF-Dateien',
description: 'Entwicklung eines automatisierten Systems zur Extraktion und Strukturierung von Produktdaten aus PDF-Dokumenten'
},
'bi-vision': {
title: 'KI-Videos für BI-Software',
description: 'Entwicklung von KI-gestützten Erklärvideos für Business Intelligence Dashboards'
},
'business-intelligence-ai': {
title: 'KI für Business Intelligence',
description: 'Integration von KI-Modellen in Business Intelligence Systeme zur Prozessoptimierung'
},
'claude-personal-assistant': {
title: 'KI-basierter Personal Assistant mit Claude AI',
description: 'Entwicklung eines personalisierten KI-Assistenten für professionelle E-Mail-Kommunikation'
},
'e-commerce-integration': {
title: 'Integration mit TradeByte',
description: 'Integration eines Shopify-Shops mit JTL-WaWi für optimierte Bestandsführung'
},
'jtl-integration-project': {
title: 'JTL Integration Referenzprojekt',
description: 'Ein vollständiges Lagersystem in Krefeld auf Basis von JTL'
},
'local-llm-training': {
title: 'Training von lokalen KI-Modellen',
description: 'Entwicklung einer Pipeline für das Training und die Feinabstimmung lokaler KI-Modelle'
},
'processautomation': {
title: 'Automatisierung mit Python',
description: 'Entwicklung von Automatisierungslösungen für Geschäftsprozesse'
},
'rfid-automation': {
title: 'RFID-Automatisierung',
description: 'Entwicklung eines automatisierten Systems zur Erstellung und zum Druck von RFID-Etiketten'
},
'timetracking-software': {
title: 'Digitale Zeiterfassung',
description: 'Entwicklung einer modernen Zeiterfassungslösung mit Next.js, Flask und MSSQL'
}
},
// Status-Meldungen
status: {
loading: 'Wird geladen...',
error: 'Ein Fehler ist aufgetreten',
success: 'Erfolgreich geladen'
}
};
+96
View File
@@ -0,0 +1,96 @@
// src/i18n/locales/de/pages/privacy.ts
export const privacy = {
// SEO und Schema
seo: {
title: 'Datenschutzerklärung',
description: 'Datenschutzerklärung für die Portfolio-Website von Damjan Savić'
},
schema: {
name: 'Datenschutzerklärung',
description: 'Datenschutzerklärung für die Portfolio-Website von Damjan Savić'
},
// Hauptinhalt
content: {
title: 'Datenschutzerklärung',
lastUpdated: 'Zuletzt aktualisiert: 10. März 2024',
// Navigation
breadcrumbs: {
currentTitle: 'Datenschutzerklärung'
},
// Abschnitte
sections: {
introduction: {
title: '1. Einführung',
content: 'Diese Datenschutzerklärung erläutert, wie wir Ihre personenbezogenen Daten bei der Nutzung unserer Website erfassen, verwenden und schützen.'
},
dataCollection: {
title: '2. Datenerfassung',
providedInfo: {
title: '2.1 Von Ihnen bereitgestellte Informationen',
intro: 'Bei Verwendung unseres Kontaktformulars erfassen wir:',
items: [
'Name',
'E-Mail-Adresse',
'Nachrichteninhalt'
]
},
automaticInfo: {
title: '2.2 Automatisch erfasste Informationen',
intro: 'Wir erfassen automatisch:',
items: [
'IP-Adresse',
'Browser-Typ',
'Geräteinformationen',
'Besuchte Seiten',
'Verweildauer auf der Website'
]
}
},
dataUsage: {
title: '3. Verwendung Ihrer Daten',
intro: 'Wir verwenden Ihre Daten für:',
items: [
'Beantwortung Ihrer Anfragen',
'Verbesserung unserer Website',
'Analyse von Nutzungsmustern',
'Betrugsprävention'
]
},
cookies: {
title: '4. Cookies',
intro: 'Wir verwenden Cookies für:',
items: [
'Speicherung Ihrer Präferenzen',
'Analyse des Website-Verkehrs',
'Verständnis des Nutzerverhaltens'
]
},
security: {
title: '5. Datensicherheit',
intro: 'Wir implementieren geeignete Sicherheitsmaßnahmen zum Schutz Ihrer personenbezogenen Daten, einschließlich:',
items: [
'Verschlüsselung der Datenübertragung',
'Regelmäßige Sicherheitsbewertungen',
'Zugriffskontrollen',
'Sichere Datenspeicherung'
]
},
rights: {
title: '6. Ihre Rechte',
intro: 'Sie haben das Recht auf:',
items: [
'Zugriff auf Ihre personenbezogenen Daten',
'Berichtigung der Daten',
'Löschung der Daten',
'Widerspruch gegen die Datenverarbeitung',
'Datenübertragbarkeit'
]
},
contact: {
title: '7. Kontaktinformationen',
intro: 'Für datenschutzbezogene Anfragen kontaktieren Sie uns unter:',
email: 'E-Mail: privacy@damjan-savic.com'
}
}
}
};
+59
View File
@@ -0,0 +1,59 @@
// src/i18n/locales/de/pages/terms.ts
export const terms = {
// SEO und Schema
seo: {
title: 'Allgemeine Geschäftsbedingungen',
description: 'Allgemeine Geschäftsbedingungen für die Portfolio-Website von Damjan Savić'
},
schema: {
name: 'Allgemeine Geschäftsbedingungen',
description: 'Allgemeine Geschäftsbedingungen für die Portfolio-Website von Damjan Savić'
},
// Hauptinhalt
content: {
title: 'Allgemeine Geschäftsbedingungen',
lastUpdated: 'Zuletzt aktualisiert: 10. März 2024',
// Navigation
breadcrumbs: {
currentTitle: 'Allgemeine Geschäftsbedingungen'
},
// Abschnitte
sections: {
agreement: {
title: '1. Zustimmung zu den Bedingungen',
content: 'Mit dem Zugriff auf unsere Website stimmen Sie zu, an diese Allgemeinen Geschäftsbedingungen gebunden zu sein und alle geltenden Gesetze und Vorschriften einzuhalten.'
},
intellectualProperty: {
title: '2. Rechte an geistigem Eigentum',
content: 'Alle Inhalte dieser Website, einschließlich, aber nicht beschränkt auf Texte, Grafiken, Logos, Bilder und Software, sind Eigentum von Damjan Savić und durch Gesetze zum Schutz geistigen Eigentums geschützt.'
},
userResponsibilities: {
title: '3. Nutzerverantwortlichkeiten',
intro: 'Bei der Nutzung unserer Website stimmen Sie zu:',
items: [
'Korrekte Informationen bereitzustellen',
'Die Website legal und ethisch zu nutzen',
'Keinen unbefugten Zugriff zu versuchen',
'Den Betrieb der Website nicht zu stören'
]
},
liability: {
title: '4. Haftungsbeschränkung',
content: 'Wir haften nicht für indirekte, zufällige, besondere, Folge- oder Strafschäden, die sich aus Ihrer Nutzung oder Unfähigkeit zur Nutzung der Website ergeben.'
},
changes: {
title: '5. Änderungen der Bedingungen',
content: 'Wir behalten uns das Recht vor, diese Bedingungen jederzeit zu ändern. Wir werden die Nutzer über wesentliche Änderungen informieren, indem wir die neuen Allgemeinen Geschäftsbedingungen auf dieser Seite veröffentlichen.'
},
governingLaw: {
title: '6. Geltendes Recht',
content: 'Diese Bedingungen unterliegen den Gesetzen der Bundesrepublik Deutschland und werden in Übereinstimmung mit diesen ausgelegt, ohne Berücksichtigung von Kollisionsnormen.'
},
contact: {
title: '7. Kontaktinformationen',
intro: 'Bei Fragen zu diesen Allgemeinen Geschäftsbedingungen kontaktieren Sie uns bitte unter:',
email: 'E-Mail: legal@damjan-savic.com'
}
}
}
};
@@ -0,0 +1,70 @@
// src/i18n/locales/de/portfolio/index.ts
import aiDataReader from './projects/ai-data-reader';
import kamenpro from './projects/kamenpro';
import smartWarehouse from './projects/smart-warehouse';
import powerPlatformGovernance from './projects/power-platform-governance';
import websiteMitKi from './projects/website-mit-ki';
import aiMusicProduction from './projects/ai-music-production';
import automatedAdCreatives from './projects/automated-ad-creatives';
import cursorIde from './projects/cursor-ide';
export const portfolio = {
// Meta-Informationen für die Portfolio-Seite
seo: {
title: 'Portfolio - Fullstack Entwickler Köln Damjan Savić | Python & React Projekte',
description: 'Portfolio von Freelance Developer Köln Damjan Savić: Python Automatisierung, OLLAMA KI Integration, ERP System Integration, E-Commerce Entwicklung. Custom Software Entwicklung Köln für B2B Enterprise.'
},
// Portfolio-Überschriften und Filter
sections: {
title: 'Software Entwickler Köln - Portfolio Damjan Savić',
subtitle: 'Python Entwickler Köln & React Developer - Erfolgreiche Projekte',
filterTitle: 'Kategorien',
sortTitle: 'Sortierung'
},
// Filter-Optionen
filters: {
all: 'Alle',
categories: {
'Data Science': 'Data Science',
'AI Development': 'KI-Entwicklung',
'Integration': 'Integration',
'Full-Stack Development': 'Full-Stack Entwicklung',
'Data Processing': 'Datenverarbeitung',
'Content Production': 'Content-Produktion',
'Machine Learning': 'Machine Learning',
'Automation': 'Automatisierung',
'Web Development': 'Webentwicklung',
'AI & Automation': 'KI & Automatisierung',
'Enterprise Software': 'Enterprise Software'
}
},
// Sortier-Optionen
sort: {
date: 'Datum',
title: 'Titel',
category: 'Kategorie'
},
// UI-Texte
ui: {
loading: 'Projekte werden geladen...',
noProjects: 'Keine Projekte gefunden',
viewProject: 'Projekt ansehen',
backToPortfolio: 'Zurück zum Portfolio',
technologies: 'Technologien',
client: 'Kunde',
duration: 'Dauer',
visitWebsite: 'Website besuchen',
viewRepository: 'Repository ansehen',
viewDocumentation: 'Dokumentation'
},
// Alle Projekte
projects: {
'ai-data-reader': aiDataReader,
'kamenpro': kamenpro,
'smart-warehouse': smartWarehouse,
'power-platform-governance': powerPlatformGovernance,
'website-mit-ki': websiteMitKi,
'ai-music-production': aiMusicProduction,
'automated-ad-creatives': automatedAdCreatives,
'cursor-ide': cursorIde,
}
};
@@ -0,0 +1,107 @@
// src/i18n/locales/de/portfolio/projects/ai-data-reader.ts
export const aiDataReader = {
meta: {
slug: 'ai-data-reader',
title: "Python Automatisierung für PDF-Datenextraktion | OLLAMA KI Integration von Damjan Savić",
description: "Fullstack Entwickler Köln Damjan Savić entwickelte Python Automatisierung zur PDF-Verarbeitung mit KI. ERP System Integration für automatisierte Produktdatenpflege.",
excerpt: "OLLAMA KI Integration Entwickler Damjan Savić: Python-basierte Prozessautomatisierung für E-Commerce. Custom Software Entwicklung Köln für B2B Enterprise Lösungen.",
date: "2025-02",
category: "Data Processing",
client: "Amazon Seller",
duration: "2 Monate",
url: "https://www.damjan-savic.com",
repository: "",
documentation: "",
published: true,
featured: true,
technologies: ["Python", "FastAPI", "Claude AI", "PyPDF", "Pydantic", "JTL-Wawi"],
tags: ["Data Extraction", "ERP", "Process Automation", "PDF Processing"]
},
content: {
intro: "Ein von Damjan Savić entwickeltes KI-gestütztes System zur automatisierten Extraktion von Produktdaten aus PDF-Dokumenten mit direkter Integration in JTL-Warenwirtschaftssysteme. Damjan Savić hat diese Lösung für maximale Effizienz in der Produktdatenpflege konzipiert.",
challenge: {
title: "Die Herausforderung",
description: "Die manuelle Erfassung von Produktdaten aus PDF-Dokumenten war zeitaufwendig und fehleranfällig.",
points: [
"Große Mengen an PDF-Dokumenten mit Produktinformationen",
"Zeitintensive manuelle Dateneingabe",
"Inkonsistente Datenqualität",
"Hoher personeller Aufwand"
]
},
solution: {
title: "Die Lösung von Damjan Savić",
description: "Damjan Savić entwickelte ein KI-gestütztes System zur automatisierten Datenextraktion",
content: "Durch den Einsatz von Claude AI und modernen Python-Technologien hat Damjan Savić eine vollautomatische Lösung geschaffen, die PDF-Dokumente verarbeitet und die extrahierten Daten direkt in das JTL-Warenwirtschaftssystem integriert.",
points: [
"Automatisierte PDF-Verarbeitung",
"KI-gestützte Datenextraktion",
"Intelligente Datenvalidierung",
"Nahtlose JTL-Integration"
]
},
technical: {
title: "Technische Umsetzung",
description: "Die Lösung basiert auf einer modularen Python-Architektur mit verschiedenen Kernkomponenten:",
points: [
"Robuste PDF-Textextraktion mit PyPDF",
"KI-gestützte Datenextraktion mit Claude AI",
"Validierung durch Pydantic Models",
"JTL-ERP Integration über CSV-Export"
],
code: `class ProductData(BaseModel):
artikel_nummer: str
name: str
hersteller: str
inhaltsstoffe: List[str]
allergene: List[str]
naehrwerte: NaehrwertData
nettogewicht: str
vegan: bool
vegetarisch: bool
def _extract_with_claude(self, prompt: str) -> Dict[str, Any]:
'''Extrahiert strukturierte Daten mit Claude AI.'''
response = self.client.messages.create(
model='claude-3-sonnet-20240229',
messages=[{
'role': 'user',
'content': prompt
}]
)
return self._clean_json_string(response.content)`
},
implementation: {
title: "Implementierungsprozess",
description: "Der automatisierte Workflow wurde in mehreren Phasen implementiert:",
points: [
"PDF-Batch-Verarbeitung aus Input-Verzeichnis",
"Intelligente Texterkennung und -strukturierung",
"Mehrschichtige Validierungslogik",
"Robuste Fehlerbehandlung",
"Integration in bestehende Systeme"
]
},
results: {
title: "Ergebnisse und Auswirkungen",
description: "Die Implementierung führte zu signifikanten Verbesserungen im Geschäftsprozess:",
points: [
"90% Zeitersparnis bei der Produktdatenpflege",
"99% Genauigkeit bei der Datenextraktion",
"Eliminierung manueller Dateneingaben",
"Standardisierte Produktdatenqualität",
"Deutlich reduzierte Fehlerquote"
]
},
conclusion: "Das von Damjan Savić entwickelte System hat die Produktdatenpflege grundlegend revolutioniert. Durch die Kombination von KI-Technologie und automatisierter Datenverarbeitung hat Damjan Savić nicht nur die Effizienz drastisch gesteigert, sondern auch die Datenqualität erheblich verbessert. Das Projekt von Damjan Savić zeigt eindrucksvoll, wie moderne KI-Lösungen praktische Geschäftsprobleme lösen können."
}
};
// Re-export für Kompatibilität mit dem Projektimport-System
export default aiDataReader;
@@ -0,0 +1,114 @@
// src/i18n/locales/de/portfolio/projects/ai-music-production.ts
export const aiMusicProduction = {
meta: {
slug: 'ai-music-production',
title: "Suno AI - KI-gestützte Musikproduktion | Von Songtext zum fertigen Track",
description: "Vollständiger Workflow zur Musikproduktion mit Suno AI: Songtexte schreiben, Instrumentals generieren, Styles mixen und auf Soundcloud veröffentlichen.",
excerpt: "KI-gestützte Musikproduktion mit Suno AI. Vom handgeschriebenen Songtext zum fertigen Track in 2-3 Stunden - inklusive Cover-Design und Soundcloud-Upload.",
date: "2025-01",
category: "AI & Kreativ",
client: "Persönliches Projekt",
duration: "Ongoing",
url: "https://soundcloud.com/desetka",
videoUrl: "https://www.tella.tv/video/musikproduktion-per-ki-mit-damjan-savic-desetka-1-2mjh",
repository: "",
documentation: "",
published: true,
featured: true,
technologies: ["Suno AI", "Soundcloud", "Pinterest", "Photoshop", "KI-Musikproduktion"],
tags: ["Suno AI", "Musikproduktion", "KI-Musik", "Desetka", "Soundcloud", "Kreativ-KI"]
},
content: {
intro: "Musikproduktion per KI: Ein vollständiger Workflow zur Erstellung professioneller Songs mit Suno AI. Von der Idee über den Songtext bis zum fertigen Track auf Soundcloud - alles in einem strukturierten Prozess.",
challenge: {
title: "Die Herausforderung",
description: "Traditionelle Musikproduktion erfordert umfangreiche Ressourcen und Fähigkeiten.",
points: [
"Klassische Musikproduktion benötigt teure Software und Hardware",
"Instrumentalisten und Produzenten müssen koordiniert werden",
"Der Produktionsprozess dauert oft Wochen oder Monate",
"Hohe Einstiegshürden für Künstler ohne musikalische Ausbildung",
"Kreative Visionen lassen sich schwer schnell umsetzen"
]
},
solution: {
title: "Die Lösung",
description: "Ein strukturierter KI-Workflow für effiziente Musikproduktion",
content: "Mit Suno AI lässt sich der gesamte Musikproduktionsprozess auf wenige Stunden reduzieren. Der Workflow kombiniert menschliche Kreativität (Songtexte) mit KI-generierter Musik für authentische, professionelle Ergebnisse.",
points: [
"Songtexte werden manuell geschrieben - volle kreative Kontrolle",
"Suno AI generiert Instrumentals basierend auf Style-Prompts",
"Iteratives Remixing für den perfekten Sound",
"Cover-Design mit Pinterest-Inspiration und Photoshop",
"Direkter Upload auf Soundcloud unter dem Alias 'Desetka'"
]
},
technical: {
title: "Der Workflow",
description: "Schritt-für-Schritt Prozess zur KI-Musikproduktion:",
points: [
"Songtext schreiben mit klarem Reimschema (z.B. Endungen auf e, a, i)",
"Melodie im Kopf entwickeln während des Schreibens",
"Instrumental in Suno AI mit Style-Prompts generieren",
"Weirdness (35%) und Audio Influence (75%) konfigurieren",
"Verschiedene Styles mixen (z.B. Synthwave → Luxury Rap)",
"Favoriten liken für KI-Lerneffekt",
"Cover auf Pinterest suchen und in Photoshop bearbeiten (1950x1950px)",
"WAV-Export und Upload auf Soundcloud"
],
code: `// Suno AI Style-Konfiguration
const sunoConfig = {
name: "205 Matrize Instrumental",
settings: {
weirdness: "35%",
styleInfluence: "75%",
audioInfluence: "25-35%" // Niedriger bei Remastered
},
styles: [
"Synthwave",
"Melodic RIP",
"Luxury Rap"
],
tips: [
"Liked Songs beeinflussen zukünftige Generierungen",
"Bei Artefakten: Audio Influence reduzieren",
"Styles kombinieren für einzigartigen Sound"
]
};`
},
implementation: {
title: "Kreativprozess",
description: "Die Kunst des Songschreibens mit KI-Unterstützung:",
points: [
"Songtexte auf Serbisch verfassen (melodischer Klang)",
"Klares Reimschema für Hook und Strophen",
"Melodie mental entwickeln vor der Produktion",
"Keine Instrumentals nötig für erste Ideen",
"Später Übersetzung ins Englische möglich",
"2-3 Stunden für einen kompletten Song",
"An guten Tagen: 3 Songs pro Stunde möglich"
]
},
results: {
title: "Ergebnisse",
description: "Vorteile der KI-gestützten Musikproduktion:",
points: [
"Produktionszeit von Wochen auf Stunden reduziert",
"Volle kreative Kontrolle über Texte und Richtung",
"Professionelle Instrumentals ohne Studio",
"Iteratives Arbeiten bis zum perfekten Sound",
"Direkter Weg vom Konzept zur Veröffentlichung",
"Künstleralias 'Desetka' auf Soundcloud etabliert"
]
},
conclusion: "KI-Musikproduktion mit Suno AI revolutioniert den kreativen Prozess. Die Kombination aus handgeschriebenen Songtexten und KI-generierten Instrumentals ermöglicht es, musikalische Visionen schnell und professionell umzusetzen. Der Mensch bleibt kreativ im Mittelpunkt - die KI ist das Werkzeug zur Realisierung."
}
};
export default aiMusicProduction;
@@ -0,0 +1,95 @@
// src/i18n/locales/de/portfolio/projects/automated-ad-creatives.ts
export const automatedAdCreatives = {
meta: {
slug: 'automated-ad-creatives',
title: 'Automatisierte Ad Creatives: KI-gestützte Werbemittel-Erstellung',
description: 'Entwicklung eines Workflows zur automatisierten Erstellung von Facebook Ad Creatives mit Claude Opus 4.5 - ohne Designsoftware, komplett im Chat',
excerpt: 'Von der Designvorlage zum fertigen Werbemittel: Wie KI die Ad-Creative-Erstellung revolutioniert.',
date: '2025-01',
category: 'KI & Automatisierung',
client: 'Eigenprojekt',
duration: '1 Tag',
url: '',
repository: '',
documentation: '',
published: true,
featured: true,
technologies: ['Claude Opus 4.5', 'HTML/CSS', 'PNG Export', 'Prompt Engineering'],
tags: ['KI', 'Automatisierung', 'Facebook Ads', 'Marketing', 'No-Code'],
videoUrl: 'https://www.tella.tv/video/automatisierte-ad-creatives-1kyw'
},
content: {
intro: 'Programme wie Illustrator, InDesign, Figma oder Canva können kompliziert sein. Dieses Projekt zeigt, wie sich Facebook Ad Creatives vollständig im KI-Chat erstellen lassen - ohne Designsoftware, ohne Programmierkenntnisse.',
challenge: {
title: 'Die Herausforderung',
description: 'Die Erstellung von Werbemitteln für Facebook-Kampagnen erfordert traditionell:',
points: [
'Kenntnisse in Designsoftware (Illustrator, Figma, Canva)',
'Zeit für Einarbeitung und Umsetzung',
'Verständnis für Formatvorgaben und Best Practices',
'Iterationen zwischen Design und Marketing',
'Budget für Designer oder Design-Tools'
]
},
solution: {
title: 'Der Lösungsansatz',
description: 'Ein KI-gestützter Workflow, der den gesamten Prozess im Chat-Fenster abbildet:',
content: 'Der komplette Workflow findet im Chat mit Claude Opus 4.5 statt. Alternativ funktionieren auch Gemini oder ChatGPT.',
points: [
'Designvorlage als visuelle Referenz für die KI',
'HTML-Generierung durch natürlichsprachliche Prompts',
'Automatische Konvertierung zu PNG-Bilddateien',
'Integration zusätzlicher Bilder per Drag & Drop',
'Iterationen durch einfache Chat-Anweisungen'
]
},
technical: {
title: 'Technische Umsetzung',
description: 'Der Workflow im Detail:',
points: [
'Schritt 1: Designvorlage von Envato Elements als Referenz',
'Schritt 2: Prompt mit Bild an Claude senden - HTML wird generiert',
'Schritt 3: HTML zu PNG exportieren lassen',
'Schritt 4: Zusätzliche Bilder per Drag & Drop integrieren'
]
},
tools: {
title: 'Verwendete Tools',
items: [
{ name: 'Claude Opus 4.5', purpose: 'KI für HTML-Generierung und Bildexport' },
{ name: 'Envato Elements', purpose: 'Designvorlagen als Referenz' },
{ name: 'Unsplash', purpose: 'Kostenlose Bilder für die Creatives' }
]
},
results: {
title: 'Vorteile des Ansatzes',
description: 'Der KI-gestützte Workflow bietet mehrere Vorteile:',
points: [
'Keine Design-Skills nötig: Die KI übernimmt die technische Umsetzung',
'Schnelle Iterationen: Änderungen in Sekunden durch Chat-Anweisungen',
'Skalierbar: Beliebig viele Varianten für A/B-Tests',
'Kosteneffizient: Keine teuren Design-Tools erforderlich',
'Flexibel: Funktioniert auch mit Gemini oder ChatGPT'
]
},
useCases: {
title: 'Einsatzszenarien',
points: [
'Performance-Marketing: Schnelle Creative-Tests ohne Wartezeit',
'E-Commerce: Produktwerbung in großem Umfang',
'Startups: Professionelle Ads ohne Design-Team',
'Agenturen: Effiziente Kundenarbeit bei Ad-Erstellung'
]
},
conclusion: 'Der Workflow demonstriert, wie KI die Erstellung von Ad Creatives vereinfacht. Das Ergebnis ist vielleicht noch nicht auf dem Niveau eines professionellen Grafikdesigners - aber für schnelle Tests, erste Entwürfe oder Teams ohne Designressourcen ist dieser Ansatz eine echte Alternative. Die Technologie entwickelt sich rasant weiter.'
}
};
export default automatedAdCreatives;
@@ -0,0 +1,89 @@
// src/i18n/locales/de/portfolio/projects/cursor-ide.ts
export const cursorIde = {
meta: {
slug: 'cursor-ide',
title: 'Cursor IDE: KI-gestützte Softwareentwicklung',
description: 'Einführung in Cursor - die revolutionäre KI-gestützte Entwicklungsumgebung, die Softwareprojekte durch natürliche Sprache ermöglicht',
excerpt: 'Entdecke, wie Cursor IDE als persönlicher KI-Programmierer fungiert und komplette Projekte aus natürlicher Sprache erstellt.',
date: '2025-01',
category: 'KI & Entwicklung',
client: 'Tutorial',
duration: 'Einführung',
url: 'https://cursor.com',
repository: '',
documentation: '',
published: true,
featured: true,
technologies: ['Cursor IDE', 'KI', 'Next.js', 'React', 'TypeScript', 'Node.js'],
tags: ['KI', 'IDE', 'Entwicklung', 'Tutorial', 'Code-Generierung', 'Automatisierung'],
videoUrl: 'https://www.tella.tv/video/cursor-ide-1-1kjg'
},
content: {
intro: 'Cursor ist eine KI-gestützte Entwicklungsumgebung, die wie ein persönlicher Programmierer funktioniert. Sie versteht natürliches Deutsch, generiert Code eigenständig, findet und behebt Fehler - und baut komplette Softwareprojekte auf Zuruf.',
challenge: {
title: 'Früher: Die Herausforderungen',
description: 'Traditionelle Softwareentwicklung war mit hohen Hürden verbunden:',
points: [
'Programmiersprachen mussten erlernt werden',
'Fehlersuche dauerte oft Stunden',
'Jede Zeile Code musste selbst getippt werden',
'Google und Stackoverflow waren ständige Begleiter',
'Hohe Einstiegshürde für Nicht-Entwickler'
]
},
solution: {
title: 'Heute: Die Lösung mit Cursor',
description: 'Cursor revolutioniert die Softwareentwicklung durch KI-Integration:',
content: 'Stell dir vor, du hättest einen persönlichen Programmierer, der neben dir sitzt und alle deine Softwareideen in natürlichem gesprochenen Deutsch verstehen kann. Genau das ist Cursor.',
points: [
'Einfach beschreiben, was du haben möchtest',
'KI findet und behebt Fehler automatisch',
'KI generiert den kompletten Code',
'KI erklärt das gesamte Projekt im Editor',
'Integrierter Browser für direkte Vorschau'
]
},
technical: {
title: 'Das Cursor Interface',
description: 'Nach dem Download über cursor.com besteht das Interface aus:',
points: [
'Menüleiste (oben): Navigation durch die IDE',
'File Explorer (links): Projektstruktur mit Verzeichnissen und Dateien',
'Editor (Mitte): Ansicht und Bearbeitung von Dateien',
'Terminal (unten): Einblendbar über View > Terminal',
'KI Chat (rechts): Steuerung der Entwicklung per KI'
]
},
implementation: {
title: 'Erste Schritte',
description: 'So startest du mit Cursor:',
points: [
'Cursor von cursor.com herunterladen',
'Installation für das jeweilige Betriebssystem durchführen',
'Projektordner anlegen und in Cursor öffnen',
'Im KI-Chat beschreiben, was gebaut werden soll',
'Die KI arbeiten lassen und bei Bedarf anpassen'
]
},
results: {
title: 'Praxisbeispiel',
description: 'Ein einfacher Prompt wie "Ich möchte eine Website aufbauen mit Next, React und TypeScript mit einer modernen Darstellung von Hello World" reicht aus:',
points: [
'KI prüft den Projektzustand',
'Das gesamte Projekt wird automatisch aufgebaut',
'Nach wenigen Sekunden steht die Website',
'Mit npm install Abhängigkeiten installieren',
'Mit npm run dev den Entwicklungsserver starten'
]
},
conclusion: 'Cursor revolutioniert die Softwareentwicklung, indem es die Barriere zwischen Idee und Umsetzung dramatisch senkt. Statt Programmiersprachen zu lernen, beschreibst du einfach in natürlicher Sprache, was du haben möchtest - und die KI erledigt den Rest.'
}
};
export default cursorIde;
@@ -0,0 +1,135 @@
// src/i18n/locales/de/portfolio/projects/kamenpro.ts
export const kamenpro = {
meta: {
slug: 'kamenpro',
title: "KamenPro: Digitale Transformation für dekorative Steinverkleidungen",
description: "Entwicklung einer modernen Multi-Location PWA für einen Hersteller dekorativer Steinverkleidungen aus Bijeljina mit React 18.3 und Supabase",
excerpt: "Von Stein zu Pixel: Wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie 300% mehr Anfragen generiert.",
date: "2025-01",
category: "Web Development",
client: "KamenPro - Željko",
duration: "3 Monate",
url: "https://kamenpro.net",
repository: "",
documentation: "",
published: true,
featured: true,
technologies: ["React 18.3", "TypeScript", "Vite", "Supabase", "Framer Motion", "TailwindCSS", "PWA", "Schema.org"],
tags: ["Multi-Location SEO", "E-Commerce", "PWA", "Local Business", "Performance"]
},
content: {
intro: "KamenPro, ein etablierter Hersteller dekorativer Steinverkleidungen aus Bijeljina, stand vor der Herausforderung, sein traditionelles Handwerk in die digitale Welt zu übertragen. Diese Case Study zeigt, wie moderne Webtechnologie einem lokalen Handwerksbetrieb zu überregionalem Erfolg verhalf.",
challenge: {
title: "Die Herausforderung",
description: "Als Hersteller hochwertiger Steinverkleidungen aus Weißzement fehlte KamenPro die digitale Präsenz, um mit der Online-Konkurrenz mitzuhalten.",
points: [
"Keine digitale Präsenz trotz hoher Online-Nachfrage",
"Kunden suchten online nach 'dekorativni kamen' ohne KamenPro zu finden",
"Fehlende Produktpräsentation für 3 verschiedene Steinstrukturen",
"Keine lokale SEO-Präsenz in Bijeljina, Brčko und Tuzla",
"Verlust potenzieller Kunden an digital präsente Konkurrenz"
]
},
solution: {
title: "Der Lösungsansatz",
description: "Eine moderne PWA mit Multi-Location SEO-Strategie für maximale lokale Sichtbarkeit",
content: "Wir entwickelten eine hochperformante Progressive Web App, die die handwerkliche Qualität von KamenPro digital erlebbar macht. Der Fokus lag auf lokaler Auffindbarkeit in drei Städten und einer optimalen Produktpräsentation für Bauherren und Architekten.",
points: [
"Multi-Location SEO für Bijeljina, Brčko und Tuzla",
"Produktkatalog mit HD-Bildern der Steinstrukturen",
"PWA für Offline-Verfügbarkeit auf Baustellen",
"Supabase-Backend für Produktverwaltung und Anfragen",
"Schema.org LocalBusiness für optimale Google-Präsenz"
]
},
technical: {
title: "Technische Implementierung",
description: "Multi-Location SEO-Architektur mit standortspezifischen Landing Pages:",
points: [
"Standort-basiertes Routing für 3 Städte",
"Produktkatalog-System mit Supabase",
"Bildoptimierung für schwere Steinstruktur-Fotos",
"PWA für Offline-Produktkatalog",
"Schema.org LocalBusiness für jede Stadt"
],
code: `// Multi-Location SEO mit Schema.org
const LocationPage: React.FC<{city: string}> = ({ city }) => {
const structuredData = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": \`KamenPro \${city}\`,
"description": \`Dekorativni kamen i fasadne obloge u \${city}\`,
"telephone": "+387 65 678 634",
"address": {
"@type": "PostalAddress",
"addressLocality": city,
"addressCountry": "BA"
},
"areaServed": {
"@type": "GeoCircle",
"geoRadius": "50000"
}
};
return (
<>
<Helmet>
<title>Dekorativni kamen {city} | KamenPro</title>
<script type="application/ld+json">
{JSON.stringify(structuredData)}
</script>
</Helmet>
<LocationHero city={city} />
<ProductShowcase />
<ContactSection city={city} />
</>
);
};
// Produktverwaltung mit Supabase
interface StoneProduct {
id: string;
name: string;
type: 'decorative_stone' | 'rustic_brick';
dimensions: { length: 44, width: 8.5, thickness: 15 };
price_per_m2: number; // 33-40 BAM
weight_per_m2: 32; // kg
textures: string[]; // 3 verschiedene
available_colors: string[];
}`
},
implementation: {
title: "Lokale SEO-Erfolge",
description: "Durch gezielte Multi-Location-Optimierung erreichten wir Top-Rankings:",
points: [
"Rank #1 für 'dekorativni kamen bijeljina'",
"Rank #2 für 'fasadne obloge brčko'",
"Rank #1 für 'rustik cigla tuzla'",
"Google My Business Integration für alle Standorte",
"Lokale Backlinks von Bauunternehmen"
]
},
results: {
title: "Messbare Geschäftsergebnisse",
description: "Die digitale Transformation brachte beeindruckende Ergebnisse:",
points: [
"300% mehr Anfragen in den ersten 3 Monaten",
"Von 0 auf Platz 1-3 bei lokalen Suchanfragen",
"45 Anfragen/Monat statt vorher ~12",
"25-30 Projekte/Quartal statt 8-10",
"ROI von 275% in 6 Monaten",
"Expansion in neue Märkte durch Online-Präsenz"
]
},
conclusion: "Die digitale Transformation von KamenPro zeigt eindrucksvoll, wie ein traditioneller Handwerksbetrieb durch moderne Webtechnologie neue Märkte erschließen kann. Die Kombination aus Multi-Location SEO, optimierter Produktpräsentation und technischer Exzellenz führte zu einer Verdreifachung der Kundenanfragen. Besonders bemerkenswert: Ein lokaler Steinverkleidungs-Hersteller aus Bijeljina erreicht nun Kunden in der gesamten Region - ein Beweis dafür, dass durchdachte Digitalisierung auch im traditionellen Handwerk messbare Erfolge bringt."
}
};
// Re-export für Kompatibilität mit dem Projektimport-System
export default kamenpro;
@@ -0,0 +1,244 @@
// src/i18n/locales/de/portfolio/projects/power-platform-governance.ts
export const powerPlatformGovernance = {
meta: {
slug: 'power-platform-governance',
title: "Power Platform Governance & Automation Suite",
description: "Enterprise-Governance-Plattform für Microsoft Power Platform und SharePoint Online",
excerpt: "Zentrale Verwaltung, Überwachung und Automatisierung der gesamten M365-Umgebung - von Tenant-Provisionierung bis Compliance-Monitoring.",
date: "2025-01",
category: "Enterprise Software",
client: "Enterprise CoE Teams",
duration: "6 Monate",
url: "https://governance-demo.azurewebsites.net",
repository: "",
documentation: "/docs/power-platform-governance",
published: true,
featured: true,
technologies: ["React", "TypeScript", "Node.js", "Microsoft Graph", "PowerShell", "Azure Functions", "GraphQL", "Fluent UI"],
tags: ["Microsoft 365", "Power Platform", "SharePoint", "Governance", "Automation", "Enterprise"]
},
content: {
intro: "Eine umfassende Enterprise-Governance-Plattform, die IT-Administratoren und Power Platform CoE Teams ermöglicht, ihre gesamte M365-Umgebung zentral zu verwalten und zu automatisieren.",
challenge: {
title: "Die Herausforderung",
description: "Unkontrolliertes Wachstum von Power Apps, Flows und SharePoint-Sites führte zu kritischen Problemen.",
points: [
"Shadow IT durch ungovernte Citizen Development",
"Compliance-Risiken und Datenschutzverletzungen",
"Explodierende Lizenzkosten durch ungenutzte Ressourcen",
"Fehlende Übersicht über die Power Platform Landschaft",
"Manuelle, fehleranfällige Provisionierungsprozesse",
"Inkonsistente Governance-Policies über Teams hinweg"
]
},
solution: {
title: "Die Lösung",
description: "Eine zentrale Governance-Plattform mit Echtzeit-Monitoring und Automatisierung",
content: "Die Plattform kombiniert moderne Web-Technologien mit Microsoft 365 APIs, um eine nahtlose Integration und vollständige Kontrolle über die gesamte Power Platform Umgebung zu ermöglichen.",
points: [
"Automated Provisioning Hub für Sites, Teams und Environments",
"Real-Time Monitoring Dashboard mit Live Activity Streams",
"Power Platform Governance Center mit DLP Policy Enforcement",
"Compliance & Security Suite mit Permission Analyzer",
"PowerShell Automation Framework für Custom Operations",
"Intelligent Resource Optimization mit ML-based Predictions"
]
},
technical: {
title: "Technische Implementierung",
description: "Die Lösung basiert auf einer modernen Microservices-Architektur mit Event-Driven Design:",
points: [
"React 18.3 mit TypeScript für type-safe Frontend-Entwicklung",
"Fluent UI v9 für native Microsoft Look & Feel",
"GraphQL API mit Apollo Server für effiziente Datenabfragen",
"Azure Functions für serverlose Automatisierung",
"PowerShell 7.4 Core für M365-Operationen",
"Azure Service Bus für asynchrone Job-Verarbeitung",
"Cosmos DB für globale Datenreplikation"
]
},
features: {
title: "Hauptfunktionalitäten",
items: [
{
title: "Automated Provisioning Hub",
description: "Template-basierte SharePoint Site-Erstellung mit Bulk-Provisioning und Post-Provisioning Workflows",
icon: "automation"
},
{
title: "Real-Time Monitoring",
description: "Live Activity Streams mit Echtzeit-Updates über WebSockets und GraphQL Subscriptions",
icon: "monitoring"
},
{
title: "Permission Analyzer",
description: "Cross-tenant Permission Reports mit Overprivileged Users Detection und External Sharing Audit",
icon: "security"
},
{
title: "PowerShell Framework",
description: "120+ Custom Cmdlets mit zentraler Script Library und Scheduled Automation",
icon: "powershell"
},
{
title: "Compliance Suite",
description: "DLP Policy Builder mit Sensitive Data Discovery und Automated Remediation",
icon: "compliance"
},
{
title: "Resource Optimizer",
description: "ML-basierte Usage Prediction mit automatischer Cleanup und Cost Allocation",
icon: "optimization"
}
]
},
implementation: {
title: "Implementierungsphasen",
phases: [
{
title: "Phase 1: Foundation",
duration: "6 Wochen",
description: "Architektur-Setup und Core Services",
tasks: [
"Azure Infrastructure Setup mit Terraform",
"GraphQL API und Authentication Service",
"Microsoft Graph Integration",
"PowerShell Execution Framework"
]
},
{
title: "Phase 2: Core Features",
duration: "10 Wochen",
description: "Entwicklung der Hauptfunktionalitäten",
tasks: [
"Provisioning Engine mit Template System",
"Real-Time Monitoring Dashboard",
"Permission Analyzer Implementation",
"DLP Policy Management"
]
},
{
title: "Phase 3: Intelligence",
duration: "8 Wochen",
description: "ML-Features und Automation",
tasks: [
"Resource Usage Prediction Model",
"Automated Cleanup Workflows",
"Cost Optimization Engine",
"Anomaly Detection System"
]
}
]
},
challenges: {
title: "Herausforderungen & Lösungen",
items: [
{
challenge: "API Rate Limiting",
solution: "Intelligent Request Batching mit exponential backoff und Redis-basiertem Caching"
},
{
challenge: "Multi-Tenant Isolation",
solution: "Separate Datenbanken pro Tenant mit Row-Level Security und Encryption at Rest"
},
{
challenge: "Real-Time Updates bei großen Datenmengen",
solution: "WebSocket-basierte Updates mit GraphQL Subscriptions und Delta Queries"
},
{
challenge: "PowerShell Execution Security",
solution: "Sandboxed Execution mit Azure Container Instances und Just Enough Administration"
}
]
},
results: {
title: "Ergebnisse",
description: "Die Plattform transformierte die Power Platform Governance vollständig:",
metrics: [
{ label: "Provisioning Zeit", value: "95% schneller" },
{ label: "Compliance Rate", value: "94%" },
{ label: "Kostenreduktion", value: "40%" },
{ label: "Admin-Produktivität", value: "3x" },
{ label: "Incident Response", value: "80% schneller" },
{ label: "Shadow IT Reduktion", value: "90%" }
],
impact: "Die Lösung ermöglichte es Unternehmen, die Balance zwischen Innovation und Kontrolle zu finden. Citizen Developer konnten sicher arbeiten, während IT die volle Governance behielt."
},
performance: {
title: "Performance & Skalierung",
metrics: {
technical: {
title: "Technische Metriken",
items: [
"35.000+ Lines of Code",
"45+ React Components",
"120+ PowerShell Cmdlets",
"80+ GraphQL Endpoints",
"92% Test Coverage"
]
},
scale: {
title: "Skalierung",
items: [
"25+ Enterprise Tenants",
"50.000+ verwaltete Ressourcen",
"5.000+ tägliche Automatisierungen",
"100+ gleichzeitige Nutzer",
"99.9% Uptime SLA"
]
},
architecture: {
title: "Architektur",
items: [
"Multi-Region Deployment",
"Auto-Scaling mit AKS",
"Global Data Replication",
"Zero-Downtime Deployments",
"Disaster Recovery <1h RTO"
]
}
}
},
testimonial: {
text: "Diese Plattform hat unsere Power Platform Governance revolutioniert. Was früher Wochen dauerte, passiert jetzt in Minuten - vollautomatisiert und compliant.",
author: "Michael Schmidt",
position: "Head of IT Governance",
company: "Fortune 500 Company"
},
learnings: {
title: "Lessons Learned",
items: [
"Event-Driven Architecture ist essentiell für Skalierbarkeit bei Enterprise-Workloads",
"PowerShell Core ermöglicht Cross-Platform Automation ohne Windows-Abhängigkeit",
"GraphQL reduzierte die API-Calls um 60% durch effizientes Data Fetching",
"Policy as Code vereinfachte Governance-Management erheblich",
"Incremental Sync mit Delta Queries ist kritisch für Performance"
]
},
future: {
title: "Zukunftsperspektiven",
description: "Die Plattform wird kontinuierlich erweitert und verbessert.",
plans: [
"AI-Powered Insights mit Anomalie-Erkennung",
"Microsoft Copilot Integration für Natural Language Governance",
"Fabric Analytics für erweiterte BI-Integration",
"Container Apps für serverlose PowerShell-Execution",
"Zero Trust Security Model Implementation",
"Cross-Cloud Support für AWS und Google Cloud"
]
}
}
};
export default powerPlatformGovernance;
@@ -0,0 +1,222 @@
// src/i18n/locales/de/portfolio/projects/smart-warehouse.ts
export const smartWarehouse = {
meta: {
slug: 'smart-warehouse',
title: "Intelligente Lagerverwaltung mit Computer Vision",
description: "KI-gestütztes System zur Echtzeit-Bestandsführung und Optimierung von Lagerprozessen",
excerpt: "Entwicklung eines autonomen Lagerverwaltungssystems mit Computer Vision, IoT-Sensorik und Machine Learning für präzise Bestandsführung.",
date: "2025-01",
category: "AI & Automation",
client: "LogiTech Solutions GmbH",
duration: "4 Monate",
url: "https://warehouse-demo.example.com",
repository: "",
documentation: "/case-studies/smart-warehouse",
published: true,
featured: true,
technologies: ["YOLOv8", "Python", "FastAPI", "React", "PostgreSQL", "Docker", "Kubernetes", "IoT", "MQTT"],
tags: ["Computer Vision", "Machine Learning", "IoT", "Edge Computing", "Automation"]
},
content: {
intro: "Ein mittelständischer Logistikdienstleister transformierte seine manuelle Lagerverwaltung durch ein vollautomatisiertes System, das Computer Vision, IoT-Sensorik und Machine Learning kombiniert.",
challenge: {
title: "Die Herausforderung",
description: "Die manuelle Bestandsführung führte zu erheblichen operativen Problemen.",
points: [
"Diskrepanzen zwischen tatsächlichem und gebuchtem Bestand von bis zu 15%",
"Zeitintensive manuelle Inventuren (3-4 Tage pro Quartal)",
"Fehlende Echtzeit-Transparenz über Lagerbestände",
"Ineffiziente Lagerplatznutzung durch fehlende Optimierung",
"Hohe Personalkosten durch manuelle Prozesse"
]
},
solution: {
title: "Die Lösung",
description: "Entwicklung eines vollautomatisierten Lagerverwaltungssystems",
content: "Das System kombiniert Computer Vision, IoT-Sensorik und Machine Learning für eine kontinuierliche, präzise Bestandsführung ohne menschliches Eingreifen.",
points: [
"KI-gestützte Objekterkennung mittels hochauflösender Kameras",
"IoT-Gewichtssensoren zur Validierung",
"Predictive Analytics für Bestandsoptimierung",
"Echtzeit-Dashboard mit mobilem Zugriff",
"Automatische Nachbestellungstrigger"
]
},
technical: {
title: "Technische Implementierung",
description: "Die Lösung basiert auf einer modularen Microservices-Architektur mit Edge Computing für Echtzeitverarbeitung:",
points: [
"YOLOv8 für präzise Objekterkennung",
"Edge Computing für <50ms Bildverarbeitung",
"Apache Kafka für Stream Processing von 2TB Daten/Tag",
"MQTT-basierte IoT-Integration mit 200+ Sensoren",
"PostgreSQL für Datenpersistenz",
"Kubernetes für Skalierbarkeit"
]
},
features: {
title: "Kernfunktionen",
items: [
{
title: "Echtzeit-Objekterkennung",
description: "98,7% Genauigkeit bei der Bestandserfassung durch KI-gestützte Bilderkennung",
icon: "camera"
},
{
title: "IoT-Sensorintegration",
description: "200+ Sensoren validieren CV-Ergebnisse durch Gewichtsmessungen",
icon: "sensor"
},
{
title: "Predictive Analytics",
description: "Vorhersage von Bestandsbewegungen und automatische Nachbestellung",
icon: "chart"
},
{
title: "Mobile Dashboard",
description: "Echtzeit-Zugriff auf alle Lagerdaten von überall",
icon: "mobile"
}
]
},
implementation: {
title: "Implementierungsphasen",
phases: [
{
title: "Phase 1: Proof of Concept",
duration: "4 Wochen",
description: "Prototyp-Entwicklung und Modelltraining",
tasks: [
"Entwicklung eines Prototyps für einen Lagerbereich",
"Training des ML-Modells mit 10.000+ annotierten Bildern",
"Integration von 5 Testkameras und 20 IoT-Sensoren",
"Validierung der Erkennungsgenauigkeit"
]
},
{
title: "Phase 2: Skalierung",
duration: "8 Wochen",
description: "Vollständiger Rollout auf 5.000m² Lagerfläche",
tasks: [
"Installation von 45 Kameras und 200+ Sensoren",
"Entwicklung des Echtzeit-Dashboards",
"Integration in bestehendes ERP-System",
"Performance-Optimierung"
]
},
{
title: "Phase 3: Optimierung",
duration: "4 Wochen",
description: "Fine-Tuning und erweiterte Features",
tasks: [
"Fine-Tuning der ML-Modelle",
"Implementierung von Predictive Analytics",
"Mobile App Entwicklung",
"Schulung der Mitarbeiter"
]
}
]
},
challenges: {
title: "Herausforderungen & Lösungen",
items: [
{
challenge: "Variierende Lichtverhältnisse",
solution: "HDR-Kameras mit adaptiver Bildvorverarbeitung und augmentierten Trainingsdaten"
},
{
challenge: "Echtzeitverarbeitung großer Datenmengen",
solution: "Edge Computing für Vorverarbeitung und Apache Kafka für Stream Processing"
},
{
challenge: "Legacy-System Integration",
solution: "Entwicklung eines Adapter-Layers mit bidirektionaler Synchronisation"
}
]
},
results: {
title: "Ergebnisse",
description: "Das System transformierte die Lagerverwaltung vollständig:",
metrics: [
{ label: "Erkennungsgenauigkeit", value: "98,7%" },
{ label: "Reduktion Inventurzeit", value: "85%" },
{ label: "Weniger Fehlbestände", value: "60%" },
{ label: "Lagerplatznutzung", value: "+35%" },
{ label: "ROI", value: "14 Monate" },
{ label: "System-Uptime", value: "99,95%" }
],
impact: "Die Echtzeit-Transparenz ermöglichte proaktive Entscheidungen und verhinderte Lieferengpässe. Mitarbeiter konnten sich auf wertschöpfende Tätigkeiten fokussieren, während die KI die Bestandsführung übernahm."
},
performance: {
title: "Performance Metriken",
metrics: {
processing: {
title: "Verarbeitung",
items: [
"Bildverarbeitung: <50ms pro Frame",
"API Response Time: p95 < 100ms",
"Datenverarbeitung: 500 Events/Sekunde",
"System Uptime: 99.95%"
]
},
scale: {
title: "Skalierung",
items: [
"45 Kameras aktiv (bis 200 möglich)",
"200+ IoT Sensoren",
"50+ Concurrent Users",
"50TB Datenspeicher"
]
},
ml: {
title: "ML Performance",
items: [
"mAP@50: 0.92",
"Inference Time: 23ms",
"False Positive Rate: <2%",
"Model Size: 138MB"
]
}
}
},
testimonial: {
text: "Die Implementierung hat unsere Lagerprozesse revolutioniert. Was früher Tage dauerte, passiert jetzt in Echtzeit. Die Genauigkeit und Effizienz sind beeindruckend.",
author: "Thomas Weber",
position: "Head of Logistics",
company: "LogiTech Solutions GmbH"
},
learnings: {
title: "Lessons Learned",
items: [
"Edge Computing ist essentiell: Die Vorverarbeitung direkt an der Kamera reduzierte die Netzwerklast um 70%",
"Datenqualität vor Quantität: 1.000 hochqualitative Annotationen waren wertvoller als 10.000 automatisch generierte",
"Iterative Entwicklung: Frühe Pilotierung in einem Bereich ermöglichte schnelle Anpassungen",
"Change Management: Frühzeitige Einbindung der Mitarbeiter war entscheidend für die Akzeptanz"
]
},
future: {
title: "Zukunftsperspektiven",
description: "Das System wurde als White-Label-Lösung konzipiert und kann mit minimalen Anpassungen in anderen Lagern eingesetzt werden.",
plans: [
"Integration von Robotik für automatisierte Kommissionierung",
"Erweiterung auf Außenlager und mobile Einheiten",
"KI-basierte Vorhersage von Wartungsbedarf",
"Blockchain-Integration für Supply Chain Transparenz",
"AR-Brillen für Lagermitarbeiter mit visuellen Hinweisen"
]
}
}
};
export default smartWarehouse;
@@ -0,0 +1,80 @@
// src/i18n/locales/de/portfolio/projects/website-mit-ki.ts
export const websiteMitKi = {
meta: {
slug: 'website-mit-ki',
title: 'Eigene Website mit KI bauen: Von Null zur fertigen Seite',
description: 'Schritt-für-Schritt Anleitung zum Aufbau einer professionellen Website mit Claude Code - DSGVO-konform, mehrsprachig, mit Portfolio und Blog',
excerpt: 'Wie du in unter einer Stunde eine komplette Website erstellst - ohne eine einzige Zeile Code selbst zu schreiben.',
date: '2025-01',
category: 'KI & Automatisierung',
client: 'Eigenprojekt',
duration: '30 Minuten',
url: '',
repository: '',
documentation: '',
published: true,
featured: true,
technologies: ['Claude Code', 'React', 'TypeScript', 'Vercel', 'GitHub', 'Vite'],
tags: ['KI', 'Website', 'No-Code', 'Tutorial', 'Claude Code', 'Vercel'],
videoUrl: 'https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v'
},
content: {
intro: 'Eine professionelle Website ohne Programmierkenntnisse? Mit KI ist das heute möglich. Dieses Tutorial zeigt den kompletten Prozess - von der leeren Projektmappe zur fertigen, gehosteten Website.',
challenge: {
title: 'Die Herausforderung',
description: 'Der traditionelle Weg zur eigenen Website ist oft kompliziert und teuer:',
points: [
'Baukastensysteme wie Wix, WordPress oder Webflow verursachen monatliche Kosten',
'Eigene Entwicklung erfordert Programmierkenntnisse',
'Designer und Entwickler sind teuer',
'DSGVO-Konformität und SEO-Optimierung sind komplex',
'Mehrsprachigkeit und responsive Design erfordern zusätzlichen Aufwand'
]
},
solution: {
title: 'Der Lösungsansatz',
description: 'Mit KI lässt sich eine komplette Website in unter einer Stunde aufbauen:',
content: 'Der komplette Workflow nutzt Claude Code für die autonome Entwicklung, GitHub für die Versionierung und Vercel für kostenloses Hosting.',
points: [
'DSGVO-konforme Implementierung mit Cookie-Banner',
'Mehrsprachigkeit (Deutsch, Englisch, weitere möglich)',
'Portfolio-Seite mit interaktiven Projekten',
'Blog-Funktionalität für Blogposts',
'SEO-Optimierung für bessere Google-Rankings',
'Kontaktformular für potenzielle Kunden'
]
},
technical: {
title: 'Der Workflow',
description: 'So funktioniert der Prozess Schritt für Schritt:',
points: [
'Schritt 1: GitHub-Account erstellen und Repository anlegen',
'Schritt 2: Vercel-Account für kostenloses Hosting einrichten',
'Schritt 3: Lokalen Projektordner mit relevanten Dokumenten vorbereiten',
'Schritt 4: Claude Code öffnen und Prompt mit gewünschten Features eingeben',
'Schritt 5: KI arbeitet autonom und erstellt die komplette Website',
'Schritt 6: Projekt auf GitHub pushen und in Vercel importieren'
]
},
results: {
title: 'Vorteile dieser Lösung',
description: 'Die KI-gestützte Website-Entwicklung bietet mehrere Vorteile:',
points: [
'Keine Programmierkenntnisse erforderlich',
'Minimale Kosten: Nur KI-Abo und optional Domain',
'Bessere Sichtbarkeit durch SEO-Optimierung',
'Volle Kontrolle: Code liegt auf GitHub, Hosting ist kostenlos',
'Schnelle Änderungen per Chat-Anweisung möglich',
'Mobile-optimiertes, responsives Design inklusive'
]
},
conclusion: 'Eine komplette, professionelle Website lässt sich heute in unter einer Stunde aufbauen - ohne eine einzige Zeile Code selbst zu schreiben. Die Kombination aus KI-Entwicklung, kostenlosem Hosting und Versionierung macht diese Lösung nicht nur für Entwickler interessant, sondern für alle, die eine professionelle Webpräsenz benötigen.'
}
};
export default websiteMitKi;
+104
View File
@@ -0,0 +1,104 @@
export const seoContent = {
hero: {
title: "Damjan Savić | Voice AI, KI-Agenten & Fullstack-Entwicklung",
subtitle: "Voice AI, autonome Agenten und skalierbare Softwarelösungen",
description: "Als AI & Automation Specialist aus Köln entwickelt Damjan Savić Voice AI Lösungen, autonome KI-Agenten und skalierbare Fullstack-Anwendungen mit Claude, GPT-4 und n8n.",
cta: {
primary: "Projekte ansehen",
secondary: "Kontakt aufnehmen"
}
},
services: {
title: "IT-Dienstleistungen von Damjan Savić - AI & Automation Specialist Köln",
subtitle: "Voice AI, KI-Agenten & Enterprise Solutions von Damjan Savić",
items: {
voiceai: {
title: "Voice AI Entwicklung von Damjan Savić | VAPI, Conversational AI & Sprachassistenten",
description: "Damjan Savić entwickelt Voice AI Lösungen mit VAPI und Conversational AI. Von automatisierten Telefonassistenten bis zu Recruiting-Bots - Damjan Savić implementiert sprachgesteuerte KI-Systeme für Ihr Unternehmen.",
keywords: ["Voice AI Entwickler Deutschland", "VAPI Integration", "Sprachassistent Entwicklung", "Conversational AI", "AI Voice Agent", "Recruiting Bot"]
},
agents: {
title: "Autonome KI-Agenten von Damjan Savić | n8n, Claude & GPT-4 Integration",
description: "Damjan Savić entwickelt autonome KI-Agenten mit n8n, Claude API und GPT-4. Diese intelligenten Systeme automatisieren komplexe Workflows, treffen eigenständige Entscheidungen und optimieren Ihre Geschäftsprozesse.",
keywords: ["Autonome KI Agenten", "n8n Automatisierung", "Claude API Integration", "GPT-4 Integration", "AI Workflow Automatisierung", "Anthropic Developer"]
},
backend: {
title: "Enterprise Backend Development von Damjan Savić | Python & Cloud Architecture",
description: "Damjan Savić entwickelt skalierbare Backend-Systeme mit Python, FastAPI und Django. Als erfahrener Cloud Architect implementiert Damjan Savić Microservices, RESTful APIs und Event-Driven Architectures für Enterprise-Anwendungen.",
keywords: ["Backend Entwickler Köln", "Python Entwickler Köln", "API Entwicklung Python FastAPI", "Microservices Entwickler", "Django Entwickler Deutschland", "Node.js Entwickler Köln"]
},
frontend: {
title: "Modern Frontend Development von Damjan Savić | React, TypeScript & Next.js",
description: "Damjan Savić erstellt moderne, performante Frontend-Lösungen mit React, TypeScript und Next.js. Spezialisiert auf Enterprise UI/UX, Progressive Web Apps und barrierefreie Webanwendungen entwickelt Damjan Savić zukunftssichere Interfaces.",
keywords: ["React Entwickler Köln", "Frontend Entwickler Köln", "Next.js Entwickler Deutschland", "TypeScript React Entwickler", "Progressive Web App Entwicklung", "JavaScript Entwickler Köln"]
},
ai: {
title: "KI & LLM Integration von Damjan Savić | Claude, GPT-4 & OLLAMA Experte",
description: "Damjan Savić integriert Claude, GPT-4 und OLLAMA in Ihre Geschäftsprozesse. Als KI-Spezialist implementiert Damjan Savić RAG-Systeme, Prompt Engineering und LLM-basierte Automatisierungen für intelligente Unternehmenslösungen.",
keywords: ["Claude API Integration", "GPT-4 Integration Entwickler", "OLLAMA KI Integration", "LLM Entwickler", "RAG Entwicklung", "Prompt Engineering", "Anthropic Developer"]
},
erp: {
title: "ERP & System Integration von Damjan Savić | SAP, Dynamics & Custom Solutions",
description: "Damjan Savić verbindet Ihre Unternehmenssysteme nahtlos. Mit Expertise in SAP, Microsoft Dynamics und Custom ERP-Lösungen optimiert Damjan Savić Ihre Geschäftsprozesse durch intelligente Integration und Automatisierung.",
keywords: ["ERP System Integration Köln", "B2B Software Entwicklung", "Enterprise Software Developer", "Business Automation Köln", "System Integration Spezialist", "SAP Integration"]
},
ecommerce: {
title: "E-Commerce Solutions von Damjan Savić | Shopify, WooCommerce & Custom Shops",
description: "Damjan Savić entwickelt leistungsstarke E-Commerce-Plattformen. Von Shopify-Anpassungen bis zu maßgeschneiderten Online-Shops realisiert Damjan Savić skalierbare Lösungen mit Payment-Integration, Inventory Management und Multi-Channel-Vertrieb.",
keywords: ["E-Commerce Integration Spezialist", "Online Shop Entwicklung Köln", "E-Commerce Developer", "Payment Integration", "Shop-System Entwicklung", "Shopify Developer"]
},
automation: {
title: "Business Process Automation von Damjan Savić | RPA & Workflow Optimization",
description: "Damjan Savić automatisiert Ihre Geschäftsprozesse intelligent. Mit Python, RPA-Tools und Custom Workflows steigert Damjan Savić Ihre Effizienz, reduziert Fehler und beschleunigt Ihre digitale Transformation.",
keywords: ["Prozessautomatisierung Python Köln", "Python Automatisierung Entwickler", "RPA Entwicklung Köln", "Workflow Automation", "Business Process Automation", "Task Automation Developer"]
}
}
},
skills: {
title: "Technologie-Stack",
categories: {
languages: {
title: "Programmiersprachen",
items: ["Python", "JavaScript", "TypeScript", "SQL", "Bash"]
},
backend: {
title: "Backend Technologies",
items: ["FastAPI", "Django", "Node.js", "Express", "PostgreSQL", "MongoDB", "Redis"]
},
frontend: {
title: "Frontend Technologies",
items: ["React", "Next.js", "Vue.js", "Tailwind CSS", "Material-UI", "Framer Motion"]
},
ai: {
title: "AI/ML Tools",
items: ["OLLAMA", "LangChain", "OpenAI API", "Hugging Face", "TensorFlow", "PyTorch"]
},
devops: {
title: "DevOps & Tools",
items: ["Docker", "Kubernetes", "AWS", "CI/CD", "Git", "Linux"]
}
}
},
cta: {
title: "Bereit für Ihr nächstes Projekt mit Damjan Savić?",
description: "Damjan Savić setzt Ihre Ideen in die Realität um. Von der Konzeption bis zur Implementierung begleitet Damjan Savić Ihr Projekt professionell.",
button: "Damjan Savić kontaktieren - Kostenloses Erstgespräch"
},
testimonials: {
title: "Was Kunden sagen",
items: [
{
text: "Damjan Savić hat unsere Python-Skripte in eine moderne Web-App transformiert. Die von Damjan Savić entwickelte Automatisierung spart uns täglich 4 Stunden Arbeit.",
author: "Michael Schmidt",
role: "CTO, TechStart GmbH",
keywords: ["Damjan Savić Python Automatisierung", "Web App Entwicklung Damjan Savić"]
},
{
text: "Die von Damjan Savić implementierte OLLAMA-Integration ermöglicht uns KI-Features ohne Cloud-Kosten. Datenschutz und Performance der Lösung von Damjan Savić sind erstklassig.",
author: "Sarah Weber",
role: "Product Owner, DataSec AG",
keywords: ["Damjan Savić OLLAMA Integration", "Datenschutz KI Damjan Savić"]
}
]
}
}