Work

Workbook App

Astro
CSS3
JavaScript
Node.js
Python

A single-page application (SPA) built with Astro that delivers comprehensive educational workbooks covering Digital Marketing, Lean Thinking, and Data Analytics. The platform features a modern, responsive design with advanced navigation, interactive content, and seamless user experience across all devices.

Workbook App - Featured Project Image

Link to view: https://workbooks.mchlshkr.me

Please note: This app requests a PIN code to view, which I can provide if you are interested in hiring me. Contact me on LinkedIn if you would like to view this app.

Key Features

Interactive Workbook Platform – Static Site Architecture

Dynamic Table of Contents: Auto-generated hierarchical navigation with scroll spy functionality and real-time section highlightingSticky Section Headers: H2 headers remain visible during scrolling with 95px offset compensation for optimal content orientationSmooth Scroll Navigation: Offset-aware scrolling that accounts for sticky headers and provides seamless user experienceMobile-First Responsive Design: Collapsible sidebar navigation with touch gestures and overlay management for optimal mobile UXInteractive Code Blocks: Expandable code sections with intelligent show/hide functionality based on content lengthStatic Site Generation: Fully static architecture optimized for CDN deployment with zero server-side dependenciesPIN-Protected Content: Client-side authentication system with session persistence for secure workbook access

Technical Implementation

Frontend Architecture

  • Astro Framework: Modern static site generator with component-based architecture and optimized build output
  • Custom Layout System: Reusable WorkbookLayout.astro component with consistent page structure across workbooks
  • CSS Custom Properties: Comprehensive design system with responsive breakpoints and performance-optimized styling
  • Progressive Enhancement: Graceful degradation for JavaScript-disabled environments with fallback navigation

Advanced JavaScript Features

  • Scroll Spy Implementation: Real-time navigation highlighting using Intersection Observer API for optimal performance
  • Dynamic TOC Generation: Client-side parsing of H2/H3 headings with automatic navigation structure creation
  • Mobile Sidebar Management: Touch-friendly navigation with gesture support and overlay handling
  • Code Block Management: Intelligent content management with expandable sections and user interaction tracking
  • Smooth Scroll with Offset: Custom scroll behavior with 95px offset compensation for sticky header positioning

Build & Deployment Pipeline

  • Static Site Generation: Optimized for CDN deployment with asset bundling and path resolution
  • Cloudflare Pages Integration: Configured with security headers, caching policies, and performance optimization
  • Automated Build Process: Bash scripts for production builds with asset optimization and path fixing
  • Cross-Platform Compatibility: Works seamlessly across GitHub Pages, Netlify, Vercel, and any static hosting provider

Technical Skills Demonstrated

Frontend Development

  • Modern CSS: Flexbox, Grid, CSS Custom Properties, Sticky Positioning, and responsive design patterns
  • JavaScript ES6+: Modules, async/await, DOM manipulation, event handling, and performance optimization
  • Mobile UX: Touch gestures, responsive navigation, viewport optimization, and accessibility standards
  • Performance Optimization: Lazy loading, efficient event listeners, passive scrolling, and asset optimization

Framework & Tools

  • Astro: Static site generation, component architecture, build optimization, and modern web standards
  • Node.js: Package management, build scripts, development workflow, and automation
  • Bash Scripting: Automated deployment, build processes, and production optimization
  • Static Hosting: Cloudflare Pages, GitHub Pages, Netlify, and Vercel deployment strategies

Advanced Concepts

  • Static Site Architecture: Zero server-side dependencies with client-side functionality
  • Scroll-based Interactions: Intersection Observer patterns, scroll spy implementation, and performance optimization
  • Mobile-First Design: Touch-friendly interfaces, responsive layouts, and progressive enhancement
  • CDN Optimization: Asset bundling, caching strategies, and global content delivery

Code Quality & Architecture

  • Component-based Design: Reusable layouts, modular CSS, and maintainable code structure
  • Event Management: Proper cleanup, delegation, performance optimization, and memory management
  • Error Handling: Graceful fallbacks, user feedback systems, and robust error recovery
  • Cross-browser Compatibility: Modern web standards with progressive enhancement and accessibility compliance

Key Achievements

  • Zero Server Dependencies: Fully static architecture with client-side functionality
  • Multi-Platform Deployment: Seamless deployment across major static hosting providers
  • Performance Optimized: Fast loading times with efficient asset delivery and caching
  • Mobile-First UX: Touch-optimized navigation and responsive design patterns
  • Security Headers: Production-ready security configuration for enterprise deployment

This project demonstrates expertise in modern static site development, combining performance optimization with rich client-side functionality. The solution addresses real-world challenges like mobile navigation, content organization, and user experience optimization while maintaining excellent performance, security, and accessibility standards across all deployment platforms.