My Personal Portfolio - bit stuck

Code Feedback
1

Hello fellow coders,

I wanted to ask if I could get some feedback on my personal portfolio page. I seem to be getting a bit stuck when it comes to animating the buttons while scrolling and for some reason my thumbnail links aren’t working (so I cut them out, my guess it has something to do with the width of the centerpage).

First of, this is my page:

Personal Portfolio Page

My questions are these:

1: First of all I wanted to focus on buttons while scrolling when they are in the viewport. My idea was to write a function that would first see if (offsetTop <= getElementById.top). After that a function would change my button to focus. For some reason this isn’t working. Maybe someone has tips and tricks or helpful sites where I can find some of these functions to try out.

2: Secondly, I wrapped a linktag around the thumbnail images in the portfolio section. When I inspected the elements in codepen, for some reason it said the link was 0px by 0px. So I can’t add the links to it. Any tips would be great.

3: Last, what do you think about it? :smiley: I haven’t submitted this one yet. Accidentally deleted my earlier submission, so I started building one from scratch, which in my opinion looks better than the first. Any comments and tips would be great before I submit it.

Thank you for your replies! :smiley:

2

Basterhedde,

Good job on your portfolio page. I love how you have it auto scroll to the section when you click the buttons in the navigation. Clean scrolling. For your social icons, the image is not centered in the circle for some of the icons. You might want to look into using font-awesome to give you these icons without you having to do a circle and an icon and then add styling for it. Font-awesome will do this for you.

I had a question about your #2 item. I looked at the two images in your portfolio section and they do not have link tags on them. So can you tell me more about what you are asking?

Jennifer

1 Like
3

Thank you for your reply Jennifer. :smile:

My question #2 is as follows:

  • Now the link isn’t there, but it used to be:

<.a href-target-etc><.img src… Blabla><./a>
(without the dots :wink:)

For some reason the link isn’t wrapping around the image. When I inspect the elements of www.codepen.io, I see that the links width and height are both 0px. Although the image it is supposed to wrap, is the size I specified with CSS, it does not wrap around the image for some reason. My guess is that I didn’t define the width of my centerblock correctly (main page with info, contacts, etc). My guess it also causes the form issue I’m having. Any ideas why it is not working? Have been grinding my gears over it for the last couple of hours, to no avail. Thanks again.

Greets, Bas

4

It is working! The only thing I needed to do was put the main-page to the top of the HTML document! :smiley:

Link to my portfolio:

http://codepen.io/basterhedde/pen/xOERQZ/

Thanks for the help, everything is working now.

So what do you people think?

5

Looks good.
Great job !!

1 Like
6

well-made, good looking page.

1 Like