index.html

<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>progtologist</title>
	<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta name="robots" content="all" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/flag-icon.css" />
	<link rel="stylesheet" href="css/font-awesome.css" />
	<link rel="stylesheet" href="css/academicons.css" />
</head>	
    
<body>

<!-- swap out for information about yourself -->
<div id="wrapper">
	<div id="about">
		<h1>Aris Synodinos</h1>
		<h2 title='Etymology: progtologist (noun)
	From progressive(adj) "characterized by advancement"
	and -logy "a speaking, theory, science"'>a.k.a. <i>progtologist</i></h1>
		<h2 style="color:#37BDFF">Social</h2>
		<div id="social"> 
			<a href="https://www.facebook.com/arissynod" target="_blank" class="fa fa-facebook" id="facebook" title="Facebook: ArisSynod"></a>&nbsp;
			<a href="https://twitter.com/progtologist" target="_blank" class="fa fa-twitter" id="twitter" title="Twitter: progtologist"></a>&nbsp;
			<a href="https://plus.google.com/+ArisSynodinos/posts" target="_blank" class="fa fa-google-plus" id="gplus" title="Google+: ArisSynodinos"></a>&nbsp;
			<a href="http://www.last.fm/user/eloydark" target="_blank" class="fa fa-lastfm" id="lastfm" title="LastFm: eloydark"></a>&nbsp;
			<a href="https://github.com/progtologist" target="_blank" class="fa fa-github" id="github" title="GitHub: progtologist"></a>&nbsp;
			<a href="https://bitbucket.org/Progtologist" target="_blank" class="fa fa-bitbucket" id="bitbucket" title="BitBucket: Progtologist"></a>&nbsp;
			<a href="https://gr.linkedin.com/in/arissynodinos" target="_blank" class="fa fa-linkedin" id="linkedin" title="LinkedIn: Aris Synodinos"></a>&nbsp;
			<a href="#" id="mail" class="fa fa-envelope" title="Email: arissynod (at) gmail (dot) com"></a>
		</div>
		<h2 style="color:#FF373B">Research</h2>
		<div id="research">
			<a href="https://scholar.google.gr/citations?user=SDElvTwAAAAJ&hl=en" target="_blank" class="ai ai-google-scholar" id="scholar" title="Scholar: Aris Synodinos"></a>&nbsp;
			<a href="https://www.mendeley.com/profiles/aris-synodinos/" target="_blank" class="ai ai-mendeley" id="mendeley" title="Mendeley: Aris Synodinos"></a>&nbsp;
			<a href="http://orcid.org/0000-0002-9217-909X" target="_blank" class="ai ai-orcid" id="orcid" title="ORCID: Aris Synodinos"></a>&nbsp;
			<a href="https://impactstory.org/ArisSynodinos" target="_blank" class="ai ai-impactstory" id="impactstory" title="ImpactStory: Aris Synodinos"></a>&nbsp;
			<a href="https://www.researchgate.net/profile/Aris_Synodinos" target="_blank" class="ai ai-researchgate" id="researchgate" title="Researchgate: Aris Synodinos"></a>
		</div>
		<h2 style="color:#52FF37">CV</h2>
		<div id="cv">
			<a href="CV_Aris_Synodinos_EN.pdf" target="_blank" title="CV English"><span class="flag-icon flag-icon-gb"></span></a>&nbsp;
			<a href="CV_Aris_Synodinos_GR.pdf" target="_blank" title="CV Greek"><span class="flag-icon flag-icon-gr"></span></a>
		</div>
	</div>
</div>
<!--include jquery & backstretch-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(function(){
     $(window).resize(function(){
         $.backstretch("bg.jpg");
      })
      .resize();//trigger resize on page load
});
$("#mail").click( function(e) {
    var username = "arissynod", 
          domain = "gmail.com";

    window.open("mailto:" + username + "@" + domain, '_blank');
} );
</script>

</body>	
</html>