Run all your pages through there and focus on fixing the errors first. Then, you should move on to UI improvements.
UI/UX improvements
1. Contrast
The number-one issue I would say your site currently has is color contrast.
I don't know if it's the Florida sunshine that's screwing me over (probably), but my eyes are having a hard time adjusting to the light gray color used on your site. Even so, Google Chrome says the contrast is sufficient 🤷♀️ So it's probably fine.
You do have color contrast issues with the green here, though:
2. Spacing
The landing page is very sparse and doesn't give me a good idea of what your site is about, until I visit your about page (nice song, btw). Consider using a narrower content area so it seems like there's more content on the page. It's like serving a small meal on a giant platter vs a tiny plate.
While we're on this topic, the navigation on desktop is a little cluttered:
Same goes for the project page—lots of empty space.
3. Projects
I'd include a brief description of your project and maybe a link to it. I was confused when I clicked the link and was taken to the same page! 🙂
(Forgive me if I misunderstood the intent here!)
4. Color choices
I would limit the number of colors used on the site to 2 at the maximum. Your about page has 4: 2 shades of green, 1 red, and the purple in the search bar. Fewer colors = more memorable website/brand.
5. Social media icons
Consider coloring in the Twitter/Facebook share buttons on your about page with the respective brand colors.
Bugs
The translation service doesn't work when I click the UK flag and logs an error:
Other than that, your site's off to a good start—good luck!
You could use auto left and right margins to center your page, or something like CSS grid with three columns (far left and far right columns being margin columns). Basically, as it looks, your page is too spread out horizontally. It'll look better and more compact if the horizontal spacing is reduced.
Gotcha! That's fine.
Ah, okay! In that case, you could tweak the background color to improve the contrast.
You'd just need to select the icons themselves, which in this case are pseudo-elements:
Same for the Facebook one.
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.
Sure!
First things first, I always recommend that people use an HTML validator like this one: validator.w3.org/nu/?doc=https%3A%....
Run all your pages through there and focus on fixing the errors first. Then, you should move on to UI improvements.
UI/UX improvements
1. Contrast
The number-one issue I would say your site currently has is color contrast.
I don't know if it's the Florida sunshine that's screwing me over (probably), but my eyes are having a hard time adjusting to the light gray color used on your site. Even so, Google Chrome says the contrast is sufficient 🤷♀️ So it's probably fine.
You do have color contrast issues with the green here, though:
2. Spacing
The landing page is very sparse and doesn't give me a good idea of what your site is about, until I visit your about page (nice song, btw). Consider using a narrower content area so it seems like there's more content on the page. It's like serving a small meal on a giant platter vs a tiny plate.
While we're on this topic, the navigation on desktop is a little cluttered:
Same goes for the project page—lots of empty space.
3. Projects
I'd include a brief description of your project and maybe a link to it. I was confused when I clicked the link and was taken to the same page! 🙂
(Forgive me if I misunderstood the intent here!)
4. Color choices
I would limit the number of colors used on the site to 2 at the maximum. Your about page has 4: 2 shades of green, 1 red, and the purple in the search bar. Fewer colors = more memorable website/brand.
5. Social media icons
Consider coloring in the Twitter/Facebook share buttons on your about page with the respective brand colors.
Bugs
The translation service doesn't work when I click the UK flag and logs an error:
Other than that, your site's off to a good start—good luck!
Thank you both for letting me know how to improve my website.
1) Thanks for letting me know about the contrast, I'll figure that out
2) How do I fix the spacing exactly?
3) This project is just a brainstorm of how it would look, but I am still working on projects. I appreciate the idea of adding description and link.
4) I thought to use these colors since it's the colors of the sudanese flag, maybe I should work on how to make it look better on screen
5) How do I do that exactly?
6) I'll try to fix the error
Thank you again!
You could use auto left and right margins to center your page, or something like CSS grid with three columns (far left and far right columns being margin columns). Basically, as it looks, your page is too spread out horizontally. It'll look better and more compact if the horizontal spacing is reduced.
Gotcha! That's fine.
Ah, okay! In that case, you could tweak the background color to improve the contrast.
You'd just need to select the icons themselves, which in this case are pseudo-elements:
Same for the Facebook one.