How Can I Make my Portfolio Look More Professional?

I was wondering what I could do to spruce up my portfolio. It’s come to my attention that it may not be the most professional looking site. I’m not exactly the best person when it comes to style. CSS is probably the weakest skill in my toolkit. Any advice on what I can do is appreciated.

And feel free to critique the projects I have up at the moment

Change font, change navbar color and add some padding to your navbar links. These are simple improvements to make your page look better quickly, but if you are aiming at back-end then i wouldn’t bother too much about design. Github is often enough to prove your skills as back-end developer.

Maybe I should aim more towards back-end. I’ve never been an artist haha. Always been more of a left-brain kind of person.

The one suggestion I have is you need to drastically reduce the size of that background gear image and any other large image you are using on your site. The gear images if 4.95 MB in size. On a slower connection, there is quite a time delay before the background loads. Just use any image editor out there to shrink it by at least 75%. You could crop the part you really want to show and then shrink the dimensions by 75%. That should drop the file size down below 200 KB.

One more thing I was wondering. I am just starting to learn React, but I noticed you have a minified version of what looks like React code. Why are you not linking to a cdn (or is that not possible)?

I’m using create-react-app, which deploys most of the boilerplate needed to run React.

I also made a project that runs React by using Babel and Webkit.

I actually have never used a CDN to get React running.

If you aim for a professional look I’d choose a totally different font.
The header font and the body font really don’t get well along together.

Also the colour palette you’ve choose is too much on the “extreme opposite” to be considered a professional look.

Finally, if I may be critic, your page has no animation or decoration whatsoever.
Clicking on the navigation does not have a nice animation but brings you straight to the section.
Hovering over projects does not triggers any animation/status change making the page looks “dead”.
Same goes for the social buttons, no status to inform me I’m hovering over there.

But that’s my opinion :slight_smile:

Here I’ll link some resources about material design. A set of “principles” and tools developed with design in mind.
You don’t have to implement those, I’m linking them mainly as inspiration about design principles.

same goes for; an awesome website where designer showcases their skills. I often browse it to get some inspiration. (I’ll never be good at designing at them, but at least I can take some inspiration)

dribbble’s project tagged as portfolio
Material palette generator
General materialdesign guide
Set of React component implemented with material in mind