HTML Slides - School of Engineering

A modern presentation platform for engineering education built with Vue.js and Vite. This interactive slides platform serves as a digital learning environment where students can access engaging educational content with smooth animations, custom components, and responsive design.

Key Features

• Interactive Slides: Dynamic presentation system with smooth transitions and animations
• Custom Vue Components: Reusable components including dialogs, popovers, and interactive elements
• Modern Build System: Vite-powered development with fast hot module replacement
• Utility-First Styling: UnoCSS for efficient, atomic CSS approach
• TypeScript Integration: Full type safety throughout the application
• Multi-Platform Deployment: Configured for both Netlify and Vercel deployment
• GitHub Workflows: Automated CI/CD pipeline for seamless updates
• Responsive Design: Mobile-first approach ensuring accessibility across all devices

My Role on the Project

• Frontend Development: Built the complete presentation platform using Vue.js and Vite with contributors from the school of engineering
• Component Architecture: Designed and implemented custom Vue components for enhanced interactivity
• Build System Configuration: Set up Vite with TypeScript and UnoCSS for optimal development experience
• Deployment Strategy: Configured multi-platform deployment with Netlify and Vercel
• CI/CD Pipeline: Implemented GitHub Actions workflow for automated deployment
• UI/UX Design: Created intuitive presentation interface with smooth animations
• Performance Optimization: Ensured fast loading and smooth transitions throughout the platform

Technical Architecture

The platform is built with modern Vue.js ecosystem:

• Framework: Slidev for slides and Vue.js 3 with Composition API for reactive, component-based development for the presentation platform
• Build Tool: Vite for lightning-fast development and optimized production builds
• Styling: UnoCSS for utility-first CSS with atomic design principles
• Type Safety: TypeScript integration for enhanced developer experience and code reliability
• Components: Custom Vue components including dialogs, popovers, and interactive elements
• Deployment: Multi-platform support with Netlify and Vercel configurations
• CI/CD: GitHub Actions workflow for automated deployment and updates

Custom Components

The platform features several custom Vue components:

• Dialog Components: Modal dialogs for enhanced user interaction
• PopOver Components: Contextual information overlays with smooth animations
• Counter Component: Interactive counting elements for educational demonstrations
• Tips Component: Educational tip displays with engaging animations
• Custom Elements: Specialized components for unique presentation needs

Educational Impact

This platform serves as an innovative approach to engineering education:

• Interactive Learning: Engaging presentation format with smooth transitions
• Visual Learning: Rich visual components and animations for better comprehension
• Accessible Content: Responsive design ensuring learning can happen on any device
• Modern Technology: Demonstrates current web development practices to students
• Open Source: Community-driven development allowing collaborative improvements

Motivation

The motivation behind this project stems from the need to modernize educational presentations and make engineering concepts more engaging. Traditional slide presentations often lack interactivity and fail to capture student attention. This platform addresses those challenges by providing:

• Interactive, animated presentations that engage students
• Modern web technologies that demonstrate current development practices
• Responsive design that works across all devices
• Open-source approach for community collaboration and improvement
• Fast, efficient development workflow with Slidev, Vite and Vue.js

The platform is publicly available at karatu.oluwasetemi.dev with the source code hosted on GitHub.