ia-stepanov / portfolio

Фронтенд проекта «Портфолио» — это персональный сайт, который содержит блоки: «рассказ о себе», «профессиональный опыт и навыки», «портфолио» и «контакты». Stack: HTML5, CSS3, SASS/SCSS/LESS, JavaScript, jQuery, PHPMailer, Gulp, БЭМ, Figma.

Портфолио

Описание проекта

Портфолио — это персональный сайт, который содержит блоки: «рассказ о себе», «профессиональный опыт и навыки», «портфолио» и «контакты». Проект разработан на основе учебного курса «WEB-разработчик» Ивана Петриченко.

Функционал:

• Анимированный 3D фон;
• Переключение между табами;
• Получение данных из объекта;
• Отрисовка и подгрузка проектов;
• Валидация формы (Validation);
• Отправка формы на почту;
• Попап с политикой конфиденциальности;
• User eXperience (UX);
• Адаптивный интерфейс для разных устройств.

Стек технологий:

• HTML5;
• CSS3:
  • Grid Layout;
  • Flexbox;
  • Positioning;
  • Adaptive UI;
  • Media Queries;
• Вендорные префиксы в CSS;
• Препроцессоры: SASS/SCSS/LESS;
• Методология БЭМ;
• Работа с медиафайлами (HTML-video, iframe);
• Вёрстка по макету в Figma;
• JavaScript:
  • Стиль CamelCase;
  • VanillaJS + jQuery;
  • Установка и настройка плагинов;
• Gulp.

Установка и запуск проекта:

Клонировать репозиторий:

git clone https://github.com/ia-stepanov/portfolio.git

Установить зависимости:

npm install

Запустить проект:

npx gulp

Языки:

• JavaScript

Библиотеки:

• jQuery — это JavaScript-фреймворк фокусирующийся на взаимодействии JavaScript и HTML;
• Vanta.js — это 3D & WebGL библиотека для создания анимированного фона;
• PHPMailer — это библиотека для безопасной и простой отправки электронных писем с помощью кода PHP с веб-сервера. Мануал с новыми настройками Gmail SMTP;

Плагины:

• jQuery Validation Plugin — это плагин, который помогает валидировать элементы формы;
• jQuery Tabs — это скрипт для реализации табов (вкладок);
• jQuery AnchorScroll — это плагин для эффекта плавной прокрутки с настраиваемой скоростью;
• AnimateTyping.js — это плагин для имитации эффекта «пишущей машинки», который анимирует ввод и удаление текста;
• ShowMore.js — это плагин для скрытия любого div'а по заданной высоте;
• Simple Load More — этот плагин добавляет функциональность для подгрузки пользовательских элементов (не AJAX).

Макет в Figma:

• Макет Portfolio

Источники вдохновения:

• Иван Петриченко, учебный курс «WEB-разработчик»;
• Ram Maheshwari, проект «Dopefolio 🔥»;
• Bedimcode, проект «Responsive Portfolio Clay Doe»;
• Bedimcode, проект «Responsive Portfolio Website Jhon Doe»;
• Bedimcode, проект «Responsive Portfolio Website Alexa».

Скриншот:

Развернуть

Ссылка на сайт:

https://ia-stepanov.ru/