ADVISER

Персональный сайт-визитка ADVISER с основной идеей «Связь. Код. Результат.».

Сайт объединяет три профессиональных направления — корпоративные коммуникации, Vibe-Coding и алгоритмический трейдинг — и содержит отдельный раздел «Обо мне».

Сайт

• GitHub Pages: https://lordos2003.github.io/Adviser/
• Репозиторий: https://github.com/lordos2003/Adviser
• Основная ветка: main
• Публикация: GitHub Pages из ветки main

Структура сайта

Главный экран

Слоган:

Связь. Код. Результат.

Подзаголовок связывает три направления сайта: коммуникации, технологии и финансы.

Есть отдельная desktop- и mobile-компоновка верхней части сайта.

Направления

Voice & Communications

Корпоративные коммуникации, VoIP, Cisco Unified Communications, SIP и интеграции.

В модальном окне используется иллюстрация cisco-uc.webp и описание Cisco Unified Communications.

Vibe-Coding

Современный подход к созданию решений с помощью ИИ: веб-сайты, приложения, скрипты, автоматизация, боты, аналитика, презентации, тексты, изображения и видео.

В модальном окне используется vibe-coding.webp.

Основная формулировка раздела:

Любая идея. Реальные результаты.

Trader

Алгоритмическая торговля, стратегии, данные, бэктесты, дисциплина и автоматизация.

Заголовок модального окна:

План. Алгоритм. Прибыль.

В модальном окне используется trader-dca.webp — иллюстрация DCA, накопления позиции, изменения средней цены и автоматического выхода из сделки.

Раздел «Обо мне»

Содержит персональное описание профессионального опыта в корпоративной телефонии и унифицированных коммуникациях, включая:

• Cisco CUCM;
• Unity;
• Jabber;
• SIP;
• MRA;
• поиск и устранение сложных проблем;
• объяснение технических вопросов простым языком;
• интерес к Vibe-Coding и алгоритмической торговле.

Используется фотография about-photo.webp.

Контакты

В шапке сайта есть кнопка «Связаться →».

Контактная панель содержит:

• Email: lordos2003@gmail.com
• Telegram: @Adviser2003
• MAX: персональная ссылка на профиль MAX

Контактная панель оформлена отдельными строками: название контакта показано меньшим шрифтом, значение — более крупным и насыщенным. Для каждого контакта используется отдельный круглый визуальный маркер, между строками добавлен разделитель.

Мобильная версия

Для мобильных устройств предусмотрены:

• отдельная мобильная шапка;
• кнопка контактов;
• раскрывающееся меню навигации;
• нижняя мобильная навигация;
• адаптивные размеры и расположение элементов.

Модальные окна направлений

Карточки Voice, Vibe-Coding и Trader открывают единое модальное окно с содержимым выбранного направления.

Карточки сделаны полностью кликабельными. Также работает ссылка «Узнать больше →».

Для каждого направления картинка, альтернативный текст, заголовок и описание задаются отдельно в объекте serviceData.

Текущая привязка изображений:

Направление	Изображение
Voice	cisco-uc.webp
Vibe-Coding	vibe-coding.webp
Trader	trader-dca.webp

В модальном окне реализовано:

• закрытие крестиком;
• закрытие по Escape;
• закрытие кликом по внешней области;
• адаптивное отображение;
• на мобильных устройствах модальное окно ограничено по высоте viewport и имеет более компактную компоновку;
• на мобильных устройствах добавлена чёткая рамка вокруг всего модального окна;
• дополнительная кнопка закрытия не добавлялась — используется существующий крестик;
• анимация переходов через View Transitions API, если браузер его поддерживает.

Просмотр изображения

Клик по изображению в модальном окне открывает полноэкранный lightbox.

Поддерживаются:

• полноэкранный просмотр;
• закрытие крестиком;
• закрытие по Escape;
• закрытие кликом по внешней области;
• возврат к модальному окну;
• плавный morph-переход между изображением в модальном окне и lightbox при поддержке View Transitions API.

