{post.content.intro.title}
-{post.content.intro.description}
-{post.content.intro.title}
+{post.content.intro.description}
+{post.content.background.title}
-
-
- Systems
--
- {Object.values(post.content.background.systems).map((system, index) => (
-
- {system} - ))} -
-
- Challenges
--
- {Object.values(post.content.background.challenges).map((challenge, index) => (
-
- {challenge} - ))} -
+
+
+ {post.content.tech.title}
-{post.content.tech.components.title}
-
- {post.content.tech.components.code}
-
- {post.content.background.title}
+ {post.content.background.systems && ( +
+
+ )}
+ {post.content.background.challenges && (
+ Systems
+-
+ {Object.values(post.content.background.systems).map((system, index) => (
+
- {system} + ))} +
+
+ )}
+ Challenges
+-
+ {Object.values(post.content.background.challenges).map((challenge, index) => (
+
- {challenge} + ))} +
{post.content.api.title}
-
-
- {post.content.api.apparel_magic.title}
-{post.content.api.apparel_magic.description}
-{post.content.tech.title}
+ {post.content.tech.components && ( + <> +{post.content.tech.components.title}
+ {post.content.tech.components.code && ( +
+ {post.content.tech.components.code}
+
+ )}
+
+ )}
+ {post.content.api.title}
+ {post.content.api.apparel_magic && ( +
+
+ )}
+ {post.content.api.apparel_magic.title}
+{post.content.api.apparel_magic.description}
+{(post.content as unknown as { workflow: { title: string } }).workflow.title}
+ {Object.values((post.content as unknown as { workflow: { steps: Record
+
+ ))}
+ {step.title}
+{step.description}
+ {step.points && ( +-
+ {step.points.map((point, i) => (
+
- {point} + ))} +
-
+ {step.advantages.map((adv, i) => (
+
- {adv} + ))} +
-
+ {step.steps.map((s, i) => (
+
- {s} + ))} +
{(post.content as unknown as { advantages: { title: string } }).advantages.title}
+ {(post.content as unknown as { advantages: { efficiency?: { title: string; points: string[] } } }).advantages.efficiency && ( +
+
+ )}
+ {(post.content as unknown as { advantages: { scalability?: { title: string; points: string[] } } }).advantages.scalability && (
+ {(post.content as unknown as { advantages: { efficiency: { title: string } } }).advantages.efficiency.title}
+-
+ {(post.content as unknown as { advantages: { efficiency: { points: string[] } } }).advantages.efficiency.points.map((point, i) => (
+
- {point} + ))} +
+
+ )}
+ {(post.content as unknown as { advantages: { consistency?: { title: string; points: string[] } } }).advantages.consistency && (
+ {(post.content as unknown as { advantages: { scalability: { title: string } } }).advantages.scalability.title}
+-
+ {(post.content as unknown as { advantages: { scalability: { points: string[] } } }).advantages.scalability.points.map((point, i) => (
+
- {point} + ))} +
+
+ )}
+ {(post.content as unknown as { advantages: { consistency: { title: string } } }).advantages.consistency.title}
+-
+ {(post.content as unknown as { advantages: { consistency: { points: string[] } } }).advantages.consistency.points.map((point, i) => (
+
- {point} + ))} +
{post.content.conclusion.title}
--
- {Object.values(post.content.conclusion.requirements).map((req, index) => (
-
- {req} - ))} -
{post.content.conclusion.results}
-{post.content.conclusion.title}
+ {post.content.conclusion.requirements && ( +-
+ {Object.values(post.content.conclusion.requirements).map((req, index) => (
+
- {req} + ))} +
{post.content.conclusion.results}
+ )} + {(post.content.conclusion as unknown as { description?: string }).description && ( +{(post.content.conclusion as unknown as { description: string }).description}
+ )} + {(post.content.conclusion as unknown as { keyPoints?: string[] }).keyPoints && ( +-
+ {(post.content.conclusion as unknown as { keyPoints: string[] }).keyPoints.map((point, i) => (
+
- {point} + ))} +
- 
{
- console.error('Image failed to load:', e.currentTarget.src);
- }}
- />
-
-
+ {project.meta.videoUrl ? (
+ {
- console.error('Image failed to load:', e.currentTarget.src);
- }}
- />
-
-
+
+
+ ) : (
+
+ {
+ console.error('Image failed to load:', e.currentTarget.src);
+ }}
+ />
+
+
+ )}
{
+ console.error('Image failed to load:', e.currentTarget.src);
+ }}
+ />
+
+
+
+
+
+
+
+
++ 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. +
++ +
Die Herausforderung
+
+
+
++ Die Erstellung von Werbemitteln für Facebook-Kampagnen erfordert traditionell: +
+-
+
- 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 +
Der Lösungsansatz
+
+
+
++ Ein KI-gestützter Workflow, der den gesamten Prozess im Chat-Fenster abbildet: +
+-
+
- 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 +
Technische Umsetzung
+
+
+
+Der Workflow im Detail
+ +Schritt 1: Designgrundlage
++ Auf Envato Elements nach "Facebook Ads Kampagne" suchen und ein passendes Template als Designreferenz herunterladen. Dieses Bild definiert Stil, Farbgebung und Layout. +
+ +Schritt 2: Erster Prompt
++ Das Referenzbild zusammen mit einem beschreibenden Prompt an Claude Opus 4.5 senden. Die KI analysiert das Bild und generiert eine HTML-Datei, die das Design nachbildet. +
+ +Schritt 3: HTML zu PNG
++ Im zweiten Prompt die KI bitten, die HTML-Datei als PNG zu exportieren. Das Ergebnis ist eine fertige Bilddatei für Facebook Ads. +
+ +Schritt 4: Bilder hinzufügen
++ Zusätzliche Bilder (z.B. von Unsplash) per Drag & Drop in den Chat ziehen. Die KI integriert sie in das bestehende Creative. +
+Verwendete Tools
+
+
+
+
+
+
+| Tool | +Zweck | +
|---|---|
| Claude Opus 4.5 | +KI für HTML-Generierung und Bildexport | +
| Envato Elements | +Designvorlagen als Referenz | +
| Unsplash | +Kostenlose Bilder für die Creatives | +
Vorteile des Ansatzes
+
+
+
+-
+
- 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 +
Einsatzszenarien
+
+
+
+-
+
- 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 +
Fazit
+
+
diff --git a/src/pages/portfolio/projects/recrobot.mdx b/src/pages/portfolio/projects/recrobot.mdx
new file mode 100644
index 0000000..40d0bb1
--- /dev/null
+++ b/src/pages/portfolio/projects/recrobot.mdx
@@ -0,0 +1,157 @@
+---
+slug: "recrobot"
+title: "RecroBot - AI Voice Interview Platform"
+description: "KI Voice Interview-Plattform für automatisierte HR-Interviews mit Echtzeit-Sprachtranskription"
+excerpt: "Produktive Voice-AI-Plattform für automatisierte HR-Interviews mit TypeScript/Next.js 14 und Vapi Voice AI."
+date: "2024-12-01"
+category: "AI & Automation"
+coverImage: "/images/projects/recrobot/cover.jpg"
+client: "Everlast Consulting GmbH"
+duration: "Laufend"
+url: "https://recrobot.site"
+repository: ""
+documentation: ""
+published: true
+featured: true
+technologies: ["TypeScript", "Next.js 14", "Vapi Voice AI", "WebSocket", "Supabase", "Tailwind CSS"]
+tags: ["Voice AI", "AI Agents", "HR Tech", "Real-time", "WebSocket"]
+---
+
++ 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. Was heute noch "nicht perfekt integriert" ist, wird in wenigen Monaten deutlich besser funktionieren. +
+
+
+
++ RecroBot ist eine produktive Voice-AI-Plattform für automatisierte HR-Interviews. Was als technische Testaufgabe begann, ist jetzt ein vollständiges HR-Produkt im Einsatz. +
++ +
Live Demo
+
+
+
++ Teste die Demo: Besuche recrobot.site und gib "AI-Manager" als Position an. +
+Features
+
+
+
+-
+
- Echtzeit-Sprachtranskription – Live-Transkription während des Interviews +
- WebSocket Event-Handling – Nahtlose Kommunikation zwischen Client und Server +
- Gesprächszustandsverwaltung – Intelligente Steuerung des Interview-Flows +
- Responsive UI – Optimiert für Desktop und Mobile +
- Voice AI Integration – Natürliche Sprachinteraktion mit Kandidaten +
Systemarchitektur
+
+
+
++ Die Lösung basiert auf einer modernen Next.js 14 Architektur: +
+-
+
- Next.js 14 App Router mit Server Components +
- Vapi Voice AI für Sprachverarbeitung +
- WebSocket für Echtzeit-Kommunikation +
- Supabase für Datenpersistenz +
- Tailwind CSS für responsives Design +
Tech Stack
+
+
+
+
+
+
+| Kategorie | +Technologie | +
|---|---|
| Frontend | +Next.js 14, TypeScript, Tailwind CSS | +
| Voice AI | +Vapi Voice AI | +
| Realtime | +WebSocket | +
| Database | +Supabase (PostgreSQL) | +
| Deployment | +Vercel | +
Voice AI Integration
+
+
+
+
+
+{`// Vapi Voice AI Event Handling
+const handleVapiEvents = (event: VapiEvent) => {
+ switch (event.type) {
+ case 'speech-start':
+ setIsListening(true);
+ break;
+ case 'transcript':
+ updateTranscript(event.transcript);
+ break;
+ case 'call-end':
+ finalizeInterview();
+ break;
+ }
+};`}
+
+
+WebSocket Kommunikation
+
+
+
++ Echtzeit-Event-Handling für nahtlose Benutzererfahrung: +
+-
+
- Bidirektionale Kommunikation +
- Automatische Reconnection-Logik +
- Event-basierte Zustandsänderungen +
- Optimierte Latenz für Voice-Anwendungen +
Interview Flow
+
+
+
++ Intelligente Gesprächssteuerung: +
+-
+
- Dynamische Fragenanpassung basierend auf Antworten +
- Kontextbewusstes Follow-up +
- Natürlicher Gesprächsfluss +
- Automatische Zusammenfassung +
Entstehung
+
+
+
++ Das Projekt entstand ursprünglich als technische Testaufgabe für eine Bewerbung bei Everlast Consulting. Nach positivem Feedback wurde es zu einem vollständigen Produkt weiterentwickelt, das jetzt aktiv für HR-Interviews eingesetzt wird. +
+Ergebnisse
+
+
diff --git a/src/pages/portfolio/projects/website-mit-ki.mdx b/src/pages/portfolio/projects/website-mit-ki.mdx
new file mode 100644
index 0000000..27e3ad0
--- /dev/null
+++ b/src/pages/portfolio/projects/website-mit-ki.mdx
@@ -0,0 +1,168 @@
+---
+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: "2024-12-13"
+category: "KI & Automatisierung"
+coverImage: "/images/projects/website-mit-ki/cover.jpg"
+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"
+---
+
+-
+
- Produktive Plattform im aktiven Einsatz +
- Automatisierung von Screening-Interviews +
- Konsistente Interview-Qualität +
- Skalierbare HR-Prozesse +
+
+
+
+
+
+
++ 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. +
++ +
Was wird gebaut?
+
+
+
++ Die fertige Website enthält alle wichtigen Features einer modernen Webpräsenz: +
+-
+
- DSGVO-konforme Implementierung mit Cookie-Banner +
- Mehrsprachigkeit (Deutsch, Englisch, weitere möglich) +
- Über-mich-Seite für persönliche Informationen +
- Portfolio-Seite mit interaktiven Projekten +
- Blog-Funktionalität für Blogposts +
- SEO-Optimierung für bessere Google-Rankings +
- Kontaktformular für potenzielle Kunden +
- Mobile-optimiertes, responsives Design +
Die Vorteile
+
+
+
+Bessere Sichtbarkeit
++ Durch SEO-Optimierung erscheint die Website direkt unter den ersten Google-Treffern für relevante Suchbegriffe - etwa bei der Suche nach dem eigenen Namen. +
+ +Minimale Kosten
++ Im Gegensatz zu Baukastensystemen wie Wix, WordPress oder Webflow fallen keine monatlichen Gebühren an. Die einzigen Kosten: Ein KI-Abonnement und optional eine eigene Domain. +
+ +Volle Kontrolle
++ Das Projekt liegt versioniert auf GitHub und wird über Vercel kostenlos gehostet. Keine Abhängigkeit von Plattformen, die ihre Preise ändern oder Features einschränken können. +
+Die Werkzeuge
+
+
+
+
+
+
+| Tool | +Zweck | +Kosten | +
|---|---|---|
| Claude Code | +KI für die komplette Entwicklung | +Pro-Plan empfohlen | +
| GitHub | +Versionierung des Codes | +Kostenlos | +
| Vercel | +Hosting und Deployment | +Kostenlos | +
| Domain | +Eigene URL | +Optional (~10-15EUR/Jahr) | +
Der Workflow
+
+
+
+1. Vorbereitung
+-
+
- GitHub-Account erstellen und neue Repository anlegen +
- Vercel-Account erstellen für späteres Hosting +
- Lokalen Projektordner auf dem Rechner anlegen +
- Relevante Dokumente bereitstellen (Lebenslauf, Anschreiben, etc.) +
2. Entwicklung mit Claude Code
+-
+
- Claude Code öffnen und Projektordner auswählen +
- Prompt mit gewünschten Features eingeben +
- KI arbeitet autonom durch alle Dateien und erstellt die Website +
- Berechtigungen bei Nachfrage erteilen +
3. Deployment
+-
+
- Projekt auf GitHub pushen +
- In Vercel das GitHub-Repository importieren +
- Website wird automatisch gebaut und deployed +
- Bei Build-Fehlern: Logs kopieren und Claude zur Fehlerbehebung nutzen +
Design-Inspiration
+
+
+
++ Für individuelle Designs gibt es mehrere Ansätze: +
+-
+
- Awwwards: Preisgekrönte Websites als Inspiration +
- Envato Elements: Website-Templates als Designvorlage - Screenshot anfertigen und Claude zeigen +
- Individuelle Anpassungen: Farben, Bilder und Elemente per Chat-Anweisung ändern +
Änderungen vornehmen
+
+
+
++ Nach dem initialen Setup können jederzeit Änderungen vorgenommen werden: +
+-
+
- Bilder austauschen durch Anhängen in Claude Code +
- Texte und Inhalte per Chat-Anweisung ändern +
- Neue Seiten oder Funktionen hinzufügen +
- Nach jeder Änderung: Push zu GitHub, automatisches Redeployment auf Vercel +
Fazit
+
+
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
new file mode 100644
index 0000000..f8df747
--- /dev/null
+++ b/src/utils/constants.ts
@@ -0,0 +1,28 @@
+// src/utils/constants.ts
+// Zentrale Konstanten für die gesamte Website
+
+export const CONTACT = {
+ email: "info@damjan-savic.com",
+ phone: "+49 175 695 0979",
+ website: "https://damjan-savic.com",
+ linkedin: "https://www.linkedin.com/in/damjan-savi%C4%87-720288127/",
+ github: "https://github.com/damjan1996",
+ location: {
+ city: "Bergisch Gladbach",
+ country: "Germany",
+ region: "Nordrhein-Westfalen"
+ }
+} as const;
+
+export const CURRENT_ROLE = {
+ company: "Everlast Consulting GmbH",
+ position: "Process Automation Specialist",
+ since: "2024-12"
+} as const;
+
+export const PROFILE = {
+ name: "Damjan Savić",
+ title: "AI & Automation Specialist",
+ subtitle: "Building AI agents and automation solutions",
+ languages: ["German", "English", "Serbian", "French", "Spanish", "Russian"]
+} as const;
+ 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: Selbstständige, Unternehmen oder Projekte. +
++ Der Kostenfaktor ist minimal, die Kontrolle maximal - und das Ergebnis kann sich mit jeder professionell entwickelten Website messen. +
+