An interactive, web-based presentation slide deck detailing the 2025 Workload Additions and 2026 Targets for the Screening Unit (Unit Penyaringan) at the National Pharmaceutical Regulatory Agency (NPRA).
You can view the live presentation here: syariefazman.com/uptslide1
- HTML5 & CSS3: Semantic structure, CSS custom properties for theming, and custom animations.
- Vanilla JavaScript: Slide navigation, interactive charts, particle system, and keyboard/swipe controls.
- Vercel: For seamless hosting and deployment.
- 🌙 Dark Mode Toggle: Switch between light and dark themes with localStorage persistence.
- 🔢 Animated Number Counters: Statistics count up smoothly when scrolled into view using IntersectionObserver.
- ✨ Slide Transition Variety: 5 animation types (scale, blur, slide-left, slide-right, rotate) with staggered child animations.
- 📊 Interactive Charts: Animated bar chart (slide 8) and SVG donut chart with color-coded table (slide 9).
- 🔬 Canvas Particle Background: Dynamic floating particles with connection lines that adapt to the current theme.
- ⚡ Performance Optimized: Lazy-loaded images with IntersectionObserver, placeholder GIFs, and explicit dimensions.
- 📱 Touch Navigation: Swipe gestures for mobile/tablet devices.
- Interactive Navigation: Navigate using on-screen buttons, keyboard arrows, or swipe.
- Fullscreen Mode: Dedicated button for distraction-free viewing.
- Responsive Typography: Scales down using media queries to fit desktop, tablets, and mobile phones.
- Custom UI System: Frosted glass effects, floating molecules, hex grid, DNA helix, and gradient typography.
- Modular Codebase: Cleanly separated
index.html,style.css, andscript.js.