My Personal Portfolio Webpage. Open to critcism!

Code Feedback
1

Here is my personal portfolio webpage. I’ve only been in freeCodeCamp for a week or so and I am proud of what I’ve done. Please, let me know if there’s anything I could have done better or more efficiently. It was a very difficult journey trying to make this page with nobody holding your hand, but in the end I feel like that’s the best way to learn how to code. I had to figure it out for myself and the information and skills I learned stuck better than someone telling me what to type. Thanks in advance for your criticism!

2 Likes
2

Just a quick note is that you don’t have any space below the fillers or around to explain your projects :slight_smile:
It looks nice, if a bit plain with those colours
Maybe try some pictures as backgrounds to spice things up?

3

Hi! take a look at your paragraph with class “about-text”. It has width: 700px and when you have a narrow viewport it breaks your layout

4

Thanks for the advice! Is there a better way to center the paragraph but not make it span the entire width of the page? Thats what I was attempting to do, but doesn’t adjust when you have a narrow view port. Any ideas?

5

Very nice. Only thing I’d add is a smooth transition to your sections rather than clicking a link and popping straight to it.

6

@joethemovie how do I do that? Is it just a bootstrap class?

7

You’ll need jquery to make it work.

Here’s a video that might help.
Also, check out this page.

8

Here’s a better explanation of the HTML setup.

Use a tags at the top of each section. Rather than writing

<a href="*section*"></> 
write 
<a name="*section name*"></a>.

These blank tags are what your nav is targeting.
Follow that guys tutorial as far as the jquery is concerned. You might have to write

event.preventDefault();

instead of

e.preventDefault();

Your nav should be:

<a href="#section name" >Section Name</a> for each section.

That’s pretty much it

9

For example, you can use percentages instead pixels. Try to use width: 70% instead of 700px. Also, you use Bootstrap - so you can use columns with offset. The percentage is the easiest way to do this.

10

@fremdev thank you! percentage was the perfect fix. I understand now because it’s size it now relative to the width of the screen. thanks again!

11

How did you get your code pen to display like that in the post? pretty fancy.