您最多选择25个主题
主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
329 行
15 KiB
329 行
15 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Marcel Haazen | Home</title>
|
|
<meta name="description" content="" />
|
|
<meta name="keywords" content="" />
|
|
<meta name="author" content="Marcel Haazen">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
|
|
|
|
<!-- Favicone Icon -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/flavicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/img/flavicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/img/flavicon/favicon-16x16.png">
|
|
<link rel="manifest" href="/img/flavicon/manifest.json">
|
|
<link rel="mask-icon" href="/img/flavicon/safari-pinned-tab.svg" color="#5bbad5">
|
|
<link rel="shortcut icon" href="/img/flavicon/favicon.ico">
|
|
<meta name="msapplication-config" content="/img/flavicon/browserconfig.xml">
|
|
<meta name="theme-color" content="#646464">
|
|
|
|
<!-- CSS -->
|
|
<link href="css/style.css" rel="stylesheet" type="text/css" />
|
|
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="js/ityped.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Site Wraper -->
|
|
<div class="wrapper">
|
|
|
|
<!-- Header -->
|
|
<header id="header" class="header">
|
|
<div class="container header-inner">
|
|
|
|
<!-- Logo -->
|
|
<div class="logo">
|
|
<a href="index.html">
|
|
<img class="logo-light" src="img/logo-black.png" alt="Haazen" />
|
|
<img class="logo-dark" src="img/logo-white.png" alt="Haazen" />
|
|
</a>
|
|
</div>
|
|
<!-- End Logo -->
|
|
|
|
<!-- Mobile Navbar Icon -->
|
|
<div class="nav-mobile nav-bar-icon">
|
|
<span></span>
|
|
</div>
|
|
<!-- End Mobile Navbar Icon -->
|
|
|
|
<!-- Navbar Navigation -->
|
|
<div class="nav-menu">
|
|
<ul class="nav-menu-inner">
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="service.html">Services</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Navbar Navigation -->
|
|
|
|
</div>
|
|
</header>
|
|
<!-- End Header -->
|
|
|
|
<!-- CONTENT --------------------------------------------------------------------------------->
|
|
<!-- Intro -->
|
|
<section id="intro" class="intro">
|
|
<!-- Intro Scroll Down -->
|
|
<div class="intro-scroll-down">
|
|
<a class="scroll-down"> <span class="mouse">
|
|
<span class="mouse-dot"></span> </span>
|
|
</a>
|
|
</div>
|
|
<!-- End Intro Scroll Down -->
|
|
<!-- Static Intro -->
|
|
<div class="bg-image overlay-dark80 dark-bg" data-background-img="img/full/09.jpg">
|
|
<div class="js-fullscreen-height container">
|
|
<div class="intro-content">
|
|
<div class="intro-content-inner">
|
|
<h1 class="">hi, I'm <span id="desc"></span>
|
|
</h1>
|
|
<script>
|
|
ityped.init('#desc', {
|
|
strings:['Marcel Haazen', 'a SysAdmin', 'a Programmer'], loop:true
|
|
});
|
|
</script>
|
|
<br>
|
|
<div><a class="btn btn-md btn-white-line xs-hidden" href="service.html">My services</a><span class="btn-space-10 xs-hidden"></span><a class="btn btn-md btn-white-line">My work</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Static Intro -->
|
|
</section>
|
|
<!-- End Intro -->
|
|
|
|
<!-- Service Section -->
|
|
<section id="service" class="ptb-60 dark-bg ptb-sm-60">
|
|
<div class="container text-center">
|
|
<h3>My Services</h3>
|
|
<div class="spacer-60"></div>
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 mb-45">
|
|
<div class="page-icon-top"><i class="fa fa-server"></i></div>
|
|
<h5>Server Administration</h5>
|
|
<p>Do you need a server configured or setup from scratch? I will setup and configure everything so you never have to worry about a thing.</p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 mb-45">
|
|
<div class="page-icon-top"><i class="fa fa-shield"></i></div>
|
|
<h5>Cyber Security</h5>
|
|
<p>Nowadays security is a must but you might not know how to set it up. I'll help you secure your systems so you don't have to worry.</p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 mb-45">
|
|
<div class="page-icon-top"><i class="fa fa-code"></i></div>
|
|
<h5>Programming</h5>
|
|
<p>Need a custom system for a blog, website or API? I will create and set it up for you so you can be happy.</p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 mb-45">
|
|
<div class="page-icon-top"><i class="fa fa-exchange"></i></div>
|
|
<h5>Migration</h5>
|
|
<p>People want to be able to change hosts or change the application they use. Usually its a pain but I'm here to make it as easy as possible.</p>
|
|
</div>
|
|
</div>
|
|
<div class="spacer-15"></div>
|
|
<div class="row">
|
|
<div class="col-md-8 col-sm-8">
|
|
<h4 class="">Want to see the rest?</h4>
|
|
<p class="mb-0">Click the button to see the rest of my services.</p>
|
|
</div>
|
|
<div class="col-md-2 col-sm-2 see-more">
|
|
<a class="btn btn-md btn-white-line float-right float-none-xs" href="service.html">See All services</a>
|
|
</div>
|
|
<div class="col-md-2 col-sm-2"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End Service Section -->
|
|
|
|
<!-- Work Section -->
|
|
<section id="work" class="pt-60 pt-sm-60 text-center">
|
|
<div class="container">
|
|
<h3>My Work</h3>
|
|
<div class="spacer-30"></div>
|
|
<!-- work Filter -->
|
|
<div class="row">
|
|
<ul class="container-filter categories-filter">
|
|
<li><a class="categories active" data-filter="*">All</a></li>
|
|
<li><a class="categories" data-filter=".admin">Server Administration</a></li>
|
|
<li><a class="categories" data-filter=".design">Design</a></li>
|
|
<li><a class="categories" data-filter=".program">Programming</a></li>
|
|
<li><a class="categories" data-filter=".other">other</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End work Filter -->
|
|
</div>
|
|
<!-- Work Gallary -->
|
|
<div class="container-fluid ">
|
|
<div class="row">
|
|
<div class="container-grid nf-col-4">
|
|
|
|
<div class="nf-item design other">
|
|
<div class="item-box">
|
|
<a class="cbox-gallary1" href="img/portfolio/puritysite.png" title="Template based Site - Purity Media">
|
|
<img class="item-container" src="img/portfolio/puritysite.png" alt="site" />
|
|
<div class="item-mask">
|
|
<div class="item-caption">
|
|
<h5 class="white">Template based Site - Purity Media</h5>
|
|
<p class="white">Design, Other</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nf-item design other">
|
|
<div class="item-box">
|
|
<a class="cbox-gallary1" href="img/portfolio/opimizesite.png" title="Template based site - Optimize Group">
|
|
<img class="item-container" src="img/portfolio/opimizesite.png" alt="site" />
|
|
<div class="item-mask">
|
|
<div class="item-caption">
|
|
<h5 class="white">Template based site - Optimize Group</h5>
|
|
<p class="white">Design, Other</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nf-item design other program">
|
|
<div class="item-box">
|
|
<a class="cbox-gallary1" href="img/portfolio/optimizeblog.png" title="Custom Blog - Optimize Group">
|
|
<img class="item-container" src="img/portfolio/optimizeblog.png" alt="Blog" />
|
|
<div class="item-mask">
|
|
<div class="item-caption">
|
|
<h5 class="white">Custom Blog - Optimize Group</h5>
|
|
<p class="white">Design, Programming, Other</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Work Gallary -->
|
|
</section>
|
|
<!-- End Work Section -->
|
|
|
|
<!-- Action Box Section -->
|
|
<section id="action-box" class="ptb-60">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 col-sm-8">
|
|
<h4 class="">Want to see more?</h4>
|
|
<p class="mb-0">Click the button to see the rest of my work.</p>
|
|
</div>
|
|
<div class="col-md-4 col-sm-4 see-more">
|
|
<a class="btn btn-md btn-black-line float-right float-none-xs">See All Work</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End Action Box Section -->
|
|
|
|
<!-- Process -->
|
|
<section id="process" class="dark-bg ptb-60 ptb-sm-60">
|
|
<div class="container text-center">
|
|
<h3>Easy Process</h3>
|
|
<div class="spacer-60"></div>
|
|
<div class="row">
|
|
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
<div class="tipped" data-title="Step1 - Skype Interview" data-tipper-options='{"direction":"top"}'>
|
|
<div class="page-icon-top"><i class="ion ion-ios-people-outline"></i></div>
|
|
<h6>Interview</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
<div class="tipped" data-title="Step2 - Project Plan" data-tipper-options='{"direction":"top"}'>
|
|
<div class="page-icon-top"><i class="ion ion-ios-paper-outline"></i></div>
|
|
<h6>Plan</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
<div class="tipped" data-title="Step3 - Design" data-tipper-options='{"direction":"top"}'>
|
|
<div class="page-icon-top"><i class="ion ion-ios-compose-outline"></i></div>
|
|
<h6>Design</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
<div class="tipped" data-title="Step4 - Development" data-tipper-options='{"direction":"top"}'>
|
|
<div class="page-icon-top"><i class="ion ion-ios-gear-outline"></i></div>
|
|
<h6>Development</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
<div class="tipped" data-title="Step5 - Testing" data-tipper-options='{"direction":"top"}'>
|
|
<div class="page-icon-top"><i class="ion ion-ios-pulse"></i></div>
|
|
<h6>Testing</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
<div class="tipped" data-title="Step6 - Delivery" data-tipper-options='{"direction":"top"}'>
|
|
<div class="page-icon-top"><i class="ion ion-ios-clock-outline"></i></div>
|
|
<h6>Delivery</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End Process -->
|
|
|
|
<!-- END CONTENT ---------------------------------------------------------------------------->
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer pt-15-b5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- Copyright -->
|
|
<div class="col-md-7 col-sm-8 col-xs-12 mt-xs-15">
|
|
<p>© 2015-<script>document.write(new Date().getFullYear())</script> <a><b>Marcel Haazen</b></a>. All Rights Reserved</p>
|
|
</div>
|
|
<!-- End Copyright -->
|
|
|
|
<!-- Social -->
|
|
<div class="col-md-3 col-md-offset-2 col-sm-4 col-xs-12 mb-xs-15">
|
|
<ul class="social">
|
|
<li><a target="_blank" href="https://www.linkedin.com/in/mhaazen"><i class="fa fa-linkedin"></i></a></li>
|
|
<li><a target="_blank" href="https://twitter.com/NekoCentral"><i class="fa fa-twitter"></i></a></li>
|
|
<li><a target="_blank" href="https://www.facebook.com/mhaazen"><i class="fa fa-facebook"></i></a></li>
|
|
<li><a target="_blank" href="https://github.com/inpothet"><i class="fa fa-github"></i></a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- End Social -->
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- END FOOTER -->
|
|
|
|
<!-- Scroll Top -->
|
|
<a class="scroll-top">
|
|
<i class="fa fa-angle-double-up"></i>
|
|
</a>
|
|
<!-- End Scroll Top -->
|
|
|
|
</div>
|
|
<!-- Site Wraper End -->
|
|
|
|
|
|
<!-- JS -->
|
|
|
|
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
|
|
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
|
|
<script src="js/plugin/jquery.easing.js" type="text/javascript"></script>
|
|
<script src="js/bootstrap.min.js" type="text/javascript"></script>
|
|
<script src="js/plugin/jquery.viewportchecker.js" type="text/javascript"></script>
|
|
<script src="js/plugin/jquery.colorbox-min.js" type="text/javascript"></script>
|
|
<script src="js/plugin/owl.carousel.min.js" type="text/javascript"></script>
|
|
<script src="js/plugin/isotope.pkgd.min.js" type="text/javascript"></script>
|
|
<script src="js/plugin/imagesloaded.pkgd.min.js" type="text/javascript"></script>
|
|
<script src="js/plugin/jquery.fs.tipper.min.js" type="text/javascript"></script>
|
|
<script src="js/plugin/mediaelement-and-player.min.js"></script>
|
|
<script src="js/theme.js" type="text/javascript"></script>
|
|
|
|
|
|
</body>
|
|
</html>
|