System Requirements Document (SRD)

Project Name: tough-website

1. Introduction

The tough-website project aims to deliver a modern, professional, and minimalist website design for HR Builders, a construction company based in Canada. The website will reflect the company’s core values of reliability, strength, precision, and luxury. It will feature a clean layout, structured typography, and refined visual hierarchy to establish a premium brand identity.

This document outlines the system requirements for the project, ensuring alignment with the vision provided by Rohan Dhiman, the project owner.

2. System Overview

The tough-website will serve as the digital face of HR Builders, showcasing their expertise, services, and portfolio to potential clients. The website will emphasize a high-end aesthetic and user-friendly experience, catering to both corporate and residential audiences. Key features include:

• A responsive design optimized for desktop, mobile, and tablet devices.
• A minimalist layout with generous white space and clean grid alignment.
• Smooth animations and hover effects for a premium feel.
• Fast loading performance to ensure seamless user experience.

The website will feature sections such as Homepage, About Us, Services, Portfolio, Contact, and optional elements like testimonials, partner logos, and a refined footer.

3. Functional Requirements

Homepage

• As a User, I should see a strong hero section with high-quality construction imagery, a concise tagline like “Building Excellence with Precision,” and clear call-to-action buttons such as “View Projects” and “Get a Quote.”
• As a User, I should experience subtle animations that enhance the premium visual feel.

About Us

• As a User, I should be able to learn about the company’s expertise, mission, and values.
• As a User, I should see details about the CEO, Er. Hansraj Dhiman, and the company’s 35+ years of experience in the construction industry.

Services

• As a User, I should be able to view key offerings such as:
  • Residential construction (houses, apartments).
  • Infrastructure development (roads, highways).
  • Public works and government projects.
• As a User, I should see clean icons or visual elements representing each category.

Portfolio

• As a User, I should be able to browse completed projects with high-quality images and brief descriptions.
• As a User, I should be able to filter projects by categories such as Residential, Infrastructure, and Public Projects.

Contact

• As a User, I should be able to fill out a simple and elegant contact form for inquiries.
• As a User, I should see company details and an integrated map/location.
• As a User, I should see clear call-to-action messaging for inquiries.

Optional Features

• As a User, I should see client testimonials for credibility.
• As a User, I should see partner/client logos.
• As a User, I should see a refined footer with navigation links, contact info, and social media icons.

4. User Personas

Admin

• Responsible for managing website content, including updating project portfolios, services, and company information.

User

• Potential clients looking for construction services, browsing the website for information, and submitting inquiries.

Guest

• Casual visitors exploring the company’s offerings and portfolio without engaging directly.

5. Visuals Colors and Theme

Color Palette

Based on the luxury-inspired options provided, the following palette has been selected:

• Background: #1C1C1C (Charcoal Black)
• Surface: #FFFFFF (White)
• Text: #D4AF37 (Gold Accents)
• Accent: #FFD700 (Bright Gold for buttons and highlights)
• Muted Tones: #F5F5F5 (Light Gray for subtle elements)

This palette ensures a premium and high-end aesthetic with strong contrast and readability.

6. Signature Design Concept

Floating Blueprint Homepage

The homepage will feature a floating blueprint design that combines architectural precision with modern interactivity. Here’s how it works:

• Visuals: The hero section will resemble a dynamic architectural blueprint, with lines and grids subtly animating into place as the page loads. High-quality construction imagery will overlay the blueprint, creating a striking visual contrast.
• Tagline: “Building Excellence with Precision” will appear as if typed onto the blueprint, accompanied by call-to-action buttons (“View Projects” and “Get a Quote”) that glow with gold accents on hover.
• Micro-interactions: Hovering over sections will reveal additional blueprint details, such as measurements or annotations, giving users a sense of precision and craftsmanship.
• Transitions: Smooth scrolling will mimic the movement of a drafting table, with sections sliding into view as if being drawn.
• Color Shifts: The blueprint background will subtly shift between charcoal black and deep navy blue based on user interaction, reinforcing the premium aesthetic.

This bold concept ensures the homepage is unforgettable, aligning perfectly with HR Builders’ identity as a leader in construction.

7. Non-Functional Requirements

• The website must load within 2 seconds on standard broadband connections.
• The design must be fully responsive and optimized for mobile, tablet, and desktop devices.
• The website must adhere to WCAG 2.1 accessibility standards.
• All animations and transitions must be smooth and lightweight to avoid performance issues.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (preferred for structured data like projects and services)
• Alembic for migrations

AI Models

• GPT 5.4 for user-friendly responses in contact forms or chatbots.

AI Tools

• Langchain for intelligent routing.

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes for scalability and reliability.

9. Assumptions and Constraints

• The website will primarily target Canadian audiences, with English as the default language.
• The website will use high-quality images provided by HR Builders or sourced from premium stock photography.
• The design will prioritize performance and responsiveness over heavy animations.
• Budget constraints may limit the use of advanced AI features.

10. Glossary

• Hero Section: The topmost section of a webpage, designed to grab attention and convey the main message.
• WCAG: Web Content Accessibility Guidelines, standards for making web content accessible to people with disabilities.
• Responsive Design: A design approach that ensures a website looks and functions well on all devices.
• Call-to-Action (CTA): Buttons or links that prompt users to take specific actions, such as “Get a Quote.”
• Micro-interactions: Small design elements that enhance user experience, such as hover effects or animations.