Add PWA, SEO, and performance enhancements to create a super website

[Copilot]

Transform the site into a modern web application with Progressive Web App capabilities, comprehensive SEO optimization, and enhanced UX features.

Progressive Web App

• manifest.json: App metadata with icons, shortcuts, and screenshots for installability
• sw.js: Service worker with offline caching strategy for 14 core resources
• Install prompt: Native installation button with beforeinstallprompt handling

SEO & Discoverability

• Meta tags: Open Graph and Twitter Card metadata for social sharing
• Structured data: JSON-LD schema for organization information
• Crawlers: robots.txt and sitemap.xml covering 6 primary pages
• Security: RFC 9116 compliant security.txt in .well-known

Performance

• Native lazy loading for images with loading="lazy" attribute
• Preconnect hints for external resources (fonts, CDNs)
• Hardware acceleration via transform translateZ(0)
• Font display swap to prevent FOIT
• Core Web Vitals tracking (LCP, page load)

UX Enhancements

// Scroll progress indicator
const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100;
progressBar.style.width = `${scrollPercentage}%`;

// Intersection Observer for fade-in animations
const fadeInObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-fade-in');
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

• Scroll progress bar with gradient styling
• Back-to-top button with smooth scrolling (appears at 300px)
• Intersection Observer-driven fade-in animations with staggered timing
• Enhanced card hover with translateY(-8px) and box-shadow
• Custom scrollbar with brand gradient colors
• Skip-to-content link for accessibility

Accessibility

• :focus-visible for keyboard-only focus indicators
• prefers-reduced-motion media query support
• Screen reader utilities (sr-only class)
• Keyboard shortcuts (Escape for modals, / for search)
• Minimum 44px touch targets on mobile

Technical Details

• Added: 7 new files (1,138 lines)
• Modified: index.html with 40+ new meta tags and semantic enhancements
• Bundle: No build step required, vanilla JS/CSS

Screenshots

Desktop - Enhanced UI with scroll features

Mobile - PWA installable

Browser Support

• Service Workers: Chrome 40+, Firefox 44+, Safari 11.1+
• Lazy loading: Chrome 77+, Firefox 75+ (with polyfill fallback)
• Intersection Observer: All modern browsers (polyfill included for legacy)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• 35eb48e5-0472-4568-9f3d-a452a1c8ab2c-eu-west-1.apps.astra.datastax.com
  • Triggering command: /usr/local/bin/node node server.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

make this a super website.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[NekshaDeSilva]

approved @copilot