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
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:
@@ -115,6 +115,13 @@ const Footer = () => {
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link
|
||||
href="/404"
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200 font-mono text-xs"
|
||||
title="Kernel Panic 404"
|
||||
>
|
||||
404
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-stone-400 flex items-center space-x-1">
|
||||
|
||||
129
prisma/seed.ts
129
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) {
|
||||
|
||||
Reference in New Issue
Block a user