Технологии

Проект представляет собой статический сайт без серверной части.

Используются:

• HTML5;
• CSS3;
• JavaScript;
• SVG для интерфейсных иконок;
• GitHub Pages;
• Git/GitHub;
• View Transitions API для прогрессивных анимаций.

Все основные HTML, CSS и JavaScript-компоненты находятся в index.html.

Файлы и ресурсы

Основные файлы репозитория:

• index.html — основной HTML, CSS и JavaScript сайта;
• README.md — документация и журнал состояния проекта;
• cisco-uc.webp — иллюстрация Voice;
• cisco-uc.png — исходная/альтернативная версия иллюстрации Voice;
• vibe-coding.webp — иллюстрация Vibe-Coding;
• trader-dca.webp — иллюстрация Trader;
• site-visual.png — основная иллюстрация главного экрана;
• site-visual.webp — WEBP-версия основной иллюстрации;
• about-photo.webp — фотография для раздела «Обо мне»;
• about-photo.png — исходная/альтернативная версия фотографии.

История последних изменений

Проект развивается небольшими последовательными изменениями. Важные этапы последних правок:

• добавлена иллюстрация Trader с тематикой DCA;
• обновлена иллюстрация Vibe-Coding;
• заголовок Trader изменён на «План. Алгоритм. Прибыль.»;
• добавлен полноэкранный просмотр изображений (lightbox);
• исправлено наложение lightbox поверх модального окна;
• добавлен morph-переход изображения;
• временные тестовые workflow после проверки удалены;
• карточки направлений сделаны полностью кликабельными;
• улучшена адаптивность модального окна;
• добавлено и отредактировано описание Voice;
• удалён временный placeholder «Здесь будет подробная информация...»;
• исправлена логика выбора изображения: каждое направление теперь получает свою картинку непосредственно при открытии модального окна;
• мобильное модальное окно дополнительно адаптировано по высоте и внутренним отступам, добавлена рамка вокруг окна;
• обновлено оформление контактной панели: Email и Telegram теперь отображаются раздельно с визуальным разделением названия и значения;
• добавлен третий контакт — MAX с персональной ссылкой на профиль;
• метаданные предпросмотра ссылки обновлены: описание сайта теперь «Технологии. Идеи. Результат.» для стандартного, Open Graph и Twitter-превью;
• заголовок Open Graph-превью очищен, чтобы убрать строку «ADVISER — Связь. Код. Результат.» из карточки ссылки;
• заголовок страницы и Twitter-превью сокращены до «ADVISER», чтобы предпросмотр ссылки не возвращал старый слоган как резервный заголовок.

Текущая версия

Последний сохранённый коммит:

6926865502aa811225dbb884fd9d5b7e28f3d6dc — Set concise link preview title

На текущем этапе:

• Voice, Vibe-Coding и Trader имеют собственные изображения;
• описания направлений выводятся непосредственно в модальном окне;
• временный placeholder удалён;
• lightbox работает отдельно от модального окна;
• мобильное модальное окно не должно выходить за границы viewport по высоте;
• мобильная версия использует более компактные размеры изображения, отступы и типографику;
• вокруг мобильного модального окна используется чёткая рамка;
• контактная панель использует раздельную типографику для названия и значения контакта;
• в контактную панель добавлен MAX;
• описание предпросмотра ссылки унифицировано как «Технологии. Идеи. Результат.»;
• заголовок предпросмотра ссылки унифицирован как «ADVISER»;
• проект публикуется через GitHub Pages.

Правила дальнейшей работы с проектом

1. Работать небольшими последовательными изменениями.
2. Не менять код, который не относится к текущей задаче.
3. После каждого изменения проверять diff.
4. После завершённой правки обновлять этот README, если изменилось состояние, функциональность, структура или важное решение проекта.
5. README использовать как актуальную документацию проекта, а не только как первоначальное описание.
6. Перед следующими изменениями считать последний сохранённый коммит текущей исходной точкой.