Top.Mail.Ru
ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
Как разработчику оформить портфолио в Notion?
Продуманное и разнообразное портфолио — важное преимущество разработчика при поиске работы и заказов на фрилансе. Узнайте, как оформить свои проекты в сильное портфолио с помощью сервиса Notion.
Веб-разработка
5346
Для разработчиков портфолио в Notion — настоящая находка, ведь здесь можно:

  • показать готовый результат и отдельные этапы работы
  • подробно описать цели и задачи проекта
  • обосновать выбор инструментов разработки
  • оформить каждый проект в красивый кейс собрать их в презентабельную галерею

Выглядит такое портфолио гораздо привлекательнее, чем профиль в GitHub или GitLab. Поэтому давайте скорее перейдем к практике!

Начало работы в Notion


На главной странице notion.so нажмите «Try Notion free», авторизуйтесь и выберите тип аккаунта «For myself», если используете сервис впервые. Это бесплатный вариант со всеми нужными функциями.

Слева выбираем «Settings and members», проходимся по вкладкам, настраиваем профиль и рабочее пространство:



  • My account – устанавливаем никнейм, фото профиля, email и пароль для входа
  • My notifications and settings – настраиваем уведомления и синхронизацию с другими устройствами
  • My connections – связываем аккаунт в Notion с профилями в GitHub и GitLab по желанию
  • Русскоязычной версии у сервиса нет, поэтому Language & region пропускаем



В меню «Settings» блока «Workspace» заполняем поля:

  • Name — заголовок рабочего пространства
  • Icon – аватар (эмодзи, иконка или загруженная картинка)
  • Domain — нажмите «Set your own» и придумайте собственное доменное имя, которое будет присвоено вашему рабочему пространству на Notion.so



Закончив базовую настройку, добавим страницу-шаблон будущего портфолио:

  1. В меню слева нажимаем «Templates»

  2. Выбираем в раскрывающемся списке сверху «Work»
  3. Кликаем пункт «Design Portfolio» в подгруппе «Design» (легко найти в строке поиска)
  4. Нажимаем «Get Template»
  5. Готово! Внизу списка страниц вашего рабочего пространства в левой части экрана добавился пункт «Design Portfolio», которую мы будем редактировать



Оформляем страницу портфолио


Пусть вас не смущает «дизайнерское» название странички-шаблона. Чтобы его изменить, наведите курсор на пункт «Design Portfolio», нажмите на «...», выберите «Rename» и введите собственный заголовок.

Сделайте портфолио оригинальным и запоминающимся, настроив:

  • Обложку
    Нажимаем «Change cover» и выбираем изображение (из галереи или Unsplash), указываем ссылку на любую картинку в интернете или загружаем свою обложку. Позицию настраиваем кнопкой «Reposition»


  • Аватар
    Можно установить иконку, эмодзи, свое изображение или убрать этот элемент. Аватарка будет использоваться в качестве значка страницы рядом с ее названием во вкладке браузера
  • Текст-приветствие
    Кратко опишите, чем вы занимаетесь, на чем специализируетесь, где обучались, какие проекты или работа вас интересует, предложите читателям перейти к следующему разделу и ознакомиться с выполненными проектами



Наполняем галерею и публикуем портфолио


Ключевой момент — настройка галереи проектов. Чтобы приступить к ее оформлению, нажмите на первую карточку блока «My projects» и укажите основные параметры проекта, который хотите показать:



  • Название
  • Сроки выполнения
  • Теги, например Frontend, Java Script, React, Angular, Web-разработка
  • Ссылка на готовый сайт, приложение, репозиторий на GitHub, папку на Google.Drive
  • Добавляйте через «Add properties» другие параметры, которые считаете важными



Теперь спуститесь ниже и опишите проект подробно. Шаблон предлагает 3 блока: «The idea», «The process», «The design», но вы можете добавлять новые и удалять лишние блоки, переименовывать и редактировать их содержимое по своему вкусу. Можно вставлять текст, изображения, фрагменты кода, списки, таблицы и другие элементы в любой последовательности. Главное, чтобы в итоге вся информация была четко структурирована и легко воспринималась даже при беглом просмотре.

Обязательно указывайте при оформлении кейсов:

  1. Название проекта
  2. Бизнес-цели заказчика разработки
  3. Цели и задачи проекта
  4. Использованные инструменты
  5. Этапы реализации проекта
  6. Конечный результат (были ли достигнуты цели разработки, что получил клиент)
  7. Ссылку на готовое приложение, сайт, онлайн-сервис, репозиторий

Проделайте то же самое с каждым проектом, который хотите продемонстрировать публике. Теперь остается указать внизу свои контакты и ссылку на резюме. Готово!

Чтобы опубликовать готовое портфолио:

  1. Вверху справа нажмите Share
  2. Выберите Publish – Publish to web
  3. Установите разрешения для других пользователей
  4. Нажмите View Site
  5. Все! Копируйте ссылку из браузерной строки и показывайте своё портфолио потенциальным работодателям и заказчикам



Заключение


Мы описали простой, но не единственный способ создать портфолио разработчика в Notion. Здесь можно дублировать и настраивать под себя другие бесплатные шаблоны (вот отличный пример) или выстраивать страницу самостоятельно с нуля, выбор за вами. А чтобы готовое портфолио оставалось актуальным, регулярно дополняйте его новыми проектами, проверяйте правильность контактных данных и другой важной информации.
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
Frontend-разработчик
Подробнее о курсе
Читайте другие статьи
Полезные AI-инструменты для Frontend-разработчиков
Искусственный интеллект становится важной частью мира IT и жизни в целом. В новой статье разберемся, какие AI-сервисы уже могут использоваться Frontend-разработчиками и другими IT-специалистами для решения повседневных рабочих задач.
Веб-разработка
3504
Заголовки h1 — h6: в чем отличия и как правильно использовать
Теги h1-h6 играют важную роль в СЕО-оптимизации. Поисковые роботы формируют список топ-ресурсов, сканируя заголовки статей. Из статьи вы узнаете, как работать с заголовками и научитесь их правильному использованию.
Веб-разработка
23700
Качества лучшего веб-разработчика
Что отличает великих разработчиков от тех, кто не так хорош в этом деле? Почему одни попадают в самые крутые компании и имеют огромную ценность, а другие не способны пройти дальше телефонного собеседования?
Веб-разработка
5648
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!