Aspire International

Overview

• What: a complete static rebuild of the website of Aspire International Company, a multi-service provider in Saudi Arabia, replacing a site made of image panels with four real pages.
• Content: every service, vision and mission statement, strength and registration on the new site appears on the old one; copy was reworded for the web, not expanded.
• Live: deployed at aspireintlco.com on Hostinger, with the branded 404 page wired through .htaccess.

This was freelance work in October 2026. The site is plain HTML, CSS and JavaScript with no framework and no build step: colours are CSS custom properties defined once per theme, the icon sprite is inlined in each page so the folder also opens from the file system, and the four pages share a header, footer, skip link and a theme toggle. Scroll reveals, the services accordion, the sub-navigation scroll-spy and a subtle parallax are the only motion, and all of it switches off under prefers-reduced-motion.

Architecture

 index / about / services / contact      plain HTML, shared header and footer
        |
        +-- css/style.css      tokens for both themes, components
        +-- css/responsive.css mobile-first, touch and print
        +-- js/theme.js        saved choice -> OS preference -> light,
        |                      set on <html> before first paint
        +-- js/form.js         validate -> endpoint (none on a static host)
        |                          -> WhatsApp / mail app / copy
        +-- 404.html + .htaccess
 Hostinger (static)

Highlights

• Four-page static rebuild (home, about, services, contact) of the existing site of a multi-service provider in Saudi Arabia: manpower, IT, marketing, chauffeur and contracting services.
• No framework, no build step, no third-party script; under 60 KB per page before fonts, with one external request (Google Fonts) and a documented way to remove it.
• Light and dark themes: the saved choice, then the OS preference, applied before first paint. Dark is the client's native look; light is a separately designed palette, not an inversion.
• The contact form validates on the client and, since a static host cannot send mail, hands the prepared enquiry to WhatsApp, the mail app or the clipboard instead of faking a sent state.
• Keyboard-accessible dropdown and drawer, skip link, reduced-motion overrides and a no-JavaScript fallback; verified in 48 Chromium renders across six widths and both themes, Lighthouse 99–100 / 100 / 100 / 100 on a local server.

What I learned

A redesign starts as a content audit. The old site was eleven image panels and a contact block, so the first job was to list every claim on it and keep the new site to that list: no statistics, testimonials or partner logos were added because none existed, the animated counters and FAQ that the brief hinted at were left out for the same reason, and the wordmark is labelled a placeholder in the README because the company has no logo file. Saying what is missing is part of the delivery.

A static site cannot send email, so the form should not pretend to. Instead of a fake “sent” message, the form validates, keeps what the visitor typed and offers three ways to send it that need no mail client on the device: WhatsApp, a prefilled mail link or copying the text. The same fallback covers a configured endpoint that fails or takes longer than fifteen seconds, so a backend outage never loses an enquiry.

Dark mode is a design, not a filter. The client’s artwork is black with teal, so dark became the native theme and light was drawn as its own palette with a deeper teal for contrast. The theme is written to the root element before first paint, and the colour transition class is added only on a user-initiated switch so page loads stay instant.

Hosting details decide small things early. The 404 page is the one file with root-absolute paths, because a host serves it at whatever broken URL was requested; everything else is relative so the folder works from any static host. The hand-off notes list what was not verified, Safari, Firefox and the real host among them, which is as useful to the next person as what was.