🤨 Что это?

Это мой новый сайт! За основу взял этот проект nuro.dev, добавил новый технологического стек, который я выбрал на основе того, что я узнал и использовал за последние несколько месяцев / лет.

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

❓ Почему

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

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

Поэтому, когда прошло несколько лет с момента запуска моего последнего сайта-портфолио, я решил поработать с чистого листа.

🔨 Технологический стек

Проект построен с использованием следующих инструментов и фреймворков:

• ⚛️ React / Preact (For Production)
• 💪 Next.js
  • 🔍 next-seo
  • 🌙 next-themes
• 👩‍🎤 EmotionCSS
• 💄 Twin.macro (For Tailwind CSS)
• 🗼 Tailwind UI
• 🪶 Feather Icons
• 🗄️ Hookstate
• 👍 react-use

🤏 Вьюшное прошлое

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

Вскоре я понял что Vue это не то, что мне нужно, сойдя с протоптаного пути новичка стало не понятно куда расти дальше, я отложил vue примерно на год и занялся учебой, к концу учебы в техникуме я решил снова заняться программрованием и вернуться на Vue, но уже было тяжело всё вспоминать и начинать заново я решил снова попробовать React и мне он сильно понравился.

✨ Особенности

⚛️ Preact

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

В общем, мой проект Next.js настроен на замену React на Preact в производственных сборках.

webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
        Object.assign(config.resolve.alias, {
            'react': 'preact/compat',
            'react-dom/test-utils': 'preact/test-utils',
            'react-dom': 'preact/compat',
        });
    }

    return config;
},

📖 Блог

Как вы можете судить по тому, что вы сейчас читаете это, у меня теперь есть блог! 🎉

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

📋 Проекты

Моя новая страница проектов была переделана для использования рендеринга на стороне сервера с очень уникальной целью. На странице будет показано избранное количество проектов, которые находятся в открытом доступе на моем репозитории GitHub. Однако способ их отбора очень уникален.

Каждый запрос, сделанный к этой странице (если он еще не кэширован), возвращает новую страницу, отрисованную на сервере, которая впоследствии гидратируется на клиенте (как и все SSR). При выполнении рендеринга, сервер получит все мои доступные репозитории GitHub и затем отфильтрует их на основе ряда фильтров. К ним относятся следующие:

• Репозиторий не архивирован
• Содержит тему портфолио в метаданных хранилища.

Затем мы удаляем суффикс emoji, используемый в описании хранилища (это обычная практика, которую я применяю для придания цвета 🌈), чтобы его можно было использовать в качестве иконки проекта, а описание возвращается с удаленным emoji. Остальные возвращаемые данные довольно стандартны (URL домашней страницы, URL репозитория GitHub и т.д.).

С помощью этого я могу обновлять содержимое страницы моих проектов, используя GitHub в качестве CMS. Все, что мне нужно сделать, чтобы добавить проект на страницу моих проектов, - это добавить тег portfolio к любому из моих репозиториев.

🕐 Таймлайн

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

Вот лишь некоторые из них, которые мне очень помогли:

• nuro.dev (взято за основу)
• jmswrnr.com
• maximeheckel.com
• phineas.io
• wojtek.im
• www.twanmulder.com

🔴 Дискорд статус

Я очень доволен тем, что получилось, и огромная заслуга в этом принадлежит @phineyes за его работу по созданию и размещению Lanyard, сервиса для демонстрации вашего присутствия в Discord через RESTful API или WebSocket.

Используя Lanyard, я смог создать виджет статуса и компонент(ы) индикатора, что означает, что пока я онлайн в Discord, любой может посмотреть, что я слушаю в Spotify, в какую игру играю или даже что я пишу, благодаря расширению Visual Studio Code, которое добавляет богатое присутствие в Discord.

🌙 Тема

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

🔈 Звук

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

Это небольшое дополнение, созданное с помощью use-sound, придает сайту глубину и делает его более интерактивным.

В настоящее время звук щелчка является единственным звуковым эффектом... Пока что.

♿ Доступность

Последней особенностью... Ну, вроде как особенность, но то, что должно быть на каждом сайте если он не сделан специально для пк - это доступность.

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

Вот некоторые из заметных функций/улучшений доступности:

Alt теги

Небольшое, но очень заметное дополнение - добавление тегов alt или aria-label там, где это возможно. Это относится ко всем изображениям и кнопкам. Таким образом, программы чтения с экрана смогут понять, что это за элемент, и прочитать его пользователю.

Основные моменты

В первую очередь я обратил внимание на работу Discord через пакет focus-rings и TailwindCSS, предлагающий новую систему стиля кольца, направленную на помощь в видимости и доступности фокуса.

Навигация по клавиатуре

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

Предупреждение

Несмотря на то, что я старался потратить много времени на то, чтобы добавить опции доступности и быть как можно более удобным, он все еще не совершенен.

Вот некоторые способы, которые я все еще хочу улучшить в конечном итоге:

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

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

Результат

И в результате всего этого мы получили конечный результат, который вы видите прямо сейчас!