Overview
The client — a renewable energy company offering solar power stations (autonomous, grid-tied, and hybrid) — needed a premium, conversion-focused marketing site that would position the brand at the high end of the residential solar market.
The brief was clear: move away from the generic “solar installer” look, communicate engineering credibility, make the product catalog easy to maintain, and give prospective customers a guided tool to estimate the right system for their home before they ever contact sales.
My Contribution
I designed and built the entire site end-to-end as a fast, static, SEO-friendly experience powered by Hugo and Tailwind CSS v4.
Architecture & Build
- Set up a Hugo static site with a custom theme (
sun-power-theme-v1), modular section partials (hero, benefits, curated solutions, featured products, FAQ, contact form, recent journal posts, case specs, system specs, steps list) and reusable shortcodes. - Implemented a Node.js data pipeline that ingests a single
products.jsonsource of truth and auto-generates Markdown content files for every SKU, so the client can update the entire catalog (titles, prices, categories, images, ratings, tags) by editing one JSON file — no Hugo or Markdown knowledge required. - Configured a clean build script (
npm run dev/build:css) that compiles Tailwind v4 and runs Hugo in one step.
Interactive Solar Calculator
- Built a 4-step guided calculator (station type → grid/phases → power in kW → monthly consumption in kWh) with custom client-side JavaScript, validation, and a recommended-configuration output that funnels users into the order modal.
- Designed the flow to feel like a product configurator rather than a form — numbered steps, animated reveals, and instant feedback.
Content Sections
- Editorial Journal with long-form articles (“Beyond the Grid”, “Inverters Explained”, “The Architectural Integration”, “The Quiet Revolution”, etc.) to support SEO and brand authority.
- Three dedicated landing pages for autonomous, grid-tied, and hybrid systems with their own specs and case sections.
- Product catalog with detail pages for solar modules, inverters, batteries, and accessories.
- Legal pages (privacy, terms, ethics) and a structured contact flow with an order modal usable from any page.
Visual Design
A distinctive glassmorphism aesthetic — frosted glass panels, soft sun-glow and sky-drift background effects, solar gradient text accents, ultra-light typography, and scroll-reveal animations — that sets the brand apart from the typical solar-installer template look. Fully responsive layouts with a careful mobile experience for the calculator and product grid.
Technical Stack
| Layer | Technology |
|---|---|
| Static site generator | Hugo (extended) |
| Styling | Tailwind CSS v4, PostCSS |
| Markup | HTML5, semantic partials & shortcodes |
| Interactivity | Vanilla JavaScript (calculator, modals, scroll-reveal) |
| Data pipeline | Node.js script ingesting products.json → Markdown |
| Build | npm run dev / build:css (Tailwind + Hugo in one step) |
| Hosting | Static deploy — effectively zero hosting cost |
The Result
A fast, fully static, easy-to-maintain marketing site that the client can run and update on their own.
- The product catalog is now JSON-driven — rebuilding 10+ SKUs takes seconds.
- The interactive calculator turns the homepage into a lead-qualification tool instead of a brochure, capturing pre-qualified inquiries with system type, capacity, and consumption already filled in.
- The design lifts the brand visually well above competing solar sites in the same segment.
- The static-site architecture delivers near-instant page loads with effectively zero hosting cost.