profile image
mini profile section

Name: George Hatzi | Age: 35 | Location: London | Occupation: Front End Web Developer


Languages: HTML, XHTML, XML, XSLT, CSS(3), JavaScript

Understanding: jQuery, ASP, JSON

Working to Improve: PHP, HTML 5 + all of the above

Programs: Photoshop, Fireworks, Illustrator, Flash, Dreamweaver, Notepad

<p class="intro">

Over the past few years I have worked on numerous projects ranging from standard HTML pages to complicated XSLT ones, Blogs, Adverts, jQuery datepickers, Navigation menus, Google maps, Registration forms, Credit card forms, XML's and so on. I believe that I have been fortunate to learn so many different languages and that this has given me a great platform and an understanding about developing that I can use as I grow into the role as web developer. The wonderful thing about web developing is that you can be working with different languages and programs and then bring them all together to make the final master piece. Knowing that you are not limited to using a certain language to achieve your clients goals is a big plus for any keen developer.

</p>

about me section

I ended up in university studying Business Economics. After a year I realised that economics was not the subject for me so I dropped out. With no real idea of what I wanted to do, my only option was to find work sooner rather then later. I managed to find work selling trainers in a major sports shop. Although I managed to work my way up in the company, I got to the stage were I knew I had to do something else with my life. It just wasn't challenging enough nor did I find it rewarding for myself. I had to find a new path in life, sooo i decided to go get a part time job and return to studies. I began to look around at the various courses available in colleges and universities. I stumbled across a short course in Web Design and Dreamweaver... and the rest as they say is history.

Five or so years later I find myself with a diploma in web design and 3 years experience working for AboutRooms.com as a web developer. The majority of my knowledge and experience is based on front-end development, however I realise the importance of having as many tools as possible these days and therefore am working hard to improve my skills in other areas of development.

top of page
xperience section

I have three years experience working for AboutRooms.com based in Central London. There I worked on a number of different projects and web sites. While i was there we completely re-done the main site twice as well as the booking engine and the mobile site. Examples of some of my work can be seen below:

I worked with HTML, CSS, JavaScript, jQuery, XML's and XSLT mainly. The back-end developer in the company would set up the ASP pages, then I would load my pages into that passing in any parameters needed. Although im not an ASP or PHP developer I do have an understanding of the languages and can follow already made pages and construct basic ones.

My JavaScript and jQuery experience involves building jQuery date pickers, jQuery Navigation menus, facebox, fancybox, validating forms, sliding divs, hiding and showing divs, google maps, image maps, auto complete and other basic client side effects.

As well as the above I also got involved in some graphic designing were I created logos, adverts, competition images, map icons etc. Although not artistically gifted, i enjoyed working with the various design programs and feel confident using them.

<img src="..." alt="work snippets" onClick="loadFancybox();" />

work example 1 work example 2 work example 3 work example 4
/*mini map*/
            
function initialize() {
                
var latlng = new google.maps.LatLng(lat,lon);
var myOptions = {zoom:14, center:latlng, disableDefaultUI:true, mapTypeId:google.maps.MapTypeId.ROADMAP};          
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({position: latlng, map: map, title: hotel_name,
icon: '../../graphics/'+star+'star.png'});};
                
/*end off mini map*/             

/*options for datepicker*/        
                
var today = new Date(); 
	today.setHours(0,0,0,0);
	$(function(){$( "#datepicker" ).datepicker({
		defaultDate: 0,
		minDate: 0,
		maxDate: '+12m',
		dateFormat: 'dd/mm/yy', 
		numberOfMonths: 3,
		showOn: 'both',
		buttonImageOnly: true,
		buttonImage: 'http://myportfolio/example/graphics/calendar.gif'
			});
	});	
    
/*end off options for datepicker*/    
  
