My heads getting to big. Please tear my Portfolio apart

As said in the title I finished my portfolio recently. Its come a long way from the ugly crap I tried to make yesterday. Anyway I want to keep improving it but I honestly can’t tell what else is wrong with it. So I want to ask the more experienced to take a look at my Pen and “Tear it apart”. Any kind of improvements or tips would be much appreciated as well as criticism.


I think someone a little more advanced on the coding side can give you specific advice on any coding questions you may have. But, what I can give is some thoughts on design, if it helps.

So in your comments you say that you will probably add more than one font - my advice is to try to limit it to two, say, one for the headings and one for the body. There are a couple of reasons for this: too many fonts can be distracting, and with each additional embedded font, there is additional ‘weight’ on the page, which in some instances can affect page load speed. I think the rule of thumb is that everyone on a page needs to have loaded within 6 seconds.

I prefer the colour palette in the original rather than the alternate yellow-led one, because they seem to complement each other a bit better. I’m not the greatest judge about palettes, so I use this site to see if I’m ‘kinda’ in the ball park: Paletton

Another very helpful site for me is the Web accessibility in mind colour contrast checker, which helps with font colour and background colour choices. It’s just a nice little tool to ensure that most people can read what’s on the site.

I’m wondering if it might be a good idea to put some opacity on the background of the navigation bar as you scroll down the page so that it doesn’t look like the page text and navigation text are knocking into each other, but rather passing each other in their own lanes. I’m not sure which is the preferred solution, but I’ve seen some people suggest this: background-color: rgba(255,255,255,0.5); and others use this background-color: transparent;

In terms of the centre-aligned content, I would perhaps add some margins on the left and right sides so that the content doesn’t bleed outside of the navigation bar. That is, if the Home tab starts 30 pixels into the page, then the content should also stay within that 30px boundary so that everything looks aligned to a container as we scroll down the page. Alignment helps with readability, at least in western cultures, because we are used to reading text that conforms within a grid-like pattern, e.g. text books, newspapers, scrolling down our phones etc.

Anyway, I hope some of that information helps, or at least gives you some cool websites to bookmark :slight_smile:


Thanks for the feedback! I’ll work on that now. Any more is more than welcome.