Aykhan Ashrafov — портфолио инженера по кибербезопасности
Одностраничное личное портфолио специалиста, работающего и в blue team, и в red team. Собрано на React и Vite вокруг терминальной эстетики, живой панели логов и раздела сертификатов с проверяемыми идентификаторами.
Открыть сайт- Клиент
- Aykhan Ashrafov — инженер по кибербезопасности (Cortex XDR, реагирование на инциденты), Баку
- Роль
- Все этапы проекта: концепция, визуальный язык, frontend-разработка, анимация и деплой.
- Стек
- React · Vite · Tailwind CSS · Framer Motion
- Дата
- февраль 2026
- Языки
- 1 — EN
- Lighthouse (мобильный)
- 97
Личный сайт специалиста по безопасности не может быть обычной страницей-резюме. В этой сфере нанимающий хочет получить ответ на три вопроса за считаные секунды: blue team это или red team, с какими инструментами человек реально работал и можно ли проверить его сертификаты. Стандартный шаблон портфолио не отвечает ни на один из них, а нейтральный дизайн, не связанный с отраслью, выставляет кандидата чужаком в собственной профессии.
- Терминальная эстетика: моноширинный шрифт, маркеры командной строки и статусные метки по всему интерфейсу
- Сменяющиеся метки роли в первом экране: Blue Team, Red Team, Cortex XDR
- Живая панель логов — строки идут потоком в окне ROOT@AYKHAN-SEC:~ (файрвол, рукопожатие, сканирование трафика)
- Индикатор «SYSTEM ONLINE» и счётчик нейтрализованных угроз
- Четыре места работы в хронологическом порядке: компания, период, описание и теги навыков
- Технический арсенал разделён на три колонки: защита (Blue Team & SOC), нападение (Red Team & Pentest), инженерия (Development & DB)
- Статусная метка рядом с каждым инструментом: Active, Scanning, Logging, Engaged, Root Access, Standby
- Раздел портфолио с метками уровня доступа: Classified, Public, Restricted
- Раздел сертификатов: организация, дата, номер удостоверения и ссылка на проверку
- Призыв «REQUEST CV» и статус готовности к работе
Визуальный язык взят из самой профессии
Сайт построен на моноширинном шрифте, маркерах командной строки и окне терминала. Это не украшение: те, кто нанимает специалиста по безопасности, смотрят именно на такие экраны целыми днями и узнают этот язык. Нейтральный корпоративный шаблон нёс бы то же содержание, но выставлял бы кандидата чужаком — здесь сам дизайн является сигналом квалификации.
Blue team и red team показаны одновременно
Кандидаты в этой сфере обычно относятся к одному лагерю. В первом экране чередуются обе метки, а арсенал явно разделён на колонки защиты и нападения. Посетитель считывает двойной профиль из самой структуры, а не из списка, — и, под какую бы роль он ни искал, находит свою колонку.
Панель логов делает то, чего не может статичный текст
Фраза «отслеживаю угрозы» есть в каждом резюме и ничего не доказывает. Вместо неё в первом экране идёт поток логов: блокировка файрвола, расшифровка рукопожатия, сканирование трафика. Это демонстрация того, как выглядит работа, а не утверждение о ней. Тот же принцип работает и в счётчике нейтрализованных угроз: число читают, когда оно движется.
У каждого инструмента есть статусная метка
Проблема списков навыков в том, что все пункты выглядят одинаково весомо: человек, один раз запустивший Kali Linux, пишет ту же строку, что и тот, кто работает в нём ежедневно. Метки Active, Standby, Root Access рядом с каждым инструментом передают эту разницу одним словом и превращают список в карту реального использования.
Сертификаты идут вместе с номерами удостоверений
Название сертификата само по себе проверить нельзя. Поэтому рядом с каждым стоят организация, дата, номер удостоверения и ссылка на проверку. Это заранее выполняет работу, которую рекрутер иначе делал бы вручную, и показывает, что кандидату нечего скрывать.
Одна страница, навигация по якорям
Личное портфолио обычно читают сверху вниз за один заход. Поэтому разделы — это якоря на одной странице, а не отдельные маршруты: опыт, арсенал, сертификаты, контакты. Посетитель получает полную картину, не дожидаясь ни одного перехода, а меню при этом позволяет сразу прыгнуть в нужный раздел.
Сайт работает с февраля 2026 года. PageSpeed Insights показывает мобильную производительность 97 — с учётом живой панели логов в hero и непрерывных анимаций это означает, что эффекты не задерживают загрузку основного содержания.
Расскажите о проекте — обычно отвечаю в тот же день.
Nurlan Qadirov — Baku, Azerbaijan