Веб-приложение для просмотра и скачивания фотографий в высоком разрешении.
Галерея фотографий моего отца, Александра Проватóрова – путешественника и фотографа. Сайт собирает его архив в одном месте, позволяет осуществлять поиск снимков и скачивать их в оригинальном разрешении.
Галерея. Поиск, сортировка и добавление в избранное
Фото. Просмотр похожих снимков и скачивание
- Клонируйте репозиторий:
git clone https://github.com/we1r9/provatorov-archive.git
cd provatorov-archive- Откройте
index.htmlчерез Live Server.
-
Код организован по принципу модульной архитектуры (ES Modules): каждая страница имеет свой JS-файл, а общая логика вынесена в
/utils. -
Для каждого снимка существуют три версии:
thumb(сетка галереи),web(страница снимка) иhq(скачивание). Первые две хранятся в репозитории, hq-файлы раздает Yandex S3 через CDN. -
localStorageиспользуется для хранения избранных снимков.sessionStorageсохраняет состояние галереи (поисковый запрос, режим сортировки, количество видимых карточек и позицию скролла), чтобы при возврате со страницы снимка галерея не меняла свое состояние. -
Галерея загружает снимки порциями по 18 штук, остальные подгружаются по кнопке «Показать еще». Благодаря нативному lazy loading, браузер загружает только те изображения, которые попадают в зону видимости.
-
Реализована синхронизация избранного между вкладками, чтобы при добавлении или удалении снимка на одной вкладке, изменения отображались и на других.
-
Каждая фотография имеет свой URL, чтобы, например, ею можно было поделиться или сохранить в закладки.
-
Все данные о снимках хранятся в
photos.jsonввиду того, что на текущем этапе коллекция пополняется вручную.
- Мигрировать на React и TypeScript
- Заменить JSON на собственный сервер с базой данных
- Реализовать загрузку фотографий и редактирование метаданных из интерфейса через админ-панель
- Улучшить производительность приложения (оптимизировать загрузку изображений, ускорить рендер галереи)
- Telegram: @we1r9
- Email: provatorovandrew@gmail.com