Автор оригинала: Andrei Zgirvaci.
Я хочу начать свой внештатный бизнес. Для этого я полагал, что мне нужен хороший портфолио, поэтому клиенты могут приготовить свои кошельки, когда они прокручивают его. 😅.
Проектирование
Потому что мне нравится процесс дизайна и я Не сосать его слишком много, я решил сделать это сам 😁
Для большинства дизайнерских работ я использовал Adobe XD, но для этого проекта я хотел попробовать figma, как кажется, он становится очень популярным среди дизайнеров. (теперь мне нравится больше, чем Adobe XD)
Вот некоторые ресурсы, которые я был вдохновлен: github.com, craig-roush-portfolio-template.webflow.io, rans-fancy-website.webflow.io, purrweb.com
Кодирование
Во-первых, я подумал, что WebFlow.com будет идеальным, поскольку сайт не выглядит слишком сложно. Но, потратив на 4 часа, выясняя лучшие имена классов для моих элементов, я выяснил, что я буду намного более продуктивным в моем прекрасном рабочем процессе Code VS. (Я был прав … 🤫)
Но это было не так легко … Потому что я специализируюсь на реактивном родном, я не строю веб-приложений в наши дни и в последний раз, когда я сделал, я использовал Bootstrap и jQuery. Я полностью забыл, как создавать отзывчивые конструкции и как использовать CSS в Интернете.
Сначала я подумал, что я могу просто построить его с помощью приложения React, но потом я вспомнил, что есть что-то вроде Next.js и Gatsby, которые довольно раскручиваются в последнее время. Итак, я решил посмотреть и посмотреть, о чем они. Я решил выбрать Next.js, как я не вижу GATSBY так много в моем твиттере. (Присоединился к грудье … 😅)
Кроме того, для укладки я решил пойти с другим выбором корма в твиттере. (Хвост) 🤷♂️
Помимо шуток, Next.js и Tailwind – это довольно простые инструменты, которые я нашел, может принести пользу моему сайту много (поколение статического сайта) и в то же время я мог бы узнать что-то новое …
Я потратил около 4 дней, пытаясь узнать Next.js, Tailwind, последних добавок CSS, как сетку, и как сделать градиентные тексты, такие как на Github.com.
Строительство фактического сайта было не слишком сложно. Большую часть времени я провожу в документации в хвостовую ветку, пытаясь запомнить имена классов.
Одна вещь, которую я провел довольно некоторое время, была эта часть:
Я не мог выяснить, как повернуть текст справа от изображения и в то же время держать обертку об этом (из-за преобразовывать текста) для отзывчивых целей позже.
После нескольких часов Googling и Stackoverflow мне удалось найти решение. Мне нужно было добавить высоту текстового элемента на ширину родителя, как так:
+ 1.25rem)' }}> ......
...
Где 1.25rem это высота текстового элемента
Демонстрация
На момент написания этой статьи я пока не сделал свой сайт полностью отзывчивым. Но вы уже можете увидеть результат WIP здесь: andreizgirvaci.com.
Далее в списке – сделать его отзывчивым для телефонов и купить прохладную домен. На данный момент я все еще пытаюсь выяснить, что мне делать с изображением своего профиля при просмотре сайта по телефону. (Дайте мне знать в комментариях, если у вас есть какие-либо предложения, это будет высоко оценено! 😊)
Кроме того, если у вас есть какие-либо другие вопросы о том, как я реализовал некоторые части сайта, не стесняйтесь спрашивать.
P.S 🤫 Я недавно начал подкаст, называемый тревожным разработчиком, где я разделяю свои знания о том, как уменьшить стресс, стать более присутствующим и продуктивным в качестве разработчика. Я хотел бы услышать ваши мысли на этом
Помните, вы достойны, вы любили и имеете дело! Хорошего дня! ❤️.