Welcome Screen
Second Action Figure Main Screen
Main Dashboard - Comic / Manga Based
Closeup Look of the Main Dashboard
First Quiz Page after Initialization
Second Quiz Page after Initialization
Third Quiz Page after Initialization
Topic Brief Page
Main Dashboard after Attempting Daily Quiz
Quiz Status Dashboard
Topic Preparation Confirmation Page
Achievements Panel with Unlocked and Locked Badges
Results of the Quiz
1st Question of Quiz Comic / Manga Based with Questions and Choice of Answers
3rd Question of Quiz Comic / Manga Based with Questions and Choice of Answers
2nd Question of Quiz Comic / Manga Based with Questions and Choice of Answers

MangaSec – Cyber Guardian 🛡️

📌 Inspiration

With AI & Cyber threats growing every day, cybersecurity awareness often feels boring or overly technical for beginners.
We wanted to make it fun, engaging, and visually striking - so we fused the comic/manga style with gamified AI-driven learning.
The idea: make people learn Cybersecurity concepts through a dynamic, animated manga world, with quizzes, ethical AI insights, and cyber ethics quotes to Use A.I Ethically.

Why This Project was Born?: BackStory😱

💡 What it does

MangaSec is an interactive cybersecurity learning platform that:

Welcomes users with a visually captivating manga-style landing page.
Displays rotating cybersecurity & AI ethics quotes on every reload.
Lets users start a gamified cybersecurity quiz with dynamic comic-style animations.
Uses panel swipe animations, halftone effects, and cyberpunk visuals to immerse users.
Encourages responsible and ethical technology use.

🛠 How we built it

Frontend: HTML5, CSS3, JavaScript (No frameworks — lightweight, fast-loading)
Animations: CSS keyframes, GSAP-style transitions (manual implementation), swipe-in comic panels
Visual Style: Hand-drawn manga halftone backgrounds, speech bubble elements, cyberpunk neon gradients
Dynamic Quotes: JavaScript array storing 50+ quotes that change on every reload
Gamified Flow: Interactive "Get Started" button leading into the quiz
Cybersecurity Theming: Color palette inspired by cyberpunk hacking culture + Japanese manga
Hosting: GitHub Pages

🧩 Technical Breakdown

Feature	Technology Used	Details
Landing Page UI	HTML5 + CSS3	Fully responsive, centered content, comic halftone effects
Animation Engine	Vanilla JS & CSS Animations	Swipe-in panels, fade transitions, dynamic scaling
Dynamic Quotes	JavaScript	50 pre-stored quotes rotated per page load
Quiz System	JavaScript	Interactive MCQs with progress tracking
Manga Styling	CSS filters & custom SVGs	Halftone backgrounds, panel borders, speech bubbles
Cyberpunk Color Theme	CSS Variables	Neon blues, pinks, purples with dark mode
Hosting	GitHub Pages	Continuous deployment from repo

🚧 Challenges we ran into

Creating authentic manga panel effects purely with HTML/CSS without external image libraries.
Ensuring the animations stayed smooth even with multiple layered halftone effects.
Making a fully responsive design that works equally well on desktop and mobile.
Curating meaningful AI ethics & cybersecurity quotes without sounding repetitive.
Keeping the load time under 2 seconds despite the heavy visual styling.

🏆 Accomplishments that we're proud of

Built a visually striking comic-style cybersecurity platform from scratch in pure HTML/CSS/JS.
Designed authentic hand-drawn style halftone & panel animations without heavy frameworks.
Made learning cybersecurity fun, gamified, and approachable.
Integrated a rotating ethics quote system for awareness.

📚 What we learned

How to blend artistic design with technical web development.
Optimizing CSS animations for performance & responsiveness.
Using storytelling to increase learning retention in technical fields.
Managing color psychology to convey cyberpunk + security themes.

Live Demo: Click Here 🚀

🚀 What's next for MangaSec - Cyber Guardian

AI-powered quiz generation for personalized learning paths.
Multiplayer mode — compete with friends in real-time cybersecurity challenges.
Progress tracking dashboard with badges & leaderboards.
More stories & comic episodes teaching different aspects of cybersecurity.
PWA Support for offline learning.