Business sites

What's inside

The full lifecycle of a digital product — from the storefront to file delivery after payment.

• A digital goods catalog and product pages; the homepage pulls the latest publications from the database.
• User account: registration, login, password recovery.
• Online payment with a signed transaction (HMAC) and automatic file delivery after purchase.
• An articles section (blog) and FAQ, terms of offer and a data processing policy.

Architecture

Server-side rendering in PHP with a MySQL database (PDO), no CMS or frameworks.

• Products and articles are stored in the database and publishing is controlled by a flag — only published items reach the site.
• The code is split into reusable includes (header, footer, popups) and navigation helpers.
• Sessions for authentication, with protection on service pages and the payment flow.

Custom admin panel

An entirely hand-written panel for managing content and sales: the product catalog, articles (publish and unpublish) and order handling.

Performance (PageSpeed 100 / 99)

The homepage went from 48 to 100 on mobile and 99 on desktop.

• Critical CSS inlined in the head and fonts moved to self-hosting (woff2 subsets, Cyrillic + Latin, font-display: optional) — every render-blocking request for stylesheets and Google Fonts is gone.
• The video was switched to a “facade”: instead of a third-party player loading every time, there is a lightweight placeholder and the real player is loaded only on click. That removed the main third-party JS from startup and cut blocking time sharply.
• The hero image is WebP with prioritised loading (preload + fetchpriority); the rest are lazy-loaded with explicit dimensions (zero layout shift).
• LCP was brought down from 8.2 s into the fast range, and the script is deferred.

Accessibility and SEO

• A semantic main landmark, proper contrast and accessible navigation — Accessibility 100.
• Keyword-first title, meta description, Open Graph and meaningful markup.
• The portfolio demo page is closed to indexing (noindex), like all the other demos.

What makes it interesting

• The largest of the business projects: a full product platform with user accounts, payments and an admin panel — on plain PHP + MySQL, without a CMS.
• 100 PageSpeed on mobile despite the rich feature set — performance without giving up capability.
• The full cycle by one person: architecture → backend and database → frontend → payments → admin panel → SEO → optimisation → deployment.

What's inside

A multi-section structure focused on manufacturing capabilities.

• Hero and a company metrics block: years of experience, machine park, completed orders.
• An equipment slider and a portfolio of completed projects (a slider on desktop, a grid on mobile).
• Services and types of milling operations, with an explanatory video.
• A modal “Get a quote” form and scroll-triggered section reveal animations.

A quote form built for manufacturing

The main working element is accepting a request with technical drawings, not just “name + phone”.

• Upload of up to 10 files in manufacturing formats (DXF, DWG, PDF, ZIP, images, documents), sent by email with attachments.
• Three layers of spam protection: a server-side arithmetic captcha, a honeypot and a timer trap against instant bot submissions.
• Validation on both client and server, submitted over AJAX without reloading the page.

Nine languages

The site is fully translated into nine languages: English (primary), Russian, German, French, Italian, Spanish, Polish, Romanian and Serbian.

• Each language has its own content and its own server-side form handler.
• A custom language switcher with flags.
• hreflang + x-default across all nine versions.

Performance

Speed is designed into the page, not bolted on afterwards.

• Critical CSS is inlined in the head — there is no render-blocking request for an external stylesheet.
• The Inter font is self-hosted: woff2 subsets (Cyrillic, Latin, latin-ext), font-display: optional — zero requests to Google Fonts and no late repaint.
• All graphics are WebP; the hero is served responsively — separate desktop and mobile versions with prioritised loading (preload + fetchpriority).
• Explicit width/height on images → zero layout shift.
• PageSpeed: 96 on desktop, 97 on mobile.

Accessibility (score 100)

• A semantic main landmark and aria labels on interactive elements (burger menu, language switcher).
• A correct heading hierarchy and meaningful alt text.
• WCAG-compliant contrast and focus navigation.

What makes it interesting

• A serious B2B site with a complex form built around a real manufacturing process — accepting drawings in engineering formats.
• Full multilingual support across nine locales on a pure stack, with no i18n frameworks.
• High performance and accessibility despite a rich interface with sliders and animations.
• The full cycle by one person: design → markup → form backend → localisation → optimisation → deployment.

Structure and stack

A multi-page site in plain HTML/CSS/JS with server-side PHP includes for the shared parts.

• Pages: catalog (home), “Auctions”, “Cars”, “How it works”, “Delivery”.
• The shared header and footer are extracted into PHP includes — the same navigation and contacts on every page.
• A design system on CSS variables (colours, radii, a single UI pattern), responsive layout, a burger menu and a marketing ticker in the header.

Catalog and filter

A car catalog with cards showing photo, year, mileage, power and price in yen.

• A client-side filter in vanilla JS — by price, year, mileage and power, with “Apply” and “Reset” buttons.
• Car parameters are baked into the cards' data attributes, so filtering is instant and needs no reload.
• A “nothing matches these filters” state for empty results.

Modal request forms

Requests are submitted through modal windows (“Leave a request” on the card, “Contact us” in the header).

• A name + phone form with custom validation and inline error hints.
• The phone field uses a numeric inputmode and autocomplete for convenience on mobile.
• An accessible dialog: role=dialog, aria-modal, a close button with an aria-label and focus management.

Performance (PageSpeed 99 / 94)

The homepage was brought to 99 on desktop and 94 on mobile (it was 82).

• All catalog images were converted to WebP and resized to their actual display size — 78% less weight in total (1.3 MB → 0.28 MB).
• The LCP image on the first card loads with priority (preload + fetchpriority); the rest are lazy-loaded.
• Explicit width/height on every image — zero layout shift.
• Critical CSS is inlined in the head — the render-blocking stylesheet request is gone (−0.9 s).
• Scripts are deferred so they don't block parsing.

Accessibility and SEO

• Accessibility 100: hidden semantic headings, aria-labelledby and aria-label on the filter, navigation and dialogs, WCAG AA contrast.
• SEO 100: keyword-first title, meta description, canonical, Open Graph; the page is open to indexing.
• Semantic markup: main, a correct heading hierarchy and meaningful alt text.

What makes it interesting

• A multi-page site with a design system and reusable PHP includes — a consistent style and navigation without a CMS.
• A live client-side filter and accessible modal forms in plain JS, with no libraries.
• 100 on accessibility and SEO, 99/94 on speed — careful work across every Lighthouse metric.
• The full cycle by one person: design → markup → interactivity → optimisation → SEO.