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.
427 lines
19 KiB
427 lines
19 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kevin</title>
|
|
<!--Usefull Meta-->
|
|
<meta name="description" content="A slick, customizable CV, Resume or Portfolio template, perfect for photographers, freelancers or designers.">
|
|
<meta name="keywords" content="angus, resume, cv, vCard, portfolio, html template, template, responsive">
|
|
<!--Google Fonts-->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
|
|
<!--AOS Animation Stylesheet-->
|
|
<link rel="stylesheet" href="assets/css/aos.css">
|
|
<!--Font Awesome-->
|
|
<link rel="stylesheet" href="assets/css/all.min.css">
|
|
<!--Magnific Popup-->
|
|
<link rel="stylesheet" href="assets/css/magnific-popup.css">
|
|
<!--OWL Carousel-->
|
|
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
|
|
<!--OWL Carousel Theme-->
|
|
<link rel="stylesheet" href="assets/css/owl_theme.css">
|
|
<!--Keyden Styelsheet with Bootstrap 5-->
|
|
<link rel="stylesheet" href="assets/css/kayden_1.css">
|
|
</head>
|
|
<body data-offset="102">
|
|
<!--PRELOADER START-->
|
|
<div id="preloader">
|
|
<div class="text-center w-100">
|
|
<div class="loader"></div>
|
|
</div>
|
|
</div>
|
|
<!--PRELOADER END-->
|
|
<!--Header START-->
|
|
<header class="kayden-header sticky-top">
|
|
<div class="header-inside transparent_header">
|
|
<div class="d-flex flex-row justify-content-between align-items-center">
|
|
<!--Header Toggler START-->
|
|
<div class="kayden-menu-toggler"><a class="kayden-toggler text-reset" data-bs-toggle="offcanvas" href="#kaydenOffCanvas" role="button" aria-controls="kaydenOffCanvas">
|
|
<div class="kt-r"><span></span><span></span><span></span></div>
|
|
<div class="kt-t">MENU </div>
|
|
</a></div>
|
|
<!--Header Toggler END--><!--Header Logo START-->
|
|
<div class="kayden-logo"><a href="#"><i class="fas fa-rainbow"></i></a></div>
|
|
<!--Header Logo END--><!--Header Info START-->
|
|
<div class="kayden-nav-meta fs-5 fw-bold d-none d-sm-block text-end"><a href="#" class="text-reset">kevinzcf@gmail.com</a></div>
|
|
<!--Header Info END--></div>
|
|
</div>
|
|
</header>
|
|
<!--Header END--><!--Off Canvas START-->
|
|
<div class="offcanvas offcanvas-start" id="kaydenOffCanvas">
|
|
<!--Off Canvas Header START-->
|
|
<div class="offcanvas-header">
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<!--Off Canvas Header END--><!--Off Canvas Body START-->
|
|
<div class="offcanvas-body">
|
|
<div class="kayden-offcanvas-nav-container d-flex flex-column justify-content-center align-items-center"><!--Off Canvas Navigation START-->
|
|
<ul class="kayden-offcanvas-nav list-inline">
|
|
<li class="py-3"><a href="#home" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Home</a></li>
|
|
<li class="py-3"><a href="#about" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">About</a></li>
|
|
<li class="py-3"><a href="#contact" class="kayden_scrollspy underline_animation underline_text text-reset fs-4 fw-bold" data-bs-dismiss="offcanvas">Contact</a></li>
|
|
</ul>
|
|
<!--Off Canvas Navigation END-->
|
|
</div>
|
|
</div>
|
|
<!--Off Canvas Body END-->
|
|
</div>
|
|
<!--Off Canvas END--><!--Home Section START-->
|
|
<section id="home" class="home vh-100"><!--Home Background START-->
|
|
<div class="home-background position-absolute top-0 start-0 w-100 h-100"><img src="assets/images/home.jpg" data-aos="fade-up" data-aos-duration="1000" alt="home" class="w-100 h-100 fit-cover fit-left-top"></div>
|
|
<!--Home Background END--><!--Home Container START-->
|
|
<div class="container h-100 position-relative">
|
|
<div class="home-details text-center text-sm-end w-100 h-100 d-flex align-items-center">
|
|
<div class="home-details-inner w-100">
|
|
<p class="welcome_text fs-4" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500"><span class="typed_text" data-options="Java Entwickler, Full Stack, DevOps"></span></p>
|
|
<h1 class="fs-1 fw-bold kayden-underline-center kayden-underline-sm-right kayden-underline-big d-inline-block" data-aos="fade-up" data-aos-duration="800" data-aos-delay="800">I'm Kevin</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Home Container END-->
|
|
<!--Scroll Down START-->
|
|
<div class="scroll-down"> <a href="#about" class="kayden_scrollspy scroll-down-link text-center">
|
|
<div class="scroll-title">Scroll Down</div>
|
|
<div class="scroll-mouse">
|
|
<div class="whell"></div>
|
|
</div>
|
|
</a> </div>
|
|
<!--Scroll Down END-->
|
|
</section>
|
|
<!--Home Section END-->
|
|
<!--About Section START-->
|
|
<section id="about" class="min-vh-100">
|
|
<div class="container h-100">
|
|
<div class="about_inside w-100 h-100 d-flex justify-content-center align-items-center">
|
|
<div class="row w-100">
|
|
<!--About Section Picture START-->
|
|
<div class="offset-md-1 col-md-4">
|
|
<div class="about-image w-100"> <img src="assets/images/about.jpg" class="kayden-shadow rounded-3 w-100" alt="kayden Picture" data-aos="zoom-in" data-aos-duration="800"> </div>
|
|
</div>
|
|
<!--About Section Picture END-->
|
|
<!--About Section Details START-->
|
|
<div class="offset-md-1 col-md-6 mt-5 mt-md-0">
|
|
<div class="h-100 d-flex align-items-center justify-content-center">
|
|
<div class="about-details">
|
|
<h2 class="fs-3 fw-bold mb-5">I'm Kevin</h2>
|
|
<p class="text-secondary mb-5">a Full Stack Developer</p>
|
|
<!--Social Links START-->
|
|
<ul class="social-links list-inline mb-5">
|
|
<li class="list-inline-item"> <a href="#" title="facebook"> <i class="fab fa-facebook-f"></i> </a> </li>
|
|
<li class="list-inline-item"> <a href="#" title="linkedin"> <i class="fab fa-linkedin-in"></i> </a> </li>
|
|
<li class="list-inline-item"> <a href="#" title="pinterest"> <i class="fab fa-pinterest-p"></i> </a> </li>
|
|
<li class="list-inline-item"> <a href="#" title="git"> <i class="fab fa-git"></i> </a> </li>
|
|
</ul>
|
|
<!--Social Links END-->
|
|
<a href="#" class="btn btn-outline-primary" title="Download CV">Download CV</a> </div>
|
|
</div>
|
|
</div>
|
|
<!--About Section Details END-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--About Section END-->
|
|
|
|
<!--Facts Section START-->
|
|
<section id="facts">
|
|
<!--Section Body START-->
|
|
<div class="section-body">
|
|
<div class="container">
|
|
<div class="row gy-5">
|
|
<div class="col-md-6">
|
|
<div class="row gx-3 gy-5">
|
|
<div class="col-6">
|
|
<!--Facts Item START-->
|
|
<div class="fact d-flex flex-column align-items-center align-items-md-start">
|
|
<h3 class="fs-2 d-inline-block"><span class="tmcounter" data-from="0" data-to="12" data-speed="1500">0</span><sup>+</sup></h3>
|
|
<p class="fs-4 d-inline-block text-center text-md-left">Years Experience</p>
|
|
</div>
|
|
<!--Facts Item END-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h2 class="fs-3 mb-5 fw-bold">My Skills</h2>
|
|
<div class="skills_container">
|
|
<!--Progress Bar START-->
|
|
<div class="mb-4">
|
|
<label class="mb-3 fs-6">Backend development - Java</label>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-loadAnimation" data-percent="90" style="width: 0%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!--Progress Bar END-->
|
|
<!--Progress Bar START-->
|
|
<div class="mb-4">
|
|
<label class="mb-3 fs-6">Frontend development - Angular</label>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-loadAnimation" data-percent="80" style="width: 0%;" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!--Progress Bar END-->
|
|
<!--Progress Bar START-->
|
|
<div class="mb-4">
|
|
<label class="mb-3 fs-6">DevOps - Jenkins, ELK, Prometheus</label>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-loadAnimation" data-percent="75" style="width: 0%;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!--Progress Bar END-->
|
|
<!--Progress Bar START-->
|
|
<div class="mb-4">
|
|
<label class="mb-3 fs-6">Cloud - Docker, K8S, K3S</label>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-loadAnimation" data-percent="70" style="width: 0%;" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!--Progress Bar END-->
|
|
<!--Progress Bar START-->
|
|
<div class="mb-4">
|
|
<label class="mb-3 fs-6">Softwarearchitektur - Clean Architektur, DDD</label>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-loadAnimation" data-percent="60" style="width: 0%;" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<!--Progress Bar END-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Section Body END-->
|
|
</section>
|
|
<!--Facts Sectrion END-->
|
|
|
|
<!--Education Section START-->
|
|
<section id="education">
|
|
<div class="container">
|
|
<!--Section Heading START-->
|
|
<div class="heading text-center mb-5">
|
|
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Education</h2>
|
|
</div>
|
|
<!--Section Heading END-->
|
|
<!--Section Body START-->
|
|
<div class="section-body">
|
|
<div class="table-responsive">
|
|
<!--Educational Table START-->
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="w-25 d-none d-sm-table-cell"><span class="fw-light fs-5">2006-2010</span></td>
|
|
<td class="w-50 d-none d-sm-table-cell"><span class="fw-bold fs-5">Technische Universität Berlin</span></td>
|
|
<td class="w-25 d-none d-sm-table-cell"><span class="fw-normal text-secondary">Informatik</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-light fs-5">2004-2006</span></td>
|
|
<td class="w-50 d-none d-sm-table-cell border-0"><span class="fw-bold fs-5">Hochschule Anhalt</span></td>
|
|
<td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-normal text-secondary">Informatik</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!--Educational Table END-->
|
|
</div>
|
|
</div>
|
|
<!--Section Body END-->
|
|
</div>
|
|
</section>
|
|
<!--Education Section END-->
|
|
|
|
<!--Expericence Section START-->
|
|
<section id="expericence">
|
|
<div class="container">
|
|
<!--Section Heading START-->
|
|
<div class="heading text-center mb-5">
|
|
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Expericence</h2>
|
|
</div>
|
|
<!--Section Heading END-->
|
|
<!--Section Body START-->
|
|
<div class="section-body">
|
|
<div class="table-responsive">
|
|
<!--Expericence Table START-->
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="w-25 d-none d-sm-table-cell"><span class="fw-light fs-5">2011-2019</span></td>
|
|
<td class="w-50 d-none d-sm-table-cell"><span class="fw-bold fs-5">SoftConEx GmbH</span></td>
|
|
<td class="w-25 d-none d-sm-table-cell"><span class="fw-normal text-secondary">Java Entwickler</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-light fs-5">2019-Heute</span></td>
|
|
<td class="w-50 d-none d-sm-table-cell border-0"><span class="fw-bold fs-5">BAMF</span></td>
|
|
<td class="w-25 d-none d-sm-table-cell border-0"><span class="fw-normal text-secondary">DevOps</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!--Expericence Table END-->
|
|
</div>
|
|
</div>
|
|
<!--Section Body END-->
|
|
</div>
|
|
</section>
|
|
<!--Expericence Section END-->
|
|
|
|
<!--Services Section START-->
|
|
<section id="services">
|
|
<div class="container">
|
|
<!--Section Heading START-->
|
|
<div class="heading text-center mb-5">
|
|
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Services</h2>
|
|
</div>
|
|
<!--Section Heading END-->
|
|
<!--Section Body START-->
|
|
<div class="section-body">
|
|
<!--Gradient Grid START-->
|
|
<div class="kayden-gradient-grid">
|
|
<!--Gradient Grid ROW START-->
|
|
<div class="row g-0">
|
|
<!--Gradient Grid Item START-->
|
|
<div class="col-lg-4 text-center">
|
|
<div class="p-5">
|
|
<div class="fs-2 mb-3"> <i class="fas fa-server"></i> </div>
|
|
<h4 class="mb-3">Software Architecture</h4>
|
|
<p class="text-secondary"></p>
|
|
</div>
|
|
</div>
|
|
<!--Gradient Grid Item END-->
|
|
<!--Gradient Grid Item START-->
|
|
<div class="col-lg-4 text-center">
|
|
<div class="p-5">
|
|
<div class="fs-2 mb-3"> <i class="fas fa-mobile-alt"></i> </div>
|
|
<h4 class="mb-3">Apps</h4>
|
|
<p class="text-secondary"></p>
|
|
</div>
|
|
</div>
|
|
<!--Gradient Grid Item END-->
|
|
<!--Gradient Grid Item START-->
|
|
<div class="col-lg-4 text-center">
|
|
<div class="p-5">
|
|
<div class="fs-2 mb-3"> <i class="fas fa-mug-hot"></i> </div>
|
|
<h4 class="mb-3">CI/CD</h4>
|
|
<p class="text-secondary"></p>
|
|
</div>
|
|
</div>
|
|
<!--Gradient Grid Item END-->
|
|
</div>
|
|
<!--Gradient Grid ROW END-->
|
|
<!--Gradient Grid ROW START-->
|
|
<div class="row g-0">
|
|
<!--Gradient Grid Item START-->
|
|
<div class="col-lg-4 text-center">
|
|
<div class="p-5">
|
|
<div class="fs-2 mb-3"> <i class="far fa-clone"></i> </div>
|
|
<h4 class="mb-3">Full Stack</h4>
|
|
<p class="text-secondary"></p>
|
|
</div>
|
|
</div>
|
|
<!--Gradient Grid Item END-->
|
|
<!--Gradient Grid Item START-->
|
|
<div class="col-lg-4 text-center">
|
|
<div class="p-5">
|
|
<div class="fs-2 mb-3"> <i class="far fa-heart"></i> </div>
|
|
<h4 class="mb-3">Helth Check</h4>
|
|
<p class="text-secondary"></p>
|
|
</div>
|
|
</div>
|
|
<!--Gradient Grid Item END-->
|
|
<!--Gradient Grid Item START-->
|
|
<div class="col-lg-4 text-center">
|
|
<div class="p-5">
|
|
<div class="fs-2 mb-3"> <i class="fas fa-cloud"></i> </div>
|
|
<h4 class="mb-3">Cloud</h4>
|
|
<p class="text-secondary"></p>
|
|
</div>
|
|
</div>
|
|
<!--Gradient Grid Item END-->
|
|
</div>
|
|
<!--Gradient Grid ROW END-->
|
|
</div>
|
|
<!--Gradient Grid END-->
|
|
</div>
|
|
<!--Section Body END-->
|
|
</div>
|
|
</section>
|
|
<!--Services Section END-->
|
|
|
|
<!--Contact Us START-->
|
|
<section id="contact">
|
|
<div class="container"><!--Section Heading START-->
|
|
<div class="heading text-center mb-5">
|
|
<h2 class="fs-3 kayden-underline-left mb-5 fw-bold text-uppercase d-inline-block">Contact Me</h2>
|
|
</div>
|
|
<!--Section Heading END--><!--Section Body START-->
|
|
<div class="section-body">
|
|
<div class="row gy-5">
|
|
<div class="col-md-12">
|
|
<div class="d-flex flex-row justify-content-center h-100"><!--Contact Details START-->
|
|
<div class="contact-details d-flex flex-row align-items-center mb-3 justify-content-center col-4">
|
|
<div class="cd-icon fs-2 me-4"><i class="fas fa-envelope"></i></div>
|
|
<div class="cd-info fs-5 font-family-secondary"><a href="#" class="text-white"><span class="__cf_email__">kevinzcf@gmail.com</span></a></div>
|
|
</div>
|
|
<!--Contact Details END--><!--Contact Details START-->
|
|
<div class="contact-details d-flex flex-row align-items-center mb-3 justify-content-center col-4">
|
|
<div class="cd-icon fs-2 me-4"><i class="fas fa-map-marked-alt"></i></div>
|
|
<div class="cd-info fs-5 font-family-secondary"> BERLIN, DE </div>
|
|
</div>
|
|
<!--Contact Details END--><!--Contact Details START-->
|
|
<div class="contact-details d-flex flex-row align-items-center mb-3 justify-content-center col-4">
|
|
<div class="cd-icon fs-2 me-4"><i class="fas fa-phone"></i></div>
|
|
<div class="cd-info fs-5 font-family-secondary"><a href="#" class="text-white">[phone protected]</a></div>
|
|
</div>
|
|
<!--Contact Details END--></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Section Body END--></div>
|
|
</section>
|
|
<!--Contact Us END-->
|
|
<!--Footer START-->
|
|
<footer class="kayden-footer py-4">
|
|
<div class="container">
|
|
<div class="d-flex flex-column align-items-center justify-content-center py-3"><!--Social Links START-->
|
|
<ul class="social-links list-inline mb-4">
|
|
<li class="list-inline-item"><a href="#" title="facebook"><i class="fab fa-facebook-f"></i></a></li>
|
|
<li class="list-inline-item"><a href="#" title="linkedin"><i class="fab fa-linkedin-in"></i></a></li>
|
|
<li class="list-inline-item"><a href="#" title="pinterest"><i class="fab fa-pinterest-p"></i></a></li>
|
|
<li class="list-inline-item"><a href="#" title="git"><i class="fab fa-git"></i></a></li>
|
|
</ul>
|
|
<!--Social Links END-->
|
|
<!--Copyright START-->
|
|
<p class="text-center m-0">Copyright © 2022. Superzach All rights reserved.</p>
|
|
<!--Copyright END--></div>
|
|
</div>
|
|
</footer>
|
|
<!--Footer END--><!--To TOP START-->
|
|
<a href="#" class="toTop d-inline" id="return-to-top"><i class="fas fa-chevron-up"></i></a>
|
|
<!--To TOP END--><!--JavaScript START-->
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
<!--JQuery-->
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
<!--AOS Animations-->
|
|
<script src="assets/js/aos.js"></script>
|
|
<!--Jquery Easing -->
|
|
<script src="assets/js/jquery.easing.min.js"></script>
|
|
<!--Jquery Appear -->
|
|
<script src="assets/js/jquery.appear.min.js"></script>
|
|
<!--Kayden preloader -->
|
|
<script src="assets/js/preloader.js"></script>
|
|
<!--Jquery Count To -->
|
|
<script src="assets/js/jquery.countTo.js"></script>
|
|
<!--Masonry -->
|
|
<script src="assets/js/masonry.pkgd.min.js"></script>
|
|
<!--Jquery Magnific Popup -->
|
|
<script src="assets/js/jquery.magnific-popup.min.js"></script>
|
|
<!--OWL Carousel -->
|
|
<script src="assets/js/owl.carousel.min.js"></script>
|
|
<!--Typed JS -->
|
|
<script src="assets/js/typed.min.js"></script>
|
|
<!--Kayden Alert -->
|
|
<script src="assets/js/alert.js"></script>
|
|
<!--Kayden Contact US -->
|
|
<script src="assets/js/contact.js"></script>
|
|
<!--Kayden Custom Script -->
|
|
<script src="assets/js/kayden.js"></script>
|
|
<!--JavaScript END-->
|
|
</body>
|
|
</html> |