Business-Card Site for a 3D Printing Engineer

The task

A 3D printing and reverse engineering engineer in Cheboksary gets orders from messengers and referrals. He needed a page to send a customer to instead of a long chat: who the specialist is, what he does, how the process works and how to get in touch. It is a business card for an individual specialist, not for a company.

The solution

A business-card site is a short page about a specialist: who he is, what he does and how to reach him. Here it is styled like engineering software, to suit the profession.

• The first screen is a 3D scanner viewport on canvas: three parts in rotation (a gear, a flange and a bracket), a scanner beam turns the point cloud into a wireframe, and the model rotates with a mouse or a finger.
• A «Process» section: scan, geometry, print, drawings. A mobile menu and a highlight for the current section in the header.
• A «Frequently asked questions» section on <details> elements, with no JavaScript.
• A contact for the phone: a QR code pointing to the page and a vCard file; on a phone, a single «Add to contacts» button replaces the QR code.
• Own fonts, a link preview image and icons for search results.

How it works

A 3D scanner on canvas with no libraries

Canvas is an area of the page where a script draws graphics. The scanner uses its own 3D projection on canvas 2D with no external libraries. Drawing runs only while the viewport is visible and the tab is active. Points are drawn in three brightness batches, the beam gradients are created once per size, and the pixel density is capped at 1.5. By the developer's measurements, script time on the first screen is about half of the first version's.

A phone contact: QR and vCard

A vCard is a business-card file that a phone opens as a new contact. Nginx serves .vcf as text/vcard, because the standard type list does not include it. On phones the download attribute on the link is removed by a script: with it an iPhone puts the file into Files, without it the phone opens «Create contact» straight away. The vCard gives the city as Cheboksary.

Caching and indexing

The site runs in its own valera-web container with its own nginx config. The page, robots.txt and sitemap.xml are no-cache; CSS, JS and fonts with ?v= are cached for a year and images for a week. A new version of the page is submitted to IndexNow, a protocol a site uses to tell search engines about changes.

Animations that stay light on a phone

All animations except the scanner use only transform and opacity: the name «decoding», the ticker, the skills strip, the drawing of icons and scroll progress. The prefers-reduced-motion setting turns them off, and without JS the page stays static and readable.

Results

• The specialist's customer needs only one link: services, process and contacts are on a single page.
• The contact is saved to a phone with one tap or by scanning the QR code.
• The page is open to search engines and marked up: Person with services, WebSite, ProfilePage and FAQPage.
• The fonts are our own, so there are no requests to Google Fonts.
• The sources contain no PageSpeed measurements, so we give no scores.

Technologies and why

• HTML, CSS and JavaScript with no frameworks — the page is light and needs no build step.
• Canvas 2D — the scanner and the point cloud without external libraries.
• nginx — serving static files with its own cache rules and the text/vcard type.
• Docker — a separate site container on the studio's server.
• JSON-LD — Person, WebSite, ProfilePage and FAQPage markup for search engines and AI assistants.

Status

In production, the site is public: valera.devunit-lab.ru. The latest edit, of 29 September 2026, corrected the city to Cheboksary in the title, the markup and the vCard.