As I wanted to have all the information on one page for my portfolio, I decided to use JavaScript to animate the way to different areas on the site, rather than using straight anchor links which can often feel abrupt and take away from the flow of a web page. This site uses a lot of JavaScript effects, especially on the 'Portfolio' section where I hide and show the 'more information' boxes and dynamically change the tabbed content with JavaScript.
It is always a high priority of mine to ensure that users without JavaScript are never deprived of important information. Although it is becoming more wide-spread these days, I think it's important to remember the users who browse the web without it or without it switched on, so I always ensure my JavaScript degrades elegantly, with the JavaScript simply displaying data in a nicer way rather than being the only means of displaying it. For example, the 'more information' boxes are hidden in the JavaScript, rather than in the CSS, so they will always show if JavaScript is not enabled. I also use JavaScript to pull information from different pages for my 'tech talk' tabs, without the user leaving the main page; if JavaScript is off, they simply visit this page directly. To ensure that they are still viewing a valid page (with the proper DOCTYPE and body tags) if they view this directly, but without those tags pulling through if it is viewed within the tabbed area, I set a parameter at the end of the page link in JavaScript. If the parameter is there, only the content will be pulled through; if not, the full page code will show.
I also think it's important to only use JavaScript where it is needed: for example, the information that shows when you hover over the thumbnails in the gallery area of the portfolio is all done using CSS. The text sits inside a span inside the a tag and it is set to display on hover. The link is positioned relatively with the span inside it positioned absolutely, so I can control exactly where it appears within the thumbnail.
I also take into account how a web site will look with JavaScript off but CSS enabled (and vice versa). For the gallery area of the portfolio, I use JavaScript to set a class on each item: if JavaScript is off, the 'more information' boxes will spread out underneath the thumbnails, but if it is on, the CSS classes will ensure the boxes are in the exact centre of the page, and only show once the 'more information' link is clicked upon. I also made a point of coding a solution to 'close' any open boxes when a 'more information' link is clicked so the information boxes won't overlap. I feel this adds more usability, as visitors will not have to manually close any open boxes to read something new. (Go on, try it! Good, eh?)
I contemplated using a pre-made solution such as LightBox to show the web site preview images, however I felt that they didn't need anything too complicated and I didn't want my visitors to click through the web site previews without my commentary on the projects and my part in them. (And, since I'm so darn wordy, a little blurb under the image would be no use at all!) Therefore, I decided to code my own solution using elegantly degrading JavaScript and CSS. A link to the large version of the image is wrapped around each thumbnail, but if JavaScript is enabled, it will take this link off and instead resort to a function I set to run onfocus which creates an image, positions it at the top of the window, and sets a CSS class which darkens out the rest of the web site.