feat: Add Kernel Panic 404 page as project and link in footer
Some checks failed
Production Deployment (Zero Downtime) / deploy-production (push) Has been cancelled

- Add 404 link in footer
- Add Kernel Panic 404 as featured project in seed data
- Project includes interactive terminal, Easter eggs, and retro effects
This commit is contained in:
2026-01-09 19:28:45 +01:00
parent 947f72ecca
commit fadeb9b6b9
2 changed files with 136 additions and 0 deletions

View File

@@ -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) {