Как построить портфолио Kickbutt

1656564976 kak postroit portfolio kickbutt

автор Али Шпиттель

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

Согласно GitHub, у меня есть личный сайт со своим портфолио с сентября 2016 года. Глядя на Google Analytics для моего сайта, я получил менее 300 просмотров в двух итерациях моего портфолио с сентября 2016 по октябрь 2017 года. Я был хорошим демотивированным, но я не сдался. ?

В октябре 2017 года я полностью переписал свой сайт и результаты были довольно драматичными. За первый месяц я получил 1861 год просмотр, и с тех пор я имел в среднем около тысячи просмотров в месяц.

Конечно, корреляция — это не причинно-следственная связь, но я думаю, что редизайн, безусловно, оказал положительное влияние. Это не совсем Facebook, но для сайта-портфолио, не предоставляющего зрителю ничего, кроме информации обо мне, я думаю, что эти цифры достаточно неплохие. ?

wKZto1kSw0ljF-0lsFO7ubnB55yvqoEegeoi
Личные посетители сайта

Что не сработало

Прежде чем перейти к моему текущему портфолио, которое мне действительно нравится, я хочу рассказать о своих первых двух сайтах.

Мое первое портфолио

Первым портфолио был сайт Jekyll, использовавший SASS и Pug. Я развернул его здесь для ностальгии. Посмотрите на проекты, все они из колледжа и большинство из них на C++!

HTH-VtC1Bw0svffIjWYUrvRGYTwqnlmnwZx1
Моя первая итерация – изучение CSS

Эта настройка была неоправданно сложной для фактического содержимого веб-сайта. Я использовал Jekyll, Materialize (фреймворк CSS), SASS и Pug для такой простой страницы. Я думаю, что настройка Gulp была длиннее, чем нужно фактически CSS. ?

Я просто переходил к написанию интерфейсного кода в любом качестве, так что это действительно была возможность для меня научиться использовать SASS и Gulp. Джекил мне тоже не нужен. У меня было перечислено всего несколько проектов и только одна страница.

Кроме того, на консоли появилась куча 404 для не найденных ресурсов. Будь я разработчиком, глядя на сайт, я бы безусловно относился к этому критически.

3pXkx9ShqDtKFzJk6ozW1RkPvMwXsoE0ogP4

Скриншоты для моих проектов не были великолепны. Все они были либо с кодом, либо обрезаны неоптимальным способом.

Bq-o7U-TmpATdUVhwCKWIqlPPvFSPAPlF8wV

Шрифты тоже были слишком мелкими, поэтому читать текст было тяжело. Мои значки в социальных сетях были не слишком заметны, а это означало, что они, вероятно, не имели слишком высокого уровня привлечения.

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

Мое второе портфолио

fjugwXZv3v2qPe-JCSK3osT51pgIMlFHGPSY
Моя вторая итерация – горошек 🙂

Второй итерацией был сайт HTML и CSS с движущимися горошек в фоновом режиме. Вы можете проверить это здесь. Признаюсь, что до этого портфолио у меня все еще есть мягкое место.

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

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

В общем, вы можете увидеть многие темы из этого портфолио в моем текущем.

Что сработало

В октябре прошлого года я начал с нуля и создал портфолио, которое было немного оригинальным. Ваше портфолио – это один из единственных сайтов, которые вы создадите, что является полным творческим проявлением вас без ограничений.

Итак, я пошел ва-банк – создал интерактивность, анимацию, да и все это было в портфолио.

TyKjfp49ULx9JsaMkN69Zi4-4p7Ok57zs0xM
Моя последняя итерация – The Works

Если нажать где угодно на домашней странице, появится случайная фигура. При наведении курсора на буквы они анимируются. Если вы наведете курсор на изображение на странице биографии, оно закрутится.

FcmtJ0IMVq1Fi2vyqp0VzoGqlN8ACNRCjAng

Я использовал Vue для этого портфолио, поэтому он легко переходит от страницы к странице. Я также увеличил размер шрифта, чтобы читатели могли быстрее и легче собирать информацию. Моя страница контактов содержит большие кнопки, чтобы следить за мной в других местах в Интернете.

Начальная версия этого дизайна была построена на HTML, CSS и нескольких строках JavaScript. Что касается моих технологических потребностей, это было вполне нормально. Я хотел перейти на Vue для собственных нужд в ремонте. Переконфигурированные настройки значительно упрощают добавление новых проектов. Мне также нравится плавная маршрутизация, предлагаемая Vue Router, вместо перехода на новую страницу.

