Для разработчика личное портфолио играет важную роль, чтобы продемонстрировать его / ее работы, привлечь потенциальных клиентов или найти работу. Но для его изготовления требуется колоссальный объем работы и времени. Также неудобно поддерживать его вручную с последним проектом.

Что, если бы вы могли создать свое портфолио за 5 минут, просто указав свое имя пользователя Github, и даже разместить его бесплатно? Вы хотите отображать свои навыки, историю работы, историю образования или даже сообщения среднего размера на своем веб-сайте? Тогда вы попали в нужное место.

Представляем ezProfile, чтобы начать работу с вашим личным портфолио с помощью Github Api и блога.

ezProfile - это простой в настройке шаблон личного портфолио разработчиков, созданный с помощью React.js. Когда вы управляете кодом в репозитории GitHub, он автоматически отображает веб-страницу с информацией профиля владельца, включая фотографию, биографию и репозитории. Кроме того, он включает в себя место для выделения ваших данных, истории работы, истории образования, навыков и недавних сообщений в блоге.

Все это возможно с помощью GitHub API (для автоматического наполнения вашего сайта контентом) и Article-api (для получения последних сообщений в блогах).

✓ 21 тема
✓ Google Analytics
✓ Мета-теги
✓ Аватар и биография
✓ Социальные ссылки
✓ Навыки
✓ Опыт
✓ Образование
✓ Проекты
✓ Сообщения в блогах

Чтобы просмотреть живой пример, нажмите здесь.

Исходное репо: https://github.com/arifszn/ezprofile

🛠 Установка и настройка

Эти инструкции позволят вам запустить копию проекта на вашем локальном компьютере в целях разработки и тестирования.

На вашем компьютере должны быть установлены Git и Node.js (в комплекте с npm).

  • Разветвите репо, чтобы у вас был собственный проект для настройки. Форк - это копия репозитория.
  • Найдя дом для своего разветвленного репозитория, клонируйте его.
  • Перейдите в свой новый каталог.
cd ezprofile
  • Установить зависимости
npm install
  • Запустить сервер разработки
npm start

🎨 Настройка

Вся магия происходит в файле src/config. Откройте его и измените в соответствии с вашими предпочтениями.

Темы

Доступна 21 тема, которую можно выбрать из раскрывающегося списка.

Можно указать тему по умолчанию.

// config.js
module.exports = {
  // ...
  themeConfig: {
    default: 'light',
    // ...
  }
}

Вот несколько скриншотов разных тем.

Гугл Аналитика

ezFolio поддерживает как GA3, так и GA4. Если вы не хотите использовать Google Analytics, оставьте поле id пустым.

// config.js
module.exports = {
  // ...
  googleAnalytics: {
    id: ''
  },
}

Помимо отслеживания посетителей, ezFolio отслеживает события кликов по проектам и сообщениям в блогах и отправляет их в Google Analytics.

Мета-теги

Мета-теги будут автоматически генерироваться из конфигураций динамически. Однако вы также можете вручную добавить метатеги в public\index.html

Аватар и биография

Здесь будут отображаться ваш аватар и биография на github.

Социальные ссылки

ezProfile поддерживает связывание ваших социальных сетей, которые вы используете, включая LinkedIn, Twitter, Facebook, Dribbble, Behance, Medium, dev.to, личный веб-сайт и электронную почту.

// config.js
module.exports = {
  // ...
  social: {
    linkedin: 'ariful-alam',
    twitter: 'arif_swozon',
    facebook: '',
    dribbble: '',
    behance: '',
    medium: '',
    devto: '',
    website: 'https://arifszn.github.io',
    email: ''
  },
}

Навыки и умения

Чтобы продемонстрировать свои навыки, предоставьте их здесь.

// config.js
module.exports = {
  // ...
  skills: [
    'JavaScript',
    'React.js',
  ],
}

Пустой массив скроет раздел навыков.

Опыт

Разместите свою историю работы в experiences.

// config.js
module.exports = {
  // ...
  experiences: [
    {
      company: 'Company name 1',
      position: 'Software Engineer',
      from: 'July 2019',
      to: 'Present'
    },
    {
      company: 'Company name 2',
      position: 'Jr. Software Engineer',
      from: 'January 2019',
      to: ' June 2019'
    }
  ],
}

Пустой массив скроет раздел опыта.

Образование

Укажите историю своего образования в education.

// config.js
module.exports = {
  // ...
  education: [
    {
      institution: 'Institution name 1',
      degree: 'Bachelor of Science',
      from: '2015',
      to: '2019'
    },
    {
      institution: 'Institution name 2',
      degree: 'Higher Secondary Certificate (HSC)',
      from: '2012',
      to: '2014',
    }
  ],
}

Пустой массив скроет раздел образования.

Проекты

Ваше публичное репо с github будет отображаться здесь автоматически. Вы можете ограничить количество отображаемых проектов. Кроме того, вы можете скрыть разветвленное или конкретное репо.

// config.js
module.exports = {
  // ...
  github: {
    username: 'arifszn',
    sortBy: 'stars',
    limit: 8,
    exclude: {
      forks: false,
      projects: ['my-project1', 'my-project2']
    }
  },
}

Сообщения в блоге

Если у вас есть учетная запись medium или dev.to, вы можете показать здесь свои последние сообщения в блоге, просто указав свое имя пользователя medium / dev.to. Вы можете ограничить количество отображаемых сообщений (максимум 10).

// config.js
module.exports = {
  // ...
  blog: {
    source: 'dev.to',
    username: 'arifszn',
    limit: 5
  },
}

Сообщения выбираются Article-api.

🚀 Развернуть

После того, как вы закончите настройку и выполнили все вышеперечисленные шаги, вам необходимо разместить свой веб-сайт в сети! Самый быстрый способ - использовать GitHub Pages, который совершенно бесплатен.

1. Страницы Github:

  • Переименуйте ответвленный репозиторий на username.github.io, где username - ваше имя пользователя GitHub (или название организации).
  • Откройте package.json и измените значение homepage на username.github.
// package.json
{
  // ...
  "homepage": "username.github.io",
}
  • Запустите npm run deploy.
  • Если вы видите README.md на username.github.io, не забудьте изменить исходный код своей страницы GitHub на gh-pages ветку. Смотрите как сделать.

Ваше личное портфолио будет доступно по адресу username.github.io. Для получения дополнительной информации посетите здесь.

2. Другое: вы также можете разместить свой веб-сайт на Netlify, Vercel, Heroku или других популярных сервисах. Пожалуйста, обратитесь к этому документу для получения подробного руководства по развертыванию.

Репо: https://github.com/arifszn/ezprofile
Демо: https: //arifszn.github. io / ezprofile
Посмотрите другие мои работы: https://github.com/arifszn