Для разработчика личное портфолио играет важную роль, чтобы продемонстрировать его / ее работы, привлечь потенциальных клиентов или найти работу. Но для его изготовления требуется колоссальный объем работы и времени. Также неудобно поддерживать его вручную с последним проектом.
Что, если бы вы могли создать свое портфолио за 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