Я перестроил свое онлайн-портфолио с нуля, используя React — вот чему я научился
Когда дело доходит до профессиональных онлайн-портфолио, легко подумать, что оно нужно только определенному типу людей. Например, может быть, есть фотограф, который хочет веб-сайт для демонстрации своих работ в Интернете. Это имеет смысл, потому что у фотографа обычно есть буквальное портфолио фотографий, которое он может показать миру. Однако времена изменились. Теперь имеет смысл иметь онлайн-портфолио независимо от того, кто вы и чем занимаетесь. По моему опыту, наличие онлайн-портфолио чрезвычайно полезно. Как инженер-программист, я только что создал новый, индивидуальный, чтобы продемонстрировать свою работу и интересы. Для создания сайта я использовал React + React Bootstrap, а развернул его с помощью Netlify. Это статья об общем процессе и извлеченных уроках!
Зачем делать онлайн-портфолио?
Онлайн-портфолио — это идеальный способ для людей описать свой опыт и интересы с большим количеством деталей и творческим подходом. Таким образом, онлайн-портфолио отличается от целей резюме или профиля Linkedin, которые по своей природе имеют ограничения с точки зрения доступного места, приемлемого формата и общей свободы выражения.
Существует несколько вариантов создания собственного онлайн-портфолио. Один из вариантов, который имеет смысл для большинства людей, — это использовать конструктор веб-сайтов без кода, такой как Wix или Squarespace, у которых есть множество личных шаблонов веб-сайтов. После создания вы обычно можете публиковать эти сайты бесплатно или платить немного больше в месяц за использование определенного доменного имени. Другой вариант, который я считаю действительно хорошим, — просто создать публичную страницу с помощью Notion. Это еще один бесплатный маршрут без кода, но результат, вероятно, будет выглядеть менее похожим на веб-сайт по сравнению с чем-то вроде Wix или Squarespace. Впрочем, это не имеет большого значения. Что действительно важно, так это то, что контент, который вы включаете на свой сайт, прост, понятен и служит той цели, которой вы хотите.
Вариант, который я выбрал, требует наибольшей работы, но по-прежнему не требует затрат и дает мне полную свободу в отношении того, как выглядит и действует онлайн-портфолио. То есть я кодировал свой сайт с нуля. Создание сайта с помощью пользовательского кода для моей конкретной ситуации, потому что, как инженер-программист, я хотел онлайн-портфолио, которое говорило бы само за себя. Это просто еще одна возможность точно продемонстрировать свои инженерные навыки, плюс это отличная практика для меня.
Много лет назад я создал свое первое онлайн-портфолио. Я использовал ванильный HTML, CSS и JavaScript вместе с интерфейсным набором инструментов Bootstrap. Я создал его в Glitch, платформе для создания приложений, которая в то время тоже была довольно новой. Я считаю, что личный сайт донес правильное сообщение с точки зрения моих проектов, статей, которые я написал, и многого другого, но под капотом было много возможностей для улучшения. В то время я все еще изучал лучшие практики веб-разработки. Как инженер, я прошел долгий путь с тех пор. Неизбежно пришло время для возрождения портфолио.
Создание нового портфолио
Чтобы перестроить свое онлайн-портфолио с нуля, я решил использовать React. React — это современная, популярная веб-библиотека, и упор на повторное использование и компоненты позволил бы мне красиво организовать сайт под капотом. А с Create React App будет легко быстро загрузить новый сайт для разработки.
Для дизайна и эстетики я использовал React Bootstrap, современный CSS-фреймворк. Это интерпретация Bootstrap специально для React, которая в основном использует преимущества пользовательских компонентов для простого создания элементов. Поэтому при использовании этой структуры основное внимание уделяется конкретным именам тегов, а не атрибутам.
Этот фундамент сам по себе уже был улучшением моего старого портфолио, поскольку старый сайт использовал только ванильные веб-языки и базовый Bootstrap. В этом оригинальном подходе не использовались какие-либо передовые библиотеки или фреймворки, и, честно говоря, некоторые из этих инструментов, доступных сегодня, на самом деле даже не существовали или не были так популярны в то время.
Преимущества нового подхода
По мере того, как я продвигался вперед к разработке самого сайта, я обнаружил несколько преимуществ. Компоненты React Bootstrap, которые помогли мне сэкономить массу времени на разработку, включают Container, Row, Col, Card, ButtonGroup, ButtonToolbar и Button. Например, эти компоненты позволили мне использовать сетку для отображения проектов, которые я сделал. Кроме того, использование этих компонентов помогло сделать портфолио удобным для мобильных устройств.
Еще один способ, которым я упростил код на новом сайте, — записать свой контент в виде объектов JSON в определенном файле, а затем использовать сопоставление JavaScript в компонентах для перечисления этих объектов. Я только что создал файл utils, содержащий JSON с информацией о моих проектах, статьях, рекомендациях по книгам и т. д., создал функции, подобные «get», для возврата этих объектов, а затем экспортировал эти функции для доступа к компонентам. Это огромное отличие от моего старого сайта, который буквально включал текст и код, смешанные вместе, и содержал контент для каждого отдельного элемента в гигантском списке. Фу!
Подход с сопоставлением объектов JSON выгоден по нескольким причинам. Во-первых, это позволяет мне максимально точно имитировать, как получить доступ к этой информации о проектах, статьях и многом другом из базы данных, а не из самого кода. Если в будущем я захочу создать базу данных, административный сайт и/или интеграцию с CMS, чтобы повысить уровень своего онлайн-портфолио, эта структура сделает этот переход более плавным. Функции «get», которые я использовал, в основном имитируют простые функции выборки, поэтому я их и включил (поскольку на первый взгляд их включать глупо). Отображение, выполненное в JSX, позволило мне отобразить этот контент, который, безусловно, должен быть динамическим, поскольку я работаю над большим количеством проектов, пишу больше статей и т. д. Действительно, чтобы добавить новый контент на сайт, все, что мне нужно сделать, это добавить новые элементы в JSON. Я могу сделать это вместо того, чтобы редактировать основной код React, и то, что рендерится в DOM, само позаботится о себе.
Чтобы добавить изюминку этому сайту, я написал несколько собственных пользовательских стилей CSS для добавления React Bootstrap. Это включало в себя такие вещи, как добавление анимированных цветовых градиентов в некоторые контейнеры с использованием ключевых кадров, а также добавление тонны эффектов преобразования масштаба при наведении. Я даже создал функцию рандомизации цвета, которую я использовал для добавления встроенного стиля фона к некоторым элементам, что означает, что цвет сайта рандомизируется каждый раз, когда к нему обращаются. Несмотря на риск дублирования цветов, который можно было бы улучшить, добавив в рандомизатор дополнительные параметры цвета, это сделало сайт более интересным. Все эти изменения улучшают общий пользовательский опыт. Я даже сделал связанные кнопки более красочными и интерактивными, а несвязанные кнопки стали серыми и менее интерактивными.
Я определенно воспользовался преимуществом многоразовых компонентов. Например, я сделал это для того, что я называю своими «медийными» рекомендациями. В частности, я рекомендую список книг и список подкастов в отдельных разделах, но я знал, что в моем портфолио эти разделы будут выглядеть почти одинаково. Поэтому я создал один повторно используемый компонент для всех этих разделов и просто передаю контент в качестве реквизита на уровне родителя (приложения). Это помогло избежать большого количества повторяющегося кода!
Публикация портфолио
Хотя портфолио было готово и хорошо выглядело в моем окружении, мне нужно было опубликовать его для всеобщего обозрения. Я рассматривал два варианта: Github Pages, Netlify и Vercel. Каждый из этих вариантов упрощает развертывание приложения React, но я выбрал Netlify по личным причинам. Я хотел получить больше опыта, изучая Netlify конкретно. Netlify может похвастаться рядом преимуществ, которые перечислены здесь. Я также хотел бесплатное довольно короткое доменное имя для сайта, которое, как я знал, сможет предоставить Netlify.
Netlify упрощает развертывание статических веб-сайтов, и вот как это сработало для меня. Я создал учетную запись Netlify, связал ее со своей учетной записью Github, а затем создал новый проект в Netlify. Затем в моем приложении React я выполнил команду npm run build, чтобы создать папку сборки. Эта команда помещает развертываемую версию сайта в одну папку. Затем в разделе развертывания нового проекта Netlify я просто открыл эту папку сборки с помощью Finder (у меня Mac) и перетащил ее в Netlify. Вот так и развернули сайт. В настройках сайта я отредактировал имя сайта, чтобы доменное имя Netlify было ближе к тому, что я хотел.
О, и если вы не хотите каждый раз выполнять процесс перетаскивания, есть еще один простой способ. Вы можете настроить свой код в репозитории Github и подключить этот репозиторий к Netlify. Вы можете настроить его так, чтобы каждый раз, когда вы фиксируете новый код в репозитории, Netlify автоматически собирал и развертывал эти изменения. Если вы не хотите использовать интерфейс командной строки для взаимодействия с репозиторием Github, я рекомендую использовать Github Desktop в качестве графического интерфейса.
Затем появилось новое онлайн-портфолио! Всякий раз, когда я вношу изменения в свое портфолио, я могу просто сделать это локально и создать новую папку сборки для перетаскивания в Netlify. Мне не нужно ничего делать через Github самому, что было бы совсем другой историей, если бы я выбрал маршрут Github Pages.
Будущие соображения
Мне нравится думать о том, как я мог бы улучшить свое портфолио. Одна из идей, которые у меня есть, состоит в том, чтобы включить больше визуальных доказательств из проектов, особенно для проектов, которые больше не публикуются в Интернете. Примером решения для этого может быть отображение логотипа или снимка экрана приложения, которого больше нет в магазине приложений. Я уверен, что есть много других способов улучшить портфолио в будущих итерациях в течение следующих нескольких лет. Я буду думать об этом.
Я надеюсь, что это дало представление о процессе создания пользовательского онлайн-портфолио с использованием React и основных выводах из этого опыта.
Спасибо за прочтение!
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
