You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
21 KiB
438 lines
21 KiB
<!doctype html>
|
|
<html lang="de-">
|
|
|
|
<head>
|
|
|
|
<!--====== Required meta tags ======-->
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!--====== Title ======-->
|
|
<title>Samuel Zielke</title>
|
|
|
|
<!--====== Favicon Icon ======-->
|
|
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
|
|
|
|
<!--====== Bootstrap css ======-->
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
|
|
|
<!--====== Line Icons css ======-->
|
|
<link rel="stylesheet" href="assets/css/LineIcons.css">
|
|
|
|
<!--====== Magnific Popup css ======-->
|
|
<link rel="stylesheet" href="assets/css/magnific-popup.css">
|
|
|
|
<!--====== Default css ======-->
|
|
<link rel="stylesheet" href="assets/css/default.css">
|
|
|
|
<!--====== Style css ======-->
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--====== PRELOADER PART START ======-->
|
|
|
|
<div class="preloader">
|
|
<div class="loader_34">
|
|
<div class="ytp-spinner">
|
|
<div class="ytp-spinner-container">
|
|
<div class="ytp-spinner-rotator">
|
|
<div class="ytp-spinner-left">
|
|
<div class="ytp-spinner-circle"></div>
|
|
</div>
|
|
<div class="ytp-spinner-right">
|
|
<div class="ytp-spinner-circle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--====== PRELOADER ENDS START ======-->
|
|
|
|
<!--====== HEADER PART START ======-->
|
|
|
|
<header id="home" class="header-area">
|
|
<div class="navigation fixed-top">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<nav class="navbar navbar-expand-lg">
|
|
<a class="navbar-brand" href="index.html">
|
|
<img src="assets/images/logo.png" alt="Logo">
|
|
</a> <!-- Logo -->
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="toggler-icon"></span>
|
|
<span class="toggler-icon"></span>
|
|
<span class="toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item active"><a class="page-scroll" href="#home">Start</a></li>
|
|
<li class="nav-item"><a class="page-scroll" href="#about">Über mich</a></li>
|
|
<!-- <li class="nav-item"><a class="page-scroll" href="#service">Service</a></li> -->
|
|
<!-- <li class="nav-item"><a class="page-scroll" href="#work">Portfolio</a></li> -->
|
|
<!-- <li class="nav-item"><a class="page-scroll" href="#blog">Blog</a></li> -->
|
|
<li class="nav-item"><a class="page-scroll" href="#contact">Kontakt</a></li>
|
|
</ul>
|
|
</div> <!-- navbar collapse -->
|
|
</nav> <!-- navbar -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
</div> <!-- container -->
|
|
</div> <!-- navigation -->
|
|
|
|
<div id="parallax" class="header-content d-flex align-items-center">
|
|
<div class="header-shape shape-one layer" data-depth="0.10">
|
|
<img src="assets/images/banner/shape/shape-1.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-tow layer" data-depth="0.30">
|
|
<img src="assets/images/banner/shape/shape-2.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-three layer" data-depth="0.40">
|
|
<img src="assets/images/banner/shape/shape-3.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-fore layer" data-depth="0.60">
|
|
<img src="assets/images/banner/shape/shape-2.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-five layer" data-depth="0.20">
|
|
<img src="assets/images/banner/shape/shape-1.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-six layer" data-depth="0.15">
|
|
<img src="assets/images/banner/shape/shape-4.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-seven layer" data-depth="0.50">
|
|
<img src="assets/images/banner/shape/shape-5.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-eight layer" data-depth="0.40">
|
|
<img src="assets/images/banner/shape/shape-3.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-nine layer" data-depth="0.20">
|
|
<img src="assets/images/banner/shape/shape-6.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="header-shape shape-ten layer" data-depth="0.30">
|
|
<img src="assets/images/banner/shape/shape-3.png" alt="Shape">
|
|
</div> <!-- header shape -->
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-5 col-lg-6">
|
|
<div class="header-content-right">
|
|
<h4 class="sub-title">Hi, Ich bin</h4>
|
|
<h1 class="title">Samuel!</h1>
|
|
<p>Ich bin Elektriker und Hobby-Anwendungsentwickler</p>
|
|
<!-- <a class="main-btn" href="#work">View my Work</a> -->
|
|
</div> <!-- header content right -->
|
|
</div>
|
|
<div class="col-lg-6 offset-xl-1">
|
|
<div class="header-image d-none d-lg-block">
|
|
<img src="assets/images/BuisnessPicture.png" alt="hero">
|
|
</div> <!-- header image -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
</div> <!-- container -->
|
|
<div class="header-social">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="header-social-icon">
|
|
<ul>
|
|
<!-- <li><a href="#"><i class="lni-facebook-filled"></i></a></li> -->
|
|
<!-- <li><a href="#"><i class="lni-twitter-original"></i></a></li>
|
|
<li><a href="#"><i class="lni-behance-original"></i></a></li>
|
|
<li><a href="#"><i class="lni-linkedin-original"></i></a></li> -->
|
|
</ul>
|
|
</div> <!-- header social -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
</div> <!-- container -->
|
|
</div> <!-- header social -->
|
|
</div> <!-- header content -->
|
|
</header>
|
|
|
|
<!--====== HEADER PART ENDS ======-->
|
|
|
|
<!--====== ABOUT PART START ======-->
|
|
|
|
<section id="about" class="about-area pt-125 pb-130">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="section-title text-center">
|
|
<h2 class="title">Über mich</h2>
|
|
<p>Bin Anfang 2000 geboren und lebe seit dem in und in der Umgebung von Alsfeld. Ich lache gerne mit Freunden und Familie. Ein Typ mit zu vielen Hobbys, der es aber langsam einsieht und aussortiert. Projekte in denen ich meine Hobbys verbinde sind die besten, z.B. SmartHome oder eine selbstgebaute Drohne.</p>
|
|
</div> <!-- section title -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="about-content mt-50">
|
|
<h5 class="about-title">Hi! Ich bin Samuel Zielke</h5>
|
|
<p>💼 Arbeite als Elektrokonstrukteur bei <a href="https://mk-versuchsanlagen.de">MK Versuchsanlagen</a>
|
|
<br>
|
|
<br>🔨 Handwerker und Bastler seit der Geburt
|
|
<br>
|
|
<br>💡 Ordentlich aber definitiv kein Künstler/Designer 😉
|
|
<br>
|
|
<br>👨🏼💻 Wenn andere lesen, programmmiere ich
|
|
<br>
|
|
<br>🚒 24/7 Bereit für euch, als Feuerwehrmann
|
|
<br>
|
|
<br>📖 Als Zeuge Jehovas begeistert von der Bibel -> <a href="http://www.jw.org">JW.ORG</a></p>
|
|
<ul class="clearfix">
|
|
<li>
|
|
<div class="single-info d-flex align-items-center">
|
|
<div class="info-icon">
|
|
<i class="lni-heart"></i>
|
|
</div>
|
|
<div class="info-text">
|
|
<p><span>Hochzeitsjahr:</span> 2021</p>
|
|
</div>
|
|
</div> <!-- single info -->
|
|
</li>
|
|
<li>
|
|
<div class="single-info d-flex align-items-center">
|
|
<div class="info-icon">
|
|
<i class="lni-envelope"></i>
|
|
</div>
|
|
<div class="info-text">
|
|
<p><span>Email:</span> mail@samuelzielke.de</p>
|
|
</div>
|
|
</div> <!-- single info -->
|
|
</li>
|
|
<li>
|
|
<div class="single-info d-flex align-items-center">
|
|
<div class="info-icon">
|
|
<i class="lni-phone-handset"></i>
|
|
</div>
|
|
<div class="info-text">
|
|
<p><span>Telefon:</span> +49 151 58500866</p>
|
|
</div>
|
|
</div> <!-- single info -->
|
|
</li>
|
|
<li>
|
|
<div class="single-info d-flex align-items-center">
|
|
<div class="info-icon">
|
|
<i class="lni-map-marker"></i>
|
|
</div>
|
|
<div class="info-text">
|
|
<p><span>Standort:</span> DE-Marburg</p>
|
|
</div>
|
|
</div> <!-- single info -->
|
|
</li>
|
|
</ul>
|
|
</div> <!-- about content -->
|
|
</div>
|
|
<div class="col-xl-5 offset-xl-1 col-lg-6">
|
|
<div class="about-skills pt-25">
|
|
<div class="skill-item mt-25">
|
|
<div class="skill-header">
|
|
<h6 class="skill-title">Elektroinstallation (Wohnen und Industrie)</h6>
|
|
<div class="skill-percentage">
|
|
<div class="count-box counted">
|
|
<span class="counter">90</span>
|
|
</div>
|
|
%
|
|
</div>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<div class="bar-inner">
|
|
<div class="bar progress-line" data-width="90"></div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- skill item -->
|
|
<div class="skill-item mt-25">
|
|
<div class="skill-header">
|
|
<h6 class="skill-title">Elektroplanung und Prüfung (CAD, VDE-Unterlagen)</h6>
|
|
<div class="skill-percentage">
|
|
<div class="count-box counted">
|
|
<span class="counter">75</span>
|
|
</div>
|
|
%
|
|
</div>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<div class="bar-inner">
|
|
<div class="bar progress-line" data-width="80"></div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- skill item -->
|
|
<div class="skill-item mt-25">
|
|
<div class="skill-header">
|
|
<h6 class="skill-title">IT/EDV Erfahrung (Software u. Hardware)</h6>
|
|
<div class="skill-percentage">
|
|
<div class="count-box counted">
|
|
<span class="counter">45</span>
|
|
</div>
|
|
%
|
|
</div>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<div class="bar-inner">
|
|
<div class="bar progress-line" data-width="45"></div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- skill item -->
|
|
<div class="skill-item mt-25">
|
|
<div class="skill-header">
|
|
<h6 class="skill-title">Webentwickler (SQL, Python, HTML, CSS, PHP)</h6>
|
|
<div class="skill-percentage">
|
|
<div class="count-box counted">
|
|
<span class="counter">55</span>
|
|
</div>
|
|
%
|
|
</div>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<div class="bar-inner">
|
|
<div class="bar progress-line" data-width="55"></div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- skill item -->
|
|
<div class="skill-item mt-25">
|
|
<div class="skill-header">
|
|
<h6 class="skill-title">Foto- und Videograf (Extra Nebengewerbe)</h6>
|
|
<div class="skill-percentage">
|
|
<div class="count-box counted">
|
|
<span class="counter">70</span>
|
|
</div>
|
|
%
|
|
</div>
|
|
</div>
|
|
<div class="skill-bar">
|
|
<div class="bar-inner">
|
|
<div class="bar progress-line" data-width="70"></div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- skill item -->
|
|
</div> <!-- about skills -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
</div> <!-- container -->
|
|
</section>
|
|
|
|
<!--====== ABOUT PART ENDS ======-->
|
|
|
|
<!--====== CONTACT PART START ======-->
|
|
|
|
<section id="contact" class="contact-area pt-125 pb-130 gray-bg">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="section-title text-center pb-25">
|
|
<h2 class="title">Kontakt aufnehmen</h2>
|
|
<!-- <p>Nunc id dui at sapien faucibus fermentum ut vel diam. Nullam tempus, nunc id efficitur sagittis, urna est ultricies eros, ac porta sem turpis quis leo.</p> -->
|
|
</div> <!-- section title -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
<div class="row justify-content-center">
|
|
<!-- <div class="col-lg-4 col-md-6 col-sm-7">
|
|
<div class="contact-box text-center mt-30">
|
|
<div class="contact-icon">
|
|
<i class="lni-map-marker"></i>
|
|
</div>
|
|
<div class="contact-content">
|
|
<h6 class="contact-title">Address</h6>
|
|
<p>123 Stree New York City , United States Of America 750</p>
|
|
</div> -->
|
|
<!-- </div> contact box -->
|
|
<!-- </div> -->
|
|
<div class="col-lg-4 col-md-6 col-sm-7">
|
|
<div class="contact-box text-center mt-30">
|
|
<div class="contact-icon">
|
|
<i class="lni-phone"></i>
|
|
</div>
|
|
<div class="contact-content">
|
|
<h6 class="contact-title">Telefon</h6>
|
|
<p>+49 151 58500866</p>
|
|
</div>
|
|
</div> <!-- contact box -->
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-7">
|
|
<div class="contact-box text-center mt-30">
|
|
<div class="contact-icon">
|
|
<i class="lni-envelope"></i>
|
|
</div>
|
|
<div class="contact-content">
|
|
<h6 class="contact-title">E-Mail</h6>
|
|
<p>mail@samuelzielke.de</p>
|
|
</div>
|
|
</div> <!-- contact box -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
</div> <!-- container -->
|
|
</section>
|
|
|
|
<!--====== CONTACT PART ENDS ======-->
|
|
|
|
<!--====== FOOTER PART START ======-->
|
|
|
|
<footer id="footer" class="footer-area">
|
|
<div class="footer-copyright pb-20">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="copyright-text text-center pt-20">
|
|
<p>Copyright © 2025 - Samuel Zielke.</p>
|
|
<p style="color: gray; font-size: small;">The Website is based on a template, crafted by <a href="https://uideck.com" rel="nofollow">UIdeck</a></p>
|
|
</div> <!-- copyright text -->
|
|
</div>
|
|
</div> <!-- row -->
|
|
</div> <!-- container -->
|
|
</div> <!-- footer widget -->
|
|
</footer>
|
|
|
|
<!--====== FOOTER PART ENDS ======-->
|
|
|
|
<!--====== BACK TOP TOP PART START ======-->
|
|
|
|
<a href="#" class="back-to-top"><i class="lni-chevron-up"></i></a>
|
|
|
|
<!--====== BACK TOP TOP PART ENDS ======-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--====== jquery js ======-->
|
|
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
|
|
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
|
|
|
|
<!--====== Bootstrap js ======-->
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/popper.min.js"></script>
|
|
|
|
<!--====== Magnific Popup js ======-->
|
|
<script src="assets/js/jquery.magnific-popup.min.js"></script>
|
|
|
|
<!--====== Parallax js ======-->
|
|
<script src="assets/js/parallax.min.js"></script>
|
|
|
|
<!--====== Counter Up js ======-->
|
|
<script src="assets/js/waypoints.min.js"></script>
|
|
<script src="assets/js/jquery.counterup.min.js"></script>
|
|
|
|
|
|
<!--====== Appear js ======-->
|
|
<script src="assets/js/jquery.appear.min.js"></script>
|
|
|
|
<!--====== Scrolling js ======-->
|
|
<script src="assets/js/scrolling-nav.js"></script>
|
|
<script src="assets/js/jquery.easing.min.js"></script>
|
|
|
|
|
|
<!--====== Main js ======-->
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|