Live Demo GitHub

HTML Slides - School of Engineering

Overview

A modern HTML education platform built with Slidev and Vue.js for engineering students. Delivers interactive presentations with custom components, smooth animations, and responsive design, transforming traditional HTML learning into an engaging visual experience.

Key Features

  • Interactive Presentations: Slidev-powered slides with smooth transitions and animations
  • Custom Vue Components: Reusable dialogs, popovers, counters, and educational tip displays
  • Modern Development: Vite build system with TypeScript for type-safe development
  • Atomic Styling: UnoCSS for efficient, utility-first CSS approach
  • Multi-Platform: Configured for Netlify and Vercel deployment with CI/CD

My Role & Responsibilities

  • Designed and built complete presentation platform using Slidev and Vue.js 3
  • Created custom Vue components (dialogs, popovers, counters) for enhanced interactivity
  • Configured Vite development environment with TypeScript and UnoCSS integration
  • Implemented responsive design ensuring accessibility across all devices
  • Set up GitHub Actions for automated deployment pipeline
  • Collaborated with School of Engineering contributors on content and features

Technical Highlights

Built with modern Vue.js ecosystem leveraging Slidev for presentation capabilities and Composition API for reactive components. Vite provides lightning-fast development with hot module replacement, while UnoCSS delivers atomic CSS with minimal bundle size. Custom Vue components enhance the learning experience with interactive elements like modal dialogs, contextual popovers, and animated counters. The multi-platform deployment strategy ensures reliable hosting with both Netlify and Vercel.

Impact & Results

  • Educational Innovation: Modern approach to teaching HTML concepts
  • Community Collaboration: Open-source project with School of Engineering contributors
  • Performance: Fast loading with optimized Vite builds and atomic CSS
  • Accessibility: Responsive design working seamlessly across all devices
  • Developer Experience: Type-safe development with TypeScript integration