FHCL Fraser Hyde Contracting Limited

FHCL is a civil contracting company that specialises in demolition, earthworks, retaining walls and piling, forestry roading, and vegetation management, operating out of the Wellington region of New Zealand."

---

Overview

This repository contains the source code for the FHCL website. This static site is built using React.js and is designed to be responsive, ensuring a seamless user experience across various devices. The site showcases the company's past projects, services, process they follow and provides contact information for potential clients.

Starting the project off involved drafting up basic wireframes and mockups to visualise the layout and functionality of the website. This process helped in identifying the key sections and features that needed to be implemented. From here I began developing the website using React.js. The site is structured into components, each representing a different section of the website, such as the header, footer, and project listings.

Finally the website was deployed using Github Pages and made accessible to the public via their domain fhcl.nz. The deployment process involved configuring the DNS records, optimising the sites assets for performance, and improving SEO via meta tags and structured data.

View Project

Built With

• Build Tool: Vite
• Framework: React.js
• Styling: Tailwind CSS

File Tree

• docs - Contains the build files for the website. Github Pages uses this folder to serve the website.
• public - Contains static assets such as the websites favicon.
• src/assets - Contains images and other assets used in the website.
• src/components - Contains the React components used in the website.
• src/sections - Contains the sections of the website, such as the landing, project, services, etc.

Running Locally

1. After cloning the repo, install all npm dependencies

npm install

2. Run the app in development mode

npm run dev

Open http://localhost:5173/ to view it in your browser.

Building for Production

To build the app for production, run the following command:

npm run build

This will create a docs folder containing the production-ready files. You can then deploy this folder to a web server or hosting service.

Note

Ensure the file 'CNAME' is present in the docs folder. This file contains the custom domain name for the website, which is fhcl.nz. If you are deploying to a different domain, you will need to update this file accordingly.