Personal Portfolio charleshuckins.com

Hello, I am putting together a personal portfolio to try and get internships in the Sacramento Area, and I was hoping to get a little bit of feedback before I publish it. I just finished the responsive web design certification so I know that I have a ways to go, but I figured it wouldn’t hurt to try! Anyhow, thanks in advance! https://codepen.io/charliehuckins/full/OwdrLg

*edited the page, I had hosted the images in google drive and forgot to set a couple of them as public.
Also, I published it because I was curious, and it seems I’ve broken something along the way. Any feed back as to why the codepen files don’t work when uploaded to cpanel would be super great! charleshuckins.com is where you can find the published version. Thanks in advance!

1 Like

I would try to add more transitions, but its not bad.

Just to be clear, transitions as in some sort of scrolling animation etc with the nav bar links? And thanks for the feed back! :blush:

Hi there,
I have seen your page twice, it’s pretty cool.
The only thing is that, in the section of About me, Change the color to a good attractive color.
Rest all is Excellent.
Great job.

Go to https://daneden.github.io/animate.css/, use animate.css to add a good effect to the text in ‘About Me’. If you can use javascript at all then use some to introduce smooth scrolling to your header navigation links. Add color and font-size transition on hover to use contact buttons in ‘Contact Me’. Besides links to facebook, twitter are not meant to cover soo much space or such a large part of the webpage. I know each section is 100vh because of freeCodeCamp, but you are done with that now. Think about converting the ‘Contact Me’ section to a small footer and remove flex from it so the icons are a fixed size, small and left aligned. Add a full width ‘Back to top’ button to the footer like the one in the footer of https://www.amazon.com/. Its very easy to make with css. Your links in the fixed header can also be left aligned. Go to https://tympanus.net/Tutorials/FixedFadeOutMenu/#top to make it much better looking.

Technically speaking, you’ve done a good job.

But for me, I’d prefer to see another color than that dark green (first section) and dark gray (second section) that follows it. (But, a background image with that color would look great).

Furthermore, In the second section, links are showing that (unliked) underline (for which a CSS property is a lot used to get rid of it: text-decoration: none) ; and also their color was not a good choice. (Dark & gray (Both are Dark. it’s is not so good to the eyes): However, Dark colors go better with white color.)

On top of that, the headline of your projects needs to be a little bit far from the top border of the div text.

And finally, be careful, the footer is not nicely made, and actually, that is the last thing one may notice. The last thing is very important as it is the part people/recruiters… remember the most.

My Rating:
Font: 10/10
Responsive: 10/10
Simple/Easy to Navigate/ Readable: 10/10
Colors applied to fonts : 6/10 (Headlines and ps except the main headline and its p)
Background Colors: 4/10 (first & second section);
Footer: 1/10;

I hope this was a helpful feedback.

Good luck.

Suggestions:

  1. Try this one instead of that dull green: background: linear-gradient(45deg, #075a07, #29e829); You’ll probably like it.

  1. I also suggest the following color for the second section instead of that dull gray: #ececec.

  2. I suggest applying white color to your project title and text: #ffffff and applying the following color to its background: #403f3f

  3. Give your title and text a padding of 15px: padding-top: 15px; and take off that opacity. It will look like in the following:

1

  1. Wrap the text at the end in footer elements and then style it with background color #403f3f already given to your project and apply #fff your fonts too.

Wow! Thanks for all of the feedback @clevious and @coderguy101! Lots of great stuff here, I’ll get to work and get back when I make some headway!

You’re welcome & Good luck :+1:

1 Like