Сайт, который грузится как Windows 95

Контекст

Персональная страница обычно выглядит как все остальные персональные страницы: фотография, пара абзацев, иконки соцсетей. Её пролистывают за три секунды и не запоминают. Мы решили проверить, что будет, если вместо страницы показать целый интерфейс, который человек узнаёт с первого кадра.

Решение

Сайт открывается как рабочий стол Windows 95. Обои, иконки на столе, работающее меню Пуск, панель задач и живые часы в трее. По центру окно Internet Explorer с адресной строкой и меню, а внутри него и находится всё содержимое страницы: рассказ о себе, музыкальный плеер, галерея фотографий и ссылки.

Окно ведёт себя как настоящее: сворачивается, закрывается и восстанавливается с панели задач. Перед загрузкой проигрывается пиксельная заставка, которую можно пропустить кликом. За курсором бегает пиксельный кот.

Язык определяется по браузеру, переключается с панели задач, и весь интерфейс вместе с содержимым существует на русском и английском. Пиксельный шрифт подобран с поддержкой кириллицы, иначе половина ретро-эффекта разваливается на русском тексте.

Как устроено

• Рабочий стол. Иконки, меню Пуск, панель задач, часы в трее.
• Окно браузера. Меню, панель инструментов и адресная строка, сворачивается и восстанавливается.
• Содержимое. Рассказ о себе, музыкальный плеер, галерея и контакты.
• Два языка. Определение по браузеру и переключатель в панели задач.
• Статическая сборка. Обычные HTML, CSS и JavaScript, работает на любом хостинге и грузится мгновенно.
• Видимость в поиске. Содержимое отдаётся в готовой разметке, с описанием для соцсетей и структурированными данными.

Роль и результат

Проект сделан нами от идеи до публикации. Это витрина фронтенда в чистом виде: тот же набор сведений, что и на обычной персональной странице, но поданный так, что его досматривают до конца и присылают друг другу. Ретро-оболочка при этом не мешает ни скорости, ни поиску: страница собрана статически и отдаёт содержимое сразу.