Время для более современного образа.

Сеть движется быстро. Очень быстро. Созданный Facebook React, который является фреймворком №1 в мире, был выпущен всего 6 лет назад. Сейчас это, безусловно, самый популярный фреймворк, используемый фронтенд-разработчиками по всему миру.

И не зря. React быстрый, основанный на компонентах (находка для командных проектов) и, следовательно, очень многоразовый. Многие коммерческие проекты даже используют его в наши дни, настолько он популярен!

Я хочу сказать, что сеть никогда не стоит на месте. Какой-нибудь большой новый язык всегда не за горами, надеясь стать таким же большим, как React (Кажется, Go на правильном пути). И как разработчику полного стека я должен быть всегда на переднем крае веб-технологий. Вот почему я решил, что сейчас самое подходящее время для редизайна портфолио. Веб-сайт вашего портфолио — это демонстрация таланта, это то, что вы показываете работодателям, чтобы продемонстрировать свою работу, это платформа, которая позволяет вам демонстрировать все остальные ваши работы; поэтому он должен быть выдающимся.

Проблема

В своем нынешнем состоянии мой - не лучшая моя работа. Это было это5месяцев назад, когда я впервые выполнил первый редизайн, но с тех пор я многому научился, и пришло время отразить это на моем веб-сайте. Этот пост просто покажет, как появилась третья версия моего сайта-портфолио (antonwebb.me).

Они оба имеют свои плюсы и минусы. Я чувствую, что в версии 1 было слишком много слов на экране, а в версии 2 недостаточно. Кроме этого, версия 2 была намного сложнее и представляла собой огромный скачок вперед; яркие цвета, анимация, больше градиентов, предварительный просмотр приложений, кнопки исходного кода/живой демонстрации и значки кода. В редизайне я хотел бы сохранить эти элементы, так как они придают сайту больше жизни. Новые дополнения будут включать:

  • Новая «посадочная страница». Первое, что видит пользователь, заходя на новый сайт.
  • Более полная вводная страница.
  • Новый раздел предварительного просмотра проекта.
  • Лучшая отзывчивость и внешний вид на мобильных устройствах.
  • В целом более современный пользовательский интерфейс.
  • Быстрый способ добавления новых проектов.

В общем, буду переделывать все с нуля.

Время кодировать

Мой текущий сайт — это чистый HTML и CSS (SASS). Поскольку у меня за плечами несколько проектов React, я чувствую себя достаточно комфортно, чтобы использовать его для своего личного сайта. Кроме того, поскольку React основан на компонентах, будет очень легко просто добавить новый проект с помощью одной строки кода. Кроме того, React — это новая мода.

Теперь, когда решено, мне нужно придумать новый вид для всего. У меня будет 4 раздела: лендинг, обо мне, проекты и контакты.

Я всегда горжусь своей работой, и мне это очень нравится. Я всегда заранее трачу время на проектирование и создание каркаса того, как, по моему мнению, будет выглядеть мой проект, когда он будет готов (спойлер: он имеет тенденцию немного отличаться от конечного продукта), и я всегда добавляю свой вариант. на всем, что я создаю (Product Sans и Gradients, как правило, являются нормой)

Я также роюсь в Интернете в поисках вдохновения. Миллионы людей сделали то же самое, я всегда могу узнать кое-что из других сайтов-портфолио (а также то, что неделать).

На следующих изображениях показан процесс разработки всех 4 разделов, упомянутых выше.

Через 1 неделю все готово.

И без лжи, мне очень нравится, как получилось. Новый внешний вид кажется свежим и более точно отражает мой текущий набор навыков. Кроме того, мне удалось отметить каждый новый элемент, который я хотел добавить!

Новая целевая страница идет прямо к делу, с 2 большими кнопками для быстрого перехода к наиболее важным разделам (бонусные баллы за анимированный фоновый градиент!) Мой новый раздел «обо мне» также более полный, так как теперь это серия абзацы, а не только пункты. Раздел «проекты» также изменился, так как каждый проект теперь показывает увеличенное изображение (также показывает полное приложение, отображаемое на iPad, а не только фрагмент, а также скриншоты на iPhone для приложений, ориентированных на мобильные устройства), а также более короткое описание и немного меньшие кнопки. «Значки» остались там, так как мне нравится, как они выглядят, и они позволяют мне легко демонстрировать основной используемый язык. Поскольку я использую реакцию, и каждый отдельный проект выполняется с помощью компонента шаблона, теперь для добавления проекта требуется всего одна строка!

Отзывчивость была довольно серьезной проблемой в v2, и я рад сообщить, что все это было решено благодаря моему редизайну! На мобильных устройствах проекты теперь отображают изображение, а не скрывают его, и все было изменено, чтобы оно хорошо подходило для небольших экранов. Миссия выполнена!

Вы можете найти v1 здесь, а также v2 здесь.

v3 (редизайн) можно найти на antonwebb.me