diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index 59c86b8..edf55b4 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -115,6 +115,13 @@ const Footer = () => { > Privacy Policy + + 404 +
diff --git a/prisma/seed.ts b/prisma/seed.ts index 24c1e20..100932d 100644 --- a/prisma/seed.ts +++ b/prisma/seed.ts @@ -816,6 +816,135 @@ Built to demonstrate ML model deployment, API design for ML services, and scalab shares: 29, }, }, + { + 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 - 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`, + tags: ["Next.js", "React", "TypeScript", "Terminal", "404", "Interactive", "Easter Eggs"], + featured: true, + category: "Web Development", + date: "2025", + published: true, + 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", + "Audio synthesis for effects", + "Retro visual effects with CSS" + ], + lessonsLearned: [ + "Building interactive UIs", + "Web Audio API usage", + "Complex state management", + "CSS animation techniques", + "Creating engaging error pages" + ], + futureImprovements: [ + "More Easter eggs", + "Additional visual effects", + "Sound theme variations", + "Network command simulation" + ], + demoVideo: "", + screenshots: [], + colorScheme: "Retro terminal green on black", + accessibility: true, + performance: { + lighthouse: 0, + bundleSize: "0KB", + loadTime: "0s", + }, + analytics: { + views: 0, + likes: 0, + shares: 0, + }, + live: "/404", + github: "", + }, ]; for (const project of projects) {