О проекте
Личное портфолио, которое вы сейчас читаете. Тёмное техно-настроение, оранжево-жёлтые акценты, куча интерактивов. Написан с нуля, без фреймворков.
Зачем я его сделал
Я хотел место, где можно показать свои проекты, рассказать истории и дать людям способ связаться. И заодно потренироваться в веб-разработке на реальной задаче.
Что внутри
- Частицы по всему сайту, реагируют на курсор
- Клик по пустому месту добавляет новую звезду
- Терминал с физикой букв: пишешь текст, жмёшь «ОТОРВАТЬ», буквы падают и их можно кидать
- Свечение вокруг курсора на карточках
- Плавное появление блоков при скролле
- Прогресс-бары растут с процентами
- Карусель отзывов, FAQ, Timeline
- Тёмная / светлая / авто тема
- Переключатель RU/EN
- Адаптив под мобильные и iOS
Как работает
Чистый HTML, CSS и JavaScript. Никаких библиотек — всё написано с нуля. Частицы — на canvas с собственной физикой. Терминал — отдельный модуль с обработкой коллизий букв. Появление при скролле — IntersectionObserver.
Фрагмент кода
// Физика буквы в терминале
const GRAVITY = 0.55;
const BOUNCE = 0.5;
function updateLetter(l) {
l.vy += GRAVITY;
l.x += l.vx;
l.y += l.vy;
// Отскок от пола
if (l.y + l.h > stageHeight) {
l.y = stageHeight - l.h;
l.vy = -Math.abs(l.vy) * BOUNCE;
}
l.el.style.transform =
`translate(${l.x}px, ${l.y}px) rotate(${l.angle}deg)`;
}
Ссылки
Репозиторий скоро появится
