Personal portfolio website help

Hello everyone, I am working on a personal profile and I am having trouble trying to add some javascript to my project. I want to add a feature that when a user rolls over the a word on the navigation bar, the information will appear on the same page. I have been using this gentleman site to try and do some research and I have been looking at the code on his page:

This is all I have toward my site, the link is:

I would appreciate any help (websites, youtube videos, explanations) and if you have anything negative please do not comment. ( I have been having an issue with that).

Thank you!!

The website you linked doesn’t appear to do the action you are describing with mouseover text, and it’s not really clear what you are trying to achieve. I would say to explore the various JavaScript functions for “mouseover” and see if that accomplishes what you seek.

I also noticed in your index.html file that you have a closing tag twice, and there are a few formatting issues (not errors, because they won’t break anything, but they do make the code harder to read). You could also convert your repo to a github.io site which might help you make your portfolio more visible, you can explore information about that on GitHub’s website.

1 Like

Thank you nothead for responding and giving me some information. I think I didn’t explain my situation correctly and after review, i didn’t explain a lot of it correctly :unamused: . On Jack Tomaszewski’s profile page ( the example I am using) he was able to have a user click on options in his navigation bar ( such as portfolio, my offer, contact me etc.) and the information would appear on the right side of the page. You are correct for having me search in the javaScript functions and that is where I am having my issues. I will clean up my code and try and make it a bit easier to read.

I see. Most websites have their navbars at the top, explore pretty much any website, even codecademy, and you’ll see this. He put his navbar along the left. What you are looking for isn’t Javascript at all, you are trying to build a normal navbar with links.

Thank you! After further research, I think he used React for his page. Either way, I will redo the page and Hopefully make it a little better. Thank you!

Hello! I think that nav a elements (or a elements in general) should behave like links because they ARE links… The behavior you are describing might be more suitable and expected for buttons. But whatever.
To do this I would advise replacing the anchor tags with button tags.
In your html file, create the sections/asides that will hold the new information (and id them) and in css set the display of those sections/asides to none and place them all in the same position. Also, add an id to each of the nav elements so we can refer to them in js. Create a css class called isVisible: .isVisible{ display: inline-block}
in your js file, get all of the nav elements by id: navElement1 = document.getElementByID(“id of nav el”);
create callback functions that handle the click events:
function contactMeHandler(){
// make the corresponding section visible.
document.getElementByID(“id of the contact me section”).addClass(isVisible);
}
bind click event handlers to each of the nav elements:
navElement1.addEventListener(“click”, callback) // first arg is the event type and goes in quotes. second is a callback function that you created earlier. Note that this solution displays the first section that corresponds to the nav element that was first clicked. Then the user has to reload the page to make all sections invisible again. There are ways around this though that I don’t want to type out rn.