<!DOCTYPE HTML>
<html>
	<head>
		<title>Angelos Veglektsis - Informatics Engineer</title>
		<meta name="description" content="">
		<meta name="author" content="Angelos Veglektsis" >
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
		<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
		<link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
		<link href="/css/font-awesome.css" rel="stylesheet">
		<link href="/css/style.css" rel="stylesheet" media="screen">
		
		<!--[if IE 7]>
			<link href="css/font-awesome-ie7.min.css" rel="stylesheet">
		<![endif]-->
	
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="/js/modernizr.js"></script>
	</head>

	<body>
		<div id="wrapper">
			<div id="sidebar">
				<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<!-- <div id="logo"> <a href="/"><img src="img/logo.svg" alt="logo" /></a> </div> -->
				<nav id="nav" class="navigation" role="navigation">
					<ul class="unstyled">
						<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span></li>
						<li data-section="2" class=""><i class="icon-user"></i> <span>About</span></li>
						<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span></li>
						<li data-section="4" class=""><i class="icon-pencil"></i> <span>Social</span></li>
						<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span></li>
					</ul>
				</nav><!-- /nav -->
			</div><!-- /sidebar -->
			
			<div id="container">
										
				<section class="section" id="section1" data-section="1">
					<div class="container-fluid">	
						<div class="row-fluid">
							
							<div class="alt-image img-circle thumb">
								<img src="img/thumb.jpg" alt="Your Name" class="img-circle">
							</div>
							<div class="span6 intro">
								<hgroup>
									<h1>Angelos<br />Veglektsis</h1>
									<h3>Informatics Engineer</h3>
								</hgroup>
								<button class="btn-inverse" data-section="2">
									Learn <span>More</span>
									<i class="icon-circle-arrow-down"></i>
								</button>
							</div><!-- /span6 -->
							
						</div><!-- /row-fluid -->
					</div><!-- /container-fluid -->	
				</section><!-- /section -->
								
				<section class="section" id="section2" data-section="2">
					<div class="container-fluid">
						<div class="row-fluid title">
							<div class="span3">
								<h2>About</h2>
							</div><!-- /span3 -->
							<div class="span9 hidden-phone">	
								<hr>
							</div><!-- /span9 -->
						</div><!-- /row-fluid -->
						
						<div class="row-fluid desc">
							<div class="span8">
								<p>I am an informatics engineer living in Athens, Greece. I am currently working for some super special and secret projects.</p>

								<p>I offer a complete web solution to my clients. I can guide you through the early stages of project planning and research, help you with information architecture and user experience, design your website, and finally build the site for you.</p>
							</div><!-- /span8 -->
						</div><!-- /row-fluid -->
						
						<div class="row-fluid content hidden-tablet">
							<div class="span12 expand">
								<h4>Life Stats</h4>
								<div class="row-fluid">
									<div class="span4">
									
									<!-- CHART N 1 -->
										<script>		
										jQuery(document).ready(function( $ ) {
											// Triggering only when it is inside viewport
											jQuery('.knob-4').waypoint(function(){         		        		        
												// Triggering now
										        jQuery('.knob-4').knob();     
										        // Animating the value
										        if(jQuery('.knob-4').val() == 0) {	
											    	jQuery({value: 0}).animate({value: jQuery('.knob-4').attr("rel")}, {
											        	duration: 5000,
											        	easing:'swing',
											        	step: function() 
												        	{
													            jQuery('.knob-4').val(Math.ceil(this.value)).trigger('change');
													        }
												    	})
											   	}	        	   	        
									   	        }
										        ,{
										          triggerOnce: true,
										          offset: function(){
										            return $(window).height() - $(this).outerHeight(); 
										          }
										        }
									        );    
										});	        
										</script>

										<div class="skill">
											<input data-readonly="true"  data-fgcolor="#f1c40f" data-inputColor="#333" data-width="245" data-height="122.5" class="knob-4" rel="4" value="0" readonly="readonly" data-angleArc="180" data-angleOffset="-90" data-max="10" >
											<h4 class="visible-phone">4</h4>
											<h6>cups of cofee per day</h6>
										</div>
									<!-- END CHART N 1 -->
									</div><!-- /span4 -->
									
									
									<div class="span4">
									<!-- CHART N 2 -->
										<script>		
										jQuery(document).ready(function( $ ) {
											// Triggering only when it is inside viewport
											jQuery('.knob-65').waypoint(function(){         		        		        
												// Triggering now
										        jQuery('.knob-65').knob();     
										        // Animating the value
										        if(jQuery('.knob-65').val() == 0) {	
											    	jQuery({value: 0}).animate({value: jQuery('.knob-65').attr("rel")}, {
											        	duration: 5000,
											        	easing:'swing',
											        	step: function() 
												        	{
													            jQuery('.knob-65').val(Math.ceil(this.value)).trigger('change');
													        }
												    	})
											   	}	        	   	        
									   	        }
										        ,{
										          triggerOnce: true,
										          offset: function(){
										            return $(window).height() - $(this).outerHeight(); 
										          }
										        }
									        );    
										});	        
										</script>

										<div class="skill">
											<input data-readonly="true"  data-fgcolor="#f68e51" data-inputColor="#333" data-width="245" data-height="122.5" class="knob-65" rel="65" value="0" readonly="readonly" data-angleArc="180" data-angleOffset="-90" data-max="100" >
											<h4 class="visible-phone">65</h4>
											<h6>miles run this week</h6>
										</div>
									<!-- END CHART N 2 -->
									</div><!-- /span4 -->
									
									
									<div class="span4">
									<!-- CHART N 3 -->
										<script>		
										jQuery(document).ready(function( $ ) {
											// Triggering only when it is inside viewport
											jQuery('.knob-85').waypoint(function(){         		        		        
												// Triggering now
										        jQuery('.knob-85').knob();     
										        // Animating the value
										        if(jQuery('.knob-85').val() == 0) {	
											    	jQuery({value: 0}).animate({value: jQuery('.knob-85').attr("rel")}, {
											        	duration: 5000,
											        	easing:'swing',
											        	step: function() 
												        	{
													            jQuery('.knob-85').val(Math.ceil(this.value)).trigger('change');
													        }
												    	})
											   	}	        	   	        
									   	        }
										        ,{
										          triggerOnce: true,
										          offset: function(){
										            return $(window).height() - $(this).outerHeight(); 
										          }
										        }
									        );    
										});	        
										</script>

										<div class="skill">
											<input data-readonly="true"  data-fgcolor="#2c3e50" data-inputColor="#333" data-width="245" data-height="122.5" class="knob-85" rel="85" value="0" readonly="readonly" data-angleArc="180" data-angleOffset="-90" data-max="100" >
											<h4 class="visible-phone">85</h4>
											<h6>new clients this year</h6>
										</div>
									<!-- END CHART N 3 -->
									</div><!-- /span4 -->
									
								</div><!-- /row-fluid -->	
							</div><!-- /span12 -->
						</div><!-- /row-fluid -->
					</div><!-- /container -->
				</section><!-- /section -->	
				
				<section class="section" id="section3" data-section="3">
					<div class="container-fluid">
						<div class="row-fluid title">
							<div class="span4">
								<h2>Projects</h2>
							</div><!-- /span4 -->
							<div class="span8 hidden-phone alt">	
								<hr>
							</div><!-- /span8 -->
						</div>
						<div class="row-fluid desc">
							<div class="span8">
								<p>I have a network of developers and designers that I sometimes work with. If your web project is large enough, I can put together a team of expert developers and designers, to tackle the big stuff.</p>
							</div><!-- /span8 -->
						</div><!-- /row -->
						
						<div class="row-fluid content slide">
							<div class="span4">
								<img src="img/project01.png" alt="Project 01">
								<h6 class="hidden-phone">- VISIT THE PROJECT PAGE</h6>
							</div><!-- /span4 -->
							<div class="span4">
								<img src="img/project02.png" alt="Project 02">
								<h6 class="hidden-phone">- VISIT THE PROJECT PAGE</h6>
							</div><!-- /span4 -->
							<div class="span4">
								<img src="img/project03.png" alt="Project 03">
								<h6 class="hidden-phone">- VISIT THE PROJECT PAGE</h6>
							</div><!-- /span4 -->
						</div><!-- /row-fluid -->	
	
					</div><!-- /container -->
				</section><!-- /section -->
				
				
				
				<section class="section" id="section4" data-section="4">
					<div class="container-fluid">
						<div class="row-fluid title">
							<div class="span4">
								<h2>Social</h2>
							</div><!-- /span4 -->
							<div class="span8 hidden-phone">	
								<hr>
							</div><!-- /span8 -->
						</div><!-- /row-fluid -->
						<div class="row-fluid desc">
							<div class="span8">
								<p>Blogging is such an opportunity. I am sad to see people abandoning the chance to express, to connect, to build relationships. For me, the love of blogging (and what it means to me) is why I have been in the game so long. It is how I have met most of my current friends. It is how I have stayed sane when I was an employee, and how I center myself today as a creator.</p>
							</div><!-- /span8 -->
						</div><!-- /row-fluid -->
						<div class="row-fluid content">
							<div class="span4">
								<ul class="article-tags">
									<li data-blog="blog" class="current"><i class="icon-circle-arrow-right"></i>Blog</li>
									<li data-blog="dribbble"><i class="icon-circle-arrow-right"></i>Dribbble Shots</li>
									<li data-blog="instagram"><i class="icon-circle-arrow-right"></i>Instagram Photos</li>
						            <li data-blog="github"><i class="icon-circle-arrow-right"></i>GitHub Projects</li>
						            
					            </ul>
							</div><!-- /span4 -->
							
							<div class="span8 slide current" data-blog="blog">
								<div class="row-fluid">
									<div class="span6 expand">
										<h4>Blog Post 1</h4>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
										<div class="pull-right read-more">
											<a href="#"  rel="external">Read More <i class="icon-double-angle-right"></i></a>
										</div>
									</div><!-- /span6 -->
									<div class="span6 visible-desktop">
										<h4>Blog Post 2</h4>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
										<div class="pull-right read-more">
											<a href="#"  rel="external">Read More <i class="icon-double-angle-right"></i></a>
										</div>
									</div><!-- /span6 -->
									
								</div><!-- /row-fluid -->
							</div><!-- /span8 -->
							
							<div class="span8 slide" data-blog="dribbble">
								<div class="row-fluid">
									<div class="span6 expand">
										<h4>Shot 01</h4>
										<p style="text-align:center"><img src="img/d01.png" alt=""></p>
										<div class="pull-right read-more">
											<a href="#"  rel="external">Read More <i class="icon-double-angle-right"></i></a>
										</div>
									</div><!-- /span6 -->
									<div class="span6 visible-desktop">
										<h4>Shot 02</h4>
										<p style="text-align:center"><img src="img/d02.png" alt=""></p>
										<div class="pull-right read-more">
											<a href="#"  rel="external">Read More <i class="icon-double-angle-right"></i></a>
										</div>
									</div><!-- /span6 -->
								</div><!-- /row-fluid -->
							</div><!-- /span8 -->
							
							<div class="span8 slide" data-blog="instagram">
								<div class="row-fluid">
									<div class="span6 expand">
										<h4>Marcel Newman</h4>
										<p style="text-align:center"><img src="img/i01.jpg" alt=""></p>
										<div class="pull-right read-more">
											Read More <i class="icon-double-angle-right"></i>
										</div>
									</div><!-- /span6 -->
									
									<div class="span6 visible-desktop">
										<h4>Brutus The Boss</h4>
										<p style="text-align:center"><img src="img/i02.jpg" alt=""></p>
										<div class="pull-right read-more">
											<a href="#"  rel="external">Read More <i class="icon-double-angle-right"></i></a>
										</div>
									</div><!-- /span6 -->
								</div><!-- /row-fluid -->
							</div><!-- /span8 -->
							
							<div class="span8 slide" data-blog="github">
								<div class="row-fluid">
									<div class="span6 expand">
										<h4>Responsive Menu</h4>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
										<div class="pull-right read-more">
											<a href="#"  rel="external">Read More <i class="icon-double-angle-right"></i></a>
										</div>
									</div><!-- /span6 -->
									<div class="span6 visible-desktop">
										<h4>Bootstrap JQuery</h4>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
										<div class="pull-right read-more">
											<a href="#"  rel="external">Read More <i class="icon-double-angle-right"></i></a>
										</div>
									</div><!-- /span6 -->
								</div><!-- /row-fluid -->
							</div><!-- /span8 -->
																			
						</div><!-- /row-fluid -->
					</div><!-- /container -->
				</section><!-- /section -->
				
				
				<section class="section" id="section5" data-section="5">
					<div class="container-fluid">
						<div class="row-fluid title">
							<div class="span4">
								<h2>Contact</h2>
							</div><!-- /span4 -->
							<div class="span8 hidden-phone alt">	
								<hr>
							</div><!-- /span8 -->
						</div><!-- /row-fluid -->
						<div class="row-fluid content">
							<div class="span4">
								<h4 class="intro">Drop me a Line!</h4>
								<p>Enough about me, let s hear about you.</p>
								<div class="row-fluid alt">
									<h5>Facebook:</h5>
									<span><a href="https://www.facebook.com/angelix" rel="external">Angelos Veglektsis</a></span>
								</div><!-- /row -->
								<div class="row-fluid alt">
									<h5>Twitter:</h5>
									<span><a href="http://www.twitter.com/angelix" rel="external">@angelix</a></span>
								</div><!-- /row -->
							</div><!-- /span4 -->
							
							<div class="span8">
							
								<div class="row-fluid">
									<div class="span12">
									</div><!-- /span12 -->
								</div><!-- /row-fluid -->
								
								<form method="POST" action="#">
									
									<div class="row-fluid">
										<div class="span6">
											<div class="control-group">
												<label for="name" class="control-label">Name:</label>
												<div class="controls">
													<input class="span12" type="text" name="contact_name" id="name">
												</div><!-- /controls -->
											</div><!-- /control-group -->
										</div><!-- /span6 -->
										<div class="span6">
											<div class="control-group">
												<label for="email" class="control-label">Email:</label>
												<div class="controls">
													<input class="span12" type="email" name="contact_email" id="email">
												</div><!-- /controls -->
											</div><!-- /control-group -->
										</div><!-- /span6 -->
									</div><!-- /row-fluid -->
									
									<div class="row-fluid">
										<div class="span12">
											<div class="control-group">
												<label for="message" class="control-label">Your Message:</label>
												<div class="controls">
													<textarea class="span12" type="text" name="contact_message" id="message" rows="4"></textarea>
												</div><!-- /controls -->
											</div><!-- /control-group -->
										</div><!-- /span12 -->
									</div><!-- /row-fluid -->
									
					                <input type="hidden" name="save" value="contact">  
									<button type="submit" class="btn-inverse pull-right">
										Send <span>Message</span>
										<i class="icon-circle-arrow-right"></i>
									</button>
							</form><!-- /form -->
						</div><!-- /span8 -->	
						
						<div id="footer">
							<div class="row-fluid">
								<div class="span12">
									
								</div><!-- /span12 -->
							</div><!-- /row-fluid -->	
						</div><!-- /footer -->
					</div><!-- /row-fluid -->	
				</div><!-- /container-fluid -->
				
			</div><!-- /container -->	
		</div><!-- /wrapper -->		
	
		<!-- JAVASCRIPTS -->
		<script type="text/javascript" src="/js/waypoints.min.js"></script>
		<script type="text/javascript" src="/js/jquery.knob.js"></script>
		<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/js/main.js"></script>
	</body>
</html>
