Персональный сайт-портфолио с 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 и генеративным ИИ.

Ссылка на сайт: Евгений Смирнов — портфоли

Цель — создать портфолио, которое не просто показывает информацию, а умеет с ней взаимодействовать.

Персональный сайт-портфолио с AI-ассистентом | Сетка — социальная сеть от hh.ru Персональный сайт-портфолио с AI-ассистентом | Сетка — социальная сеть от hh.ru Персональный сайт-портфолио с AI-ассистентом | Сетка — социальная сеть от hh.ru Персональный сайт-портфолио с AI-ассистентом | Сетка — социальная сеть от hh.ru