CyberReadiness Employee Security Training Portal

Live Demo

Open the live deployed app

Overview

CyberReadiness Employee Security Training Portal is a static browser-based dashboard for internal security awareness and phishing readiness education.

The app uses a true full-viewport internal SaaS-style shell with a sticky top navigation bar, sticky left portal menu attached to the left side of the workspace, main dashboard area that fills the center, sticky right status/action panel attached to the right side, rotating 10-question readiness check, result recommendations, and local browser activity status. It is a portfolio-ready static web project, not a backend compliance system.

Real-World Use Case

This type of portal could support lightweight internal training workflows for:

• IT and security teams
• HR and employee onboarding teams
• Small businesses building security awareness habits
• Internal audit or compliance teams preparing awareness campaigns
• Managers reinforcing safe behavior around phishing, passwords, browsing, social engineering, data handling, device security, and reporting

The app helps answer practical workplace questions such as:

• Can employees identify common phishing warning signs?
• Do employees understand why password reuse and unexpected MFA prompts are risky?
• Can employees respond safely to unexpected attachments, social engineering requests, and suspicious downloads?
• What topics should a learner review before retaking the readiness check?

Features

• Full-viewport dashboard/app-shell layout
• Sticky top navigation bar
• Sticky left sidebar menu on desktop
• Sticky right-side readiness status/action panel on desktop
• Readiness metric cards
• Main workspace with overview, training modules, phishing drill, knowledge check, results, and activity/status
• Four workplace security module cards
• Phishing readiness scenario and inspection checklist
• 30-question cybersecurity awareness bank
• Randomized 10-question readiness check per attempt
• Quiz progress indicator and completion count
• Required-answer validation before submission
• Pass/fail threshold at 80%
• Clear result state with score, percentage, and readiness rating
• Recommendations based on missed topics
• Retake flow that loads a new 10-question set
• Latest score, completion date, and status stored with localStorage
• Training history preview inside the main workspace
• Recommended follow-up actions section
• Security team contact preview card
• Fully responsive layout for wide desktop, zoomed-out desktop, laptop, tablet, and mobile
• Accessible semantic sections, labels, focus states, and ARIA live messaging
• Static support pages for contact, information, and training history

Important Scope Notes

This project does not include:

• A backend database
• User authentication
• Real enterprise compliance tracking
• Real phishing simulation delivery
• Real AI scoring or recommendations

The latest result is stored only in the current browser through localStorage.

Tech Stack

• HTML
• CSS
• JavaScript

No npm, Vite, React, or backend setup is required.

Project Structure

Security-Awareness-Training-Portal/
|-- index.html
|-- contact.html
|-- information.html
|-- history.html
|-- script.js
|-- styles.css
|-- README.md
|-- docs/
|   |-- images/
|       |-- training-landing-page.png
|       |-- training-results-page.png

How To Run Locally

Open index.html in a browser.

PowerShell option:

Start-Process .\index.html

Because this is a static project, no install step or build command is needed.

Manual Test Checklist

1. Open index.html.
2. Confirm the sticky top nav, left sidebar menu, main workspace, right status/action panel, metric cards, modules, phishing checklist, quiz, activity section, and bottom CTA render correctly.
3. On a wide monitor or at 25% zoom, confirm the app uses the screen like an internal dashboard instead of a narrow centered document.
4. Select Start New 10-Question Check and confirm a 10-question attempt loads.
5. Try submitting without answering every question and confirm validation appears.
6. Answer all 10 active questions and submit.
7. Confirm the score, pass/fail state, recommendations, and answer feedback appear.
8. Click Retake With New Questions or the right-panel Start/Retake Check button and confirm a new 10-question set loads from the 30-question bank.
9. Refresh the page and confirm the latest score/status remains in the metric and activity sections.
10. Confirm Contact Security Team, Information Center, and Training History link to their static pages and each page links back to the dashboard.
11. Resize the browser to laptop, tablet, and mobile widths and confirm the sidebar collapses into a normal navigation section, the right panel becomes a normal card, and there is no horizontal scrolling.

Deployment

This app can be deployed as static files on GitHub Pages, Netlify, Vercel static hosting, or any simple web server. No environment variables are required.