Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vasily257/resume

The single-page resume with preloader, scroll indicator and small animation.
https://github.com/vasily257/resume

gulp javascript pugjs scss

Last synced: about 2 months ago
JSON representation

The single-page resume with preloader, scroll indicator and small animation.

Awesome Lists containing this project

README 

        
# Resume

Этот проект — тестовое задание для вакансии «HTML-верстальщик» компании [9 линий](https://ninelines.agency/).



## Функциональность

Проект является одностраничным сайтом-резюме с отзывчивой версткой, построенной на flexbox и grid layout.  

На сайте есть прелоадер, индикатор скролла и анимация «Появление со смещением» (`fade`).  



## Особенности

У проекта есть несколько особенностей:

1. Изменен порядок разделов в меню, чтобы он соответствовал контенту на сайте.

2. Контент сайта отличается от макета, так как использована личная информация, но по возможности соблюдается Perfect Pixel.

3. В мобильном макете у заголовка «Навыки» высота 22px, но на сайте используется 20px, как у других заголовков.

4. В десктопном макете изображение жонглера заходит за пределы колонки сетки, поэтому оно уменьшено до границ колонки.

5. На сайте нет верхней и нижней волн, так как они сильно искажаются на промежуточных разрешениях экрана.

6. Анимация `fade` добавлена для всех блоков сайта, чтобы сделать его более динамичным.

7. Прелоадер движется, учитывая скорость загрузки изображений. То есть он зависит не от количества загруженных изображений,

а от количества загруженных байт. При этом скорость загрузки других ресурсов — например, `vendor.js` — не учитывается.

8. Индикатор скролла меняет не только значение в процентах, но и цвет своей границы.

9. Предыдущий запуск прелоадера и анимации отслеживается с помощью локального хранилища. В качестве альтернативы можно использовать

значение `max-age` в заголовке `Cache-Control` или статус `304`, но при условии, что на сервере настроен этот функционал.

10. На сайте добавлен динамический шеринг с помощью библиотеки `html2canvas`. Для шеринга используется скрытый компонент `share`.

11. Gulp-сборка некорректно обрабатывает svg-иконки с радиальными градиентами, поэтому такие иконки включены в png-спрайт.

12. Плагин `autoprefixer` выдает предупреждение, что в IE не работает значение 	 `auto-fit` для `grid-template-columns`.

Но IE сейчас не поддерживается, поэтому предупреждения игнорируются. В качестве альтернативы можно использовать медиа-выражения.

13. В Gulp-сборке активно используется JQuery, но функциональность сайта написана в основном на нативном JS.



## Технологический стек

`Pug`, `SCSS`, `JS`, `Gulp`, `Webpack`



## Ссылки

Макет/Техническое задание: https://www.figma.com/file/ct6rzbxMtNxSYp4eTXEWv6/Frontend-test?type=design&node-id=0-1&mode=design&t=i9sNcEw7V0NMRwUE-0  



## Использование

Чтобы склонировать проект, надо открыть нужную директорию и использовать команды:  

**HTTPS**: `git clone https://github.com/Vasily257/resume.git`  

**SSH**: `git clone [email protected]:Vasily257/resume.git`  



Чтобы запустить проект, нужно открыть папку с проектом через терминал и использовать команду `npm run start`.  

Но перед этим надо установить Gulp CLI, если у вас его нет: `npm install --global gulp-cli`.  



## Статус

Проект завершен, нет планов по доработке.