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.
422 lines
20 KiB
422 lines
20 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>Vollzeit Video-Editor | Elektriker | Technik-Nerd</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 ein 2000er Kind. Ich liebe Technik in jeder Form und am besten wenn man Software und Hardware verbinden kann. Beim Foto- und Videografieren vom Hobby zum Beruf. </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 Video-Editor bei <a href="https://neona.store">NEONA Living GmbH</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>📖 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> <!-- 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 © 2026 - 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>
|