English | Русский
Этот проект — минималистичный и элегантный сайт-портфолио для профессионального ретушера фотографий.
Основная задача сайта — привлекать потенциальных клиентов, отображая портфолио ретушера. Основная проблема, с которой я столкнулся во время разработки - время загрузки сайта, увеличившееся из-за большого количества и размера изображений. Чтобы решить это, я показываю пользователю превью-версии изображений, пока полные загружаются. Этого позволяет достичь JS библиотека Lazyload. Также важным этапом было правильно сжать изображения и подобрать им нужное разрешение отдельно и для мобильных устройств.
Векторная графика используется по всему проекту, т.к. она весит меньше - это помогает сохранить время загрузки, а UI выглядит плавнее. Если браузер пользователя не поддерживает SVG, мы автоматически переключаемся на PNG.
Есть некоторые специально написанные функции, такие как слайдер, магнитная кнопка и кастомный курсор в виде css-фигуры.
Bootstrap помог быстро сверстать сайт в соответствии с модульной сеткой. Также изначально сайт был разработан с Gulp, но переместился на современный и быстрый фреймворк Astro.
Веб-сайт также адаптирован для мобильных устройств.
- Typescript
- Astro
- Sass
- Lazyload JS Library
- Gsap
- Jquery
- Bootstrap
Проект готов и запущен в продакшен.
| Команда | |
|---|---|
npm install |
Устанавливает зависимости |
npm run dev |
Запускает локальный сервер на localhost:3000 |
npm run build |
Билдит продакшн версию в папку ./dist/ |
npm run preview |
Превью билда локально, перед деплоем |
| :--------------------- | :----------------------------------------------- |