Введение в инструменты, которые я использовал, и размышления над тем, что я узнал
Недавно я обновил сайт своего портфолио!
Мое предыдущее портфолио было создано на WordPress и размещено на Bluehost. Я построил его, когда еще был новичком в программировании, поэтому подумал, что пришло время обновить его. На этот раз я решил создать его с помощью Next.js и разместить на Vercel.
Я хотел сосредоточиться на улучшении производительности, а также добавить более современный дизайн. У меня нет особого чутья в дизайне, поэтому я выбрал что-то простое. Посмотрите это ниже!
В этой статье я познакомлю вас с инструментами, которые я использовал для создания своего портфолио, и подумаю о некоторых уроках, которые я извлек в процессе.
Стек технологий
JavaScript и Next.js
Для создания своего портфолио я использовал JavaScript и Next.js. Я выбрал Next.js, чтобы воспользоваться преимуществами создания статических страниц.
Я много раз думал о том, использовать ли JavaScript или TypeScript. В конце концов, я остановился на JavaScript. Основная причина заключалась в том, что я хотел строить быстро, не беспокоясь о типах.
Призматический
Для хранения данных я использовал Prismic, безголовую CMS. На данный момент у меня было только два проекта, которые я хотел продемонстрировать в своем портфолио. Данных было не так много, поэтому я мог легко добавлять изображения и текст напрямую в код. Однако я подумал, что это будет хорошая возможность попробовать еще одну безголовую CMS.
Я думаю, что в Prismic есть гораздо больше, чем я пока не пользуюсь. Я с нетерпением жду возможности узнать больше об этом в будущем.
Попутный ветер CSS
Для стилизации своего портфолио я использовал Tailwind CSS. Это был мой первый опыт работы с Tailwind CSS, и я хотел понять, о чем идет речь.
Используемые библиотеки
SendGrid
Что касается контактной формы, я хотел иметь возможность получать сообщения от пользователей прямо на мою электронную почту. Сначала я попытался сделать это с помощью NodeMailer, но у меня возникли проблемы с его работой в производственной среде с Gmail.
Вместо этого я использовал SendGrid. У них есть API почтовой службы, который упрощает доставку писем. Я создал свою контактную форму, чтобы пользователи могли вводить свою информацию прямо на моем веб-сайте. Когда они отправляют форму, я получаю электронное письмо с их информацией.
Форма React Hook
Для обработки данных формы я использовал React Hook Form. Я мог бы использовать хук useState из React для создания управляемых компонентов. Но, как я уже упоминал ранее, я хотел сосредоточиться на производительности. React Hook Form сводит к минимуму количество повторных отрисовок, чтобы обеспечить лучший пользовательский интерфейс.
Framer Motion и React Intersection Observer
Я добавил несколько анимаций на главную страницу с помощью Framer Motion.
В разделе Навыки я использовал Framer Motion и React Intersection Observer, чтобы запускать анимацию, когда я прокручиваю экран.
React Иконки
Существует так много пакетов Icon, но я решил использовать React Icons из-за их разнообразия. Все логотипы, которые я использовал в разделе Навыки на главной странице, взяты из React Icons.
В частности, я использовал библиотеку Простые иконки. Если вы посетите их веб-сайт, они также имеют все определенные цвета для каждого логотипа.
Другие инструменты
МокапФотографии
В разделе проектов я создал фото-макет своего проекта на экране MacBook. Это было создано с помощью MockupPhotos.
Удалить BG
Затем я сделал фото макета и удалил фон с помощью removebg.
Вещи, которые я узнал
PurgeCSS
Этот проект был моим первым опытом работы с Tailwind CSS. Изучая Tailwind, я также познакомился с PurgeCSS. Когда я впервые развернул свое портфолио в Vercel, я заметил, что некоторые свойства CSS не работают в продакшене.
После некоторого исследования я нашел проблему. При динамическом написании имен классов нельзя объединять строки для создания имени класса. PurgeCSS не распознает это как имя класса и будет удален в производственной среде.
Доступность
Еще один инструмент, который я использовал впервые - Маяк. Доступность - важная тема в веб-разработке, и я хотел, чтобы мое портфолио было максимально доступным.
Проверка с помощью Lighthouse помогла мне исправить несколько простых ошибок SEO и доступности. Я не смог набрать 100 баллов по производительности (думаю, мой старый компьютер может быть причиной этого), но я был вполне доволен конечным результатом.
DNS
Поскольку мой предыдущий веб-сайт размещался на Bluehost, мне нужно было перенести доменное имя в Vercel. Это область, в которой мне не хватает знаний, и мне нужно изучить гораздо больше.
Если вам нужно переместить свое доменное имя с Bluehost к другому провайдеру, вы можете выполнить шаги здесь, как я справился с этой задачей.
Вывод
Есть еще кое-что, что я планирую изменить. Например, я хочу, чтобы страница статей и раздел обновлялись, когда я публикую новую статью на Medium. Но я хочу сохранить создание статической страницы. Думаю, это можно решить с помощью Постепенной статической регенерации. Это то, что я рассмотрю подробнее.
Но пока я доволен конечным продуктом!
Спасибо за чтение! Если у вас есть отзывы о моем портфолио, дайте мне знать, отправив мне сообщение в Twitter @chadmuro.
Дополнительная информация
