Finished my Portfolio Page - would love your thoughts

I’ve been quiet on here due to a household full of COVID, but I’ve been plugging my hours in every day to get this done. I’ve got a bit of a retro colour scheme going on. It probably took me WAY longer than it should, but hopefully a year from now I’ll look back at this and laugh.

https://codepen.io/zara-knox/full/LYZWMym

Also, if anyone could help me out with why my grid has a wide right margin, I’d be super grateful. Grids are not my strong suit, Grid Garden or no Grid Garden.

Also an exercise in seeing how long I can put off starting Javascript.

Thank you!

6 Likes

@ZaraK That looks really amazing! Some people really can design a page nice and you are one of them! It is fully responsive, passes all tests, and looks very nice. I am very bad at grid and I can’t see a solution, but I would imagine it would have to do with some other padding or margin you put inside that grid or on some of those elements. I would say move onto JavaScript though as it is a really good skill to have. Happy Coding! :smile:

1 Like

Thank you - what lovely feedback, that’s very kind indeed! The most fun part for me is having a little think about which aesthetic to go for with each project.

Yes, I can’t for the life of me see what’s up with that terrible grid. Perhaps some fresh eyes tomorrow will help.

Javascript! I think it’s going to be tough, but hopefully FCC will break it down nicely.

Your portfolio looks good @ZaraK.

I’m sure you’re familiar with box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click.
Try adding the following to the top of CSS;

* {
  border: solid 1px lightgreen;
}

You’ll notice the .project-image is not centered within the .project-tile while the .caption is. It just shows more for the one on the right

1 Like

Damn it Roma, I wanna be like you when I grow up.

Thank you for this - fixed with margin: auto on .project-image. Thanks again!

1 Like

Almost spit out my bourbon laughing.

Glad to be of some help.

2 Likes

Nice looking page. Cobra Kai and Sega Genesis, you have good taste. :slight_smile:

I would suggest you stack the nav and project grid at small screen sizes (the nav overflows the page), maybe around 460px you can stack the elements (one column).

Great work, keep it up!

2 Likes

Great feedback, thank you. I’ve given that a good go - hopefully that does the trick :slight_smile:

https://codepen.io/zara-knox/full/LYZWMym

And yes, basing the projects around my interests really helps with motivation. Choosing the perfect Sonic sprites/writing from Johnny Lawrence’s bitter POV pleases me no end!

Yep, that does the trick.

I would suggest making the nav links larger. Think of mobile users and their fat fingers. In fact, I’d suggest you always give links enough padding so they have a nice hit area.

For your nav links and the hover effect, to not have everything jump on hover, you can add a transparent border by default and then toggle the color on hover.

Example
li a {
  text-decoration: none;
  font-size: 1.5em;
  color: #e86b1a;
  text-shadow: 2px 0px 2px #7a3c1b;
  
  display: block;
  padding: 0.8rem 0.8rem 0 0.8rem;
  border-bottom: 0.3em solid transparent;
}

li a:hover {
  border-color: #7a3c1b;
  border-radius: 6%;
}

You will likely have to move the last breakpoint up a bit so the nav stacks sooner (with the links being bigger).

1 Like

@ZaraK Nooice! I love the background image and the color combination! That sliding effect looks cool.

It looks like you are ready to post this webpage on a web hosting platform.
I suggest using a free web hosting for a static website such as the one you created.

Get a real domain name to make the page look professional. Free domain names are also available.

I suggest a different font for the id welcome-content and remove the text-shadow because I do not see the same text-shadow in other areas.

I think you should line up the four social media icons in a row in desktop mode.

1 Like

Brilliant, thank you. I’ve made those changes to the sm icons, and made the text shadow more uniform throughout. I’ve also changed the ‘Jost’ font to Nunito.

https://codepen.io/zara-knox/full/LYZWMym

Also, thank you for the kind comments! I love yellow/brown/orange/black combos for that 70s feel.

I don’t feel anywhere good enough to post to a hosting platform yet! I feel like my code’s cobbled together using sticky tape and bits of wire, so it definitely needs more work before I send it off into the world!

Again, thank you for your tips.

Hi @ZaraK!
I like your page very much. Maybe you can checked the contrast, cause the section about on my mobile doesn’t show good (maybe the font-size ia small but I bet on contrast). I put a screenshot here.
And maybe you would like to do hamburger icon for mobile? Cause the navbar gets really big in height (you can see it on screenshot).
And your icons for social media on mobile are a little bit big in comparison with other elements (with section About for example).
Sorry, I just wanted to help cause I really liked your page.

1 Like

Hi, I agree! Def not happy with the About colouring or the massive nav at the top. Thanks for your feedback!

1 Like

Thank you for this - def need to consider those fat fingers, mine included. Will have a go at what you’ve suggested.

Nicely done, keep up the good work.

1 Like

Right, fixed that About section and reduced the size of the social media SVGs. I was researching how to make a hamburger menu instead of the unsightly large column nav on mobile, but the most common CSS method seems to use pseudo elements with absolute/relative applied, and my skills are too elementary to apply that to the flexbox mess I’ve created. I think I’ll have another go at this with fresh eyes/more experience under my belt later on, as I’m well and truly burned out on this particular project!

https://codepen.io/zara-knox/full/LYZWMym

Thanks again for your feedback.

2 Likes