Этот дизайн привлекает людей, и они остаются на сайте, чтобы взаимодействовать с ним. Кроме того, люди часто обращаются ко мне о моем сайте, что, если бы я искал работу, было бы здорово!

Что я мог бы сделать лучше

Вот список нескольких вещей, над которыми я мог бы еще поработать

  • Что касается эффективности преобразования людей в мои другие социальные сети, я мог бы иметь ссылку на мои другие социальные сети на каждой странице, а не только на страницу контактов.
  • Мне также наверняка нужно выделить свои проекты и выбрать несколько для представления, а не 26 личных проектов в списке.
  • У меня тоже нет скриншотов моих проектов. Это намеренно, но я, вероятно, мог бы получить больше трафика к ним, если добавляю скриншот проекта. Мне не нравились разные цветовые палитры, которые создавало бы скриншоты моей программы.

У меня не так много проектов, которые я считаю очень впечатляющими. В большинстве своем они довольно маленькие, и я создал их, чтобы чему-то научиться. Я мог бы дополнительно оптимизировать свой сайт, но мне очень нравится, где он находится.

Мои советы по созданию портфолио Kickbutt

  • Сделайте портфолио, которое будет подлинным выражением вас самих. Программирование во многом является творческой сферой, потому используйте свое творчество!
  • Сделайте интерактивным сайт, чтобы люди хотели оставаться на вашем сайте и запомнили это.
  • Купить доменное имя. Я перешел из aspittel.github.io в alispit.tel. Мне очень нравится играть на мое имя, и вы можете получить много доменов за довольно дешево. Я использую NameCheap, и он полностью стоит $8.00 в год за домен.
  • Убедитесь, что у вас нет ошибок консоли. Многие технические работодатели ищут это, поэтому убедитесь, что на вашем сайте нет ошибок!
  • Не используйте технологию только для нее. Если у вас суперминималистический личный веб-сайт, не используйте мощный фреймворк или библиотеку только для их использования. Наличие простого сайта, работающего очень медленно, является плохим опытом для пользователей.
  • Убедитесь, что ваш сайт адаптивен и работает на мобильных телефонах. Я также советую вас сделать так, чтобы он работал для пользователей, использующих разделенный экран.
  • Я отказался бы от использования шаблона, найденного в Интернете. Для меня это достаточно очевидно, когда они используются. Я понимаю их использование для людей, не являющихся веб-разработчиками, но если вы веб-разработчик, покажите свои навыки!
  • Используйте портфолио, чтобы рекламировать себя. Если вы хотите продемонстрировать работодателям некоторые навыки, убедитесь, что эти навыки представлены на вашем сайте. Я хочу, чтобы люди посещали мой блог, поэтому он размещен на моей домашней странице. Я тоже хочу больше выступать, поэтому у меня есть целая страница, посвященная моим выступлениям. Я больше не хочу писать код C++ профессионально, так что я забрал эти проекты со своего сайта.
  • Убедитесь, что ссылки не сломаны. В определенные моменты я был полностью виноват в этом, но это выглядит не очень хорошо, и тогда ваши зрители не могут увидеть это место!
  • Поддерживайте портфолио в актуальном состоянии. Я виноват, что делаю это не так часто, но я стараюсь, по крайней мере, каждые несколько месяцев добавлять новые проекты и разговоры на свой сайт.
  • Используйте критический взгляд и внимательно относитесь к дизайну. Я использую Sketch для создания проектов своих сайтов перед переходом к коду.
  • Подумайте о скорости страницы. Я провожу тестирование маяка на всех своих сайтах, чтобы убедиться, что они трудоспособны.

Несколько моих любимых портфолио

  • Тимо Беккер – Вы соединяете точки и создаете разные иллюстрации – просто играйте с этим, это отлично.
  • Бен Халперн – этот сайт такой незабываемый и веселый.
  • Юлия Хусаинова – Этот сайт действительно минималистичен, но передает суть.
  • Ник Папик – еще один простой, но красивый.
  • Робби Леонарди – резюме игры!
  • Динешь Пандиан – изменение цвета – это действительно крутая функция, и мне нравится минималистичный дизайн.

Ваш сайт

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

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

Первоначально опубликовано на zen-of-programming.com.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *