Interactive DedSec 404 Page Experience

An immersive, narrative-driven 404 error page inspired by the hacker aesthetic of DedSec from the Watch Dogs series.

Features

This project is my interactive experience designed to be a part of my portfolio pieces.

• Immersive Terminal UI: The entire experience is framed within a retro-style terminal window, complete with a functional header and scrollable content.

• Animated SVG Logo: The static DedSec ASCII art has been replaced with a custom SVG logo that animates on load, appearing as if it's being drawn in real-time.

• Dynamic Text Animations: Key headings use a JavaScript-powered "scramble" effect, cycling through various thematic phrases.

• Interactive Desktop Layer: Closing the terminal (via the 'X' or 'Return' button) reveals a hidden desktop layer, continuing the narrative.

• Multiple Interactive Modals:

  • truth.txt: Opens a modal containing my contact information.

  • join_us folder: Opens a modal showcasing my professional skills, complete with Font Awesome icons.

  • ctOS_backdoor.exe: Triggers a fake "security alert" modal with an animated progress bar.

• Themed Design: The entire page uses a consistent, thematic color palette managed by CSS Custom Properties for easy customization.

• Subtle Details: Includes a blinking cursor, a CRT vignette effect, and a faint watermark on the desktop to enhance the atmosphere.

Technologies Used

This project is built with vanilla technologies to demonstrate core proficiency, with Tailwind CSS for rapid and responsive styling.

• HTML5: Semantic and well-structured markup.

• CSS3:

  • Custom Properties: For easy theming and maintainability.

  • Flexbox: For robust and responsive layouts.

  • Keyframe Animations: For all glitch, drawing, and transition effects.

  • Pseudo-elements: Used extensively for the text glitch effect.

• JavaScript (ES6+):

  • DOM Manipulation: To create, manage, and animate all interactive elements.

  • ES6 Classes: The TextScramble animation is encapsulated in a reusable class.

  • Asynchronous Code: setTimeout and setInterval are used to manage animation timing and the dynamic system log.

• Tailwind CSS: For utility-first styling and layout.

• Font Awesome: For clean, scalable icons in the skills modal.

License

Copyright (c) 2025 Tavia Gilbert. All Rights Reserved.