Сайт-визитка инженера по 3D-печати и реверс-инжинирингу

Задача

Инженер по 3D-печати и реверс-инжинирингу из Чебоксар получает заказы из мессенджеров и по рекомендациям. Нужна была страница, куда отправлять заказчика вместо длинной переписки: кто специалист, что он делает, как устроен процесс и как связаться. Это визитка для частного специалиста, а не для компании. Позже сайт переехал на собственный домен и получил блог, чтобы находиться поиском по конкретным задачам.

Решение

Сайт-визитка — короткая страница о специалисте: кто он, что делает и как с ним связаться. Здесь она сделана в инженерной стилистике под профессию.

• Первый экран — вьюпорт 3D-сканера на canvas: три детали по кругу (шестерня, фланец, кронштейн), луч сканера превращает облако точек в каркас, модель крутится мышью и пальцем.
• Раздел «Процесс»: скан, геометрия, печать, чертежи. Мобильное меню и подсветка текущего раздела в шапке.
• Раздел «Частые вопросы» на элементах <details>, без JavaScript.
• Контакт в телефон: QR-код на адрес визитки и файл vCard; на телефоне вместо QR одна кнопка «Добавить в контакты».
• Собственные шрифты, превью для ссылок и иконки для выдачи поисковика.

Как это устроено

3D-сканер на canvas без библиотек

Canvas — область страницы, на которой скрипт рисует графику. Сканер использует собственную 3D-проекцию на canvas 2D без внешних библиотек. Рисование идёт, только пока вьюпорт виден и вкладка активна. Точки рисуются тремя пакетами по яркости, градиенты луча создаются один раз на размер, плотность пикселей не выше 1.5. По замерам разработчика время скриптов на первом экране примерно вдвое ниже, чем в первой версии.

Контакт в телефон: QR и vCard

vCard — файл-визитка, который телефон открывает как новый контакт. Nginx отдаёт .vcf с типом text/vcard: в стандартном списке типов его нет. На телефонах атрибут download у ссылки снимается скриптом, иначе iPhone кладёт файл в «Файлы», а без него сразу открывает «Создать контакт». В vCard указан город Чебоксары.

Кэширование и индексация

Сайт работает в собственном контейнере valera-web со своим конфигом nginx. Страница, robots.txt и sitemap.xml имеют no-cache, CSS, JS и шрифты с ?v= кэшируются на год, картинки на неделю. Новая версия страницы отправляется в IndexNow: это протокол, которым сайт сообщает поисковикам об изменениях.

Свой домен, блог и аналитика

Основной адрес — rekad3d.ru. Адреса с www, рекад.рф и рекад3д.рф и старый поддомен на сервере студии переводят на него редиректом 301 с сохранением пути, поэтому старые ссылки и закладки не ломаются.

В блоге 5 статей: восстановление пластиковой детали, выбор пластика, FDM или SLA, шестерня на заказ и 3D-сканирование детали. Каждая статья размечена как BlogPosting, у специалиста есть разметка ProfessionalService со студией в Чебоксарах. Для ИИ-ассистентов лежат llms.txt и llms-full.txt.

Яндекс Метрика загружается только после согласия на cookie, политика обработки персональных данных — на отдельной странице. В Метрике 12 целей: клики по контактам и кнопкам действия, блог, частые вопросы, дочитывание статьи. Сайт подтверждён в Яндекс Вебмастере, Google Search Console и Bing.

Анимации без нагрузки на телефон

Все анимации, кроме сканера, используют только transform и opacity: расшифровка имени, бегущая строка, лента навыков, вычерчивание иконок, прогресс прокрутки. Настройка prefers-reduced-motion их отключает, а без JS страница остаётся статичной и читаемой.

Результат

• Заказчику специалиста достаточно одной ссылки: услуги, процесс и контакты собраны на главной странице.
• Свой домен rekad3d.ru и блог из 5 статей под задачи, с которыми к специалисту приходят из поиска.
• Контакт сохраняется в телефон одним нажатием или сканированием QR-кода.
• Сайт открыт поисковикам, подтверждён в Яндекс Вебмастере, Google Search Console и Bing и размечен: Person с услугами, ProfessionalService, WebSite, ProfilePage, FAQPage, BlogPosting.
• Метрика с 12 целями работает только с согласия посетителя на cookie.
• Шрифты свои, запросов к Google Fonts нет.
• Замеров PageSpeed в исходниках нет, поэтому оценок не приводим.

Технологии: что и зачем

• HTML, CSS, JavaScript без фреймворков — страница лёгкая и не требует сборки.
• Canvas 2D — сканер и облако точек без внешних библиотек.
• nginx — отдача статики со своими правилами кэша и типом text/vcard.
• Docker — отдельный контейнер сайта на сервере студии.
• JSON-LD — разметка Person, ProfessionalService, WebSite, ProfilePage, FAQPage и BlogPosting для поисковиков и ИИ-ассистентов.
• Яндекс Метрика — цели по контактам и чтению, загрузка только после согласия на cookie.

Статус

В продакшене, сайт открыт: rekad3d.ru. Последняя правка от 8 октября 2026 года: переезд на собственный домен, блог из 5 статей, политика персональных данных и Метрика по согласию, подтверждение в кабинетах Яндекса, Google и Bing.