Portfolio Review -- Feedback

Hey, guys.

I’ve been studying web dev for quite awhile now and have got my personal page to place I’m comfortable with. I am constantly adding to it, but I’d like some feedback on it so far.

Specifically, how does it look on mobile, if you are viewing from one?
Also, does the CSS3 scroll-behavior: smooth work for you? I don’t think Safari supports it.
And lastly, how does the design feel to you? Over the last few months, I’ve really found myself interested in web design as a whole and I want my portfolio to reflect that.

Thanks for the feedback!

2 Likes

What’s with the writing in third person?

Cody Williamson is a front end web developer located in the North Alabama area. He has self-taught himself web technologies such as HTML, CSS, and JavaScript. Using his creative abilities, he can also design a beautiful product to help bring your product or business to life.

Have something in mind? Contact me on GitHub.

Someone is praising Cody, but then I have to contact that someone. Confusing :thinking:

Using scale to change size of elements with text is not a good idea, fonts just feel jittery (may be resolution/browser dependent, idk). I would go with just box-shadow increase/decrease.

2 Likes

Ahh, I thought it sounded funny. I’ll change it from third person to first. Makes more sense anyways. And thanks for the advice on scale. I’ll try out increasing the box shadow instead.

Copyright @ Cody Williamson

I guess “Copyright” is implied, but I’m not a layer.

And if you decide to keep it, you should replace @ with ©

Try to resize the window - the text on hero image breaks.

“Services” needs a breakpoint around 1000px, because that’s when the layout starts to break.

On mobile view there is no real reason to have top “Home” navigation link.

Removed the copyright already, just didn’t push that edit before I posted.
also made about me section first person.
I’m pretty sure I’ve got a breakpoint for the hero text, but I will recheck. It seemed to look fine on the window sizes in dev tools. found out why. I had line-height on my body tag. just removed it and added it to the specific elements.
fixed the services section.
Thanks again for the box shadow increase. Looks a lot smoother now.
So, are you suggesting I just remove that link on mobile? curious as to how I would do that.

Add class to particular li

<li class="home-link"><a href="#Home">Home</a></li>

and hide it on particular size:

@media only screen and (max-width: 800px) {
  ...
  .home-link {
    display: none;
  }
}

https://codepen.io/jenovs/pen/pYwEBq

Also on screensize 799px your navbar is always open.

ok fixed.

interesting about the navbar… not sure why its always open at that particular size.

Hey Cody,

Your website looks bloody awesome. I’m using it as motivation. One thing, would using height: 100vh; help make your sections/background image line up with screen heights?

1 Like

Thanks for the kind words. Ive still got a lot to learn, but it’s all starting to come together. Also, using vh as your unit of length helps with having a more scalable site. vh is relative to 1% of the the viewport height. So yes, it can be used to have your sections stretch to fill the height of the viewport. There is also the vw unit of length which is… well viewport width. Hope this helps. Go to w3schools vh playground to mess around with it.

I’ve heard it can be good to keep your website all within the same “container” so to speak. So right now your header has narrower margins/padding than your About Me section and maybe your Services section, too, though I can’t tell for sure. Visually, your site may benefit by making the about me section a little more narrow.

Also, something weird happens around 700px where you end up with less than 100% width on the right hand side. You can check it with Chrome Developer Tools. Also I just discovered the little tablet/mobile phone icon on the top left of the Chrom Dev Tools window which can also be super useful for checking how your website will look on various devices.

1 Like

Yeah that’s what I used when making my site responsive. I’ll take a look at putting everything in the same container.

I like the portfolio. Scrolling works well and design looks good. I visited mobile, everything looks good.

1 Like

Hi Cody,

Portfolio looks nice just a couple of things.
You mentioned not knowing if scroll-behavior worked with Safari. Go to the website https://caniuse.com to see what’s supported on the different browsers.

You should make your navbar fixed. A person gets the chance to click on it once and they they have to rely on scrolling.

1 Like

Looks Good Bro. Personally love the spacing.

1 Like

Great portfolio, man. Looks great! I just finished mine as well, so I’m enjoying finding inspiration in other’s concepts/ideas too. I like the theme, and the layout overall. Everything responds well; however, I do notice the bottom navigation bar isn’t centered when scaling the screen width down. Not sure how you have it set up, maybe some padding/margin issues there. Additionally, a very niche thing, would be to possible change the font in the comment/submission box, to match the font in “Name” and “Email” input sections. Just a thought! Very fond of your page, great job!

1 Like

Thank you! Will definitely make that change.