FeerAlex / portfolio

Феер Александр

Установка

• git clone https://github.com/FeerAlex/portfolio.git
• cd portfolio
• yarn install
• yarn run start

Список задач

• Моя сборка на webpack
  • Определиться со сборкой
  • Добавить плагины
  • Создать репозиторий
  • Начать верстать
  • Разместить проект на хостинг
• Вёрстка 4х страниц
  • Страница приветствия
  • Обо мне
  • Мои работы
  • Блог
• Адаптивная вёрстка. Анимации
  • Делаем верстку "резиновой"
  • Медиазапросы выставляем в стандартных точках
  • Делаем изображения адаптивными, в т.ч. под ретину
  • Perfect pixel
  • Flip эффект на основной странице
  • Изменение кнопки основного меню при вызове
  • Blur формы обратной связи
  • Использование WebGL
• Базовый JavaScript
  • Загрузчик для страницы приветствия и для тех страниц, где это необходимо
  • Эффекты
    • Фуллскрин меню (гамбургер меню)
    • "Переворачивание карточки" (flip) на странице приветствия
    • Меню ("сайдбар") на странице блога
  • Слайдер проектов
  • Формы
    • Валидация формы
    • Вывод сообщений об ошибках с сервера
    • Данные отправляем на сервер посредством технологии ajax
  • Админка + Vue.js
    • Верстка админки
    • Подключение Vue.js к проекту Создание компонентов
    • Передача данных между компонентами (props, $event)
    • Использование ajax, настройка взаимодействия клиент-сервер
• Работа с node.js
  • Сервер Node.js - для статических файлов
  • Собственные обработчики ошибок
  • Основные схемы и модели данных Mongoose
  • Передача и сохранение информации в базу данных с помощью технологии Ajax
  • Авторизация

Используемые плагины

• Clean for WebPack

  Удаление папки с готовым проектом

• HTML Webpack Plugin

  Генерация html файла с уже подключенным скриптом

• Extract Text Plugin

  Подключение css файлов

• Optimize CSS Assets Webpack Plugin

  Оптимизация css файлов

• Stylelint Plugin for Webpack

  Проверка css файлов на соответсвие, принятому в команде, стилю кода

• UglifyJS Webpack Plugin

  Оптимизация js файлов

• Favicons Webpack Plugin

  Генерация favicon для различных устройств

Используемые лоадеры

• Pug-loader

  Компиляция pug файлов в html

• Sass-loader

  Компиляция scss файлов в css

• Eslint-loader

  Проверка js файлов на соответсвие, принятому в команде, стилю кода

• Babel-loader

  Компиляция es6 в es5

• Img-loader

  Оптимизация изображений

• Svg-sprite-loader

  Генерация svg-спрайта

• Svgo-loader

  Оптимизация svg

• Fontface-loader

  Генерация шрифтов

• File-loader

  Загрузка и парсинг файлов

• Css-loader

  Загрузка и парсинг css файлов

• Postcss-loader

  Необходим для подключения autoprefixer