Я обновил сайт-портфолио
Прошлый сайт был собран буквально «на коленке», теперь дошли руки сделать по уму.
Я хотел разрушить миф о том, что WebGL и хорошая оценка в PageSpeed/Lighthouse несовместимы: сайт выдает почти соточку как на мобилке, так и на десктопе (есть нюанс: PageSpeed Insights получает таймаут от моего сайта, не знаю в чем причина, может вы подскажете?).
Технологии:
- Astro
- Three.js (TSL)
- Web worker
- View Transition API
- GSAP
Интересные моменты:
- Первый раз использовал View Transition API на полную катушку. Понравилось! Все очень плавно и отзывчиво.
- Абсолютно весь WebGL опыт в веб-воркере, включая видео. Ранее видео было единственным, что не давало запускаться в воркере, потому что была привязка к DOM у VideoTexture. Но начиная с three.js 0.173 появился VideoFrameTexture, который работает без DOM. Фреймы летят через postMessage в воркер.
- Адаптивные видео. Вы знали что атрибут media работает и для <video>? Шок :)
Жду когда еще релизнут HTML-in-Canvas API, тогда доработаю еще, хочется с текстами что-то поинтереснее сделать
Live: https://pavelmazhuga.com/
Source code: https://github.com/pavel-mazhuga/portfolio
Post #145
722