Персональный сайт-портфолио с AI-ассистентом
В рамках развития собственного профессионального портфолио я разрабатываю персональный сайт-визитку, который объединяет информацию обо мне, проектах, навыках, сертификатах и опыте работы с ИИ и автоматизацией. Основная идея — сделать не просто статичное резюме в веб-формате, а полноценный интерактивный инструмент, через который работодатель или заказчик может быстро понять, чем я занимаюсь, какие технологии использую и какие задачи могу решать.
Задача проекта
Обычное резюме ограничено форматом документа: пользователю приходится последовательно читать блоки и самостоятельно искать нужную информацию. В сайте-визитке я хочу сократить этот путь. Посетитель сразу видит специализацию, основные компетенции, проекты, сертификаты и контакты, а при необходимости может обратиться к встроенному AI-ассистенту и задать вопрос в свободной форме.
Например:
— какие проекты уже реализованы;
— какой стек технологий используется;
— есть ли опыт работы с API и автоматизацией;
— какие курсы и сертификаты пройдены;
— в каком направлении развивается профессиональный профиль.
Что реализовано
Сайт уже развёрнут на сервере и доступен как полноценное веб-приложение. Основные разделы: Обо мне — краткая информация и профессиональное позиционирование. Проекты — описание практических кейсов и разработок. Навыки — AI Automation, AI Agents, Python, SQL, API, Power BI, no-code, аналитика данных и интеграции. Сертификаты — подтверждение пройденного обучения. Контакты — способы связи. Также предусмотрена возможность скачивания резюме. Сайт проектируется как живое портфолио: по мере обучения и появления новых проектов он будет постоянно расширяться.
AI-ассистент
Один из ключевых элементов проекта — встроенный AI-ассистент на базе GigaChat. Его задача — использовать информацию, размещённую на сайте, и отвечать на вопросы пользователя о моём опыте, навыках, проектах и обучении. Логика взаимодействия: пользователь → вопрос → GigaChat → контекст сайта → сформированный ответ Такой подход позволяет превратить обычную страницу-портфолио в интерактивный интерфейс. AI здесь используется не как декоративный элемент, а как часть пользовательского сценария: посетителю не обязательно вручную изучать каждый раздел сайта.
Интерфейс и анимации
Отдельное внимание уделяю визуальной части и динамике интерфейса. На сайте используются плавные переходы, анимации появления элементов, интерактивные карточки, hover-эффекты и динамические состояния кнопок. Анимации помогают сделать сайт визуально более живым, подчёркивают структуру страницы и направляют внимание пользователя на ключевые элементы. При этом задача — сохранить баланс между эффектностью и удобством, чтобы анимации не мешали восприятию контента и скорости работы сайта.
Технологический стек
Frontend: HTML / CSS / JavaScript — интерфейс, анимации и логика взаимодействия со страницами. Backend: серверная часть для обработки запросов и взаимодействия с внешними сервисами. AI: GigaChat API — генерация ответов AI-ассистента. Интеграции: REST API и JSON для обмена данными между компонентами системы. База данных: Supabase — хранение данных сайта и контента отдельных разделов. Hosting: приложение развёрнуто на серверной инфраструктуре Timeweb Cloud. Security: серверные HTTP-заголовки безопасности через Helmet. Для проверки работоспособности приложения также предусмотрен отдельный health-endpoint. Текущий этап
Проект находится в активной разработке. Уже реализованы основной интерфейс, структура портфолио, анимации, серверное размещение и интеграция AI-ассистента. Дальнейшее развитие включает расширение базы знаний ассистента, улучшение логики ответов, развитие разделов проектов и сертификатов, оптимизацию интерфейса и добавление новых интеграций. Для меня этот проект одновременно выполняет две задачи: служит профессиональной визиткой и показывает на практике навыки работы с веб-разработкой, API, базами данных, серверной инфраструктурой, интерактивным UI и генеративным ИИ.
Ссылка на сайт: Евгений Смирнов — портфоли
Цель — создать портфолио, которое не просто показывает информацию, а умеет с ней взаимодействовать.
· 1 ч
Выглядит красиво, но на скринах, и возможно на ПК. Адаптива нет, а это довольно критично. К тому же крайне долго грузится картинка, полагаю, что используется исходная от нейронов, без оптимизации. Рекомендую поработать над адаптивом
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
коммент удалён
· 1 ч
Александр, спасибо за ценный фидбек! Это мой первый проект, поэтому взгляд со стороны очень важен. Обязательно займусь оптимизацией нейросетевых изображений и детально проработаю адаптивную версию для мобильных.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён