diff --git a/docs/ADD_404_PROJECT_TO_PRODUCTION.md b/docs/ADD_404_PROJECT_TO_PRODUCTION.md new file mode 100644 index 0000000..064b26c --- /dev/null +++ b/docs/ADD_404_PROJECT_TO_PRODUCTION.md @@ -0,0 +1,314 @@ +# 🚀 Kernel Panic 404 Projekt auf Production hinzufügen + +## Übersicht + +Das "Kernel Panic 404 - Interactive Terminal" Projekt wurde bereits zum Seed-Script hinzugefügt, aber um es auf Production zu bekommen, gibt es mehrere Optionen. + +--- + +## Option 1: Über den Editor (Empfohlen) ⭐ + +### Schritt 1: Editor öffnen +1. Gehe zu `https://dk0.dev/editor` (oder `https://dev.dk0.dev/editor` für Staging) +2. Logge dich mit Admin-Credentials ein + +### Schritt 2: Neues Projekt erstellen +1. Klicke auf "New Project" oder gehe direkt zu `/editor` +2. Fülle die Felder aus: + +**Grunddaten:** +- **Title**: `Kernel Panic 404 - Interactive Terminal` +- **Description**: `An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.` +- **Category**: `Web Development` +- **Tags**: `Next.js`, `React`, `TypeScript`, `Terminal`, `404`, `Interactive`, `Easter Eggs` +- **Featured**: ✅ (Checkbox aktivieren) +- **Published**: ✅ (Checkbox aktivieren) + +**Content (Markdown):** +```markdown +# Kernel Panic 404 - Interactive Terminal + +An immersive, retro-style 404 page that transforms the error experience into an interactive terminal adventure. + +## 🎯 Purpose + +Instead of showing a boring "Page Not Found" message, visitors are greeted with a fully functional terminal emulator where they can explore a virtual file system, run commands, and discover hidden Easter eggs. + +## 🚀 Features + +- **Interactive Terminal**: Full command-line interface with command history +- **Virtual File System**: Navigate directories, read files, and explore hidden content +- **CRT Monitor Effects**: Authentic retro computer terminal aesthetics +- **Easter Eggs**: Hidden references to pop culture (Stranger Things, Mr. Robot, Hitchhiker's Guide) +- **Command Autocomplete**: Tab completion for commands and file paths +- **Audio Synthesis**: Sound effects for key presses and special events +- **Visual Effects**: Glitch effects, color shifts, and screen distortions + +## 🛠️ Technologies Used + +- Next.js 15 (App Router) +- React (Client Components) +- TypeScript +- CSS Animations +- Web Audio API +- Framer Motion (for effects) + +## 💻 Available Commands + +### System Commands +- \`ls\`, \`cd\`, \`cat\`, \`grep\`, \`find\`, \`pwd\` +- \`whoami\`, \`uname\`, \`date\`, \`uptime\` +- \`clear\`, \`history\`, \`help\` + +### Easter Egg Commands +- \`hawkins\` / \`011\` / \`eleven\` - Enter the Upside Down +- \`fsociety\` / \`elliot\` / \`bonsoir\` - Mr. Robot mode +- \`42\` / \`answer\` - Deep Thought calculation +- \`rm -rf /\` - Trigger kernel panic + +## 🎨 Design Features + +- **CRT Monitor Aesthetics**: Scanlines, phosphor glow, authentic terminal colors +- **Retro Typography**: Monospace font with terminal-style appearance +- **Interactive Elements**: Fully functional command line with history navigation +- **Visual Effects**: Screen glitches, color shifts, and distortion effects + +## 🔍 Hidden Content + +The file system contains hidden clues and references: +- \`/var/log/syslog\` - Contains hints about Easter eggs +- \`~/.bash_history\` - Shows previous commands +- \`~/readme.txt\` - Welcome message and hints + +## 💡 What I Learned + +- Building interactive terminal emulators in React +- Web Audio API for sound synthesis +- Complex state management for file systems +- CSS animations for retro effects +- Creating engaging error pages + +## 🔮 Future Enhancements + +- More Easter eggs and hidden commands +- Additional visual effects +- Sound theme variations +- More complex file system structures +- Network commands (ping, curl, etc.) + +## 🎮 Try It Out + +Visit any non-existent page on the site to see the terminal in action. Or click the "404" link in the footer! + +**Try these commands:** +- \`ls -la\` - List all files including hidden ones +- \`cat readme.txt\` - Read the welcome message +- \`cd /var/log\` - Navigate to system logs +- \`hawkins\` - Enter the Upside Down mode +- \`42\` - Get the answer to everything +``` + +**Links:** +- **Live URL**: `/404` +- **GitHub**: (optional, leer lassen) + +3. Klicke auf "Save" + +--- + +## Option 2: Direkt über die API + +### Mit curl: + +```bash +curl -X POST https://dk0.dev/api/projects \ + -H "Content-Type: application/json" \ + -H "x-admin-request: true" \ + -u "admin:your_password" \ + -d '{ + "title": "Kernel Panic 404 - Interactive Terminal", + "description": "An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.", + "content": "# Kernel Panic 404...", + "category": "Web Development", + "tags": ["Next.js", "React", "TypeScript", "Terminal", "404", "Interactive", "Easter Eggs"], + "featured": true, + "published": true, + "live": "/404", + "date": "2025-01-09", + "difficulty": "INTERMEDIATE", + "timeToComplete": "1-2 weeks", + "technologies": ["Next.js", "React", "TypeScript", "CSS", "Web Audio API"], + "challenges": [ + "Terminal emulator implementation", + "File system state management", + "Command parsing and execution" + ], + "lessonsLearned": [ + "Building interactive UIs", + "Web Audio API usage", + "Complex state management" + ], + "futureImprovements": [ + "More Easter eggs", + "Additional visual effects", + "Sound theme variations" + ], + "colorScheme": "Retro terminal green on black", + "accessibility": true, + "performance": { + "lighthouse": 0, + "bundleSize": "0KB", + "loadTime": "0s" + }, + "analytics": { + "views": 0, + "likes": 0, + "shares": 0 + } + }' +``` + +--- + +## Option 3: Über die Datenbank (SQL) + +### Schritt 1: Verbinde zur Production-Datenbank + +```bash +# Wenn du Zugriff auf den Production-Container hast: +docker exec -it portfolio-postgres psql -U portfolio_user -d portfolio_db +``` + +### Schritt 2: Projekt einfügen + +```sql +INSERT INTO project ( + title, + description, + content, + category, + tags, + featured, + published, + live, + date, + difficulty, + "timeToComplete", + technologies, + challenges, + "lessonsLearned", + "futureImprovements", + "colorScheme", + accessibility, + performance, + analytics, + "createdAt", + "updatedAt" +) VALUES ( + 'Kernel Panic 404 - Interactive Terminal', + 'An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.', + '# Kernel Panic 404 - Interactive Terminal...', + 'Web Development', + ARRAY['Next.js', 'React', 'TypeScript', 'Terminal', '404', 'Interactive', 'Easter Eggs'], + true, + true, + '/404', + '2025-01-09', + 'INTERMEDIATE', + '1-2 weeks', + ARRAY['Next.js', 'React', 'TypeScript', 'CSS', 'Web Audio API'], + ARRAY['Terminal emulator implementation', 'File system state management', 'Command parsing and execution'], + ARRAY['Building interactive UIs', 'Web Audio API usage', 'Complex state management'], + ARRAY['More Easter eggs', 'Additional visual effects', 'Sound theme variations'], + 'Retro terminal green on black', + true, + '{"lighthouse": 0, "bundleSize": "0KB", "loadTime": "0s"}'::json, + '{"views": 0, "likes": 0, "shares": 0}'::json, + NOW(), + NOW() +); +``` + +--- + +## Option 4: Seed-Script ausführen (⚠️ Achtung: Löscht alle Projekte!) + +**WARNUNG**: Das Seed-Script löscht alle bestehenden Projekte und erstellt sie neu! + +```bash +# Im Production-Container: +docker exec -it portfolio-app npm run seed + +# Oder lokal, wenn du Zugriff auf die Production-DB hast: +DATABASE_URL="postgresql://portfolio_user:portfolio_pass@your-production-db:5432/portfolio_db" npm run seed +``` + +--- + +## ✅ Verifizierung + +Nach dem Hinzufügen des Projekts: + +1. **Projekte-Seite prüfen**: Gehe zu `https://dk0.dev/projects` + - Das Projekt sollte in der Liste erscheinen + - Es sollte als "Featured" markiert sein + +2. **Projekt-Detail-Seite prüfen**: + - Klicke auf das Projekt + - Die Detail-Seite sollte alle Informationen anzeigen + +3. **404-Seite testen**: + - Gehe zu `https://dk0.dev/404` oder einer nicht existierenden Route + - Die Terminal-404-Seite sollte erscheinen + +4. **Footer-Link prüfen**: + - Scrolle zum Footer + - Der "404" Link sollte sichtbar sein + +--- + +## 🔧 Troubleshooting + +### Problem: Projekt erscheint nicht + +**Lösung:** +1. Prüfe, ob `published: true` gesetzt ist +2. Prüfe die Datenbank direkt: `SELECT * FROM project WHERE title LIKE '%404%';` +3. Prüfe die Browser-Konsole auf Fehler +4. Leere den Cache: `docker exec portfolio-app npm run build` + +### Problem: Editor funktioniert nicht + +**Lösung:** +1. Prüfe, ob du eingeloggt bist (`/manage`) +2. Prüfe die Admin-Credentials in den Environment Variables +3. Prüfe die Browser-Konsole auf Fehler + +### Problem: 404-Seite zeigt nicht die Terminal-Seite + +**Lösung:** +1. Prüfe, ob `app/not-found.tsx` existiert +2. Prüfe, ob `app/components/KernelPanic404.tsx` existiert +3. Baue die App neu: `npm run build` +4. Prüfe die Browser-Konsole auf Fehler + +--- + +## 📝 Quick Reference + +**Editor URL**: `https://dk0.dev/editor` +**Admin Dashboard**: `https://dk0.dev/manage` +**404-Seite**: `https://dk0.dev/404` oder jede nicht existierende Route +**Projekte-Seite**: `https://dk0.dev/projects` + +--- + +## 🎯 Empfohlener Workflow + +1. **Lokal testen**: Füge das Projekt lokal hinzu und teste es +2. **Auf Staging deployen**: Teste auf `dev.dk0.dev` +3. **Auf Production deployen**: Wenn alles funktioniert, auf `dk0.dev` deployen + +--- + +Happy coding! 🚀