❌Перед
Во-первых, в моем первоначальном портфолио была полностью статическая целевая страница.
Единственный способ, которым пользователи могли получить доступ к контенту, - это щелкнуть элементы навигации в правом верхнем углу, иначе у них останется впечатление, что сайт пуст, поскольку не было прокрутки.
✅ После
Во время доработки я сделал область приземления прокручиваемой, и теперь она позволяет мне выделять работы, которые я хочу представить больше всего.
Основная цель портфолио состояла в том, чтобы продемонстрировать проекты, которые я сделал, поэтому я решил продемонстрировать как изображения, так и функции для 3 проектов. Плюс еще 6 выделенных статей.
🔗 ЖИВОЙ пример
Кроме того, я также настроил свою CMS (Contentful), чтобы включить или отключить любой проект или статью в качестве выделения, просто установив флажок.
2. Визуальные карточки блога
❌Перед
Карточки блога первой версии состояли только из заголовка и описания без визуального представления статьи.
Очевидно, это не помогло развлечь читателя и удержать внимание посетителей. См. Исходную версию ниже:
✅ После
Во время доработки я сосредоточился на обложке с изображением, чтобы она не нарушала существующий макет карты, хорошо смотрелась на темном фоне и реагировала на мобильные устройства.
🔗 ЖИВОЙ пример
3. Анимированные карточки проектов.
❌Перед
Точно так же, как и карточки блога, карточки проектов также не включали визуальных элементов.
Это было особенно плохо для проектов, поскольку никто не хотел просматривать каждый проект, просто чтобы посмотреть, как он выглядит.
✅ После
Итак, я решил добавить изображение для каждого проекта.
Я расширил его еще больше, создав изображения в формате GIF, которые могли прописывать не только дизайн, но и основные функции.
🔗 ЖИВОЙ пример
4. Отдельная контактная форма
❌Перед
Функциональность контактов в начальной версии зависела от того, насколько хорошо пользователи настроили свои системы. Я использовал mailto в атрибуте href, который часто мог заканчиваться всплывающими окнами с просьбой настроить почтовый клиент.
✅ После
Во время доработки я создал независимый маршрут для работы с контактами. Я использовал response-hook-form для форм и Sendgrid для фактического почтового сервиса.
🔗 ЖИВОЙ пример
5. Пользовательская страница 404
❌Перед
В моем первоначальном блоге использовалась стандартная страница NextJS 404.
Технически пользователи были проинформированы о несуществующих маршрутах, хотя они выглядели слишком примитивно и не соответствовали основной теме портфолио.
✅ После
Я взял хороший SVG с Undraw.co, создал собственный стиль для страницы, создал настраиваемую информацию для предупреждений и добавил кнопку Домой, чтобы пользователи могли перенаправляться на главную.
🔗 ЖИВОЙ пример
6. Прочие мелкие изменения.
Во время доработки я также исправил стиль полосы прокрутки, скорректировал выделение кода, добавил кнопки доступа к исходному тексту и GitHub в проектах, отрегулировал отзывчивость для мобильных устройств и т. Д.
Я объединил ревизионную ветку в главную, и она развернута, так что вы можете проверить все портфолио вживую на madza.dev. Буду благодарен, если у вас будут какие-либо комментарии или дополнительные отзывы.
Мой главный совет из этой статьи - рекомендовать использовать все полученные отзывы. Вместе мы создаем лучшие продукты. И я считаю, что все мы учимся, делясь знаниями.
Писательство всегда было моей страстью, и мне доставляет удовольствие помогать людям и вдохновлять их. Если у вас есть какие-либо вопросы, не стесняйтесь обращаться к нам!
Подключите меня к Twitter, LinkedIn и GitHub!
Больше контента на plainenglish.io
