A comprehensive cybersecurity awareness and education platform designed to help users understand cyber threats, learn protection methods, and test their knowledge through interactive demonstrations and quizzes.
CyberAware aims to address the growing cybersecurity challenges faced by small businesses and everyday users. The platform provides educational content about common cyber threats, demonstrates attack methods through interactive videos, and offers practical protection strategies to enhance workplace and personal security.
- Threats Section: Comprehensive coverage of common cybersecurity threats including:
- Malware attacks
- Phishing attempts
- Ransomware attacks
- Weak password vulnerabilities
- Insider threats
- Prevention & Protection: Detailed guidance on defending against each threat type
- Best Practices: Workplace-specific security recommendations
- Security Infrastructure: Information about endpoint security and web security
- Video Demos: Real-world demonstrations of cyber attacks
- Denial of Service (DoS) attacks
- Phishing tactics and identification
- Malware infiltration methods
- Interactive Video Player: Custom video player with thumbnail navigation
- Category-based Learning: Organized content by threat type
- Interactive Quiz: Cybersecurity knowledge test with multiple-choice questions
- Real-time Feedback: Immediate scoring and explanations
- Workplace Focus: Questions specifically designed for business environments
- Parallax Scrolling: Smooth, engaging navigation experience
- Responsive Design: Optimized for desktop and mobile devices
- Dark Theme: Professional cybersecurity aesthetic
- Smooth Animations: Framer Motion powered transitions
- Frontend Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- Animations: Framer Motion
- Parallax Effects: @react-spring/parallax
- Video Player: Custom implementation with Video.js
- Icons: React Icons
- Routing: React Router DOM
- Node.js (version 16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd CyberAware
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173to view the application
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
CyberAware/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Foot.tsx # Footer component
│ │ ├── QuizComp.tsx # Quiz functionality
│ │ └── VideoPlayer.tsx # Custom video player
│ ├── pages/ # Main page components
│ │ ├── Demos.tsx # Interactive demonstrations
│ │ ├── Protection.tsx # Protection strategies
│ │ ├── Quiz.tsx # Quiz page
│ │ └── Threats.tsx # Threat information
│ ├── assets/ # Static assets
│ │ └── QuizQuestions.json # Quiz question bank
│ └── App.tsx # Main application component
├── public/ # Public assets
│ └── assets/ # Images, videos, and thumbnails
└── package.json # Dependencies and scripts
The application includes educational video demonstrations covering:
- DoS Attacks: Understanding denial of service threats
- Phishing: Identifying and avoiding phishing attempts
- Malware: Recognizing and preventing malware infections
The interactive quiz includes questions about:
- Workplace cybersecurity responsibilities
- Ransomware defense strategies
- Email security best practices
- Password security guidelines
- Incident response procedures
- Privacy protection methods
- Parallax Navigation: Smooth scrolling between sections
- Responsive Layout: Optimized for all screen sizes
- Interactive Elements: Hover effects and smooth transitions
- Professional Aesthetic: Dark theme with cybersecurity-focused design
This project is developed as an educational tool for cybersecurity awareness. Contributions are welcome to improve content, add new features, or enhance the user experience.
Developed by Mak
This project is created for educational purposes to promote cybersecurity awareness.
Stay CyberAware, Stay Secure! 🔒