/*options for fancybox*/ 
    
	$(document).ready(function() {
		$(".map").fancybox({
			openEffect	: 'none',
			closeEffect	: 'none',
			width : 530,
			helpers : {
    				title : {
    					type : 'inside'
    					}	
    				}
		});
        
/*end off options for fancybox*/ 

/*hide/show message for email validation*/ 

if(emailField.value == null || emailField.value == '' || !filter.test(emailField.value))

		{
			document.getElementById("emailError").style.display = 'block';
			emailField.style.backgroundColor='#abd037';
			emailField.focus();
			document.getElementById("textError").style.display = 'none';
			textField.style.backgroundColor='#ffffff';
			return false;
		}

	else

		{
			document.getElementById("emailError").style.display = 'none';
			emailField.style.backgroundColor='#ffffff';
		}

/*end off hide/show message for email validation*/         

/*count node-set*/

<xsl:value-of select="count(node-set)" />

/*end off count node-set*/

/*looping*/
                            
<div id="tablist_top">
    <ul>
        <xsl:for-each select="navigation[@position = 'top']/link[@lng = 'EN']">
            <li>
                <a href="{@url}" title="{@title}"><xsl:value-of select="self::node()" /></a>  
            </li>
        </xsl:for-each>
    </ul>
</div>

/*end off looping*/

/*call template with various tests*/

<xsl:call-template name="cat_type"></xsl:call-template>
		
<xsl:template name="cat_type">
<xsl:param name="cat" />

    <xsl:choose>
        <xsl:when test="$cat = 1">
            <span class="category-type">1</span>
        </xsl:when>
        <xsl:when test="$cat = 2">
            <span class="category-type">2</span>
        </xsl:when>
        <xsl:when test="$cat = 3">
            <span class="category-type">3</span>
        </xsl:when>
        <xsl:otherwise />
    </xsl:choose>
    
</xsl:template>      

/*end off call template with various tests*/       
 
/*HTML*/
                 
<div id="container" class="left_corner">   
             
    <div id="header">
  
        <ul id="nav">
            <li><a href="#" title="link 1">Link 1</a></li>
            <li><a href="#" title="link 2">Link 2</a></li>
            <li><a href="#" title="link 3">Link 3</a></li>
        </ul>
        
    </div> 
    
    <a href="#" title="myportfolio logo">
        <img src="graphics/me.png" alt="myportfolio" height="250" width="250" border="0" class="logo" />
    </a>
    
    <div class="question q1 box_shadow">
        
       <h2>This is an <span class="unique_color">example</span>?</h2>
       
       <p class="indent">...</p>
                
    </div> 

</div>

/*end off HTML*/

/*CSS*/

body {

	font-size:1em;
	color:#FFF;
	margin:0 auto;
	background-image:url('../graphics/background_gradient.png');
}

a {

	color:#009999;
	text-decoration:none;
}

a:hover {

	color:#00FFCC;
	text-decoration:none;
}

.unique_color {

	color:#00CCFF;
}

.indent {

	text-indent:20px;
}

#nav ul {

	list-style-type:none;
	padding:0;
	margin:20px 0 0 0;
	font-size:1.1em;
}

#nav li {

	display:inline;
	margin:0;
}

#nav li a {

	float:right;
	display:block;
	margin:0 0 0 2px;
	padding:4px 6px;
	color:#FFF;
	background-color:#00CCFF;
	-moz-border-radius-topright:10px;
	-moz-border-radius-topleft:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-top-left-radius:10px;
	-khtml-border-radius-topright:10px;
	-khtml-border-radius-topleft:10px;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
}

#nav li a:hover {

	color:#00CCFF;
	background-color:#FFF;
}  

/*end of CSS*/         
/*HTML*/

<table id="tablename" border="0" cellspacing="2" cellpadding="0" width="100%" class="center_table results_table">  

<tr>
    <td colspan="2"> </td>
    <td colspan="2"><strong>Total</strong><span class="small_text"> (inc.tax)</span></td>
</tr>

<tr class="bk_colour">
    <td>
        <p>...</p>
    </td>

    <td>
        <div class="center">
            <a href="#" onclick="return false;" title="your value" class="viewrates">view rates</a>
        </div> 
    </td>
    
    <td nowrap="nowrap">
        <div class="center">£some value</div>
    </td>
    
    <td>
        <form name="form" action="http://somepage" method="get">
            <input type="hidden" name="mode" value="1"/>
            <input type="submit" value="Book-Now" onclick="splashScreen();"/>      
        </form>
    </td>
</tr>
    
</table>

/*end of HTML*/
top of page

A few images I designed a while back.

graphic example 1 graphic example 2 graphic example 3
contact me section

If you wish to contact me email me at georgechrishatzi@gmail.com

top of page