Document 04

Technical Specification

Technology stack, architecture decisions, performance targets, and deployment strategy for the website build.

Project Infinity Steel Fixers
Document Type Technical
Last Updated February 2026

1. Technology Overview

The Infinity Steel Fixers website will be built using a modern JAMstack architecture, prioritising speed, security, and ease of maintenance. This approach is ideal for corporate/portfolio websites that don't require complex backend functionality.

Why This Stack?

Next.js on Vercel provides exceptional performance, SEO capabilities, and developer experience. It's the same technology powering major corporate sites and is well-suited for construction company websites that need to load quickly on mobile devices at job sites.

2. Technology Stack

Core Technologies

Layer Technology Purpose
Framework Next.js 14+ React framework with server-side rendering and static generation
UI Library React 18+ Component-based UI development
Language TypeScript Type safety and improved developer experience
Styling Tailwind CSS Utility-first CSS framework for rapid development
Animation Framer Motion Declarative animations and transitions (Option C)
Hosting Vercel Edge deployment with global CDN
Forms Resend or Formspree Email delivery for contact form submissions

Development Tools

3. Site Architecture

Page Structure (Multi-Page Options)

/                           # Homepage
├── /about                  # About page
├── /services               # Services overview
│   └── /services/[slug]    # Individual service pages (future)
├── /projects               # Project gallery
│   └── /projects/[slug]    # Project detail pages (Option C)
└── /contact                # Contact page

Component Architecture

src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx          # Root layout (header, footer)
│   ├── page.tsx            # Homepage
│   ├── about/
│   ├── services/
│   ├── projects/
│   └── contact/
├── components/
│   ├── ui/                 # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── ...
│   ├── sections/           # Page sections
│   │   ├── Hero.tsx
│   │   ├── ServicesGrid.tsx
│   │   ├── ProjectGallery.tsx
│   │   └── ...
│   └── layout/             # Layout components
│       ├── Header.tsx
│       ├── Footer.tsx
│       └── Navigation.tsx
├── lib/                    # Utilities and helpers
├── data/                   # Static content data
└── styles/                 # Global styles

Content Management

For this project scope, content will be managed through:

4. Performance Targets

Core Web Vitals Targets

Metric Target Measurement
LCP (Largest Contentful Paint) < 2.5s Time to render largest visible element
FID (First Input Delay) < 100ms Time to respond to first interaction
CLS (Cumulative Layout Shift) < 0.1 Visual stability during load
TTFB (Time to First Byte) < 200ms Server response time

Lighthouse Score Targets

90+
Performance
100
Accessibility
100
Best Practices
100
SEO

Performance Optimisations

5. SEO Implementation

Technical SEO

LocalBusiness Schema (Example)

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Infinity Steel Fixers",
  "description": "Steel fixing contractor...",
  "url": "https://infinitysteelfixers.com.au",
  "telephone": "0424855819",
  "email": "admin@infinitysteelfixers.com.au",
  "address": {
    "@type": "PostalAddress",
    "addressCountry": "AU"
  },
  "areaServed": "Australia",
  "serviceType": ["Steel Fixing", "Reo Installation"]
}

On-Page SEO

6. Form & Email Integration

Contact Form Fields

Field Type Required Notes
Name Text Yes Full name
Company Text No Builder/company name
Email Email Yes Validated format
Phone Tel Yes Australian format preferred
Project Type Select No Residential, Commercial, Infrastructure, Other
Message Textarea Yes Project details

Form Handling

7. Deployment & Hosting

Vercel Platform

The website will be hosted on Vercel, providing:

Deployment Process

Step 1

Development

Code pushed to GitHub repository

Step 2

Preview

Automatic preview deployment for review

Step 3

Approval

Client reviews on staging URL

Step 4

Production

Merge to main branch triggers production deploy

Domain Configuration

8. Security Considerations

Security Features

Ongoing Maintenance

Post-launch, the following maintenance is recommended: