I would increase the font size throughout -- start with something like 6 REM for Hi! I'm Natti. and decrease slightly elsewhere.
I would synchronize the fonts throughout. Use either one font or two that go together really well. Preferably sanserif for readability.
I would use fewer colors to simplify everything. Start with two and work your way up if super necessary. I would only use more than a very few if you are going for a colorful or rainbow theme, in which case you would use really bright or pastel colors!
I would not use a framework for a simple static site like this one -- I think it complicates things and using HTML/CSS/JS from scratch really displays that you have that foundation.
As a heads up -- CSS isn't case sensitive so using class names and ids with caps in them could cause conflict.
I would use either ems, rems, or px. I see a combination of the three in your code -- just be consistent!
I did something somewhat similar for my old portfolio site, if it helps for inspiration! The polka dots moved in the background!
I'll look into the root domain thing. I believe github only lets you host one site like that, but I have not used it yet.
I tried 6 rem. That is waay too big and in your face for my liking. But I will increase it to like 3 or 4 and scale appropriately.
The colors and fonts tips are invaluable. I'm not a designer but I definitely need to learn some fundamentals.
About vanilla vs frameworks, I really only pulled out Gatsby because we're switching to react at my job from angularjs and I wanted to practice with react syntax. But it definitely has been distracting as I've spent more time playing around with plugins and graphql than actual building :/
The css classname thing. Why would that cause a conflict if I name classes uppercase? The uppercase thing is a convention I saw in a react course for assigning a class to a component via css modules. But I do believe I broke the convention and was naming non component-container elements with a capital as well.
Rems vs ems vs px are fine to mix and match in the right situations no?
Thanks a ton for the in depth response. This is turning into a great learning experience.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Couple thoughts:
I did something somewhat similar for my old portfolio site, if it helps for inspiration! The polka dots moved in the background!
I'll look into the root domain thing. I believe github only lets you host one site like that, but I have not used it yet.
I tried 6 rem. That is waay too big and in your face for my liking. But I will increase it to like 3 or 4 and scale appropriately.
The colors and fonts tips are invaluable. I'm not a designer but I definitely need to learn some fundamentals.
About vanilla vs frameworks, I really only pulled out Gatsby because we're switching to react at my job from angularjs and I wanted to practice with react syntax. But it definitely has been distracting as I've spent more time playing around with plugins and graphql than actual building :/
The css classname thing. Why would that cause a conflict if I name classes uppercase? The uppercase thing is a convention I saw in a react course for assigning a class to a component via css modules. But I do believe I broke the convention and was naming non component-container elements with a capital as well.
Rems vs ems vs px are fine to mix and match in the right situations no?
Thanks a ton for the in depth response. This is turning into a great learning experience.