Enfuse.io Marketing Website - Development Guide

Overview

This is a static marketing website for Enfuse.io, built with HTML, CSS, JavaScript, and Jekyll for blog functionality. The site features a Single Page Application (SPA) navigation system that provides a seamless user experience.

Technology Stack

  • Frontend: HTML5, CSS3, JavaScript (ES6+)
  • CSS Framework: Bootstrap 5.3.0
  • Icons: Font Awesome 6.4.0
  • Blog: Jekyll (GitHub Pages compatible)
  • Analytics: Google Analytics 4
  • Hosting: GitHub Pages
  • Domain: enfuse.io

Project Structure

/
├── index.html              # Homepage
├── about.html              # About page
├── services.html           # Services page
├── blog.html               # Blog listing page
├── contact.html            # Contact page
├── leadership.html         # Leadership team page
├── partnerships.html       # Partnerships page
├── terms.html              # Terms of service
├── cloudberry.html         # Cloudberry product page
├── aventic.html            # Aventic product page
├── 404.html                # Custom 404 page
├── styles.css              # Main stylesheet
├── script.js               # Main JavaScript
├── shell-navigation.js     # SPA navigation system
├── avatar-widget.js        # Chat widget and scroll-to-top
├── _config.yml             # Jekyll configuration
├── _layouts/               # Jekyll layouts
│   ├── blog.html           # Blog layout
│   └── post.html           # Post layout
├── _posts/                 # Jekyll blog posts (markdown)
├── blog/                   # Static blog post HTML files
├── images/                 # All images and assets
└── CNAME                   # Custom domain configuration

Key Features

Single Page Application (SPA) Navigation

  • File: shell-navigation.js
  • Purpose: Provides seamless navigation without full page reloads
  • Features:
    • Persistent header, footer, and avatar widget
    • Only main content area reloads
    • Browser history management
    • Active navigation highlighting
    • Blog post integration

Avatar Chat Widget

  • File: avatar-widget.js
  • Purpose: Persistent chat widget with scroll-to-top functionality
  • Features:
    • Minimize/maximize functionality
    • Scroll-to-top button with up arrow
    • Persistent across page navigation
    • Responsive design

Blog System

  • Dual System: Jekyll markdown posts + static HTML posts
  • Jekyll Posts: Located in _posts/ directory
  • Static Posts: Located in blog/ directory
  • Integration: Both types work with SPA navigation
  • SPA Navigation: Blog post links use absolute paths (/blog/post.html) for avatar persistence

Development Workflow

Local Development

  1. Clone the repository
  2. Serve locally: Use any HTTP server (Python, Node.js, etc.)
  3. Test navigation: Verify SPA functionality works
  4. Check responsive design: Test on mobile and desktop

Adding New Pages

  1. Create HTML file in root directory
  2. Include required scripts: script.js, shell-navigation.js, avatar-widget.js
  3. Add Google Analytics: Include GA tracking code
  4. Update navigation: Add to header and footer menus
  5. Test SPA integration: Verify navigation works

Adding Blog Posts

  1. Jekyll Method: Create markdown file in _posts/
  2. Static Method: Create HTML file in blog/
  3. Update blog.html: Add post to listing
  4. Update shell-navigation.js: Add to blog post mappings
  5. Test navigation: Verify post loads correctly

CSS Guidelines

  • Use CSS variables for consistent colors
  • Follow Bootstrap conventions for layout
  • Mobile-first responsive design
  • Avoid global class overrides that affect multiple elements
  • Use specific selectors for targeted styling

Deployment

GitHub Pages

  • Automatic deployment from main branch
  • Custom domain: enfuse.io (configured in CNAME)
  • SSL: Automatically enabled
  • Cache: May take a few minutes for changes to propagate

Pre-deployment Checklist

  1. ✅ Test all navigation links
  2. ✅ Verify Google Analytics tracking
  3. ✅ Check responsive design
  4. ✅ Test blog post functionality
  5. ✅ Verify SPA navigation works
  6. ✅ Check all images load correctly

Common Issues and Solutions

  • Check: shell-navigation.js is loaded
  • Verify: All links use absolute paths
  • Test: SPA navigation mappings are correct

Blog Posts Not Loading

  • Check: Blog post files exist in correct directories
  • Verify: shell-navigation.js has correct mappings
  • Test: Links use blog/ prefix

Styling Issues

  • Check: CSS specificity conflicts
  • Verify: Bootstrap classes are not overridden
  • Test: Responsive design on different screen sizes

Google Analytics Not Tracking

  • Check: GA code is included on all pages
  • Verify: Tracking ID is correct (G-PBF8VKTTEF)
  • Test: Events are firing in browser dev tools

Performance Optimization

Images

  • Use WebP format when possible
  • Optimize file sizes for web
  • Include proper alt text for accessibility
  • Use lazy loading for below-the-fold images

JavaScript

  • Minimize external dependencies
  • Use efficient selectors
  • Avoid memory leaks in event listeners
  • Test performance on slower devices

CSS

  • Use efficient selectors
  • Minimize CSS specificity conflicts
  • Use CSS variables for maintainability
  • Optimize for critical rendering path

Security Considerations

Content Security Policy

  • External resources: Only load from trusted CDNs
  • Inline scripts: Minimize use of inline JavaScript
  • HTTPS: All external resources use HTTPS

Data Privacy

  • Google Analytics: Compliant with privacy regulations
  • Contact forms: No sensitive data collection
  • Cookies: Minimal cookie usage

Maintenance

Regular Tasks

  1. Update dependencies: Bootstrap, Font Awesome, etc.
  2. Check for broken links: Use link checking tools
  3. Monitor performance: Use Google PageSpeed Insights
  4. Review analytics: Check GA data for insights
  5. Test on different browsers: Ensure compatibility

Backup Strategy

  • Git repository: Primary backup
  • GitHub: Remote backup
  • Local copies: Keep local development copies

Support and Troubleshooting

Getting Help

  1. Check this documentation first
  2. Review git history for recent changes
  3. Test locally before deploying
  4. Use browser dev tools for debugging

Emergency Procedures

  1. Rollback: Use git revert for problematic commits
  2. Force push: Use git push --force to revert to working state
  3. Check logs: Review GitHub Pages build logs
  4. Test locally: Verify fixes work before deploying

Contributing

Code Standards

  • Follow existing patterns in the codebase
  • Use consistent naming conventions
  • Add comments for complex functionality
  • Test thoroughly before submitting changes

Pull Request Process

  1. Create feature branch from main
  2. Make changes following guidelines
  3. Test locally and on GitHub Pages
  4. Submit pull request with description
  5. Review and merge after approval

Contact

For questions or issues with this website, contact the development team or refer to the main Enfuse.io contact information.