Автор оригинала: FreeCodeCamp Community Member.
Али Сплитл
За прошедшие годы я несколько раз перестроил свой веб-сайт и внес изменения в то, как отображается мой портфель. В этой статье я делюсь своими личными советами и предоставим глубокий взгляд на то, что сработало, и что не помогло вам построить удивительное портфолио. Я также предоставим вам несколько ссылок на портфели других людей, которые я люблю.
Согласно GitHub, у меня был личный сайт с моим портфолио с сентября 2016 года. Глядя на Google Analytics для моего сайта, я получил менее 300 мнения на два итерация моего портфолио с сентября 2016 года по октябрю 2017 года. Я был красивой демотивирован, но я не сдался. ?
В октябре 2017 года я сделал полное переписать Мой сайт И результаты были довольно драматичными. Я получил 1 861 просмотров в первый месяц, и с тех пор я в среднем в среднем около тысячи хитов в месяц.
Конечно, корреляция не является причиной, но я думаю, что редизайн определенно оказал положительное влияние. Это не совсем Facebook, но для сайта портфолио, которое не предоставляет зрителя ни с чем, кроме информации обо мне, я думаю, что эти цифры довольно хорошие. ?
Что не работает
Прежде чем я доберусь до своего нынешнего портфолио, что я действительно люблю, я хочу поговорить о моих первых двух сайтах.
Мой первый портфель
Первый портфель был сайте Jekyll, который использовал SASS и мопс. Я развернул это здесь для ностальгии. Проверьте проекты, они все из колледжа, и большинство находятся в C ++!
Эта установка была излишне сложна для фактического содержания сайта. Я использовал Jekyll, материализуйте (CSS Framework), SASS и PUG для такой простой страницы. Я думаю, что настройка Группы была длиннее, чем фактические необходимые CSS. ?
Я просто перешел на запись кода Frontend на любой емкости, поэтому это была действительно возможность изучения для меня, чтобы использовать Sass и Gulp. Мне тоже не нуждалось в Джекилле. У меня только несколько перечисленных проектов и только одна страница.
Кроме того, в консоли для ресурсов не было найдено куча 404. Если бы я был разработчиком, глядя на сайт, я бы определенно был бы критичен этим.
Скриншоты для моих проектов не были велики. Они были всеми из кода, либо обрезаны неоптимальным образом.
Шрифты были также слишком маленькими, поэтому было трудно прочитать текст. Мои социальные иконы были не совсем самым заметным, что означало, что у них, вероятно, не было слишком высокой скорости взаимодействия.
Были некоторые вещи, которые я делал хорошо, хотя. Мне очень нравятся выделенные слова в биографии. Он рисует пользователю, чтобы посмотреть эти ключевые слова, даже если они не читают все био. Я также ценю, что сайт был отзывчивым, поэтому пользователи могут просмотреть сайт на экранах разных размеров. В настоящее время около трети моего трафика происходит из мобильных источников, поэтому важно помнить этих пользователей.
Мой второй портфолио
Вторая итерация была сайтом HTML и CSS с движущимисями точками в горошек на заднем плане. Вы можете проверить это здесь Отказ Я признаю, что у меня все еще есть мягкое место для этого портфолио.
Мне очень нравятся движущиеся пузыри, и как они менялись с пользовательским взаимодействием. Я также наслаждаюсь минимализмом сайта. Я думаю, что быстрые био на домашней странице было эффективным и хорошо выразили свои интересы.
Опять же, шрифты несколько маленькие и должны перемещаться на новую страницу HTML для просмотра любой информации о моей, вероятно, не лучший пользовательский опыт. Также, имеющие мои разговоры и мои кодовые проекты на одной странице заставляет его выглядеть несбалансированным и загроможденным.
В целом, хотя вы можете увидеть много тем из этого портфолио в моем нынешнем.
Что сработало
В октябре прошлого года я начал с нуля и построил портфель Это было немного из коробки. Ваш портфолио является одним из единственных сайтов, которые вы построете, это является полным творческим выражением себя без ограничений.
Итак, я пошел все встроенные интерактивности, анимации, вы называете его, портфель имел все это.
Если вы нажмете в любом месте на главной странице, появляется случайная форма. Если вы наведите курсор на буквы, они анимируют. Если вы наведите на мою фотографию на странице Bio, она вращается.
Я использовал Vue для этого портфолио, поэтому беспрепятственно переходит с страницы на страницу. Я также увеличил размеры шрифтов, поэтому читатели могли бы получить информацию быстрее и легко и легко. Эта страница контакта предлагает большие кнопки, чтобы следовать за мной в другом месте в Интернете.
Оригинальная версия этого дизайна была встроена в HTML, CSS и очень несколько строк JavaScript. Что касается моей технологии ходить, это было совершенно хорошо. Я хотел перейти к Vue для моих собственных нужд ремонтопригодности. Реконфигурированная установка делает добавление новых проектов намного проще. Мне также нравится плавная маршрутизация, который предлагает Vue Router, вместо навигации на реальную новую страницу.
Эта конструкция захватывает внимание людей, и они остаются на сайте, чтобы взаимодействовать с ним. Кроме того, люди очень протягивают меня о моем сайте, которые, если я искал работу, был бы потрясающим!
Что я мог бы сделать лучше
Вот список нескольких вещей, которые я мог бы работать над улучшением
- Что касается эффективности преобразования людей в мои другие социальные сети, у меня могут быть ссылки на мои другие социальные сети на каждой странице, а не просто контактной страницы.
- Мне также, вероятно, нужно понять мои проекты и выбрать несколько до функций, а не иметь 26 личных проектов.
- У меня также нет скриншотов моих проектов. Это намеренно, но я мог бы получить больше трафика для них, если я положу скриншот проекта на них. Мне не понравились разные цветовые палитры, которые добавляют в скриншоты моей программы.
У меня нет много проектов, которые я нахожу супер впечатляющим. По большей части они довольно маленькие, и я создал их, чтобы узнать что-то. Я мог бы дополнительно оптимизировать мой сайт, но на данный момент мне действительно нравится, когда он находится.
Мои советы по созданию портфолио кикбутта
- Сделайте портфолио, которое является настоящим выражением себя. Программирование – во многих отношениях, творческое поле, поэтому используйте ваше творчество!
- Сделайте сайт интерактивным, чтобы люди хотят остаться на вашем сайте, и они помнят его.
- Купить доменное имя. Я переехал из Aspittel.Github.io в Alispit.tel. Мне очень нравится игра на моем имени, и вы можете получить много доменов для довольно дешевых. Я использую NameChap, и это полностью стоит 8,00 долларов в год для домена.
- Убедитесь, что у вас нет ошибок консоли. Olot технических работодателей ищите это, поэтому убедитесь, что ваш сайт без ошибок!
- Не используйте технологию только ради этого. Если у вас есть супер минималистичный личный веб-сайт, не используйте мощную структуру или библиотеку только ради его использования. Наличие простых сайтов, который супер медленный – плохой пользовательский опыт.
- Убедитесь, что ваш сайт отзывчив и работает на мобильных телефонах. Я также рекомендую вам сделать его работать для пользователей, которые используют настройку с разделением экрана.
- Я бы вдали вдали от использования шаблона, найденного в Интернете. Для меня это довольно очевидно, когда они используются. Я понимаю, используя их для людей, которые не являются разработчиками веб-разработчиков, но если вы являетесь веб-разработчиком, поставите свои навыки!
- Используйте портфолио для рынка самостоятельно. Если вы хотите показать определенные навыки для работодателей, убедитесь, что эти навыки будут представлены на вашем сайте. Я хочу, чтобы люди посещают мой блог Так что у меня есть его на моей домашней странице. Я также хочу сделать больше говорить, поэтому у меня есть целая страница, посвященная моим переговорам. Я больше не хочу профессионально писать код C ++, поэтому я взял эти проекты от моего сайта.
- Убедитесь, что ваши ссылки не сломаны. Я полностью виновата в этом в определенные очки, но он не выглядит отлично, и тогда ваши зрители не видят этого пункта назначения!
- Держите свой портфолио на сегодняшний день. Я виновен в том, что я тоже не делаю этого, но я стараюсь хотя бы каждые несколько месяцев, чтобы добавить новые проекты и переговоры с моим сайтом.
- Используйте критический глаз и быть преднамеренным о дизайне. Я использую эскиз, чтобы составить мои сайты, прежде чем перейти к коду.
- Подумайте о скорости страницы. Я бегу Маяк Тестирование на всех моих сайтах, чтобы убедиться, что они являются исполнительными.
Несколько моих любимых портфолио
- Тимо Беккер – Вы подключаете точки и создаете разные иллюстрации – просто играйте с ним, это потрясающе.
- Бен Халперн – Этот сайт так запоминается и весело.
- Юлия Хусаинова – Этот сайт действительно минималистичный, но получает точку.
- Nik Papic – еще один простой, но красивый.
- Робби Леонарди – Игра резюме!
- Динеш Пандиян – Изменение цвета – действительно крутая функция, и мне нравится минималистский дизайн.
Твой сайт
Я люблю смотреть на другие люди портфолио и предлагая советы на них. Я все время комментирует поток обратной связи портфолио, когда я их вижу. Если у вас есть один, вы ищете отзыв, Tweet Мне ссылка на ваш сайт, и я посмотрю на нее и отправим некоторые отзывы! Или, если у вас просто потрясающий, отправьте это мне тоже! Я хотел бы добавить его в мой список избранных.
Также, если вам понравилась эта статья, Подписаться На мой еженедельный бюллетень, который содержит мои любимые ссылки с недели!
Первоначально опубликовано zen-of-programming.com .