Back to Feed
ProjectsWeb development

Construction site

Check out the code for this project here

Building a Next.js Portfolio for a Local Construction Company

Local businesses can really benefit from websites giving them a more professional online presence. This can allow them to get more local leads and help them to give their customers and more streamlined and modern experience. However, local business often lack to the time or resources to build proper online presence. This is why I helped a local construction company Mote Construction to build out a website to give them a professional online presence

I built this project before the prevelance of large language models for coding and without them. These days it is very easy to spin up a coding project of this nature as front end web development is quite simple as programming goes meaning it is easy for large language models to build them. By building this without AI I taught myself the fundamentals of how web development works allowing me to debug and refine web development code generated by AI in the future.

The Tech Stack: Next.js and Tailwind CSS

The factors I considered when choosing the tech stack were fast performance. This is needed as local businesses cannot afford to give their customers a sluggish experience. I also needed good search engine optimisation as ranking high on the gooogle search results is very important for local businesses.

To achieve this, I chose a Nextjs and tailwind stack:

  • Next.js: While traditional react apps render everything on the client side nextjs pre redners HTML on teh server. This means while the javascript loads for the web page the user can instantly see the HTML. This leads to a less sluggish and more seemless experience which is important for business websites. This also means that google can index the site quickly meaning it gives the business a large SEO advantage.
  • Tailwind CSS: I decided to use Tailwind for the styling of the project. This is because it is very popular in industry. Meaning I would learn very transferable skills. This is because it is very easy to write as you don't have to constantly switch between CSS style sheets and your JavaScript files.

My experience developing this project

As this was built without AI it took a lot longer than it would do if I were to do it again today(2026). That being said I am definitely glad that I had this experience with developing a website without the help of AI. As said previously this really gave me the fundamental skills and now allows me to debug, understand and refine any code generated by AI for web development. I think that this should be a goal of all developers now. Even though we can generate code with AI I think to get the most out of it you should have a good understanding of programming as this way you can really guide the AI with what you want it to do and also undergo more complex projects.

What would I do next?

If I was to do this again now there would be a number of new things I would integrate. Not only that I would integrate but I would also be able to integrate much more quickly due to the help of AI. I would add the following:

  • Migrating to the App Router: This project was build with the Next.js page router. This is quite outdated now and I would build it with the app router as it is much more intuitive to develop with and is the modern standard so would allow other developers to understand my code more easily.
  • AI Lead Generation: I would add an AI chatbot to the site utilising major LLM companies APIs. This would allow the site to generate leads and quickly answer any of customers concerns without them having to directly reach out and contact the business thereby saving the business a lot of time.

Overall this project was great fun and taught be a lot. This also allowed me to help a local business which I feel proud of.

What does the website look like?

I am not currently hosting this website due to the unfortunate fact that the company is no longer in business. However, here are some screenshots from when it was active:

2023-09-04-construction-site1

2023-09-04-construction-site2

2023-09-04-construction-site3

2023-09-04-construction-site4