Skip to content

Net Zero

A renewable-energy company website with a built-in content admin. A Next.js site for a solar and energy-storage engineering company, with services, a specification-level product catalogue and a project portfolio on an interactive map. Its admin panel makes every form bilingual.

Role
Front-end developer: the website, the admin panel, the bilingual RTL / LTR system, the interactive map and the content forms.
Engagement
Freelance
Surfaces
Website (EN / AR), Content admin
Links
Private client project
Net Zero: Website (EN / AR)

The problem

Engineering buyers want evidence, not slogans. The site is built around proof: portfolio figures, product specification sheets, case-study project pages and a clear assess, engineer, deliver and operate process.

What it does

  1. 01Visitors filter the product catalogue (solar panels, inverters, storage, smart energy) and read features, applications and key-specification tables.
  2. 02Projects can be filtered by category and status, and are shown on an interactive map with capacity and delivery status.
  3. 03The team manages products, services, projects, posts, jobs and training programmes, each with draft and published states.
  4. 04Contact-form enquiries arrive in an admin inbox with topic tags and a reply box.

What I did

  • Built the full Next.js website and the content admin.
  • Built the bilingual system: the locale is chosen on the server, so Arabic pages render right-to-left with no layout flash.
  • Built the interactive Leaflet projects map and the bilingual content forms (English and Arabic tabs, automatic URL slugs).

Screens

Inside the product.

Click any screen to view it full size.

Product page with key specifications
Services
Content admin: Content counts, projects per year and enquiries by topic
Content admin: Bilingual product form with English and Arabic tabs

Stack

Frontend

  • Next.js (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • Leaflet
  • Recharts

Platform

  • Cookie-based i18n (EN / AR)
  • SEO metadata