A modern, responsive documentation website for VimMaster - the interactive Vim learning game. Built with cutting-edge 2025 design trends including glassmorphism, floating animations, and mobile-first responsive design.
- Glassmorphism UI with advanced backdrop filters
- Floating animations with staggered timing
- Enhanced shadows and gradient overlays
- Fully responsive design optimized for all devices (320px+)
- 3D transforms and morphing shapes
- Holographic text effects and neon glows
- Enhanced Command Palette (Ctrl+K) with fuzzy search, keyboard navigation, categories, and recent commands
- Mobile-optimized navigation with glassmorphic menu
- Dynamic social proof with animated counters
- Toast notifications system
- Responsive tables and code blocks
- Touch-friendly interface with proper tap targets
- Vanilla JavaScript - No frameworks, lightning fast
- Mobile-first responsive design - Works on all screen sizes
- SEO optimized with proper meta tags
- Accessibility compliant (WCAG 2.1)
- Font preloading and performance optimizations
- Skill bars with shimmer animations
- Hover transformations with scale and glow effects
- Smooth scrolling and intersection observers
- Theme switching (light/dark mode)
- Mobile gesture support for enhanced UX
# Clone the repository
git clone https://github.com/renzorlive/vimmaster.git
cd vimmaster/docs
# Serve locally
python -m http.server 8000
# or
npx serve .
# Visit http://localhost:8000├── index.html # Homepage with hero and features
├── levels.html # Levels/guides page
├── commands.html # Commands/reference page
├── api.html # API documentation
├── features.html # Features showcase
├── mobile-test.html # Mobile responsiveness test page
├── css/
│ └── main.css # Modern CSS with responsive design system
├── js/
│ ├── main.js # Interactive components
│ └── advanced.js # Advanced features
├── img/ # SVG icons and assets
├── components/ # Reusable HTML components
├── api/
│ └── stats.js # Dynamic stats API endpoint
├── favicon.svg # Custom VIM favicon
└── manifest.json # PWA manifest
--primary: #22c55e; /* VimMaster green */
--secondary: #3b82f6; /* Blue accent */
--bg: #ffffff; /* Light background */
--text: #111827; /* Dark text */- Cards: Glassmorphism with floating animations, fully responsive
- Buttons: Touch-friendly with 44px+ tap targets
- Stats: Animated counters that adapt to mobile layout
- Code blocks: Horizontal scroll on mobile, syntax highlighting
- Navigation: Collapsible mobile menu with glassmorphic design
- Command Palette: Fully responsive with touch optimization
- 320px+: Very small phones (iPhone SE)
- 480px+: Small phones
- 640px+: Large phones
- 768px+: Tablets
- 1024px+: Desktop
- Touch targets: All interactive elements meet 44px minimum
- Responsive grids: Single column on mobile, multi-column on larger screens
- Mobile menu: Glassmorphic slide-out navigation
- Optimized typography: Scales appropriately across all screen sizes
- Horizontal scroll: Tables and code blocks scroll horizontally on mobile
- Reduced animations: Respects
prefers-reduced-motion
<!-- Change logo and title in index.html -->
<div class="logo-icon">VIM</div>
<h1 class="hero-title">VimMaster Documentation</h1>/* Update CSS variables in main.css */
:root {
--primary: #22c55e;
--secondary: #3b82f6;
}- Open
mobile-test.htmlto test all components - Real-time breakpoint display
- Test all interactive elements
// Advanced fuzzy search with scoring
fuzzySearch(query) {
return this.commands
.map(cmd => ({ ...cmd, score: this.calculateScore(cmd, query) }))
.filter(cmd => cmd.score > 0)
.sort((a, b) => b.score - a.score);
}// Arrow key navigation with visual feedback
handleKeyNavigation(e) {
if (e.key === 'ArrowDown') {
this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1);
this.updateSelection(items);
}
}// Persistent recent commands storage
addToRecent(commandName) {
this.recentCommands.unshift(commandName);
this.recentCommands = this.recentCommands.slice(0, 5);
localStorage.setItem('recent-commands', JSON.stringify(this.recentCommands));
}// Swipe gestures for mobile
handleGesture(startX, startY, endX, endY) {
const deltaX = endX - startX;
if (deltaX > 100) {
new CommandPalette().open(); // Swipe right
}
}// Dynamic particle animations
animate() {
this.particles.forEach(particle => {
particle.x += particle.vx;
particle.y += particle.vy;
this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
});
}background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}- Mobile-first approach
- Flexible grid system
- Touch-friendly interactions
- Optimized animations for mobile
- Open Graph for social sharing
- Twitter Cards support
- JSON-LD structured data
- Proper meta descriptions
- Font preloading
- Optimized images
- Minimal JavaScript
- CSS custom properties
Perfect for:
- Documentation sites
- Product landing pages
- Developer portfolios
- SaaS marketing sites
- API documentation
- Component libraries
- Chrome 90+ ✅
- Firefox 88+ ✅
- Safari 14+ ✅
- Edge 90+ ✅
- Mobile browsers ✅
- Touch devices ✅
MIT License - feel free to use for personal and commercial projects.
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
Built with modern web technologies:
- CSS Grid & Flexbox for responsive layouts
- CSS Custom Properties for theming
- Intersection Observer for animations
- Backdrop Filter for glassmorphism
- Mobile-first responsive design
- Vanilla JavaScript for performance
Visit the live documentation: VimMaster Docs
Made with ❤️ for the VimMaster and OpenSource community
Modern, responsive documentation for the interactive Vim learning experience