Мотивация
Итак, я решил создать свой простой сайт-портфолио. Я подумал, что gatsby — лучший выбор для этого, потому что сайт загружается быстро и позволяет мне использовать компоненты React, что здорово ❤️. Я хотел, чтобы этот сайт был немного уникальным, а это значит, что мне нужно было написать свой собственный css, и я выбрал стилизованные компоненты. Это был действительно хороший выбор. Делать стили повторно используемыми компонентами jsx очень удобно и, в конце концов, делает ваш код чище.
Идея
Моя идея этого сайта состояла в том, чтобы быть простым приложением с 2 разделами:
- Коротко обо мне
- Ссылки на мои соц.
Также я хотел, чтобы он был на английском и польском языках.
Итак, теперь мне нужно подумать, как его стилизовать. Я никогда не был «визуалом», поэтому я вдохновился темой Сары Драснер «Ночная сова», в которую недавно влюбился.
Кодирование
У меня есть идея, что делать, так что давайте приступим к кодированию. Это было довольно просто, но я столкнулся с проблемой, и я хотел бы показать вам, как я ее преодолел.
Во-первых, у меня была проблема с изображением, потому что с некоторыми стилями оно пропадало и не работало с компонентами стилей. Итак, я придумал это:
<Img
fluid={data.meImage.childImageSharp.fluid}
imgStyle={{
borderRadius: `50%`,
width: `170px`,
height: `170px`,
border: `3px ${foreground} solid`,
}}
style={{
marginLeft: `3em`,
height: `180px`,
}}
/>
Затем у меня возникла огромная проблема с правильной загрузкой шрифтов Google. Я попробовал плагин, который нашел на сайте gatsby plugins, но он не скомпилировался. Затем я попытался загрузить его в css, он работал с gatsby develop, но не с сборкой. Наконец-то я нашел нужный инструмент gatsby-plugin-google-fonts. Его нет на сайте Гэтсби, но он должен работать без нареканий. Я рекомендую этот плагин, если вы пытаетесь добавить шрифты Google в свой проект gatsby.
Резюме
Это было все, чем я хотел поделиться. Вы можете проверить мой сайт на nikodemdeja.pl. Обратная связь приветствуется. Спасибо за чтение. До свидания 👋.
