Please Critique my personal portfolio Site

[tr0y]

Okay, just checked the vatican's website... image maps!! So, I guess that whole Catholic rumor turned out not to be true. You never can tell on the internet, i guess.

[paparazi]

I really appreciate your help. This is actually the first forum that I register in. How can you design a layout or template using illustrator? Is it possible.

I will try to redesign the whole site using CSS/HTML.

Thanks

[paparazi]

I really appreciate your help guys. i will redesign my site in CSS/HTML. feel free to give me tips or advice on how to design site in CSS "Layout".

Thanks

[tr0y]

If you build a design in illustrator, you are still going to have to export it to an image file (png, gif) and then chop it up. I would suggest building a wireframe of the site first with html and css to get your chops up, then you can build the elements in whatever you like and just add some background images to your css.

[paparazi]

I was just playing with CSS just now, and I came up with this design, it's not done yet though. Website

Thanks for your help.

Please critique!

[tr0y]

Nice work. Now, make all the sub titles (h2 - h4) consistent. Remove the inline styles (style="align: center") and place them into css rules. Keep going, post when you have played more.

[paparazi]

Your website looks really good. What did you use to make the arrow move?

[tommylogic]

Your website looks really good. What did you use to make the arrow move?

<!-- Nav Arrow -->
<script type="text/javascript">

var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY) {
	var youAreHere = new Fx.Tween($(navWrap), { 
		duration: 1200,
		transition: Fx.Transitions.Elastic.easeOut  
	});

	$$(navElementsArray).each(function(item){  
		item.addEvent('mouseenter', function() { 
			var thisPos = item.getPosition(navWrap).x  + item.getSize().x - 50; 
			youAreHere.cancel();
			youAreHere.start('background-position', thisPos + 'px ' + arrowY + 'px'); 
		});
	});
	
	var currentArrow = function() {
		youAreHere.cancel();
		var activePos = $(activeID).getPosition(navWrap).x  + $(activeID).getSize().x - 50; 
		youAreHere.start('background-position', activePos + 'px ' + arrowY + 'px');      
	};
	
	//correct IE rendering problem (without this, it wont go to the active nav onload)
	var activePos = $(activeID).getPosition(navWrap).x  + $(activeID).getSize().x - 50;  
	$(navWrap).setStyle('background-position', activePos + 'px ' + arrowY + 'px');       
	
	//works to set image to starting position in other browsers
	currentArrow(); 
	
	$(navWrap).addEvent('mouseleave', currentArrow);	
}; 
	
window.addEvent('domready', function() {
	navArrowSlider(
		'nav_wrap', // ID of nav wrap
		'#nav ul li', // Array selector of nav elements 
		'active_nav', // ID of current nav element
		'50px' //  Background position y of background image
	); 	
}); 
</script>
<!--/Nav Arrow -->

[tr0y]

:D

Thanks Tommy,
Its mootools 1.2, IMHO the best javascript library around.

You can find the full documentation for it here:
Simple Animated Menu for Mootools 1.2 -- consider: open blog | Web Design, Development and Marketing

If you are interested in playing with it, you can get the zip with a css file, a basic html template, the mootools js and the menu js here:
http://www.consideropen.com/download...mated_menu.zip

The menu code is dedicated to the public domain, so you can do whatever you want with it.

[tommylogic]

yeah.. I figured it was a MooTools library. Fairly typical animation for them. I prefer moo over jQuery any day