A comprehensive website for Exergy LLC, the leader in Hashrate Heating system feasibility modeling, design and integration. This modern React application showcases our products, services, and expertise in Bitcoin mining heat reuse technology.
- 🌙 Dark/Light Mode Support - Automatic system detection with manual override
- 📱 Fully Responsive Design - Optimized for all device sizes
- 🎨 Modern UI with Dynamic Animations - Framer Motion powered interactions
- 🧭 Intuitive Navigation - Clean, accessible navigation structure
- 💻 Interactive Components - Engaging user interface elements
- 🔍 Search Functionality - Searchable FAQ and blog content
- 📊 Interactive Calculators - Coming soon: ROI and savings calculators
- 📝 Contact Forms - HubSpot integrated contact and booking forms
- 📅 Booking System - Integrated HubSpot meetings for consultations
- 📰 Markdown-based Blog System - Dynamic blog with category filtering
- 🏭 Product Catalog - Comprehensive hashrate heating product showcase
- 🎯 SEO Optimized - Complete meta tags, structured data, and sitemap
- 📈 Media Integration - Featured press coverage carousel
- 🔧 Service Showcase - Detailed service offerings with interactive elements
- Framework: React 18 with TypeScript
- Routing: React Router v6 with scroll restoration
- Styling: Tailwind CSS with Typography plugin
- Icons: Lucide React
- Animations: Framer Motion
- Build Tool: Vite with optimized chunking
- Type Checking: TypeScript with strict mode
- Linting: ESLint with React hooks plugin
- Content Management: Markdown with Gray Matter
- Markdown Parsing: Marked
- SEO: React Helmet Async
- Forms: HubSpot integration
- Fonts: Futura PT with system fallbacks
src/
├── blog-posts/ # Markdown blog posts
│ ├── book-ch1.md # Chapter 1: Why Hashrate Heaters Make Sense
│ └── book-ch2.md # Chapter 2: Hashrate Heating for Homes and Businesses
├── components/ # Reusable UI components
│ ├── Footer.tsx # Site footer with comprehensive links
│ ├── MediaHighlights.tsx # Auto-scrolling media coverage carousel
│ ├── Navbar.tsx # Main navigation with responsive mobile menu
│ ├── ProjectCarousel.tsx # Interactive project showcase
│ ├── ScrollToTop.tsx # Route change scroll restoration
│ └── ThemeToggle.tsx # Dark/light/system mode switcher
├── contexts/ # React context providers
│ └── ThemeContext.tsx # Theme management with system detection
├── data/ # Static data and configurations
│ ├── mediaHighlights.ts # Press coverage data
│ └── portfolioProjects.ts # Project showcase data
├── hooks/ # Custom React hooks
│ └── useTypewriter.ts # Typewriter animation effect
├── pages/ # Page components
│ ├── About.tsx # Company information and team
│ ├── Blog.tsx # Blog listing with search and filtering
│ ├── BlogPostDetail.tsx # Individual blog post viewer
│ ├── BookCall.tsx # HubSpot meetings integration
│ ├── Calculators.tsx # Coming soon calculators page
│ ├── Contact.tsx # Contact form and information
│ ├── Docs.tsx # Documentation and legal pages
│ ├── Education.tsx # Educational resources and content
│ ├── FAQ.tsx # Searchable frequently asked questions
│ ├── Home.tsx # Landing page with hero and features
│ ├── Learn.tsx # Technology learning hub
│ ├── Portfolio.tsx # Project showcase and case studies
│ ├── PrivacyPolicy.tsx # Privacy policy and data protection
│ ├── Products.tsx # Product catalog with filtering
│ └── Services.tsx # Service offerings with interactive elements
├── types/ # TypeScript type definitions
│ └── cal.d.ts # Cal.com integration types
├── utils/ # Utility functions
│ └── blogLoader.ts # Blog post loading and parsing utilities
├── App.tsx # Main app component with routing
├── index.css # Global styles and Tailwind configuration
└── main.tsx # Application entry point
- Node.js 18+
- npm or yarn
- Clone the repository
git clone https://github.com/yourusername/exergy-website.git
cd exergy-website- Install dependencies
npm install- Install terser for production builds (required for Vite 3+)
npm install terser --save-dev- Start the development server
npm run devThe application will be available at http://localhost:5173
npm run buildThe built files will be in the dist directory with serve.json automatically copied for SPA routing.
npm run serveThis serves the production build locally on port 3000 with proper SPA routing.
The blog system uses Markdown files with front matter for easy content management.
- Create a new
.mdfile insrc/blog-posts/ - Add front matter at the top:
---
id: 'unique-post-id'
title: 'Your Blog Post Title'
excerpt: 'A compelling description of your blog post content.'
author: 'Author Name'
date: 'YYYY-MM-DD'
category: ['category1', 'category2']
image: 'https://images.pexels.com/photos/...'
readTime: 'X min read'
---
Your blog content goes here in Markdown format.
## Subheading
You can use **bold text**, *italic text*, [links](https://example.com), and images.
- List item 1
- List item 2- Automatic category detection: New categories are automatically added to filter options
- Search functionality: Search through titles, excerpts, and authors
- Responsive design: Optimized for all device sizes
- SEO-friendly URLs: Clean URLs for each blog post with proper meta tags
- Full Markdown support: Including images, links, and formatting
- Dynamic loading: Vite's import.meta.glob for efficient loading
The product catalog supports multiple categories with filtering:
- Space Heating: Standalone heating solutions
- Forced Air: HVAC integrated systems
- Hydronic & Water: Water-based heating solutions
- Control Systems: Smart control hardware
- Commercial & Industrial: Large-scale solutions
Products are defined in src/pages/Products.tsx with comprehensive specifications, pricing, and feature details.
The website includes comprehensive SEO features:
- Meta Tags: Title, description, keywords for all pages
- Open Graph: Social media optimization with dynamic images
- Structured Data: Organization schema in index.html
- Sitemap: Auto-generated XML sitemap
- Canonical URLs: Proper canonical link tags
- Performance: Optimized images and code splitting
The project includes serve.json for proper SPA routing on static hosts like Netlify or Vercel.
For server deployment, use the included Express server:
node server.jsOr use the systemd service file in admin/exergy-website.service for production servers.
- React Best Practices: Functional components with hooks
- TypeScript: Strict type checking enabled
- Responsive Design: Mobile-first approach
- Accessibility: ARIA labels and semantic HTML
- Performance: Lazy loading and code splitting
Navbar- Responsive navigation with mobile menuFooter- Comprehensive site footer with linksProjectCarousel- Auto-advancing project showcaseMediaHighlights- Auto-scrolling press coverageThemeToggle- System-aware theme switchingBlog- Dynamic blog with search and filteringBlogPostDetail- Individual post viewer with SEO
- Font Loading: Optimized with system fallbacks
- Image Optimization: Lazy loading for non-critical images
- Code Splitting: Vite-powered bundle optimization
- Minification: Terser for production builds
- Caching: Proper cache headers for static assets
- Bundle Analysis: Optimized chunk splitting
- HubSpot Forms: Contact and newsletter signup
- HubSpot Meetings: Consultation booking system
- External Links: Press coverage and partner sites
- Social Media: X (Twitter) and GitHub links
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a pull request
This project is proprietary software. All rights reserved.
For inquiries about the website or hashrate heating solutions:
- Email: contact@exergyheat.com
- Website: https://exergyheat.com
- Address: 3700 N Franklin St, Denver, CO 80205
Built with ⚡ by EXERGY LLC - Heat That Pays